fix flipping for arrows (#3780)

@SomeHats and me fixed arrow flipping, which was a little bit broken
after the bindings things

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


### 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 <alex@dytry.ch>

packages/editor/api-report.md

@@ -2543,6 +2543,7 @@ export type TLResizeShapeOptions = Partial<{
     mode: TLResizeMode;
     scaleAxisRotation: number;
     scaleOrigin: VecLike;
+    skipStartAndEndCallbacks: boolean;
 }>;
 
 // @public

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<TLEventMap> {
 			// 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([
+			let workingShape = initialShape
-				{
+			if (!options.skipStartAndEndCallbacks) {
-					id,
+				workingShape = applyPartialToRecordWithProps(
-					type: initialShape.type as any,
+					initialShape,
-					x: newLocalPoint.x,
+					util.onResizeStart?.(initialShape) ?? undefined
-					y: newLocalPoint.y,
+				)
-					...util.onResize(
+			}
-						{ ...initialShape, x, y },
+
-						{
+			workingShape = applyPartialToRecordWithProps(workingShape, {
-							newPoint: newLocalPoint,
+				id,
-							handle: options.dragHandle ?? 'bottom_right',
+				type: initialShape.type as any,
-							// don't set isSingle to true for children
+				x: newLocalPoint.x,
-							mode: options.mode ?? 'scale_shape',
+				y: newLocalPoint.y,
-							scaleX: myScale.x,
+				...util.onResize(
-							scaleY: myScale.y,
+					{ ...initialShape, x, y },
-							initialBounds,
+					{
-							initialShape,
+						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

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<TLArrowShape> {
     // (undocumented)
     onResize: TLOnResizeHandler<TLArrowShape>;
     // (undocumented)
-    onResizeStart?: TLOnResizeStartHandler<TLArrowShape>;
-    // (undocumented)
     onTranslate?: TLOnTranslateHandler<TLArrowShape>;
     // (undocumented)
     onTranslateStart: TLOnTranslateStartHandler<TLArrowShape>;

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<TLArrowShape> {
 		}
 	}
 
-	// replace this with memo bag?
+	private readonly _resizeInitialBindings = new WeakCache<TLArrowShape, TLArrowBindings>()
-	private _resizeInitialBindings: TLArrowBindings = { start: undefined, end: undefined }
+
-	override onResizeStart?: TLOnResizeStartHandler<TLArrowShape> = (shape) => {
-		this._resizeInitialBindings = getArrowBindings(this.editor, shape)
-	}
 	override onResize: TLOnResizeHandler<TLArrowShape> = (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<TLArrowShape['props']>(shape.props)

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,
 			})
 		}