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
This commit is contained in:
Mime Čuvalo 2024-04-16 16:54:03 +01:00 committed by GitHub
parent 2c4266c574
commit fa3464ca8c
No known key found for this signature in database
GPG key ID: B5690EEEBB952194

View file

@ -3,7 +3,6 @@ import {
TLUnknownShape, TLUnknownShape,
getPointerInfo, getPointerInfo,
preventDefault, preventDefault,
setPointerCapture,
stopEventPropagation, stopEventPropagation,
useEditor, useEditor,
useValue, useValue,
@ -178,6 +177,11 @@ export function useEditableText(
const handleInputPointerDown = useCallback( const handleInputPointerDown = useCallback(
(e: React.PointerEvent) => { (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({ editor.dispatch({
...getPointerInfo(e), ...getPointerInfo(e),
type: 'pointer', type: 'pointer',
@ -187,14 +191,8 @@ export function useEditableText(
}) })
stopEventPropagation(e) // we need to prevent blurring the input 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 const handleDoubleClick = stopEventPropagation