From 9c8e4b73fe3ab76ae3f727f3ec9a2ee8e1572837 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Mime=20=C4=8Cuvalo?= Date: Tue, 23 Apr 2024 15:38:46 +0100 Subject: [PATCH 1/2] textfields: for unfilled geo shapes fix edit->edit --- packages/editor/editor.css | 4 +++- packages/editor/src/lib/components/Shape.tsx | 10 +++++++++- 2 files changed, 12 insertions(+), 2 deletions(-) diff --git a/packages/editor/editor.css b/packages/editor/editor.css index 296047e99..f0a1a9c3f 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-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({ )} -
+
From cc12b7b513d27e7cadddd561eae5d07eabb959e6 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Mime=20=C4=8Cuvalo?= Date: Sat, 27 Apr 2024 12:12:47 +0100 Subject: [PATCH 2/2] textfields: fix up flakiness in text selection (#3578) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit This PR https://github.com/tldraw/tldraw/pull/3498 which tried to fix accidentally dragging shapes behind other shapes made clicking into textfields worse unfortunately. (as seen below in the Before video). This PR takes a different tact by introducing not just `data-iseditinganything` but now also `data-isselectinganything` which makes Shapes z-indices actually be relevant vs. the canvas being the top z-index layer, when something is selected or being editing. It's worth a good think over this and any downstream consequences this might introduce. I _think_ this change will actually be ok for when we're in select state but I wouldn't be surprised if I'm missing some nuance. Before: https://github.com/tldraw/tldraw/assets/469604/4a0346de-359f-4664-b273-746b4aa3d6fd After: https://github.com/tldraw/tldraw/assets/469604/5ee574ae-fa6b-4dac-a2c4-a94d4da90615 ### Change Type - [x] `sdk` — Changes the tldraw SDK - [ ] `dotcom` — Changes the tldraw.com web app - [ ] `docs` — Changes to the documentation, examples, or templates. - [ ] `vs code` — Changes to the vscode plugin - [ ] `internal` — Does not affect user-facing stuff - [x] `bugfix` — Bug fix - [ ] `feature` — New feature - [ ] `improvement` — Improving existing features - [ ] `chore` — Updating dependencies, other boring stuff - [ ] `galaxy brain` — Architectural changes - [ ] `tests` — Changes to any test code - [ ] `tools` — Changes to infrastructure, CI, internal scripts, debugging tools, etc. - [ ] `dunno` — I don't know ### Release Notes - Textfields: fix up regression to selection when clicking into a text shape. --- packages/editor/editor.css | 2 +- .../default-components/DefaultCanvas.tsx | 6 ++++++ .../src/lib/shapes/shared/useEditableText.ts | 15 ++++++++++----- 3 files changed, 17 insertions(+), 6 deletions(-) diff --git a/packages/editor/editor.css b/packages/editor/editor.css index f0a1a9c3f..23304a855 100644 --- a/packages/editor/editor.css +++ b/packages/editor/editor.css @@ -1089,7 +1089,7 @@ input, * - 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'], 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 {