tldraw 4.3.0-next.f4772c19540d → 4.3.0

package/src/lib/defaultSideEffects.ts

@@ -34,10 +34,15 @@ export function registerDefaultSideEffects(editor: Editor) {
 								editor.getInstanceState().isToolLocked
 							) {
 								editor.setCurrentTool('select.editing_shape', {
+									target: 'shape',
+									shape: shape,
 									isCreatingTextWhileToolLocked: true,
 								})
 							} else {
-								editor.setCurrentTool('select.editing_shape')
+								editor.setCurrentTool('select.editing_shape', {
+									target: 'shape',
+									shape: shape,
+								})
 							}
 						}
 					} else if (prev.editingShapeId && !next.editingShapeId) {

package/src/lib/shapes/arrow/ArrowShapeOptions.test.ts

@@ -48,19 +48,19 @@ describe('ArrowShapeOptions', () => {
 			const util = editor.getShapeUtil<ArrowShapeUtil>('arrow')
 
 			// Test without alt key, not precise
-			editor.inputs.altKey = false
+			editor.inputs.setAltKey(false)
 			expect(util.options.shouldBeExact(editor, false)).toBe(false)
 
 			// Test without alt key, precise
-			editor.inputs.altKey = false
+			editor.inputs.setAltKey(false)
 			expect(util.options.shouldBeExact(editor, true)).toBe(false)
 
 			// Test with alt key, not precise
-			editor.inputs.altKey = true
+			editor.inputs.setAltKey(true)
 			expect(util.options.shouldBeExact(editor, false)).toBe(true)
 
 			// Test with alt key, precise
-			editor.inputs.altKey = true
+			editor.inputs.setAltKey(true)
 			expect(util.options.shouldBeExact(editor, true)).toBe(true)
 		})
 
@@ -68,59 +68,19 @@ describe('ArrowShapeOptions', () => {
 			const util = editor.getShapeUtil<ArrowShapeUtil>('arrow')
 
 			// Test without ctrl key
-			editor.inputs.ctrlKey = false
+			editor.inputs.setCtrlKey(false)
 			expect(util.options.shouldIgnoreTargets(editor)).toBe(false)
 
 			// Test with ctrl key
-			editor.inputs.ctrlKey = true
+			editor.inputs.setCtrlKey(true)
 			expect(util.options.shouldIgnoreTargets(editor)).toBe(true)
 		})
 	})
 
 	describe('shouldIgnoreTargets option', () => {
-		it('should not bind to shapes when shouldIgnoreTargets returns true', () => {
-			editor.setCurrentTool('arrow')
-
-			// Simulate ctrl key held (default shouldIgnoreTargets behavior)
-			editor.inputs.ctrlKey = true
-
-			editor.pointerDown(50, 50) // Start outside any shape
-			editor.pointerMove(150, 150) // Move to center of box1
-			editor.pointerUp()
-
-			const createdArrow = editor
-				.getCurrentPageShapes()
-				.find((s) => s.type === 'arrow') as TLArrowShape
-			expect(createdArrow).toBeDefined()
-
-			const arrowBindings = getArrowBindings(editor, createdArrow)
-			expect(arrowBindings.start).toBeUndefined()
-			expect(arrowBindings.end).toBeUndefined()
-		})
-
-		it('should bind to shapes when shouldIgnoreTargets returns false', () => {
-			editor.setCurrentTool('arrow')
-
-			// Simulate no ctrl key (default shouldIgnoreTargets behavior)
-			editor.inputs.ctrlKey = false
-
-			editor.pointerDown(50, 50) // Start outside any shape
-			editor.pointerMove(150, 150) // Move to center of box1
-			editor.pointerUp()
-
-			const createdArrow = editor
-				.getCurrentPageShapes()
-				.find((s) => s.type === 'arrow') as TLArrowShape
-			expect(createdArrow).toBeDefined()
-
-			const arrowBindings = getArrowBindings(editor, createdArrow)
-			expect(arrowBindings.end).toBeDefined()
-			expect(arrowBindings.end?.toId).toBe(ids.box1)
-		})
-
 		it('should work with updateArrowTargetState function', () => {
 			// Test that updateArrowTargetState returns null when shouldIgnoreTargets is true
-			editor.inputs.ctrlKey = true
+			editor.inputs.setCtrlKey(true)
 
 			const targetState = updateArrowTargetState({
 				editor,
@@ -135,7 +95,7 @@ describe('ArrowShapeOptions', () => {
 		})
 
 		it('should return valid target state when shouldIgnoreTargets is false', () => {
-			editor.inputs.ctrlKey = false
+			editor.inputs.setCtrlKey(false)
 
 			const targetState = updateArrowTargetState({
 				editor,
@@ -153,8 +113,8 @@ describe('ArrowShapeOptions', () => {
 
 	describe('shouldBeExact option', () => {
 		it('should affect arrow targeting behavior when true', () => {
-			editor.inputs.altKey = true // shouldBeExact = true
-			editor.inputs.ctrlKey = false // shouldIgnoreTargets = false
+			editor.inputs.setAltKey(true) // shouldBeExact = true
+			editor.inputs.setCtrlKey(false) // shouldIgnoreTargets = false
 
 			const targetState = updateArrowTargetState({
 				editor,
@@ -170,8 +130,8 @@ describe('ArrowShapeOptions', () => {
 		})
 
 		it('should affect arrow targeting behavior when false', () => {
-			editor.inputs.altKey = false // shouldBeExact = false
-			editor.inputs.ctrlKey = false // shouldIgnoreTargets = false
+			editor.inputs.setAltKey(false) // shouldBeExact = false
+			editor.inputs.setCtrlKey(false) // shouldIgnoreTargets = false
 
 			const targetState = updateArrowTargetState({
 				editor,
@@ -194,21 +154,21 @@ describe('ArrowShapeOptions', () => {
 			class CustomArrowShapeUtil extends ArrowShapeUtil {
 				override options = {
 					...baseUtil.options,
-					shouldBeExact: (editor: any, _isPrecise: boolean) => editor.inputs.shiftKey, // Use shift instead of alt
+					shouldBeExact: (editor: any, _isPrecise: boolean) => editor.inputs.getShiftKey(), // Use shift instead of alt
 				}
 			}
 
 			const customUtil = new CustomArrowShapeUtil(editor)
 
 			// Test with shift key
-			editor.inputs.shiftKey = true
-			editor.inputs.altKey = false
+			editor.inputs.setShiftKey(true)
+			editor.inputs.setAltKey(false)
 			expect(customUtil.options.shouldBeExact(editor, false)).toBe(true)
 			expect(customUtil.options.shouldBeExact(editor, true)).toBe(true)
 
 			// Test without shift key
-			editor.inputs.shiftKey = false
-			editor.inputs.altKey = true // Alt key should not matter for custom implementation
+			editor.inputs.setShiftKey(false)
+			editor.inputs.setAltKey(true) // Alt key should not matter for custom implementation
 			expect(customUtil.options.shouldBeExact(editor, false)).toBe(false)
 			expect(customUtil.options.shouldBeExact(editor, true)).toBe(false)
 		})
@@ -219,20 +179,20 @@ describe('ArrowShapeOptions', () => {
 			class CustomArrowShapeUtil extends ArrowShapeUtil {
 				override options = {
 					...baseUtil.options,
-					shouldIgnoreTargets: (editor: any) => editor.inputs.shiftKey, // Use shift instead of ctrl
+					shouldIgnoreTargets: (editor: any) => editor.inputs.getShiftKey(), // Use shift instead of ctrl
 				}
 			}
 
 			const customUtil = new CustomArrowShapeUtil(editor)
 
 			// Test with shift key
-			editor.inputs.shiftKey = true
-			editor.inputs.ctrlKey = false
+			editor.inputs.setShiftKey(true)
+			editor.inputs.setCtrlKey(false)
 			expect(customUtil.options.shouldIgnoreTargets(editor)).toBe(true)
 
 			// Test without shift key
-			editor.inputs.shiftKey = false
-			editor.inputs.ctrlKey = true // Ctrl key should not matter for custom implementation
+			editor.inputs.setShiftKey(false)
+			editor.inputs.setCtrlKey(true) // Ctrl key should not matter for custom implementation
 			expect(customUtil.options.shouldIgnoreTargets(editor)).toBe(false)
 		})
 
@@ -244,11 +204,13 @@ describe('ArrowShapeOptions', () => {
 					...baseUtil.options,
 					shouldBeExact: (editor: any, isPrecise: boolean) => {
 						// Custom logic: exact when both alt and shift are pressed, and only if precise
-						return editor.inputs.altKey && editor.inputs.shiftKey && isPrecise
+						return editor.inputs.getAltKey() && editor.inputs.getShiftKey() && isPrecise
 					},
 					shouldIgnoreTargets: (editor: any) => {
 						// Custom logic: ignore targets when any modifier key is pressed
-						return editor.inputs.altKey || editor.inputs.ctrlKey || editor.inputs.shiftKey
+						return (
+							editor.inputs.getAltKey() || editor.inputs.getCtrlKey() || editor.inputs.getShiftKey()
+						)
 					},
 				}
 			}
@@ -256,48 +218,35 @@ describe('ArrowShapeOptions', () => {
 			const customUtil = new CustomArrowShapeUtil(editor)
 
 			// Test shouldBeExact with both keys and precise
-			editor.inputs.altKey = true
-			editor.inputs.shiftKey = true
+			editor.inputs.setAltKey(true)
+			editor.inputs.setShiftKey(true)
 			expect(customUtil.options.shouldBeExact(editor, true)).toBe(true)
 
 			// Test shouldBeExact with both keys but not precise
-			editor.inputs.altKey = true
-			editor.inputs.shiftKey = true
+			editor.inputs.setAltKey(true)
+			editor.inputs.setShiftKey(true)
 			expect(customUtil.options.shouldBeExact(editor, false)).toBe(false)
 
 			// Test shouldBeExact with only one key
-			editor.inputs.altKey = true
-			editor.inputs.shiftKey = false
+			editor.inputs.setAltKey(true)
+			editor.inputs.setShiftKey(false)
 			expect(customUtil.options.shouldBeExact(editor, true)).toBe(false)
 
 			// Test shouldIgnoreTargets with any key
-			editor.inputs.altKey = false
-			editor.inputs.ctrlKey = false
-			editor.inputs.shiftKey = true
+			editor.inputs.setAltKey(false)
+			editor.inputs.setCtrlKey(false)
+			editor.inputs.setShiftKey(true)
 			expect(customUtil.options.shouldIgnoreTargets(editor)).toBe(true)
 
 			// Test shouldIgnoreTargets with no keys
-			editor.inputs.altKey = false
-			editor.inputs.ctrlKey = false
-			editor.inputs.shiftKey = false
+			editor.inputs.setAltKey(false)
+			editor.inputs.setCtrlKey(false)
+			editor.inputs.setShiftKey(false)
 			expect(customUtil.options.shouldIgnoreTargets(editor)).toBe(false)
 		})
 	})
 
 	describe('Integration with arrow tool states', () => {
-		it('should respect shouldIgnoreTargets in idle state', () => {
-			editor.setCurrentTool('arrow')
-			editor.expectToBeIn('arrow.idle')
-
-			// Move to a position over box1
-			editor.inputs.ctrlKey = true // shouldIgnoreTargets = true
-			editor.pointerMove(150, 150)
-
-			// The arrow tool should not show any target highlighting
-			// (This is more of an integration test - exact assertions would depend on internal state)
-			expect(editor.getCurrentToolId()).toBe('arrow')
-		})
-
 		it('should allow custom shouldBeExact logic based on isPrecise - example from arrow precise-exact', () => {
 			// This replicates the logic from the arrows-precise-exact example
 			const baseUtil = editor.getShapeUtil<ArrowShapeUtil>('arrow')
@@ -315,10 +264,10 @@ describe('ArrowShapeOptions', () => {
 
 			try {
 				editor.setCurrentTool('arrow')
-				editor.inputs.ctrlKey = false // Allow binding
+				editor.inputs.setCtrlKey(false) // Allow binding
 
 				// Set up fast pointer velocity to ensure precise remains false
-				editor.inputs.pointerVelocity = { x: 2, y: 2, len: () => 2.8 } as any
+				editor.inputs.setPointerVelocity({ x: 2, y: 2, len: () => 2.8 } as any)
 
 				const targetState = updateArrowTargetState({
 					editor,
@@ -352,47 +301,5 @@ describe('ArrowShapeOptions', () => {
 				baseUtil.options.shouldBeExact = originalShouldBeExact
 			}
 		})
-
-		it('should respect shouldIgnoreTargets when starting arrow creation', () => {
-			editor.setCurrentTool('arrow')
-
-			// Start creating arrow with ctrl held (shouldIgnoreTargets = true)
-			editor.inputs.ctrlKey = true
-			editor.pointerDown(150, 150) // Start in center of box1
-
-			// Even though we're starting in a shape, no binding should be created
-			editor.pointerMove(200, 200)
-			editor.pointerUp()
-
-			const createdArrow = editor
-				.getCurrentPageShapes()
-				.find((s) => s.type === 'arrow') as TLArrowShape
-			expect(createdArrow).toBeDefined()
-
-			const arrowBindings = getArrowBindings(editor, createdArrow)
-			expect(arrowBindings.start).toBeUndefined()
-			expect(arrowBindings.end).toBeUndefined()
-		})
-
-		it('should respect shouldBeExact during arrow creation', () => {
-			editor.setCurrentTool('arrow')
-
-			// Create arrow with alt held (shouldBeExact = true)
-			editor.inputs.altKey = true
-			editor.inputs.ctrlKey = false // Allow binding
-
-			editor.pointerDown(50, 50) // Start outside shapes
-			editor.pointerMove(150, 150) // Move to center of box1
-			editor.pointerUp()
-
-			const createdArrow = editor
-				.getCurrentPageShapes()
-				.find((s) => s.type === 'arrow') as TLArrowShape
-			expect(createdArrow).toBeDefined()
-
-			const arrowBindings = getArrowBindings(editor, createdArrow)
-			expect(arrowBindings.end).toBeDefined()
-			expect(arrowBindings.end?.props.isExact).toBe(true)
-		})
 	})
 })

package/src/lib/shapes/arrow/ArrowShapeTool.test.ts

@@ -144,7 +144,7 @@ describe('When pointing a start shape', () => {
 		expect(getArrowTargetState(editor)).not.toBeNull()
 
 		// Fake some velocity
-		editor.inputs.pointerVelocity = new Vec(1, 1)
+		editor.inputs.setPointerVelocity(new Vec(1, 1))
 
 		editor.pointerMove(375, 500)
 
@@ -189,7 +189,7 @@ describe('When pointing an end shape', () => {
 		expect(editor.getHintingShapeIds().length).toBe(0)
 
 		// Fake some velocity
-		editor.inputs.pointerVelocity = new Vec(1, 1)
+		editor.inputs.setPointerVelocity(new Vec(1, 1))
 
 		// Move onto shape
 		editor.pointerMove(375, 375)
@@ -227,7 +227,7 @@ describe('When pointing an end shape', () => {
 	it('unbinds and rebinds', () => {
 		editor.setCurrentTool('arrow').pointerDown(0, 0)
 
-		editor.inputs.pointerVelocity = new Vec(1, 1)
+		editor.inputs.setPointerVelocity(new Vec(1, 1))
 
 		editor.pointerMove(375, 375)
 
@@ -283,7 +283,7 @@ describe('When pointing an end shape', () => {
 		})
 
 		// Build up some velocity
-		editor.inputs.pointerVelocity = new Vec(1, 1)
+		editor.inputs.setPointerVelocity(new Vec(1, 1))
 		editor.pointerMove(325, 325)
 		expect(getArrowTargetState(editor)).not.toBeNull()
 
@@ -403,7 +403,7 @@ describe('When pointing an end shape', () => {
 
 	it('begins imprecise when moving quickly', () => {
 		editor.setCurrentTool('arrow').pointerDown(0, 0)
-		editor.inputs.pointerVelocity = new Vec(1, 1)
+		editor.inputs.setPointerVelocity(new Vec(1, 1))
 		editor.pointerMove(370, 370)
 
 		const arrow = editor.getCurrentPageShapes()[editor.getCurrentPageShapes().length - 1]
@@ -435,7 +435,7 @@ describe('When pointing an end shape', () => {
 
 		expect(getArrowTargetState(editor)).toBeNull()
 
-		editor.inputs.pointerVelocity = new Vec(0.001, 0.001)
+		editor.inputs.setPointerVelocity(new Vec(0.001, 0.001))
 		editor.pointerMove(375, 375)
 
 		arrow = editor.getCurrentPageShapes()[editor.getCurrentPageShapes().length - 1]
@@ -588,7 +588,7 @@ describe('precision timeout configuration', () => {
 
 		editor.setCurrentTool('arrow').pointerDown(0, 0)
 		// Use high velocity to avoid precise mode immediately
-		editor.inputs.pointerVelocity = new Vec(1, 1)
+		editor.inputs.setPointerVelocity(new Vec(1, 1))
 		editor.pointerMove(100, 100)
 
 		const arrow = editor.getCurrentPageShapes()[
@@ -630,7 +630,7 @@ describe('precision timeout configuration', () => {
 
 		editor.setCurrentTool('arrow').pointerDown(0, 0)
 		// Use high velocity to avoid precise mode immediately
-		editor.inputs.pointerVelocity = new Vec(1, 1)
+		editor.inputs.setPointerVelocity(new Vec(1, 1))
 		editor.pointerMove(100, 100)
 
 		const arrow = editor.getCurrentPageShapes()[

package/src/lib/shapes/arrow/ArrowShapeUtil.test.ts

@@ -333,7 +333,7 @@ describe('Arrow labels', () => {
 		// Create an arrow with a label
 		editor.setCurrentTool('arrow').pointerDown(10, 10).pointerMove(100, 100).pointerUp()
 		const arrowId = editor.getOnlySelectedShape()!.id
-		editor.updateShapes<TLArrowShape>([
+		editor.updateShapes([
 			{ id: arrowId, type: 'arrow', props: { richText: toRichText('Test Label') } },
 		])
 	})
@@ -349,7 +349,7 @@ describe('Arrow labels', () => {
 
 	it('should update the label of an arrow', () => {
 		const arrowId = editor.getOnlySelectedShape()!.id
-		editor.updateShapes<TLArrowShape>([
+		editor.updateShapes([
 			{ id: arrowId, type: 'arrow', props: { richText: toRichText('New Label') } },
 		])
 		expect(arrow(arrowId)).toMatchObject({

package/src/lib/shapes/arrow/ArrowShapeUtil.tsx

@@ -45,7 +45,6 @@ import {
 	useEditor,
 	useIsEditing,
 	useSharedSafeId,
-	useValue,
 } from '@tldraw/editor'
 import React, { useMemo } from 'react'
 import { updateArrowTerminal } from '../../bindings/arrow/ArrowBindingUtil'
@@ -56,6 +55,7 @@ import { ShapeFill } from '../shared/ShapeFill'
 import { ARROW_LABEL_PADDING, STROKE_SIZES, TEXT_PROPS } from '../shared/default-shape-constants'
 import { getFillDefForCanvas, getFillDefForExport } from '../shared/defaultStyleDefs'
 import { useDefaultColorTheme } from '../shared/useDefaultColorTheme'
+import { useEfficientZoomThreshold } from '../shared/useEfficientZoomThreshold'
 import { getArrowBodyPath, getArrowHandlePath } from './ArrowPath'
 import { ArrowShapeOptions } from './arrow-types'
 import {
@@ -117,9 +117,13 @@ export class ArrowShapeUtil extends ShapeUtil<TLArrowShape> {
 
 		hoverPreciseTimeout: 600,
 		pointingPreciseTimeout: 320,
-
-		shouldBeExact: (editor: Editor) => editor.inputs.altKey,
-		shouldIgnoreTargets: (editor: Editor) => editor.inputs.ctrlKey,
+		shouldBeExact(editor: Editor) {
+			return editor.inputs.getAltKey()
+		},
+		shouldIgnoreTargets(editor: Editor) {
+			return editor.inputs.getCtrlKey()
+		},
+		showTextOutline: true,
 	}
 
 	override canEdit() {
@@ -269,7 +273,7 @@ export class ArrowShapeUtil extends ShapeUtil<TLArrowShape> {
 
 			const segmentStart = shapePageTransform.applyToPoint(info.route.midpointHandle.segmentStart)
 			const segmentEnd = shapePageTransform.applyToPoint(info.route.midpointHandle.segmentEnd)
-			const segmentLength = Vec.Dist(segmentStart, segmentEnd) * this.editor.getZoomLevel()
+			const segmentLength = Vec.Dist(segmentStart, segmentEnd) * this.editor.getEfficientZoomLevel()
 
 			if (segmentLength > this.options.elbowMinSegmentLengthToShowMidpointHandle) {
 				handles.push({
@@ -369,7 +373,8 @@ export class ArrowShapeUtil extends ShapeUtil<TLArrowShape> {
 
 		// we want to snap to certain points. the maximum distance at which a snap will occur is
 		// relative to the zoom level:
-		const maxSnapDistance = this.options.elbowMidpointSnapDistance / this.editor.getZoomLevel()
+		const maxSnapDistance =
+			this.options.elbowMidpointSnapDistance / this.editor.getEfficientZoomLevel()
 
 		// we snap to the midpoint of the range by default
 		const midPoint = perpDistanceToLineAngle(
@@ -794,6 +799,7 @@ export class ArrowShapeUtil extends ShapeUtil<TLArrowShape> {
 						textWidth={labelPosition.box.w - ARROW_LABEL_PADDING * 2 * shape.props.scale}
 						isSelected={isSelected}
 						padding={0}
+						showTextOutline={this.options.showTextOutline}
 						style={{
 							transform: `translate(${labelPosition.box.center.x}px, ${labelPosition.box.center.y}px)`,
 						}}
@@ -917,7 +923,7 @@ export class ArrowShapeUtil extends ShapeUtil<TLArrowShape> {
 		if (isEmptyRichText(shape.props.richText)) {
 			// editing text for the first time, so set the position to the default:
 			const labelPosition = getArrowLabelDefaultPosition(this.editor, shape)
-			this.editor.updateShape<TLArrowShape>({
+			this.editor.updateShape({
 				id: shape.id,
 				type: shape.type,
 				props: { labelPosition },
@@ -944,7 +950,7 @@ export class ArrowShapeUtil extends ShapeUtil<TLArrowShape> {
 						.box.clone()
 						.expandBy(-ARROW_LABEL_PADDING * shape.props.scale)}
 					padding={0}
-					showTextOutline={true}
+					showTextOutline={this.options.showTextOutline}
 				/>
 			</g>
 		)
@@ -1005,13 +1011,7 @@ const ArrowSvg = track(function ArrowSvg({
 	const editor = useEditor()
 	const theme = useDefaultColorTheme()
 	const info = getArrowInfo(editor, shape)
-	const isForceSolid = useValue(
-		'force solid',
-		() => {
-			return editor.getZoomLevel() < 0.2
-		},
-		[editor]
-	)
+	const isForceSolid = useEfficientZoomThreshold(shape.props.scale * 0.25)
 	const clipPathId = useSharedSafeId(shape.id + '_clip')
 	const arrowheadDotId = useSharedSafeId('arrowhead-dot')
 	const arrowheadCrossId = useSharedSafeId('arrowhead-cross')
@@ -1037,7 +1037,7 @@ const ArrowSvg = track(function ArrowSvg({
 			start: 'skip',
 			end: 'skip',
 			lengthRatio: 2.5,
-			strokeWidth: 2 / editor.getZoomLevel(),
+			strokeWidth: 2 / editor.getEfficientZoomLevel(),
 			props: {
 				className: 'tl-arrow-hint',
 				markerStart: bindings.start

package/src/lib/shapes/arrow/arrow-types.ts

@@ -95,6 +95,8 @@ export interface ArrowShapeOptions {
 	 * When creating an arrow, should it bind to the target shape.
 	 */
 	shouldIgnoreTargets(editor: Editor): boolean
+	/** Whether to show the outline of the arrow shape's label (using the same color as the canvas). This helps with overlapping shapes. It does not show up on Safari, where text outline is a performance issues. */
+	readonly showTextOutline: boolean
 }
 
 /** @public */

package/src/lib/shapes/arrow/arrowLabel.ts

@@ -311,9 +311,9 @@ export function getArrowLabelDefaultPosition(editor: Editor, shape: TLArrowShape
 
 /** @internal */
 export function isOverArrowLabel(editor: Editor, shape: TLShape) {
-	if (!editor.isShapeOfType<TLArrowShape>(shape, 'arrow')) return false
+	if (!editor.isShapeOfType(shape, 'arrow')) return false
 
-	const pointInShapeSpace = editor.getPointInShapeSpace(shape, editor.inputs.currentPagePoint)
+	const pointInShapeSpace = editor.getPointInShapeSpace(shape, editor.inputs.getCurrentPagePoint())
 	// How should we handle multiple labels? Do shapes ever have multiple labels?
 	const labelGeometry = editor.getShapeGeometry<Group2d>(shape).children[1]
 	// Knowing what we know about arrows... if the shape has no text in its label,

package/src/lib/shapes/arrow/arrowTargetState.ts

@@ -198,7 +198,7 @@ export function updateArrowTargetState({
 	if (!precise) {
 		// If we're switching to a new bound shape, then precise only if moving slowly
 		if (!currentBinding || (currentBinding && target.id !== currentBinding.toId)) {
-			precise = editor.inputs.pointerVelocity.len() < 0.5
+			precise = editor.inputs.getPointerVelocity().len() < 0.5
 		}
 	}
 
@@ -377,7 +377,7 @@ export function updateArrowTargetState({
 	return result
 }
 
-const targetFilterFallback = { type: 'arrow' }
+const targetFilterFallback = { type: 'arrow' as const }
 
 /**
  * Funky math but we want the snap distance to be 4 at the minimum and either 16 or 15% of the

package/src/lib/shapes/arrow/elbow/elbowArrowSnapLines.tsx

@@ -39,17 +39,17 @@ export function getElbowArrowSnapLines(editor: Editor) {
 		.get(editor, (editor) => {
 			const currentSelectedArrowShape = computed('current selected arrow shape', () => {
 				const shape = editor.getOnlySelectedShape()
-				if (!shape || !editor.isShapeOfType<TLArrowShape>(shape, 'arrow')) return null
+				if (!shape || !editor.isShapeOfType(shape, 'arrow')) return null
 				return shape.id
 			})
 
 			const unselectedArrowShapeIds = editor.store.query.ids('shape', () => {
 				const activeArrowShapeId = currentSelectedArrowShape.get()
-				if (!activeArrowShapeId) return { type: { eq: 'arrow' } }
+				if (!activeArrowShapeId) return { type: { eq: 'arrow' } } as const
 				return {
 					type: { eq: 'arrow' },
 					id: { neq: activeArrowShapeId },
-				}
+				} as const
 			})
 
 			return computed('elbow arrow snap lines', () => {

package/src/lib/shapes/arrow/elbow/getElbowArrowInfo.test.ts

@@ -0,0 +1,80 @@
+import { createShapeId, TLArrowShape } from '@tldraw/editor'
+import { TestEditor } from '../../../../test/TestEditor'
+import { createOrUpdateArrowBinding, getArrowBindings } from '../shared'
+import { getElbowArrowInfo } from './getElbowArrowInfo'
+
+let editor: TestEditor
+
+const ids = {
+	box1: createShapeId('box1'),
+	box2: createShapeId('box2'),
+	arrow1: createShapeId('arrow1'),
+}
+
+beforeEach(() => {
+	editor = new TestEditor()
+})
+
+describe('Elbow arrow with scale', () => {
+	it.each([1, 5, 10, 20])('creates valid orthogonal routes with scale=%i', (scale) => {
+		editor.createShapes([
+			{ id: ids.box1, type: 'geo', x: 0, y: 0, props: { w: 100, h: 100 } },
+			{ id: ids.box2, type: 'geo', x: 250, y: 100, props: { w: 100, h: 100 } },
+			{
+				id: ids.arrow1,
+				type: 'arrow',
+				x: 0,
+				y: 0,
+				props: {
+					start: { x: 0, y: 0 },
+					end: { x: 0, y: 0 },
+					kind: 'elbow',
+					scale,
+					size: 's',
+				},
+			},
+		])
+
+		createOrUpdateArrowBinding(editor, ids.arrow1, ids.box1, {
+			terminal: 'start',
+			isExact: false,
+			isPrecise: false,
+			normalizedAnchor: { x: 0.5, y: 0.5 },
+			snap: 'none',
+		})
+
+		createOrUpdateArrowBinding(editor, ids.arrow1, ids.box2, {
+			terminal: 'end',
+			isExact: false,
+			isPrecise: false,
+			normalizedAnchor: { x: 0.5, y: 0.5 },
+			snap: 'none',
+		})
+
+		const arrow = editor.getShape(ids.arrow1)! as TLArrowShape
+		const bindings = getArrowBindings(editor, arrow)
+		const info = getElbowArrowInfo(editor, arrow, bindings)
+
+		expect(info).toBeDefined()
+		expect(arrow.props.kind).toBe('elbow')
+		expect(info.route).toBeDefined()
+		expect(info.route!.points.length).toBeGreaterThanOrEqual(3)
+
+		// No duplicate consecutive points
+		for (let i = 0; i < info.route!.points.length - 1; i++) {
+			const p1 = info.route!.points[i]
+			const p2 = info.route!.points[i + 1]
+			const isDuplicate = Math.abs(p1.x - p2.x) < 0.01 && Math.abs(p1.y - p2.y) < 0.01
+			expect(isDuplicate).toBe(false)
+		}
+
+		// All segments orthogonal
+		for (let i = 0; i < info.route!.points.length - 1; i++) {
+			const p1 = info.route!.points[i]
+			const p2 = info.route!.points[i + 1]
+			const isHorizontal = Math.abs(p1.y - p2.y) < 0.01
+			const isVertical = Math.abs(p1.x - p2.x) < 0.01
+			expect(isHorizontal || isVertical).toBe(true)
+		}
+	})
+})

package/src/lib/shapes/arrow/elbow/getElbowArrowInfo.tsx

@@ -348,7 +348,7 @@ function getElbowArrowTerminalInfo(
 	point: VecModel
 ): ElbowArrowTerminal {
 	const arrowStrokeSize = (STROKE_SIZES[arrow.props.size] * arrow.props.scale) / 2
-	const minEndSegmentLength = arrowStrokeSize * arrow.props.scale * 3
+	const minEndSegmentLength = arrowStrokeSize * 3
 
 	if (binding) {
 		const target = editor.getShape(binding.toId)