textfields: fix dragging selected shape behind another (#3498)

The fix here was that we need to check if we're editing before
dispatching the pointer down event. This is some leftover DNA from code
when we had textareas always present and when
tl-svg-container/tl-html-container wasn't around. The
`setPointerCapture` was originally fixing a bug where dragging a shape
using the textlabel as the origin would start to breakdown when you got
to UI toolbar/panel.

Also, turns out we don't need the `setPointerCapture` anymore because of
the same reason.

### Change Type

<!--  Please select a 'Scope' label ️ -->

- [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

<!--  Please select a 'Type' label ️ -->

- [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
pull/3501/head
Mime Čuvalo 2024-04-16 16:54:03 +01:00 zatwierdzone przez GitHub
rodzic 2c4266c574
commit fa3464ca8c
Nie znaleziono w bazie danych klucza dla tego podpisu
ID klucza GPG: B5690EEEBB952194
1 zmienionych plików z 6 dodań i 8 usunięć

Wyświetl plik

@ -3,7 +3,6 @@ import {
TLUnknownShape,
getPointerInfo,
preventDefault,
setPointerCapture,
stopEventPropagation,
useEditor,
useValue,
@ -178,6 +177,11 @@ export function useEditableText(
const handleInputPointerDown = useCallback(
(e: React.PointerEvent) => {
// 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
editor.dispatch({
...getPointerInfo(e),
type: 'pointer',
@ -187,14 +191,8 @@ export function useEditableText(
})
stopEventPropagation(e) // we need to prevent blurring the input
// This is important so that when dragging a shape using the text label,
// the shape continues to be dragged, even if the cursor is over the UI.
if (editor.getEditingShapeId() !== id) {
setPointerCapture(e.currentTarget, e)
}
},
[editor, id]
[editor, id, isEditing]
)
const handleDoubleClick = stopEventPropagation