From 56e5bfdd713861d5e5325700bbb7cd9948057d65 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Mitja=20Bezen=C5=A1ek?= Date: Fri, 29 Sep 2023 11:27:45 +0200 Subject: [PATCH] Stop editing frame headers when clicking inside a frame. (#1955) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Before (notice how we stay in `editing_shape`: https://github.com/tldraw/tldraw/assets/2523721/d4553675-8412-41d9-b300-bbe87b719caa After: https://github.com/tldraw/tldraw/assets/2523721/e9788b1c-f2d9-473d-ba4c-cec7f822547a It selects the shape, similar to what we do with geo shapes: https://github.com/tldraw/tldraw/assets/2523721/a6210577-aec0-4fc0-892a-eedfed6f737b The only downside is that we also stop editing shape if we click on the frame header. That said that case is currently a bit broken. We'd probably want to insert caret at the clicked position (which we currently don't do). ### Change Type - [x] `patch` — Bug fix ### Test Plan 1. Insert a frame. 2. Double click the frame header to edit it. 3. Click inside the frame. 4. This should now stop editing the header. - [ ] Unit Tests - [ ] End to end tests Closes #1965 ### Release Notes - Stop editing frame headers when clicking inside of a frame. --------- Co-authored-by: Lu[ke] Wilson --- .../lib/shapes/frame/components/FrameHeading.tsx | 4 ++++ .../lib/tools/SelectTool/children/EditingShape.ts | 13 ++++++++++++- 2 files changed, 16 insertions(+), 1 deletion(-) diff --git a/packages/tldraw/src/lib/shapes/frame/components/FrameHeading.tsx b/packages/tldraw/src/lib/shapes/frame/components/FrameHeading.tsx index 47932227d..1ddeb36eb 100644 --- a/packages/tldraw/src/lib/shapes/frame/components/FrameHeading.tsx +++ b/packages/tldraw/src/lib/shapes/frame/components/FrameHeading.tsx @@ -31,6 +31,10 @@ export const FrameHeading = function FrameHeading({ const handlePointerDown = useCallback( (e: React.PointerEvent) => { const event = getPointerInfo(e) + + // If we're editing the frame label, we shouldn't hijack the pointer event + if (editor.editingShapeId === id) return + editor.dispatch({ type: 'pointer', name: 'pointer_down', diff --git a/packages/tldraw/src/lib/tools/SelectTool/children/EditingShape.ts b/packages/tldraw/src/lib/tools/SelectTool/children/EditingShape.ts index 10ad3f71b..ec2e9e7de 100644 --- a/packages/tldraw/src/lib/tools/SelectTool/children/EditingShape.ts +++ b/packages/tldraw/src/lib/tools/SelectTool/children/EditingShape.ts @@ -1,4 +1,11 @@ -import { Group2d, StateNode, TLArrowShape, TLEventHandlers, TLGeoShape } from '@tldraw/editor' +import { + Group2d, + StateNode, + TLArrowShape, + TLEventHandlers, + TLFrameShape, + TLGeoShape, +} from '@tldraw/editor' import { getHitShapeOnCanvasPointerDown } from '../../selection-logic/getHitShapeOnCanvasPointerDown' import { updateHoveredId } from '../../selection-logic/updateHoveredId' @@ -85,6 +92,10 @@ export class EditingShape extends StateNode { } } else { if (shape.id === editingShape.id) { + // If we clicked on a frame, while editing its heading, cancel editing + if (this.editor.isShapeOfType(shape, 'frame')) { + this.editor.setEditingShape(null) + } // If we clicked on the editing shape (which isn't a shape with a label), do nothing } else { // But if we clicked on a different shape of the same type, edit it instead