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:
parent
2c4266c574
commit
fa3464ca8c
1 changed files with 6 additions and 8 deletions
|
@ -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
|
||||||
|
|
Loading…
Reference in a new issue