tldraw 3.16.0-canary.fa3749606e52 → 3.16.0-next.34fddf633325

package/src/lib/ui/hooks/useTools.tsx

@@ -1,13 +1,4 @@
-import {
-	assertExists,
-	createShapeId,
-	Editor,
-	GeoShapeGeoStyle,
-	TLPointerEventInfo,
-	TLShapeId,
-	toRichText,
-	useMaybeEditor,
-} from '@tldraw/editor'
+import { Editor, GeoShapeGeoStyle, useMaybeEditor } from '@tldraw/editor'
 import * as React from 'react'
 import { EmbedDialog } from '../components/EmbedDialog'
 import { TLUiIconJsx } from '../components/primitives/TldrawUiIcon'
@@ -28,7 +19,6 @@ export interface TLUiToolItem<
 	shortcutsLabel?: TranslationKey
 	icon: IconType | TLUiIconJsx
 	onSelect(source: TLUiEventSource): void
-	onDragStart?(source: TLUiEventSource, info: TLPointerEventInfo): void
 	/**
 	 * The keyboard shortcut for this tool. This is a string that can be a single key,
 	 * or a combination of keys.
@@ -136,27 +126,21 @@ export function ToolsProvider({ overrides, children }: TLUiToolsProviderProps) {
 					onToolSelect(source, this)
 				},
 			},
-			...[...GeoShapeGeoStyle.values].map((geo) => ({
-				id: geo,
-				label: `tool.${geo}` as TLUiTranslationKey,
+			...[...GeoShapeGeoStyle.values].map((id) => ({
+				id,
+				label: `tool.${id}` as TLUiTranslationKey,
 				meta: {
-					geo,
+					geo: id,
 				},
-				kbd: geo === 'rectangle' ? 'r' : geo === 'ellipse' ? 'o' : undefined,
-				icon: ('geo-' + geo) as TLUiIconType,
+				kbd: id === 'rectangle' ? 'r' : id === 'ellipse' ? 'o' : undefined,
+				icon: ('geo-' + id) as TLUiIconType,
 				onSelect(source: TLUiEventSource) {
 					editor.run(() => {
-						editor.setStyleForNextShapes(GeoShapeGeoStyle, geo)
+						editor.setStyleForNextShapes(GeoShapeGeoStyle, id)
 						editor.setCurrentTool('geo')
-						onToolSelect(source, this, `geo-${geo}`)
+						onToolSelect(source, this, `geo-${id}`)
 					})
 				},
-				onDragStart(source: TLUiEventSource, info: TLPointerEventInfo) {
-					onDragFromToolbarToCreateShape(editor, info, {
-						createShape: (id) => editor.createShape({ id, type: 'geo', props: { geo } }),
-					})
-					trackEvent('drag-tool', { source, id: 'geo' })
-				},
 			})),
 			{
 				id: 'arrow',
@@ -167,17 +151,6 @@ export function ToolsProvider({ overrides, children }: TLUiToolsProviderProps) {
 					editor.setCurrentTool('arrow')
 					onToolSelect(source, this)
 				},
-				onDragStart(source: TLUiEventSource, info: TLPointerEventInfo) {
-					onDragFromToolbarToCreateShape(editor, info, {
-						createShape: (id) =>
-							editor.createShape({
-								id,
-								type: 'arrow',
-								props: { start: { x: 0, y: 0 }, end: { x: 200, y: 0 } },
-							}),
-					})
-					trackEvent('drag-tool', { source, id: 'arrow' })
-				},
 			},
 			{
 				id: 'line',
@@ -198,12 +171,6 @@ export function ToolsProvider({ overrides, children }: TLUiToolsProviderProps) {
 					editor.setCurrentTool('frame')
 					onToolSelect(source, this)
 				},
-				onDragStart(source, info) {
-					onDragFromToolbarToCreateShape(editor, info, {
-						createShape: (id) => editor.createShape({ id, type: 'frame' }),
-					})
-					trackEvent('drag-tool', { source, id: 'frame' })
-				},
 			},
 			{
 				id: 'text',
@@ -214,17 +181,6 @@ export function ToolsProvider({ overrides, children }: TLUiToolsProviderProps) {
 					editor.setCurrentTool('text')
 					onToolSelect(source, this)
 				},
-				onDragStart(source, info) {
-					onDragFromToolbarToCreateShape(editor, info, {
-						createShape: (id) =>
-							editor.createShape({ id, type: 'text', props: { richText: toRichText('Text') } }),
-						onDragEnd: (id) => {
-							editor.emit('select-all-text', { shapeId: id })
-							editor.setEditingShape(id)
-						},
-					})
-					trackEvent('drag-tool', { source, id: 'text' })
-				},
 			},
 			{
 				id: 'asset',
@@ -245,16 +201,6 @@ export function ToolsProvider({ overrides, children }: TLUiToolsProviderProps) {
 					editor.setCurrentTool('note')
 					onToolSelect(source, this)
 				},
-				onDragStart(source, info) {
-					onDragFromToolbarToCreateShape(editor, info, {
-						createShape: (id) => editor.createShape({ id, type: 'note' }),
-						onDragEnd: (id) => {
-							editor.emit('select-all-text', { shapeId: id })
-							editor.setEditingShape(id)
-						},
-					})
-					trackEvent('drag-tool', { source, id: 'note' })
-				},
 			},
 			{
 				id: 'laser',
@@ -298,7 +244,7 @@ export function ToolsProvider({ overrides, children }: TLUiToolsProviderProps) {
 		}
 
 		return tools
-	}, [overrides, editor, helpers, onToolSelect, trackEvent])
+	}, [overrides, editor, helpers, onToolSelect])
 
 	return <ToolsContext.Provider value={tools}>{children}</ToolsContext.Provider>
 }
@@ -313,57 +259,3 @@ export function useTools() {
 
 	return ctx
 }
-
-/**
- * Options for {@link onDragFromToolbarToCreateShape}.
- * @public
- */
-export interface OnDragFromToolbarToCreateShapesOpts {
-	/**
-	 * Create the shape being dragged. You don't need to worry about positioning it, as it'll be
-	 * immediately updated with the correct position.
-	 */
-	createShape(id: TLShapeId): void
-	/**
-	 * Called once the drag interaction has finished.
-	 */
-	onDragEnd?(id: TLShapeId): void
-}
-
-/**
- * A helper method to use in {@link TLUiToolItem#onDragStart} to create a shape by dragging it from
- * the toolbar.
- * @public
- */
-export function onDragFromToolbarToCreateShape(
-	editor: Editor,
-	info: TLPointerEventInfo,
-	opts: OnDragFromToolbarToCreateShapesOpts
-) {
-	const { x, y } = editor.inputs.currentPagePoint
-
-	const stoppingPoint = editor.markHistoryStoppingPoint('drag shape tool')
-	editor.setCurrentTool('select.translating')
-
-	const id = createShapeId()
-	opts.createShape(id)
-	const shape = assertExists(editor.getShape(id), 'Shape not found')
-
-	const { w, h } = editor.getShapePageBounds(id)!
-	editor.updateShape({ id, type: shape.type, x: x - w / 2, y: y - h / 2 })
-	editor.select(id)
-
-	editor.setCurrentTool('select.translating', {
-		...info,
-		target: 'shape',
-		shape: editor.getShape(id),
-		isCreating: true,
-		creatingMarkId: stoppingPoint,
-		onCreate() {
-			editor.setCurrentTool('select.idle')
-			editor.select(id)
-			opts.onDragEnd?.(id)
-		},
-	})
-	editor.getCurrentTool().setCurrentToolIdMask(shape.type)
-}

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

