tldraw 4.1.0-canary.bace23a29058 → 4.1.0-canary.c62140a07605

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

@@ -1,7 +1,7 @@
 import { HALF_PI, TLArrowShape, TLShapeId, createShapeId, toRichText } from '@tldraw/editor'
 import { vi } from 'vitest'
 import { TestEditor } from '../../../test/TestEditor'
-import { createOrUpdateArrowBinding, getArrowBindings } from './shared'
+import { createOrUpdateArrowBinding, getArrowBindings, getArrowInfo } from './shared'
 
 let editor: TestEditor
 
@@ -620,3 +620,213 @@ describe('Arrow export bounds', () => {
 		expect(arrow.props.richText).not.toBeNull()
 	})
 })
+
+describe('Arrow terminal positioning bug fix', () => {
+	const data = {
+		document: {
+			store: {
+				'shape:1Hm61DGAsY0uqEO-kt75l': {
+					x: 637.2890625,
+					y: 383.9296875,
+					rotation: 0,
+					isLocked: false,
+					opacity: 1,
+					meta: {},
+					id: 'shape:1Hm61DGAsY0uqEO-kt75l',
+					type: 'geo',
+					props: {
+						w: 230.66796875,
+						h: 114.796875,
+						geo: 'rectangle',
+						dash: 'draw',
+						growY: 0,
+						url: '',
+						scale: 1,
+						color: 'black',
+						labelColor: 'black',
+						fill: 'none',
+						size: 'm',
+						font: 'draw',
+						align: 'middle',
+						verticalAlign: 'middle',
+						richText: {
+							type: 'doc',
+							content: [
+								{
+									type: 'paragraph',
+								},
+							],
+						},
+					},
+					parentId: 'page:page',
+					index: 'a1',
+					typeName: 'shape',
+				},
+				'binding:nekxhMCGaoEJO98DEqWgo': {
+					meta: {},
+					id: 'binding:nekxhMCGaoEJO98DEqWgo',
+					type: 'arrow',
+					fromId: 'shape:j0HKQihjBXqMqgVhfRhDS',
+					toId: 'shape:1Hm61DGAsY0uqEO-kt75l',
+					props: {
+						isPrecise: true,
+						isExact: false,
+						normalizedAnchor: {
+							x: 0.13182672605036325,
+							y: 0.8036953858717844,
+						},
+						snap: 'none',
+						terminal: 'start',
+					},
+					typeName: 'binding',
+				},
+				'binding:kWamalL_QSq_kFPZDgp7Z': {
+					meta: {},
+					id: 'binding:kWamalL_QSq_kFPZDgp7Z',
+					type: 'arrow',
+					fromId: 'shape:j0HKQihjBXqMqgVhfRhDS',
+					toId: 'shape:1Hm61DGAsY0uqEO-kt75l',
+					props: {
+						isPrecise: true,
+						isExact: false,
+						normalizedAnchor: {
+							x: 0.7138744475114731,
+							y: 0.45797604464407243,
+						},
+						snap: 'none',
+						terminal: 'end',
+					},
+					typeName: 'binding',
+				},
+				'shape:j0HKQihjBXqMqgVhfRhDS': {
+					x: 665.296875,
+					y: 477.59765625,
+					rotation: 0,
+					isLocked: false,
+					opacity: 1,
+					meta: {},
+					id: 'shape:j0HKQihjBXqMqgVhfRhDS',
+					type: 'arrow',
+					props: {
+						kind: 'arc',
+						elbowMidPoint: 0.5,
+						dash: 'draw',
+						size: 'm',
+						fill: 'none',
+						color: 'black',
+						labelColor: 'black',
+						bend: 0,
+						start: {
+							x: 0,
+							y: 0,
+						},
+						end: {
+							x: 2,
+							y: 0,
+						},
+						arrowheadStart: 'none',
+						arrowheadEnd: 'arrow',
+						richText: {
+							type: 'doc',
+							content: [
+								{
+									type: 'paragraph',
+								},
+							],
+						},
+						labelPosition: 0.5,
+						font: 'draw',
+						scale: 1,
+					},
+					parentId: 'page:page',
+					index: 'a2lbpzZG',
+					typeName: 'shape',
+				},
+				'page:page': {
+					meta: {},
+					id: 'page:page',
+					name: 'Page 1',
+					index: 'a1',
+					typeName: 'page',
+				},
+				'document:document': {
+					gridSize: 10,
+					name: '',
+					meta: {},
+					id: 'document:document',
+					typeName: 'document',
+				},
+			},
+			schema: {
+				schemaVersion: 2,
+				sequences: {
+					'com.tldraw.store': 5,
+					'com.tldraw.asset': 1,
+					'com.tldraw.camera': 1,
+					'com.tldraw.document': 2,
+					'com.tldraw.instance': 25,
+					'com.tldraw.instance_page_state': 5,
+					'com.tldraw.page': 1,
+					'com.tldraw.instance_presence': 6,
+					'com.tldraw.pointer': 1,
+					'com.tldraw.shape': 4,
+					'com.tldraw.asset.bookmark': 2,
+					'com.tldraw.asset.image': 5,
+					'com.tldraw.asset.video': 5,
+					'com.tldraw.shape.group': 0,
+					'com.tldraw.shape.text': 3,
+					'com.tldraw.shape.bookmark': 2,
+					'com.tldraw.shape.draw': 2,
+					'com.tldraw.shape.geo': 10,
+					'com.tldraw.shape.note': 9,
+					'com.tldraw.shape.line': 5,
+					'com.tldraw.shape.frame': 1,
+					'com.tldraw.shape.arrow': 7,
+					'com.tldraw.shape.highlight': 1,
+					'com.tldraw.shape.embed': 4,
+					'com.tldraw.shape.image': 5,
+					'com.tldraw.shape.video': 4,
+					'com.tldraw.binding.arrow': 1,
+				},
+			},
+		},
+		session: {
+			version: 0,
+			currentPageId: 'page:page',
+			exportBackground: true,
+			isFocusMode: false,
+			isDebugMode: false,
+			isToolLocked: false,
+			isGridMode: false,
+			pageStates: [
+				{
+					pageId: 'page:page',
+					camera: {
+						x: 0,
+						y: 0,
+						z: 1,
+					},
+					selectedShapeIds: ['shape:j0HKQihjBXqMqgVhfRhDS'],
+					focusedGroupId: null,
+				},
+			],
+		},
+	}
+
+	it('should position straight arrow terminals on shape boundary, not text label boundary', () => {
+		// Create a geo shape with text label
+		editor.loadSnapshot(data as any)
+
+		const arrow = editor.getShape('shape:j0HKQihjBXqMqgVhfRhDS' as TLShapeId) as TLArrowShape
+		expect(arrow).toBeDefined()
+
+		expect(getArrowBindings(editor, arrow)).toMatchObject({
+			end: { props: { isPrecise: true } },
+			start: { props: { isPrecise: true } },
+		})
+
+		const info = getArrowInfo(editor, arrow)
+		expect(info?.start.handle).toEqual(info?.start.point)
+		expect(info?.end.handle).toEqual(info?.end.point)
+	})
+})

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

