tldraw 4.2.2 → 4.2.3

package/src/lib/defaultSideEffects.ts

@@ -34,15 +34,10 @@ 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', {
-									target: 'shape',
-									shape: shape,
-								})
+								editor.setCurrentTool('select.editing_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.setAltKey(false)
+			editor.inputs.altKey = false
 			expect(util.options.shouldBeExact(editor, false)).toBe(false)
 
 			// Test without alt key, precise
-			editor.inputs.setAltKey(false)
+			editor.inputs.altKey = false
 			expect(util.options.shouldBeExact(editor, true)).toBe(false)
 
 			// Test with alt key, not precise
-			editor.inputs.setAltKey(true)
+			editor.inputs.altKey = true
 			expect(util.options.shouldBeExact(editor, false)).toBe(true)
 
 			// Test with alt key, precise
-			editor.inputs.setAltKey(true)
+			editor.inputs.altKey = true
 			expect(util.options.shouldBeExact(editor, true)).toBe(true)
 		})
 
@@ -68,19 +68,59 @@ describe('ArrowShapeOptions', () => {
 			const util = editor.getShapeUtil<ArrowShapeUtil>('arrow')
 
 			// Test without ctrl key
-			editor.inputs.setCtrlKey(false)
+			editor.inputs.ctrlKey = false
 			expect(util.options.shouldIgnoreTargets(editor)).toBe(false)
 
 			// Test with ctrl key
-			editor.inputs.setCtrlKey(true)
+			editor.inputs.ctrlKey = 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.setCtrlKey(true)
+			editor.inputs.ctrlKey = true
 
 			const targetState = updateArrowTargetState({
 				editor,
@@ -95,7 +135,7 @@ describe('ArrowShapeOptions', () => {
 		})
 
 		it('should return valid target state when shouldIgnoreTargets is false', () => {
-			editor.inputs.setCtrlKey(false)
+			editor.inputs.ctrlKey = false
 
 			const targetState = updateArrowTargetState({
 				editor,
@@ -113,8 +153,8 @@ describe('ArrowShapeOptions', () => {
 
 	describe('shouldBeExact option', () => {
 		it('should affect arrow targeting behavior when true', () => {
-			editor.inputs.setAltKey(true) // shouldBeExact = true
-			editor.inputs.setCtrlKey(false) // shouldIgnoreTargets = false
+			editor.inputs.altKey = true // shouldBeExact = true
+			editor.inputs.ctrlKey = false // shouldIgnoreTargets = false
 
 			const targetState = updateArrowTargetState({
 				editor,
@@ -130,8 +170,8 @@ describe('ArrowShapeOptions', () => {
 		})
 
 		it('should affect arrow targeting behavior when false', () => {
-			editor.inputs.setAltKey(false) // shouldBeExact = false
-			editor.inputs.setCtrlKey(false) // shouldIgnoreTargets = false
+			editor.inputs.altKey = false // shouldBeExact = false
+			editor.inputs.ctrlKey = false // shouldIgnoreTargets = false
 
 			const targetState = updateArrowTargetState({
 				editor,
@@ -154,21 +194,21 @@ describe('ArrowShapeOptions', () => {
 			class CustomArrowShapeUtil extends ArrowShapeUtil {
 				override options = {
 					...baseUtil.options,
-					shouldBeExact: (editor: any, _isPrecise: boolean) => editor.inputs.getShiftKey(), // Use shift instead of alt
+					shouldBeExact: (editor: any, _isPrecise: boolean) => editor.inputs.shiftKey, // Use shift instead of alt
 				}
 			}
 
 			const customUtil = new CustomArrowShapeUtil(editor)
 
 			// Test with shift key
-			editor.inputs.setShiftKey(true)
-			editor.inputs.setAltKey(false)
+			editor.inputs.shiftKey = true
+			editor.inputs.altKey = false
 			expect(customUtil.options.shouldBeExact(editor, false)).toBe(true)
 			expect(customUtil.options.shouldBeExact(editor, true)).toBe(true)
 
 			// Test without shift key
-			editor.inputs.setShiftKey(false)
-			editor.inputs.setAltKey(true) // Alt key should not matter for custom implementation
+			editor.inputs.shiftKey = false
+			editor.inputs.altKey = 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)
 		})
@@ -179,20 +219,20 @@ describe('ArrowShapeOptions', () => {
 			class CustomArrowShapeUtil extends ArrowShapeUtil {
 				override options = {
 					...baseUtil.options,
-					shouldIgnoreTargets: (editor: any) => editor.inputs.getShiftKey(), // Use shift instead of ctrl
+					shouldIgnoreTargets: (editor: any) => editor.inputs.shiftKey, // Use shift instead of ctrl
 				}
 			}
 
 			const customUtil = new CustomArrowShapeUtil(editor)
 
 			// Test with shift key
-			editor.inputs.setShiftKey(true)
-			editor.inputs.setCtrlKey(false)
+			editor.inputs.shiftKey = true
+			editor.inputs.ctrlKey = false
 			expect(customUtil.options.shouldIgnoreTargets(editor)).toBe(true)
 
 			// Test without shift key
-			editor.inputs.setShiftKey(false)
-			editor.inputs.setCtrlKey(true) // Ctrl key should not matter for custom implementation
+			editor.inputs.shiftKey = false
+			editor.inputs.ctrlKey = true // Ctrl key should not matter for custom implementation
 			expect(customUtil.options.shouldIgnoreTargets(editor)).toBe(false)
 		})
 
@@ -204,13 +244,11 @@ 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.getAltKey() && editor.inputs.getShiftKey() && isPrecise
+						return editor.inputs.altKey && editor.inputs.shiftKey && isPrecise
 					},
 					shouldIgnoreTargets: (editor: any) => {
 						// Custom logic: ignore targets when any modifier key is pressed
-						return (
-							editor.inputs.getAltKey() || editor.inputs.getCtrlKey() || editor.inputs.getShiftKey()
-						)
+						return editor.inputs.altKey || editor.inputs.ctrlKey || editor.inputs.shiftKey
 					},
 				}
 			}
@@ -218,35 +256,48 @@ describe('ArrowShapeOptions', () => {
 			const customUtil = new CustomArrowShapeUtil(editor)
 
 			// Test shouldBeExact with both keys and precise
-			editor.inputs.setAltKey(true)
-			editor.inputs.setShiftKey(true)
+			editor.inputs.altKey = true
+			editor.inputs.shiftKey = true
 			expect(customUtil.options.shouldBeExact(editor, true)).toBe(true)
 
 			// Test shouldBeExact with both keys but not precise
-			editor.inputs.setAltKey(true)
-			editor.inputs.setShiftKey(true)
+			editor.inputs.altKey = true
+			editor.inputs.shiftKey = true
 			expect(customUtil.options.shouldBeExact(editor, false)).toBe(false)
 
 			// Test shouldBeExact with only one key
-			editor.inputs.setAltKey(true)
-			editor.inputs.setShiftKey(false)
+			editor.inputs.altKey = true
+			editor.inputs.shiftKey = false
 			expect(customUtil.options.shouldBeExact(editor, true)).toBe(false)
 
 			// Test shouldIgnoreTargets with any key
-			editor.inputs.setAltKey(false)
-			editor.inputs.setCtrlKey(false)
-			editor.inputs.setShiftKey(true)
+			editor.inputs.altKey = false
+			editor.inputs.ctrlKey = false
+			editor.inputs.shiftKey = true
 			expect(customUtil.options.shouldIgnoreTargets(editor)).toBe(true)
 
 			// Test shouldIgnoreTargets with no keys
-			editor.inputs.setAltKey(false)
-			editor.inputs.setCtrlKey(false)
-			editor.inputs.setShiftKey(false)
+			editor.inputs.altKey = false
+			editor.inputs.ctrlKey = false
+			editor.inputs.shiftKey = 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')
@@ -264,10 +315,10 @@ describe('ArrowShapeOptions', () => {
 
 			try {
 				editor.setCurrentTool('arrow')
-				editor.inputs.setCtrlKey(false) // Allow binding
+				editor.inputs.ctrlKey = false // Allow binding
 
 				// Set up fast pointer velocity to ensure precise remains false
-				editor.inputs.setPointerVelocity({ x: 2, y: 2, len: () => 2.8 } as any)
+				editor.inputs.pointerVelocity = { x: 2, y: 2, len: () => 2.8 } as any
 
 				const targetState = updateArrowTargetState({
 					editor,
@@ -301,5 +352,47 @@ 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.setPointerVelocity(new Vec(1, 1))
+		editor.inputs.pointerVelocity = 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.setPointerVelocity(new Vec(1, 1))
+		editor.inputs.pointerVelocity = 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.setPointerVelocity(new Vec(1, 1))
+		editor.inputs.pointerVelocity = new Vec(1, 1)
 
 		editor.pointerMove(375, 375)
 
@@ -283,7 +283,7 @@ describe('When pointing an end shape', () => {
 		})
 
 		// Build up some velocity
-		editor.inputs.setPointerVelocity(new Vec(1, 1))
+		editor.inputs.pointerVelocity = 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.setPointerVelocity(new Vec(1, 1))
+		editor.inputs.pointerVelocity = 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.setPointerVelocity(new Vec(0.001, 0.001))
+		editor.inputs.pointerVelocity = 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.setPointerVelocity(new Vec(1, 1))
+		editor.inputs.pointerVelocity = 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.setPointerVelocity(new Vec(1, 1))
+		editor.inputs.pointerVelocity = 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([
+		editor.updateShapes<TLArrowShape>([
 			{ 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([
+		editor.updateShapes<TLArrowShape>([
 			{ id: arrowId, type: 'arrow', props: { richText: toRichText('New Label') } },
 		])
 		expect(arrow(arrowId)).toMatchObject({

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

@@ -45,6 +45,7 @@ import {
 	useEditor,
 	useIsEditing,
 	useSharedSafeId,
+	useValue,
 } from '@tldraw/editor'
 import React, { useMemo } from 'react'
 import { updateArrowTerminal } from '../../bindings/arrow/ArrowBindingUtil'
@@ -55,7 +56,6 @@ 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,13 +117,9 @@ export class ArrowShapeUtil extends ShapeUtil<TLArrowShape> {
 
 		hoverPreciseTimeout: 600,
 		pointingPreciseTimeout: 320,
-		shouldBeExact(editor: Editor) {
-			return editor.inputs.getAltKey()
-		},
-		shouldIgnoreTargets(editor: Editor) {
-			return editor.inputs.getCtrlKey()
-		},
-		showTextOutline: true,
+
+		shouldBeExact: (editor: Editor) => editor.inputs.altKey,
+		shouldIgnoreTargets: (editor: Editor) => editor.inputs.ctrlKey,
 	}
 
 	override canEdit() {
@@ -273,7 +269,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.getEfficientZoomLevel()
+			const segmentLength = Vec.Dist(segmentStart, segmentEnd) * this.editor.getZoomLevel()
 
 			if (segmentLength > this.options.elbowMinSegmentLengthToShowMidpointHandle) {
 				handles.push({
@@ -373,8 +369,7 @@ 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.getEfficientZoomLevel()
+		const maxSnapDistance = this.options.elbowMidpointSnapDistance / this.editor.getZoomLevel()
 
 		// we snap to the midpoint of the range by default
 		const midPoint = perpDistanceToLineAngle(
@@ -799,7 +794,6 @@ 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)`,
 						}}
@@ -923,7 +917,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({
+			this.editor.updateShape<TLArrowShape>({
 				id: shape.id,
 				type: shape.type,
 				props: { labelPosition },
@@ -950,7 +944,7 @@ export class ArrowShapeUtil extends ShapeUtil<TLArrowShape> {
 						.box.clone()
 						.expandBy(-ARROW_LABEL_PADDING * shape.props.scale)}
 					padding={0}
-					showTextOutline={this.options.showTextOutline}
+					showTextOutline={true}
 				/>
 			</g>
 		)
@@ -1011,7 +1005,13 @@ const ArrowSvg = track(function ArrowSvg({
 	const editor = useEditor()
 	const theme = useDefaultColorTheme()
 	const info = getArrowInfo(editor, shape)
-	const isForceSolid = useEfficientZoomThreshold(shape.props.scale * 0.25)
+	const isForceSolid = useValue(
+		'force solid',
+		() => {
+			return editor.getZoomLevel() < 0.2
+		},
+		[editor]
+	)
 	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.getEfficientZoomLevel(),
+			strokeWidth: 2 / editor.getZoomLevel(),
 			props: {
 				className: 'tl-arrow-hint',
 				markerStart: bindings.start

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

@@ -95,8 +95,6 @@ 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(shape, 'arrow')) return false
+	if (!editor.isShapeOfType<TLArrowShape>(shape, 'arrow')) return false
 
-	const pointInShapeSpace = editor.getPointInShapeSpace(shape, editor.inputs.getCurrentPagePoint())
+	const pointInShapeSpace = editor.getPointInShapeSpace(shape, editor.inputs.currentPagePoint)
 	// 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.getPointerVelocity().len() < 0.5
+			precise = editor.inputs.pointerVelocity.len() < 0.5
 		}
 	}
 
@@ -377,7 +377,7 @@ export function updateArrowTargetState({
 	return result
 }
 
-const targetFilterFallback = { type: 'arrow' as const }
+const targetFilterFallback = { type: 'arrow' }
 
 /**
  * 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(shape, 'arrow')) return null
+				if (!shape || !editor.isShapeOfType<TLArrowShape>(shape, 'arrow')) return null
 				return shape.id
 			})
 
 			const unselectedArrowShapeIds = editor.store.query.ids('shape', () => {
 				const activeArrowShapeId = currentSelectedArrowShape.get()
-				if (!activeArrowShapeId) return { type: { eq: 'arrow' } } as const
+				if (!activeArrowShapeId) return { type: { eq: 'arrow' } }
 				return {
 					type: { eq: 'arrow' },
 					id: { neq: activeArrowShapeId },
-				} as const
+				}
 			})
 
 			return computed('elbow arrow snap lines', () => {

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

@@ -38,7 +38,7 @@ export function getBoundShapeInfoForTerminal(
 	terminalName: 'start' | 'end'
 ): BoundShapeInfo | undefined {
 	const binding = editor
-		.getBindingsFromShape(arrow, 'arrow')
+		.getBindingsFromShape<TLArrowBinding>(arrow, 'arrow')
 		.find((b) => b.props.terminal === terminalName)
 	if (!binding) return
 
@@ -105,7 +105,7 @@ export interface TLArrowBindings {
 const arrowBindingsCache = createComputedCache(
 	'arrow bindings',
 	(editor: Editor, arrow: TLArrowShape) => {
-		const bindings = editor.getBindingsFromShape(arrow.id, 'arrow')
+		const bindings = editor.getBindingsFromShape<TLArrowBinding>(arrow.id, 'arrow')
 		return {
 			start: bindings.find((b) => b.props.terminal === 'start'),
 			end: bindings.find((b) => b.props.terminal === 'end'),
@@ -223,7 +223,7 @@ export function createOrUpdateArrowBinding(
 	const targetId = typeof target === 'string' ? target : target.id
 
 	const existingMany = editor
-		.getBindingsFromShape(arrowId, 'arrow')
+		.getBindingsFromShape<TLArrowBinding>(arrowId, 'arrow')
 		.filter((b) => b.props.terminal === props.terminal)
 
 	// if we've somehow ended up with too many bindings, delete the extras
@@ -254,7 +254,7 @@ export function createOrUpdateArrowBinding(
  */
 export function removeArrowBinding(editor: Editor, arrow: TLArrowShape, terminal: 'start' | 'end') {
 	const existing = editor
-		.getBindingsFromShape(arrow, 'arrow')
+		.getBindingsFromShape<TLArrowBinding>(arrow, 'arrow')
 		.filter((b) => b.props.terminal === terminal)
 
 	editor.deleteBindings(existing)

package/src/lib/shapes/arrow/toolStates/Idle.tsx

@@ -1,5 +1,4 @@
 import { StateNode, TLKeyboardEventInfo, TLPointerEventInfo, TLShapeId } from '@tldraw/editor'
-import { startEditingShapeWithRichText } from '../../../tools/SelectTool/selectHelpers'
 import { ArrowShapeUtil } from '../ArrowShapeUtil'
 import { clearArrowTargetState, updateArrowTargetState } from '../arrowTargetState'
 
@@ -41,9 +40,20 @@ export class Idle extends StateNode {
 	override onKeyUp(info: TLKeyboardEventInfo) {
 		this.update()
 		if (info.key === 'Enter') {
+			if (this.editor.getIsReadonly()) return null
 			const onlySelectedShape = this.editor.getOnlySelectedShape()
-			if (this.editor.canEditShape(onlySelectedShape)) {
-				startEditingShapeWithRichText(this.editor, onlySelectedShape, { selectAll: true })
+			// If the only selected shape is editable, start editing it
+			if (
+				onlySelectedShape &&
+				this.editor.getShapeUtil(onlySelectedShape).canEdit(onlySelectedShape)
+			) {
+				this.editor.setCurrentTool('select')
+				this.editor.setEditingShape(onlySelectedShape.id)
+				this.editor.root.getCurrent()?.transition('editing_shape', {
+					...info,
+					target: 'shape',
+					shape: onlySelectedShape,
+				})
 			}
 		}
 	}
@@ -53,7 +63,7 @@ export class Idle extends StateNode {
 
 		const targetState = updateArrowTargetState({
 			editor: this.editor,
-			pointInPageSpace: this.editor.inputs.getCurrentPagePoint(),
+			pointInPageSpace: this.editor.inputs.currentPagePoint,
 			arrow: undefined,
 			isPrecise: this.isPrecise,
 			currentBinding: undefined,