@@ -93,6 +93,8 @@ export type TLUiTranslationKey =
 	| 'action.toggle-reduce-motion'
 	| 'action.toggle-keyboard-shortcuts.menu'
 	| 'action.toggle-keyboard-shortcuts'
+	| 'action.toggle-ui-labels.menu'
+	| 'action.toggle-ui-labels'
 	| 'action.toggle-edge-scrolling.menu'
 	| 'action.toggle-edge-scrolling'
 	| 'action.toggle-debug-mode.menu'
@@ -298,6 +300,7 @@ export type TLUiTranslationKey =
 	| 'a11y.open-keyboard-shortcuts'
 	| 'menu.title'
 	| 'menu.theme'
+	| 'menu.accessibility'
 	| 'menu.copy-as'
 	| 'menu.edit'
 	| 'menu.export-as'

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

@@ -94,6 +94,8 @@ export const DEFAULT_TRANSLATION = {
 	'action.toggle-reduce-motion': 'Toggle reduce motion',
 	'action.toggle-keyboard-shortcuts.menu': 'Keyboard shortcuts',
 	'action.toggle-keyboard-shortcuts': 'Toggle keyboard shortcuts',
+	'action.toggle-ui-labels.menu': 'UI labels',
+	'action.toggle-ui-labels': 'Toggle UI labels',
 	'action.toggle-edge-scrolling.menu': 'Edge scrolling',
 	'action.toggle-edge-scrolling': 'Toggle edge scrolling',
 	'action.toggle-debug-mode.menu': 'Debug mode',
@@ -299,6 +301,7 @@ export const DEFAULT_TRANSLATION = {
 	'a11y.open-keyboard-shortcuts': 'Open keyboard shortcuts',
 	'menu.title': 'Menu',
 	'menu.theme': 'Theme',
+	'menu.accessibility': 'Accessibility',
 	'menu.copy-as': 'Copy as',
 	'menu.edit': 'Edit',
 	'menu.export-as': 'Export as',

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 = '3.16.0-canary.fa3749606e52'
+export const version = '3.16.0-next.34fddf633325'
 export const publishDates = {
 	major: '2024-09-13T14:36:29.063Z',
-	minor: '2025-08-01T14:30:58.099Z',
-	patch: '2025-08-01T14:30:58.099Z',
+	minor: '2025-08-06T14:20:08.115Z',
+	patch: '2025-08-06T14:20:08.115Z',
 }

package/src/lib/ui.css

@@ -97,7 +97,7 @@
 	opacity: 1;
 }
 
-.tlui-button[aria-expanded='true'][data-direction='left']::after {
+.tlui-button[aria-expanded='true'][data-direction='left'] {
 	background: linear-gradient(270deg, rgba(144, 144, 144, 0) 0%, var(--color-muted-2) 100%);
 	opacity: 1;
 }
@@ -1000,6 +1000,12 @@
 	max-width: 148px;
 }
 
+.tlui-style-panel[data-show-ui-labels='true'] .tlui-button[data-isactive='true'] {
+	border-radius: 10px;
+	outline: 2px solid var(--color-text);
+	outline-offset: -5px;
+}
+
 .tlui-style-panel::-webkit-scrollbar {
 	display: none;
 }
@@ -1064,6 +1070,26 @@
 	}
 }
 
