From 16ba1eb2c2a7032271cda5fd2786c72a4c7876cc Mon Sep 17 00:00:00 2001 From: David Sheldrick Date: Mon, 20 May 2024 13:52:02 +0100 Subject: [PATCH] fix flipping for arrows (#3780) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit @SomeHats and me fixed arrow flipping, which was a little bit broken after the bindings things ### 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 ### Test Plan 1. Add a step-by-step description of how to test your PR here. 2. - [ ] Unit Tests - [ ] End to end tests ### Release Notes - Add a brief release note for your PR here. --------- Co-authored-by: Alex --- packages/editor/api-report.md | 1 + packages/editor/src/lib/editor/Editor.ts | 58 ++++++++++++------- packages/tldraw/api-report.md | 3 - .../src/lib/shapes/arrow/ArrowShapeUtil.tsx | 13 ++--- .../tools/SelectTool/childStates/Resizing.ts | 1 + 5 files changed, 45 insertions(+), 31 deletions(-) diff --git a/packages/editor/api-report.md b/packages/editor/api-report.md index 9f5356f10..c15b2fc63 100644 --- a/packages/editor/api-report.md +++ b/packages/editor/api-report.md @@ -2543,6 +2543,7 @@ export type TLResizeShapeOptions = Partial<{ mode: TLResizeMode; scaleAxisRotation: number; scaleOrigin: VecLike; + skipStartAndEndCallbacks: boolean; }>; // @public diff --git a/packages/editor/src/lib/editor/Editor.ts b/packages/editor/src/lib/editor/Editor.ts index 0c1ddff9d..8a9597e05 100644 --- a/packages/editor/src/lib/editor/Editor.ts +++ b/packages/editor/src/lib/editor/Editor.ts @@ -168,6 +168,7 @@ export type TLResizeShapeOptions = Partial<{ dragHandle: TLResizeHandle isAspectRatioLocked: boolean mode: TLResizeMode + skipStartAndEndCallbacks: boolean }> /** @public */ @@ -6323,27 +6324,42 @@ export class Editor extends EventEmitter { // need to adjust the shape's x and y points in case the parent has moved since start of resizing const { x, y } = this.getPointInParentSpace(initialShape.id, initialPagePoint) - this.updateShapes([ - { - id, - type: initialShape.type as any, - x: newLocalPoint.x, - y: newLocalPoint.y, - ...util.onResize( - { ...initialShape, x, y }, - { - newPoint: newLocalPoint, - handle: options.dragHandle ?? 'bottom_right', - // don't set isSingle to true for children - mode: options.mode ?? 'scale_shape', - scaleX: myScale.x, - scaleY: myScale.y, - initialBounds, - initialShape, - } - ), - }, - ]) + let workingShape = initialShape + if (!options.skipStartAndEndCallbacks) { + workingShape = applyPartialToRecordWithProps( + initialShape, + util.onResizeStart?.(initialShape) ?? undefined + ) + } + + workingShape = applyPartialToRecordWithProps(workingShape, { + id, + type: initialShape.type as any, + x: newLocalPoint.x, + y: newLocalPoint.y, + ...util.onResize( + { ...initialShape, x, y }, + { + newPoint: newLocalPoint, + handle: options.dragHandle ?? 'bottom_right', + // don't set isSingle to true for children + mode: options.mode ?? 'scale_shape', + scaleX: myScale.x, + scaleY: myScale.y, + initialBounds, + initialShape, + } + ), + }) + + if (!options.skipStartAndEndCallbacks) { + workingShape = applyPartialToRecordWithProps( + workingShape, + util.onResizeEnd?.(initialShape, workingShape) ?? undefined + ) + } + + this.updateShapes([workingShape]) } else { const initialPageCenter = Mat.applyToPoint(pageTransform, initialBounds.center) // get the model changes from the shape util diff --git a/packages/tldraw/api-report.md b/packages/tldraw/api-report.md index 26da2b853..cc9ffa5cf 100644 --- a/packages/tldraw/api-report.md +++ b/packages/tldraw/api-report.md @@ -97,7 +97,6 @@ import { TLOnDoubleClickHandler } from '@tldraw/editor'; import { TLOnEditEndHandler } from '@tldraw/editor'; import { TLOnHandleDragHandler } from '@tldraw/editor'; import { TLOnResizeHandler } from '@tldraw/editor'; -import { TLOnResizeStartHandler } from '@tldraw/editor'; import { TLOnTranslateHandler } from '@tldraw/editor'; import { TLOnTranslateStartHandler } from '@tldraw/editor'; import { TLPageId } from '@tldraw/editor'; @@ -206,8 +205,6 @@ export class ArrowShapeUtil extends ShapeUtil { // (undocumented) onResize: TLOnResizeHandler; // (undocumented) - onResizeStart?: TLOnResizeStartHandler; - // (undocumented) onTranslate?: TLOnTranslateHandler; // (undocumented) onTranslateStart: TLOnTranslateStartHandler; diff --git a/packages/tldraw/src/lib/shapes/arrow/ArrowShapeUtil.tsx b/packages/tldraw/src/lib/shapes/arrow/ArrowShapeUtil.tsx index 8168f0158..8e7e2f189 100644 --- a/packages/tldraw/src/lib/shapes/arrow/ArrowShapeUtil.tsx +++ b/packages/tldraw/src/lib/shapes/arrow/ArrowShapeUtil.tsx @@ -15,13 +15,13 @@ import { TLOnEditEndHandler, TLOnHandleDragHandler, TLOnResizeHandler, - TLOnResizeStartHandler, TLOnTranslateHandler, TLOnTranslateStartHandler, TLShapePartial, TLShapeUtilCanvasSvgDef, TLShapeUtilFlag, Vec, + WeakCache, arrowShapeMigrations, arrowShapeProps, getDefaultColorTheme, @@ -406,15 +406,14 @@ export class ArrowShapeUtil extends ShapeUtil { } } - // replace this with memo bag? - private _resizeInitialBindings: TLArrowBindings = { start: undefined, end: undefined } - override onResizeStart?: TLOnResizeStartHandler = (shape) => { - this._resizeInitialBindings = getArrowBindings(this.editor, shape) - } + private readonly _resizeInitialBindings = new WeakCache() + override onResize: TLOnResizeHandler = (shape, info) => { const { scaleX, scaleY } = info - const bindings = this._resizeInitialBindings + const bindings = this._resizeInitialBindings.get(shape, () => + getArrowBindings(this.editor, shape) + ) const terminals = getArrowTerminalsInArrowSpace(this.editor, shape, bindings) const { start, end } = structuredClone(shape.props) diff --git a/packages/tldraw/src/lib/tools/SelectTool/childStates/Resizing.ts b/packages/tldraw/src/lib/tools/SelectTool/childStates/Resizing.ts index ec5af1a67..d03207ccc 100644 --- a/packages/tldraw/src/lib/tools/SelectTool/childStates/Resizing.ts +++ b/packages/tldraw/src/lib/tools/SelectTool/childStates/Resizing.ts @@ -329,6 +329,7 @@ export class Resizing extends StateNode { scaleOrigin: scaleOriginPage, isAspectRatioLocked, scaleAxisRotation: selectionRotation, + skipStartAndEndCallbacks: true, }) }