refactor: handling DataTransfer

logseq · Sep 16, 2022 · 803ec01 · 803ec01
1 parent 13a98e8
commit 803ec01
Show file tree

Hide file tree

Showing 7 changed files with 335 additions and 316 deletions.
diff --git a/tldraw/apps/tldraw-logseq/src/app.tsx b/tldraw/apps/tldraw-logseq/src/app.tsx
@@ -61,27 +61,13 @@ interface LogseqTldrawProps {
   onPersist?: TLReactCallbacks<Shape>['onPersist']
 }
 
-export const App = function App({
+const AppInner = ({
   onPersist,
-  handlers,
-  renderers,
   model,
   ...rest
-}: LogseqTldrawProps): JSX.Element {
-  const memoRenders: any = React.useMemo(() => {
-    return Object.fromEntries(
-      Object.entries(renderers).map(([key, comp]) => {
-        return [key, React.memo(comp)]
-      })
-    )
-  }, [])
-  const contextValue = {
-    renderers: memoRenders,
-    handlers: handlers,
-  }
-
-  const onDrop = useDrop(contextValue)
-  const onPaste = usePaste(contextValue)
+}: Omit<LogseqTldrawProps, 'renderers' | 'handlers'>) => {
+  const onDrop = useDrop()
+  const onPaste = usePaste()
   const onQuickAdd = useQuickAdd()
   const ref = React.useRef<HTMLDivElement>(null)
 
@@ -94,26 +80,44 @@ export const App = function App({
     [model]
   )
 
+  return (
+    <AppProvider
+      Shapes={shapes}
+      Tools={tools}
+      onDrop={onDrop}
+      onPaste={onPaste}
+      onCanvasDBClick={onQuickAdd}
+      onPersist={onPersistOnDiff}
+      model={model}
+      {...rest}
+    >
+      <ContextMenu collisionRef={ref}>
+        <div ref={ref} className="logseq-tldraw logseq-tldraw-wrapper">
+          <AppCanvas components={components}>
+            <AppUI />
+          </AppCanvas>
+        </div>
+      </ContextMenu>
+    </AppProvider>
+  )
+}
+
+export const App = function App({ renderers, handlers, ...rest }: LogseqTldrawProps): JSX.Element {
+  const memoRenders: any = React.useMemo(() => {
+    return Object.fromEntries(
+      Object.entries(renderers).map(([key, comp]) => {
+        return [key, React.memo(comp)]
+      })
+    )
+  }, [])
+  const contextValue = {
+    renderers: memoRenders,
+    handlers: handlers,
+  }
+
   return (
     <LogseqContext.Provider value={contextValue}>
-      <AppProvider
-        Shapes={shapes}
-        Tools={tools}
-        onDrop={onDrop}
-        onPaste={onPaste}
-        onCanvasDBClick={onQuickAdd}
-        onPersist={onPersistOnDiff}
-        model={model}
-        {...rest}
-      >
-        <ContextMenu collisionRef={ref}>
-          <div ref={ref} className="logseq-tldraw logseq-tldraw-wrapper">
-            <AppCanvas components={components}>
-              <AppUI />
-            </AppCanvas>
-          </div>
-        </ContextMenu>
-      </AppProvider>
+      <AppInner {...rest} />
     </LogseqContext.Provider>
   )
 }
diff --git a/tldraw/apps/tldraw-logseq/src/components/Devtools/Devtools.tsx b/tldraw/apps/tldraw-logseq/src/components/Devtools/Devtools.tsx
@@ -25,7 +25,11 @@ const HistoryStack = observer(function HistoryStack() {
   }, [])
 
   React.useEffect(() => {
-    anchorRef.current?.querySelector(`[data-item-index="${app.history.pointer}"]`)?.scrollIntoView()
+    requestIdleCallback(() => {
+      anchorRef.current
+        ?.querySelector(`[data-item-index="${app.history.pointer}"]`)
+        ?.scrollIntoView()
+    })
   }, [app.history.pointer])
 
   return anchorRef.current

diff --git a/tldraw/apps/tldraw-logseq/src/hooks/useDrop.ts b/tldraw/apps/tldraw-logseq/src/hooks/useDrop.ts
@@ -1,12 +1,14 @@
 import type { TLReactCallbacks } from '@tldraw/react'
 import * as React from 'react'
 import type { Shape } from '../lib'
-import type { LogseqContextValue } from '../lib/logseq-context'
 import { usePaste } from './usePaste'
 
-export function useDrop(context: LogseqContextValue) {
-  const handlePaste = usePaste(context)
-  return React.useCallback<TLReactCallbacks<Shape>['onDrop']>(async (app, { dataTransfer, point }) => {
-    handlePaste(app, { point, shiftKey: false, dataTransfer })
-  }, [])
+export function useDrop() {
+  const handlePaste = usePaste()
+  return React.useCallback<TLReactCallbacks<Shape>['onDrop']>(
+    async (app, { dataTransfer, point }) => {
+      handlePaste(app, { point, shiftKey: false, dataTransfer })
+    },
+    []
+  )
 }