+/* Accessibility subheadings */
+
+.tlui-style-panel__section .tlui-style-panel__subheading,
+.tlui-style-panel__section__common .tlui-style-panel__subheading,
+.tlui-style-panel__subheading + .tlui-slider__container {
+	margin: 0;
+	padding: var(--space-2) var(--space-3) 0px var(--space-4);
+	font-size: 12px;
+	font-weight: inherit;
+	line-height: inherit;
+}
+
+.tlui-style-panel .tlui-style-panel__subheading:nth-of-type(1) {
+	padding-top: var(--space-3);
+}
+
+.tlui-style-panel__subheading + .tlui-slider__container {
+	padding-top: 0px;
+}
+
 /* --------------------- Bottom --------------------- */
 
 .tlui-layout__bottom {
@@ -1222,6 +1248,36 @@
 	transition: transform 0.15s ease-out 0.05s;
 }
 
+/* ------------------- Tooltip -------------------- */
+
+.tlui-tooltip {
+	font-size: 12px;
+	padding: 2px 8px;
+	border-radius: 4px;
+	background-color: var(--color-tooltip);
+	box-shadow: none;
+	color: var(--color-text-shadow);
+	max-width: 400px;
+	width: fit-content;
+	text-align: center;
+	pointer-events: none;
+	will-change: transform, opacity;
+	z-index: 2;
+}
+
+.tlui-tooltip__arrow {
+	fill: var(--color-tooltip);
+	will-change: opacity;
+}
+
+[data-radix-popper-content-wrapper]:has(.tlui-tooltip) {
+	z-index: var(--layer-toasts) !important;
+}
+
+[data-radix-popper-content-wrapper]:has(.tlui-tooltip[data-should-animate='true']) {
+	transition: all 0.1s ease-out;
+}
+
 /* ------------------- Debug panel ------------------ */
 
 .tlui-debug-panel {

package/src/test/arrows-megabus.test.tsx

@@ -288,11 +288,13 @@ describe('When shapes are overlapping', () => {
 		editor.pointerDown(0, 50) // over nothing
 		editor.pointerMove(125, 50) // over box1 only
 		expect(bindings().end).toMatchObject({ toId: ids.box1 })
-		editor.pointerMove(175, 50) // box2 is higher but box1 is filled?
+		editor.pointerMove(175, 50) // box2 is higher but box1 is filled, but we're on the edge ofd box 2
+		expect(bindings().end).toMatchObject({ toId: ids.box2 })
+		editor.pointerMove(175, 70) // box2 is higher but box1 is filled, and we're inside of box2
 		expect(bindings().end).toMatchObject({ toId: ids.box1 })
-		editor.pointerMove(225, 50) // box3 is higher
+		editor.pointerMove(225, 70) // box3 is higher
 		expect(bindings().end).toMatchObject({ toId: ids.box3 })
-		editor.pointerMove(275, 50) // box4 is higher but box 3 is filled
+		editor.pointerMove(275, 70) // box4 is higher but box 3 is filled
 		expect(bindings().end).toMatchObject({ toId: ids.box3 })
 	})
 
@@ -304,14 +306,18 @@ describe('When shapes are overlapping', () => {
 		])
 		editor.setCurrentTool('arrow')
 		editor.pointerDown(0, 50)
-		editor.pointerMove(175, 50) // box1 is smaller even though it's behind box2
+		editor.pointerMove(175, 50) // box1 is smaller even though it's behind box2, but we're on the edge of box 2
+		expect(bindings().end).toMatchObject({ toId: ids.box2 })
+		editor.pointerMove(175, 70) // box1 is smaller even though it's behind box2
 		expect(bindings().end).toMatchObject({ toId: ids.box1 })
-		editor.pointerMove(150, 90) // box3 is smaller and at the front
+		editor.pointerMove(150, 90) // box3 is smaller and at the front but we're on the edge of box 2
+		expect(bindings().end).toMatchObject({ toId: ids.box2 })
+		editor.pointerMove(160, 90) // box3 is smaller and at the front and we're in box1 and box 3 and box 2
 		expect(bindings().end).toMatchObject({ toId: ids.box3 })
 		editor.sendToBack([ids.box3])
 		editor.pointerMove(149, 90) // box3 is smaller, even when at the back
 		expect(bindings().end).toMatchObject({ toId: ids.box3 })
-		editor.pointerMove(175, 50)
+		editor.pointerMove(175, 60) // inside of box1 and box 2, but box 1 is smaller
 		expect(bindings().end).toMatchObject({ toId: ids.box1 })
 	})
 })

