Browse Source

fix: a potential context menu offset issue

Peng Xiao 3 years ago
parent
commit
3afaa9c03b

+ 12 - 7
tldraw/apps/tldraw-logseq/src/components/ContextBar/ContextBar.tsx

@@ -17,7 +17,7 @@ const _ContextBar: TLContextBarComponent<Shape> = ({
   // rotation,
 }) => {
   const app = useApp()
-  const rSize = React.useRef([0, 0])
+  const rSize = React.useRef<[number, number] | null>(null)
   const rContextBar = React.useRef<HTMLDivElement>(null)
 
   const updateStroke = React.useCallback<React.ChangeEventHandler<HTMLInputElement>>(e => {
@@ -54,24 +54,27 @@ const _ContextBar: TLContextBarComponent<Shape> = ({
 
   React.useLayoutEffect(() => {
     const elm = rContextBar.current
-    if (!elm) return
+    if (!elm || rSize.current) return
     const { offsetWidth, offsetHeight } = elm
     rSize.current = [offsetWidth, offsetHeight]
-  }, [])
+    return () => {
+      rSize.current = null
+    }
+  })
 
   React.useLayoutEffect(() => {
     const elm = rContextBar.current
     if (!elm) return
-    const size = rSize.current
+    const size = rSize.current ?? [0, 0]
     const [x, y] = getContextBarTranslation(size, { ...offset, bottom: offset.bottom - 32 })
     elm.style.setProperty('transform', `translateX(${x}px) translateY(${y}px)`)
-  }, [scaledBounds, offset])
+  }, [offset])
 
   if (!app) return null
 
   const textShapes = shapes.filter(shape => shape.type === 'text') as TextShape[]
 
-  const sidesShapes = shapes.filter(shape => 'sides' in shape.props) as (PolygonShape)[]
+  const sidesShapes = shapes.filter(shape => 'sides' in shape.props) as PolygonShape[]
 
   const ShapeContent =
     shapes.length === 1 && 'ReactContextBar' in shapes[0] ? shapes[0]['ReactContextBar'] : null
@@ -135,7 +138,9 @@ const _ContextBar: TLContextBarComponent<Shape> = ({
             ) : null}
           </>
         )}
-        <a className="shape-link" onClick={() => app.pubEvent("whiteboard-link", shapes)}>Link</a>
+        <a className="shape-link" onClick={() => app.pubEvent('whiteboard-link', shapes)}>
+          Link
+        </a>
       </div>
     </HTMLContainer>
   )

+ 1 - 1
tldraw/apps/tldraw-logseq/tsup.config.ts

@@ -5,7 +5,7 @@ export default defineConfig({
   platform: 'browser',
   format: ['cjs', 'esm'],
   entry: ['src/index.ts'],
-  clean: true,
+  clean: false,
   loader: {
     '.png': 'base64',
   },