@@ -154,7 +154,10 @@ export function getCurvedArrowInfo(
 		}
 		if (!point) {
 			if (isClosed) {
-				const nearestPoint = startShapeInfo.geometry.nearestPoint(startInStartShapeLocalSpace)
+				const nearestPoint = startShapeInfo.geometry.nearestPoint(startInStartShapeLocalSpace, {
+					includeInternal: false,
+					includeLabels: false,
+				})
 				if (Vec.DistMin(nearestPoint, startInStartShapeLocalSpace, 1)) {
 					point = nearestPoint
 				}
@@ -233,7 +236,10 @@ export function getCurvedArrowInfo(
 		}
 		if (!point) {
 			if (isClosed) {
-				const nearestPoint = endShapeInfo.geometry.nearestPoint(endInEndShapeLocalSpace)
+				const nearestPoint = endShapeInfo.geometry.nearestPoint(endInEndShapeLocalSpace, {
+					includeInternal: false,
+					includeLabels: false,
+				})
 				if (Vec.DistMin(nearestPoint, endInEndShapeLocalSpace, 1)) {
 					point = nearestPoint
 				}

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

@@ -248,7 +248,11 @@ function updateArrowheadPointWithBoundShape(
 	if (targetInt === undefined) {
 		// No intersection? The arrowhead point will be at the arrow terminal.
 		// if we _almost_ hit the target, just put the arrowhead at the target.
-		targetInt = targetShapeInfo.geometry.nearestPoint(targetTo)
+		targetInt = targetShapeInfo.geometry.nearestPoint(targetTo, {
+			includeLabels: false,
+			includeInternal: false,
+		})
+
 		if (!Vec.DistMin(targetInt, targetTo, 1)) {
 			return
 		}

package/src/lib/shapes/shared/RichTextLabel.tsx

@@ -109,7 +109,7 @@ export const RichTextLabel = React.memo(function RichTextLabel({
 			// We don't get the mouseup event later because we preventDefault
 			// so we have to do it manually.
 			const handlePointerUp = (e: TLEventInfo) => {
-				if (e.name !== 'pointer_up') return
+				if (e.name !== 'pointer_up' || !link) return
 
 				if (!isDragging.current) {
 					window.open(link, '_blank', 'noopener, noreferrer')

package/src/lib/shapes/text/TextShapeTool.test.ts

@@ -86,6 +86,80 @@ describe('When in idle state', () => {
 		editor.cancel()
 		editor.expectToBeIn('select.idle')
 	})
+
+	it('starts editing selected text shape on Enter key', () => {
+		// Create a text shape using the same method as other tests
+		expect(editor.getCurrentPageShapes().length).toBe(0)
+		editor.setCurrentTool('text')
+		editor.pointerDown(0, 0)
+		editor.pointerUp()
+		editor.expectToBeIn('select.editing_shape')
+
+		// Update the text shape with some content
+		editor.updateShapes<TLTextShape>([
+			{
+				...editor.getCurrentPageShapes()[0]!,
+				type: 'text',
+				props: { richText: toRichText('Hello') },
+			},
+		])
+
+		// Exit editing mode
+		editor.cancel()
+		editor.expectToBeIn('select.idle')
+
+		// Verify the text shape exists and is selected
+		expect(editor.getCurrentPageShapes().length).toBe(1)
+		const textShape = editor.getCurrentPageShapes()[0]
+		expect(textShape.type).toBe('text')
+		editor.setSelectedShapes([textShape])
+
+		// Switch to text tool and press Enter
+		editor.setCurrentTool('text')
+		editor.expectToBeIn('text.idle')
+		editor.keyDown('Enter')
+
+		// Should transition to editing the selected text shape
+		editor.expectToBeIn('select.editing_shape')
+		expect(editor.getEditingShapeId()).toBe(textShape.id)
+	})
+
+	it('starts editing selected text shape on numpad Enter key', () => {
+		// Create a text shape using the same method as other tests
+		expect(editor.getCurrentPageShapes().length).toBe(0)
+		editor.setCurrentTool('text')
+		editor.pointerDown(0, 0)
+		editor.pointerUp()
+		editor.expectToBeIn('select.editing_shape')
+
+		// Update the text shape with some content
+		editor.updateShapes<TLTextShape>([
+			{
+				...editor.getCurrentPageShapes()[0]!,
+				type: 'text',
+				props: { richText: toRichText('Hello') },
+			},
+		])
+
+		// Exit editing mode
+		editor.cancel()
+		editor.expectToBeIn('select.idle')
+
+		// Verify the text shape exists and is selected
+		expect(editor.getCurrentPageShapes().length).toBe(1)
+		const textShape = editor.getCurrentPageShapes()[0]
+		expect(textShape.type).toBe('text')
+		editor.setSelectedShapes([textShape])
+
+		// Switch to text tool and press numpad Enter
+		editor.setCurrentTool('text')
+		editor.expectToBeIn('text.idle')
+		editor.keyDown('Enter', { code: 'NumpadEnter' })
+
+		// Should transition to editing the selected text shape
+		editor.expectToBeIn('select.editing_shape')
+		expect(editor.getEditingShapeId()).toBe(textShape.id)
+	})
 })
 
 describe('When in the pointing state', () => {

package/src/lib/tools/SelectTool/childStates/Crop/children/Idle.ts

@@ -143,7 +143,7 @@ export class Idle extends StateNode {
 	}
 
 	override onKeyUp(info: TLKeyboardEventInfo) {
-		switch (info.code) {
+		switch (info.key) {
 			case 'Enter': {
 				this.editor.setCroppingShape(null)
 				this.editor.setCurrentTool('select.idle', {})

package/src/lib/tools/SelectTool/childStates/Idle.ts

@@ -516,7 +516,7 @@ export class Idle extends StateNode {
 	}
 
 	override onKeyUp(info: TLKeyboardEventInfo) {
-		switch (info.code) {
+		switch (info.key) {
 			case 'Enter': {
 				// Because Enter onKeyDown can happen outside the canvas (but then focus the canvas potentially),
 				// we need to check if the canvas was initially selecting something before continuing.

package/src/lib/ui/components/KeyboardShortcutsDialog/DefaultKeyboardShortcutsDialogContent.tsx

@@ -165,7 +165,7 @@ export function DefaultKeyboardShortcutsDialogContent() {
 				<TldrawUiMenuItem
 					id="a11y-select-next-shape-container"
 					label="a11y.enter-leave-container"
-					kbd="cmd+shift+[[↑→]]"
+					kbd="cmd+shift+[[↑↓]]"
 					onSelect={() => {
 						/* do nothing */
 					}}

package/src/lib/ui/components/MainMenu/DefaultMainMenuContent.tsx

@@ -165,13 +165,9 @@ export function PreferencesGroup() {
 					<TogglePasteAtCursorItem />
 					<ToggleDebugModeItem />
 				</TldrawUiMenuGroup>
-				<TldrawUiMenuGroup id="input-mode">
+				<TldrawUiMenuGroup id="user-interface-submenus">
 					<InputModeMenu />
-				</TldrawUiMenuGroup>
-				<TldrawUiMenuGroup id="color-scheme">
 					<ColorSchemeMenu />
-				</TldrawUiMenuGroup>
-				<TldrawUiMenuGroup id="accessibility-menu">
 					<AccessibilityMenu />
 				</TldrawUiMenuGroup>
 			</TldrawUiMenuSubmenu>

package/src/lib/ui/context/actions.tsx

@@ -1344,6 +1344,28 @@ export function ActionsProvider({ overrides, children }: ActionsProviderProps) {
 					}
 				},
 			},
+			{
+				id: 'toggle-focus-mode',
+				label: {
+					default: 'action.toggle-focus-mode',
+					menu: 'action.toggle-focus-mode.menu',
+				},
+				readonlyOk: true,
+				kbd: 'cmd+.,ctrl+.',
+				checkbox: true,
+				onSelect(source) {
+					// this needs to be deferred because it causes the menu
+					// UI to unmount which puts us in a dodgy state
+					editor.timers.requestAnimationFrame(() => {
+						editor.run(() => {
+							trackEvent('toggle-focus-mode', { source })
+							helpers.clearDialogs()
+							helpers.clearToasts()
+							editor.updateInstanceState({ isFocusMode: !editor.getInstanceState().isFocusMode })
+						})
+					})
+				},
+			},
 			{
 				id: 'toggle-grid',
 				label: {

package/src/lib/ui/version.ts

@@ -1,9 +1,9 @@
 // This file is automatically generated by internal/scripts/refresh-assets.ts.
 // Do not edit manually. Or do, I'm a comment, not a cop.
 
-export const version = '4.1.0-canary.bace23a29058'
+export const version = '4.1.0-canary.c62140a07605'
 export const publishDates = {
 	major: '2025-09-18T14:39:22.803Z',
-	minor: '2025-09-18T15:06:06.255Z',
-	patch: '2025-09-18T15:06:06.255Z',
+	minor: '2025-10-01T10:03:29.121Z',
+	patch: '2025-10-01T10:03:29.121Z',
 }