fix: optimize history stack styles

tldraw/apps/tldraw-logseq/src/components/Devtools/Devtools.tsx

@@ -1,12 +1,55 @@
-import { useRendererContext } from '@tldraw/react'
+import { useApp, useRendererContext } from '@tldraw/react'
+import { autorun } from 'mobx'
 import { observer } from 'mobx-react-lite'
 import React from 'react'
 import ReactDOM from 'react-dom'
+import type { Shape } from '../../lib'
 
 const printPoint = (point: number[]) => {
   return `[${point.map(d => d.toFixed(2)).join(', ')}]`
 }
 
+const HistoryStack = observer(function HistoryStack() {
+  const app = useApp<Shape>()
+  const anchorRef = React.useRef<HTMLDivElement>()
+  const [_, setTick] = React.useState(0)
+
+  React.useEffect(() => {
+    anchorRef.current = document.createElement('div')
+    anchorRef.current.style.display = 'contents'
+    document.body.append(anchorRef.current)
+    setTick(tick => tick + 1)
+    return () => {
+      anchorRef.current?.remove()
+    }
+  }, [])
+
+  React.useEffect(() => {
+    anchorRef.current?.querySelector(`[data-item-index="${app.history.pointer}"]`)?.scrollIntoView()
+  }, [app.history.pointer])
+
+  return anchorRef.current
+    ? ReactDOM.createPortal(
+        <div className="fixed z-[1000] left-4 max-w-[400px] top-4 overflow-scroll bg-gray-200 flex gap-2 p-2">
+          {app.history.stack.map((item, i) => (
+            <div
+              data-item-index={i}
+              style={{
+                background: app.history.pointer === i ? 'pink' : 'grey',
+              }}
+              key={i}
+              onClick={() => app.history.setPointer(i)}
+              className="flex items-center rounded-lg px-2 h-[32px] whitespace-nowrap"
+            >
+              {item.pages[0].nonce}
+            </div>
+          ))}
+        </div>,
+        anchorRef.current
+      )
+    : null
+})
+
 export const DevTools = observer(() => {
   const {
     viewport: {
@@ -52,5 +95,10 @@ export const DevTools = observer(() => {
       )
     : null
 
-  return <>{rendererStatus}</>
+  return (
+    <>
+      {rendererStatus}
+      <HistoryStack />
+    </>
+  )
 })

tldraw/apps/tldraw-logseq/src/components/StatusBar/StatusBar.tsx

@@ -5,27 +5,6 @@ import { observer } from 'mobx-react-lite'
 import { useApp } from '@tldraw/react'
 import type { Shape } from '../../lib'
 
-const HistoryStack = observer(function HistoryStack() {
-  const app = useApp<Shape>()
-
-  return (
-    <div className="fixed left-4 top-4 flex gap-4">
-      {app.history.stack.map((item, i) => (
-        <div
-          style={{
-            background: app.history.pointer === i ? 'pink' : 'grey',
-          }}
-          key={i}
-          onClick={() => app.history.setPointer(i)}
-          className="flex items-center rounded-lg p-4"
-        >
-          {item.pages[0].nonce}
-        </div>
-      ))}
-    </div>
-  )
-})
-
 export const StatusBar = observer(function StatusBar() {
   const app = useApp<Shape>()
   React.useEffect(() => {
@@ -51,7 +30,6 @@ export const StatusBar = observer(function StatusBar() {
   })
   return (
     <div className="tl-statusbar">
-      <HistoryStack />
       {app.selectedTool.id} | {app.selectedTool.currentState.id}
       <div style={{ flex: 1 }} />
       <div id="tl-statusbar-anchor" style={{ display: 'flex' }} />

tldraw/packages/react/src/hooks/useCanvasEvents.ts

@@ -52,6 +52,13 @@ export function useCanvasEvents() {
 
     const onDrop = async (e: React.DragEvent<Element>) => {
       e.preventDefault()
+      Array.from(e.dataTransfer.items).forEach(item => {
+        const type = item.type
+        item.getAsString(s => {
+          console.log(type, ":", s)
+        })
+      })
+
       if (!e.dataTransfer.files?.length) return
       const point = [e.clientX, e.clientY]
       app.dropFiles(e.dataTransfer.files, point)