瀏覽代碼

fix: mobile tap

Konstantinos Kaloutas 2 年之前
父節點
當前提交
e03d48d844

+ 1 - 1
tldraw/apps/tldraw-logseq/src/components/Button/CircleButton.tsx

@@ -30,7 +30,7 @@ export const CircleButton = ({
       data-recently-changed={recentlyChanged}
       style={style}
       className="tl-circle-button"
-      onMouseDown={onClick}
+      onPointerDown={onClick}
     >
       <div className="tl-circle-button-icons-wrapper" data-icons-count={otherIcon ? 2 : 1}>
         {otherIcon && <TablerIcon name={otherIcon} />}

+ 16 - 9
tldraw/packages/react/src/components/Canvas/Canvas.tsx

@@ -224,15 +224,6 @@ export const Canvas = observer(function Renderer<S extends TLReactShape>({
                   rotation={selectionRotation}
                 />
               )}
-              {selectedShapes && components.ContextBar && (
-                <ContextBarContainer
-                  key={'context' + selectedShapes.map(shape => shape.id).join('')}
-                  shapes={selectedShapes}
-                  hidden={!showContextBar}
-                  bounds={singleSelectedShape ? singleSelectedShape.bounds : selectionBounds}
-                  rotation={singleSelectedShape ? singleSelectedShape.props.rotation : 0}
-                />
-              )}
             </>
           )}
         </HTMLLayer>
@@ -246,6 +237,22 @@ export const Canvas = observer(function Renderer<S extends TLReactShape>({
 
         <div id="tl-dev-tools-canvas-anchor" />
       </div>
+      <HTMLLayer>
+        {selectedShapes && selectionBounds && (
+          <>
+            {selectedShapes && components.ContextBar && (
+              <ContextBarContainer
+                key={'context' + selectedShapes.map(shape => shape.id).join('')}
+                shapes={selectedShapes}
+                hidden={!showContextBar}
+                bounds={singleSelectedShape ? singleSelectedShape.bounds : selectionBounds}
+                rotation={singleSelectedShape ? singleSelectedShape.props.rotation : 0}
+              />
+            )}
+          </>
+        )}
+      </HTMLLayer>
+
       {children}
     </div>
   )

+ 0 - 5
tldraw/packages/react/src/components/ContextBarContainer/ContextBarContainer.tsx

@@ -4,8 +4,6 @@ import { TLBounds, BoundsUtils, TLOffset } from '@tldraw/core'
 import { useRendererContext, useCounterScaledPosition } from '../../hooks'
 import type { TLReactShape } from '../../lib'
 
-const stopEventPropagation = (e: React.PointerEvent) => e.stopPropagation()
-
 export interface TLContextBarContainerProps<S extends TLReactShape> {
   shapes: S[]
   hidden: boolean
@@ -54,9 +52,6 @@ export const ContextBarContainer = observer(function ContextBarContainer<S exten
       ref={rBounds}
       className="tl-counter-scaled-positioned"
       aria-label="context-bar-container"
-      onPointerMove={stopEventPropagation}
-      onPointerUp={stopEventPropagation}
-      onPointerDown={stopEventPropagation}
     >
       <ContextBar
         hidden={hidden}