فهرست منبع

fix: context bar sometimes blocks the way of pointer events

Peng Xiao 3 سال پیش
والد
کامیت
420009681c

+ 9 - 3
tldraw/apps/tldraw-logseq/src/components/ContextBar/ContextBar.tsx

@@ -11,7 +11,7 @@ import { NumberInput } from '~components/inputs/NumberInput'
 import { ColorInput } from '~components/inputs/ColorInput'
 import { SwitchInput } from '../inputs/SwitchInput'
 
-const _ContextBar: TLContextBarComponent<Shape> = ({ shapes, offsets }) => {
+const _ContextBar: TLContextBarComponent<Shape> = ({ shapes, offsets, hidden }) => {
   const app = useApp()
   const rSize = React.useRef<[number, number] | null>(null)
   const rContextBar = React.useRef<HTMLDivElement>(null)
@@ -79,13 +79,19 @@ const _ContextBar: TLContextBarComponent<Shape> = ({ shapes, offsets }) => {
 
   return (
     <HTMLContainer centered>
-      <div ref={rContextBar} className="tl-contextbar">
+      <div
+        ref={rContextBar}
+        className="tl-contextbar"
+        style={{ pointerEvents: hidden ? 'none' : 'all' }}
+      >
         {ShapeContent ? (
           <ShapeContent />
         ) : (
           <>
             <ColorInput label="Stroke" value={shapes[0].props.stroke} onChange={updateStroke} />
-            {!transparent && <ColorInput label="Fill" value={shapes[0].props.fill} onChange={updateFill} />}
+            {!transparent && (
+              <ColorInput label="Fill" value={shapes[0].props.fill} onChange={updateFill} />
+            )}
             <SwitchInput
               label="Transparent"
               checked={transparent}

+ 1 - 1
tldraw/packages/react/src/components/Canvas/Canvas.tsx

@@ -179,7 +179,7 @@ export const Canvas = observer(function Renderer<S extends TLReactShape>({
                   zIndex={10003}
                 >
                   <SVGContainer>
-                    {Object.entries(onlySelectedShapeWithHandles.props.handles!).map(
+                    {Object.entries(onlySelectedShapeWithHandles.props.handles ?? {}).map(
                       ([id, handle]) =>
                         React.createElement(components.Handle!, {
                           key: `${handle.id}_handle_${handle.id}`,

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

@@ -75,6 +75,7 @@ export const ContextBarContainer = observer(function ContextBarContainer<S exten
       onPointerDown={stopEventPropagation}
     >
       <ContextBar
+        hidden={hidden}
         shapes={shapes}
         bounds={bounds}
         offsets={offsets}

+ 1 - 0
tldraw/packages/react/src/types/component-props.ts

@@ -23,6 +23,7 @@ export type TLContextBarProps<S extends TLReactShape = TLReactShape> = {
   scaledBounds: TLBounds
   rotation: number
   offsets: TLOffset
+  hidden: boolean
 }
 
 export type TLContextBarComponent<S extends TLReactShape = TLReactShape> = (