package/src/test/inner-outer-margin.test.ts

@@ -0,0 +1,315 @@
+import { TLArrowShape, createShapeId } from '@tldraw/editor'
+import { getArrowBindings } from '../lib/shapes/arrow/shared'
+import { TestEditor } from './TestEditor'
+
+let editor: TestEditor
+
+const ids = {
+	solidShape: createShapeId('solidShape'),
+	hollowShape: createShapeId('hollowShape'),
+	arrow: createShapeId('arrow'),
+}
+
+const _arrow = () => editor.getOnlySelectedShape() as TLArrowShape
+
+beforeEach(() => {
+	editor = new TestEditor()
+})
+
+describe('Inner/Outer Margin Shape Detection', () => {
+	describe('getShapeAtPoint with inner/outer margins', () => {
+		beforeEach(() => {
+			// Create a solid filled shape
+			editor.createShape({
+				id: ids.solidShape,
+				type: 'geo',
+				x: 100,
+				y: 100,
+				props: {
+					w: 100,
+					h: 100,
+					fill: 'solid',
+				},
+			})
+
+			// Create a hollow shape on top (same position, smaller size)
+			editor.createShape({
+				id: ids.hollowShape,
+				type: 'geo',
+				x: 125,
+				y: 125,
+				props: {
+					w: 50,
+					h: 50,
+					// No fill property - defaults to 'none' (hollow)
+				},
+			})
+		})
+
+		it('should support inner/outer margin options', () => {
+			// Test that the new margin options are accepted
+			const point = { x: 150, y: 150 }
+
+			// Test with array margin [innerMargin, outerMargin]
+			const arrayMarginHit = editor.getShapeAtPoint(point, {
+				hitInside: true,
+				margin: [8, 4],
+			})
+			expect(arrayMarginHit).toBeDefined()
+
+			// Test with insideMargin option
+			const insideMarginHit = editor.getShapeAtPoint(point, {
+				hitInside: true,
+			})
+			expect(insideMarginHit).toBeDefined()
+
+			// Test with single number margin (should use same for both)
+			const singleMarginHit = editor.getShapeAtPoint(point, {
+				hitInside: true,
+				margin: 8,
+			})
+			expect(singleMarginHit).toBeDefined()
+		})
+
+		it('should respect hitInside option for hollow shapes', () => {
+			const point = { x: 150, y: 150 }
+
+			// Without hitInside, should not hit hollow shape
+			const noHitInsideHit = editor.getShapeAtPoint(point, {
+				margin: [8, 0],
+			})
+			expect(noHitInsideHit?.id).toBe(ids.solidShape)
+
+			// With hitInside, should be able to hit hollow shape
+			const withHitInsideHit = editor.getShapeAtPoint(point, {
+				hitInside: true,
+				margin: [8, 0],
+			})
+			expect(withHitInsideHit).toBeDefined()
+		})
+
+		it('should handle edge cases correctly', () => {
+			// Test point exactly on the edge of hollow shape
+			const edgePoint = { x: 125, y: 150 }
+
+			const edgeHit = editor.getShapeAtPoint(edgePoint, {
+				hitInside: true,
+				margin: [8, 8],
+			})
+			expect(edgeHit).toBeDefined()
+		})
+	})
+
+	describe('Arrow binding with inner/outer margins', () => {
+		beforeEach(() => {
+			// Create a solid filled shape
+			editor.createShape({
+				id: ids.solidShape,
+				type: 'geo',
+				x: 100,
+				y: 100,
+				props: {
+					w: 100,
+					h: 100,
+					fill: 'solid',
+				},
+			})
+
+			// Create a hollow shape on top (same position, smaller size)
+			editor.createShape({
+				id: ids.hollowShape,
+				type: 'geo',
+				x: 125,
+				y: 125,
+				props: {
+					w: 50,
+					h: 50,
+					// No fill property - defaults to 'none' (hollow)
+				},
+			})
+		})
+
+		it('should create arrow bindings with inner/outer margin support', () => {
+			editor.setCurrentTool('arrow')
+
+			// Start arrow outside both shapes
+			editor.pointerDown(50, 150)
+
+			// Move to center of hollow shape (which overlaps solid shape)
+			editor.pointerMove(150, 150)
+			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()
+			// The binding should be to one of the shapes
+			expect([ids.solidShape, ids.hollowShape]).toContain(arrowBindings.end?.toId)
+		})
+
+		it('should bind to solid shape when no hollow shape is present', () => {
+			// Remove the hollow shape
+			editor.deleteShape(ids.hollowShape)
+
+			editor.setCurrentTool('arrow')
+
+			// Start arrow outside shape
+			editor.pointerDown(50, 150)
+
+			// Move to center of solid shape
+			editor.pointerMove(150, 150)
+			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.solidShape)
+		})
+	})
+
+	describe('Complex overlapping scenarios', () => {
+		it('should handle multiple overlapping shapes correctly', () => {
+			// Create multiple shapes with different fill states
+			editor.createShape({
+				id: ids.solidShape,
+				type: 'geo',
+				x: 100,
+				y: 100,
+				props: {
+					w: 100,
+					h: 100,
+					fill: 'solid',
+				},
+			})
+
+			editor.createShape({
+				id: ids.hollowShape,
+				type: 'geo',
+				x: 125,
+				y: 125,
+				props: {
+					w: 50,
+					h: 50,
+					// No fill property - defaults to 'none' (hollow)
+				},
+			})
+
+			// Create another hollow shape
+			const hollowShape2 = createShapeId('hollowShape2')
+			editor.createShape({
+				id: hollowShape2,
+				type: 'geo',
+				x: 140,
+				y: 140,
+				props: {
+					w: 30,
+					h: 30,
+					// No fill property - defaults to 'none' (hollow)
+				},
+			})
+
+			// Test point in the innermost hollow shape
+			const point = { x: 155, y: 155 }
+
+			const hit = editor.getShapeAtPoint(point, {
+				hitInside: true,
+				margin: [8, 8],
+			})
+			expect(hit).toBeDefined()
+			// Should hit one of the shapes
+			expect([ids.solidShape, ids.hollowShape, hollowShape2]).toContain(hit?.id)
+		})
+
+		it('should handle shapes with different geometries', () => {
+			// Create a solid rectangle
+			editor.createShape({
+				id: ids.solidShape,
+				type: 'geo',
+				x: 100,
+				y: 100,
+				props: {
+					w: 100,
+					h: 100,
+					fill: 'solid',
+				},
+			})
+
+			// Create a hollow circle on top
+			editor.createShape({
+				id: ids.hollowShape,
+				type: 'geo',
+				x: 125,
+				y: 125,
+				props: {
+					w: 50,
+					h: 50,
+					geo: 'ellipse',
+					// No fill property - defaults to 'none' (hollow)
+				},
+			})
+
+			// Test point inside the circle
+			const point = { x: 150, y: 150 }
+
+			const hit = editor.getShapeAtPoint(point, {
+				hitInside: true,
+				margin: [8, 8],
+			})
+			expect(hit).toBeDefined()
+			// Should hit one of the shapes
+			expect([ids.solidShape, ids.hollowShape]).toContain(hit?.id)
+		})
+	})
+
+	describe('Regression tests for the original bug', () => {
+		it('should support binding to hollow shapes when overlapping solid shapes', () => {
+			// This test verifies that the infrastructure exists for the bug fix
+			// Create a solid shape
+			editor.createShape({
+				id: ids.solidShape,
+				type: 'geo',
+				x: 100,
+				y: 100,
+				props: {
+					w: 100,
+					h: 100,
+					fill: 'solid',
+				},
+			})
+
+			// Create a hollow shape on top
+			editor.createShape({
+				id: ids.hollowShape,
+				type: 'geo',
+				x: 125,
+				y: 125,
+				props: {
+					w: 50,
+					h: 50,
+					// No fill property - defaults to 'none' (hollow)
+				},
+			})
+
+			// Test that we can detect both shapes
+			const point = { x: 150, y: 150 }
+
+			// Should be able to hit the solid shape without hitInside
+			const solidHit = editor.getShapeAtPoint(point)
+			expect(solidHit?.id).toBe(ids.solidShape)
+
+			// Should be able to hit the hollow shape with hitInside and inner margin
+			const hollowHit = editor.getShapeAtPoint(point, {
+				hitInside: true,
+				margin: [8, 0],
+			})
+			expect(hollowHit).toBeDefined()
+		})
+	})
+})