tldraw 4.1.0-canary.d716f21afebb → 4.1.0-canary.d89f813fd441

package/src/lib/ui/components/menu-items.tsx

@@ -482,11 +482,11 @@ export function MoveToPageMenu() {
 
 							if (toPage) {
 								addToast({
-									title: 'Changed Page',
+									title: 'Changed page',
 									description: `Moved to ${toPage.name}.`,
 									actions: [
 										{
-											label: 'Go Back',
+											label: 'Go back',
 											type: 'primary',
 											onClick: () => {
 												editor.markHistoryStoppingPoint('change-page')

package/src/lib/ui/hooks/useEditorEvents.ts

@@ -10,7 +10,7 @@ export function useEditorEvents() {
 	useEffect(() => {
 		function handleMaxShapes({ name, count }: { name: string; pageId: string; count: number }) {
 			addToast({
-				title: 'Maximum Shapes Reached',
+				title: 'Maximum shapes reached',
 				description: `You've reached the maximum number of shapes allowed on ${name} (${count}). Please delete some shapes or move to a different page to continue.`,
 				severity: 'warning',
 			})

package/src/lib/ui/hooks/useTranslation/defaultTranslation.ts

@@ -8,8 +8,8 @@ export const DEFAULT_TRANSLATION = {
 	'action.toggle-auto-none': 'Auto',
 	'action.toggle-mouse': 'Mouse',
 	'action.toggle-trackpad': 'Trackpad',
-	'action.convert-to-bookmark': 'Convert to Bookmark',
-	'action.convert-to-embed': 'Convert to Embed',
+	'action.convert-to-bookmark': 'Convert to bookmark',
+	'action.convert-to-embed': 'Convert to embed',
 	'action.open-embed-link': 'Open link',
 	'action.align-bottom': 'Align bottom',
 	'action.align-center-horizontal': 'Align horizontally',
@@ -94,7 +94,7 @@ export const DEFAULT_TRANSLATION = {
 	'action.toggle-paste-at-cursor.menu': 'Paste at cursor',
 	'action.toggle-paste-at-cursor': 'Toggle paste at cursor',
 	'action.toggle-wrap-mode.menu': 'Select on wrap',
-	'action.toggle-wrap-mode': 'Toggle Select on wrap',
+	'action.toggle-wrap-mode': 'Toggle select on wrap',
 	'action.toggle-reduce-motion.menu': 'Reduce motion',
 	'action.toggle-reduce-motion': 'Toggle reduce motion',
 	'action.toggle-keyboard-shortcuts.menu': 'Enable keyboard shortcuts',
@@ -364,7 +364,7 @@ export const DEFAULT_TRANSLATION = {
 	'people-menu.change-color': 'Change color',
 	'people-menu.follow': 'Following',
 	'people-menu.following': 'Following',
-	'people-menu.leading': 'Following You',
+	'people-menu.leading': 'Following you',
 	'people-menu.user': '(You)',
 	'people-menu.invite': 'Invite others',
 	'people-menu.anonymous-user': 'New user',

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.d716f21afebb'
+export const version = '4.1.0-canary.d89f813fd441'
 export const publishDates = {
 	major: '2025-09-18T14:39:22.803Z',
-	minor: '2025-10-14T08:44:03.625Z',
-	patch: '2025-10-14T08:44:03.625Z',
+	minor: '2025-10-15T10:22:57.952Z',
+	patch: '2025-10-15T10:22:57.952Z',
 }

package/src/test/SelectTool.test.ts

@@ -648,3 +648,254 @@ test('right clicking a shape inside of a group does not focus the group if the g
 	editor.pointerUp(100, 100, { target: 'shape', button: 0, shape: editor.getShape(boxAId)! })
 	expect(editor.getFocusedGroupId()).toBe(groupId)
 })
+
+describe('when passing a function to onInteractionEnd', () => {
+	it('calls the function for cropping', () => {
+		const id = createShapeId('image')
+		editor.createShapes([
+			{
+				id,
+				type: 'image',
+				x: 100,
+				y: 100,
+				props: {
+					w: 1200,
+					h: 800,
+				},
+			},
+		])
+
+		editor.select(id)
+
+		const fn = vi.fn()
+		editor.setCurrentTool('select.cropping', {
+			handle: 'bottom_right',
+			onInteractionEnd: fn,
+		})
+		editor.pointerUp(50, 50)
+
+		expect(fn).toHaveBeenCalled()
+	})
+
+	it('calls the function for pointing crop handle', () => {
+		const fn = vi.fn()
+		editor.setCurrentTool('select.crop.pointing_crop_handle', {
+			onInteractionEnd: fn,
+		})
+		editor.pointerUp(50, 50)
+		expect(fn).toHaveBeenCalled()
+	})
+
+	it('calls the function for pointing arrow label', () => {
+		const fn = vi.fn()
+		const id = createShapeId('arrow')
+
+		const arrow = {
+			id,
+			type: 'arrow' as const,
+			x: 100,
+			y: 100,
+			props: {
+				richText: toRichText('Test Label'),
+				start: { x: 0, y: 0 },
+				end: { x: 100, y: 0 },
+			},
+		}
+
+		editor.createShapes<TLArrowShape>([arrow])
+
+		editor.setCurrentTool('select.pointing_arrow_label', {
+			shape: arrow,
+			onInteractionEnd: fn,
+		})
+		editor.pointerUp(50, 50)
+		expect(fn).toHaveBeenCalled()
+	})
+
+	it('calls the function for pointing a resize handle', () => {
+		const fn = vi.fn()
+		editor.setCurrentTool('select.pointing_resize_handle', {
+			target: 'selection',
+			handle: 'bottom_right',
+			onInteractionEnd: fn,
+		})
+		editor.pointerUp(50, 50)
+		expect(fn).toHaveBeenCalled()
+	})
+
+	it('calls the function for pointing a rotate handle', () => {
+		const fn = vi.fn()
+		editor.setCurrentTool('select.pointing_rotate_handle', {
+			target: 'selection',
+			handle: 'bottom_right_rotate',
+			onInteractionEnd: fn,
+		})
+		editor.pointerUp(50, 50)
+		expect(fn).toHaveBeenCalled()
+	})
+
+	it('calls the function for resizing', () => {
+		const id = createShapeId('box')
+		editor.createShapes([
+			{
+				id,
+				type: 'geo',
+				x: 100,
+				y: 100,
+			},
+		])
+
+		editor.select(id)
+
+		const fn = vi.fn()
+		editor.setCurrentTool('select.resizing', {
+			target: 'selection',
+			handle: 'bottom_right',
+			onInteractionEnd: fn,
+		})
+		editor.pointerUp(50, 50)
+		expect(fn).toHaveBeenCalled()
+	})
+
+	it('calls the function for translating', () => {
+		const id = createShapeId('box')
+		editor.createShapes([
+			{
+				id,
+				type: 'geo',
+				x: 100,
+				y: 100,
+			},
+		])
+		editor.select(id)
+
+		const fn = vi.fn()
+		editor.setCurrentTool('select.translating', {
+			onInteractionEnd: fn,
+		})
+		editor.pointerUp(50, 50)
+		expect(fn).toHaveBeenCalled()
+	})
+})
+
+describe('when passing a string to onInteractionEnd', () => {
+	it('transitions to the tool for cropping', () => {
+		const id = createShapeId('image')
+		editor.createShapes([
+			{
+				id,
+				type: 'image',
+				x: 100,
+				y: 100,
+				props: {
+					w: 1200,
+					h: 800,
+				},
+			},
+		])
+
+		editor.select(id)
+
+		editor.setCurrentTool('select.cropping', {
+			handle: 'bottom_right',
+			onInteractionEnd: 'select.idle',
+		})
+		editor.pointerUp(50, 50)
+
+		editor.expectToBeIn('select.idle')
+	})
+
+	it('transitions to the tool for pointing crop handle', () => {
+		editor.setCurrentTool('select.crop.pointing_crop_handle', {
+			onInteractionEnd: 'select.idle',
+		})
+		editor.pointerUp(50, 50)
+		editor.expectToBeIn('select.idle')
+	})
+
+	it('transitions to the tool for pointing arrow label', () => {
+		const id = createShapeId('arrow')
+
+		const arrow = {
+			id,
+			type: 'arrow' as const,
+			x: 100,
+			y: 100,
+			props: {
+				richText: toRichText('Test Label'),
+				start: { x: 0, y: 0 },
+				end: { x: 100, y: 0 },
+			},
+		}
+
+		editor.createShapes<TLArrowShape>([arrow])
+
+		editor.setCurrentTool('select.pointing_arrow_label', {
+			shape: arrow,
+			onInteractionEnd: 'select.idle',
+		})
+		editor.pointerUp(50, 50)
+		editor.expectToBeIn('select.idle')
+	})
+
+	it('transitions to the tool for pointing a resize handle', () => {
+		editor.setCurrentTool('select.pointing_resize_handle', {
+			target: 'selection',
+			handle: 'bottom_right',
+			onInteractionEnd: 'select.idle',
+		})
+		editor.pointerUp(50, 50)
+		editor.expectToBeIn('select.idle')
+	})
+
+	it('transitions to the tool for pointing a rotate handle', () => {
+		editor.setCurrentTool('select.pointing_rotate_handle', {
+			target: 'selection',
+			handle: 'bottom_right_rotate',
+			onInteractionEnd: 'select.idle',
+		})
+		editor.pointerUp(50, 50)
+		editor.expectToBeIn('select.idle')
+	})
+
+	it('transitions to the tool for resizing', () => {
+		const id = createShapeId('box')
+		editor.createShapes([
+			{
+				id,
+				type: 'geo',
+				x: 100,
+				y: 100,
+			},
+		])
+
+		editor.select(id)
+
+		editor.setCurrentTool('select.resizing', {
+			target: 'selection',
+			handle: 'bottom_right',
+			onInteractionEnd: 'select.idle',
+		})
+		editor.pointerUp(50, 50)
+		editor.expectToBeIn('select.idle')
+	})
+
+	it('transitions to the tool for translating', () => {
+		const id = createShapeId('box')
+		editor.createShapes([
+			{
+				id,
+				type: 'geo',
+				x: 100,
+				y: 100,
+			},
+		])
+		editor.select(id)
+
+		editor.setCurrentTool('select.translating', {
+			onInteractionEnd: 'select.idle',
+		})
+		editor.pointerUp(50, 50)
+		editor.expectToBeIn('select.idle')
+	})
+})