diff --git a/packages/editor/editor.css b/packages/editor/editor.css index 296047e99..23304a855 100644 --- a/packages/editor/editor.css +++ b/packages/editor/editor.css @@ -1087,13 +1087,15 @@ input, * One extra nuance is we don't use this behavior for: * - arrows which have weird geometry and just gets in the way. * - draw/line shapes, because it feels restrictive to have them be 'in the way' of clicking on a textfield + * - shapes that are not filled */ -.tl-canvas[data-iseditinganything='true'] +.tl-canvas:is([data-iseditinganything='true'], [data-isselectinganything='true']) .tl-shape:not( [data-shape-type='arrow'], [data-shape-type='draw'], [data-shape-type='line'], - [data-shape-type='highlight'] + [data-shape-type='highlight'], + [data-shape-is-filled='false'] ) { pointer-events: all; } diff --git a/packages/editor/src/lib/components/Shape.tsx b/packages/editor/src/lib/components/Shape.tsx index 909d51885..dbccbb2ab 100644 --- a/packages/editor/src/lib/components/Shape.tsx +++ b/packages/editor/src/lib/components/Shape.tsx @@ -142,6 +142,8 @@ export const Shape = memo(function Shape({ if (!shape) return null + const isFilledShape = 'fill' in shape.props && shape.props.fill !== 'none' + return ( <> {util.backgroundComponent && ( @@ -156,7 +158,13 @@ export const Shape = memo(function Shape({ )} -
+
diff --git a/packages/editor/src/lib/components/default-components/DefaultCanvas.tsx b/packages/editor/src/lib/components/default-components/DefaultCanvas.tsx index 2c8f38f58..b1dc651c1 100644 --- a/packages/editor/src/lib/components/default-components/DefaultCanvas.tsx +++ b/packages/editor/src/lib/components/default-components/DefaultCanvas.tsx @@ -121,12 +121,18 @@ export function DefaultCanvas({ className }: TLCanvasComponentProps) { () => editor.getEditingShapeId() !== null, [editor] ) + const isSelectingAnything = useValue( + 'isSelectingAnything', + () => !!editor.getSelectedShapeIds().length, + [editor] + ) return (
{ - // This is important that we only dispatch when editing. - // Otherwise, you can get into a state where you're editing - // able to drag a selected shape behind another shape. - if (!isEditing) return + // N.B. We used to only do this only when isEditing to help + // prevent an issue where you could drag a selected shape + // behind another shape. That is addressed now by the CSS logic + // looking at data-isselectinganything. + // + // We still need to follow this logic even if not isEditing + // because otherwise there is some flakiness in selection. + // When selecting text, it would sometimes select some text + // partially if we didn't dispatch/stop below. editor.dispatch({ ...getPointerInfo(e), @@ -175,7 +180,7 @@ export function useEditableText(id: TLShapeId, type: string, text: string) { stopEventPropagation(e) // we need to prevent blurring the input }, - [editor, id, isEditing] + [editor, id] ) return {