@tldraw/editor 3.16.0-canary.fa3749606e52 → 3.16.0-next.34fddf633325

package/src/lib/editor/managers/UserPreferencesManager/UserPreferencesManager.test.ts

@@ -25,6 +25,7 @@ describe('UserPreferencesManager', () => {
 		locale: 'en',
 		animationSpeed: 1,
 		areKeyboardShortcutsEnabled: true,
+		showUiLabels: false,
 		edgeScrollSpeed: 1,
 		colorScheme: 'light',
 		isSnapMode: false,
@@ -231,6 +232,7 @@ describe('UserPreferencesManager', () => {
 				color: mockUserPreferences.color,
 				animationSpeed: mockUserPreferences.animationSpeed,
 				areKeyboardShortcutsEnabled: mockUserPreferences.areKeyboardShortcutsEnabled,
+				showUiLabels: mockUserPreferences.showUiLabels,
 				isSnapMode: mockUserPreferences.isSnapMode,
 				colorScheme: mockUserPreferences.colorScheme,
 				isDarkMode: false, // light mode
@@ -379,6 +381,17 @@ describe('UserPreferencesManager', () => {
 			})
 		})
 
+		describe('getShowUiLabels', () => {
+			it('should return user show ui labels setting', () => {
+				expect(userPreferencesManager.getShowUiLabels()).toBe(mockUserPreferences.showUiLabels)
+			})
+
+			it('should return default show ui labels when null', () => {
+				userPreferencesAtom.set({ ...mockUserPreferences, showUiLabels: null })
+				expect(userPreferencesManager.getShowUiLabels()).toBe(defaultUserPreferences.showUiLabels)
+			})
+		})
+
 		describe('getEdgeScrollSpeed', () => {
 			it('should return user edge scroll speed', () => {
 				expect(userPreferencesManager.getEdgeScrollSpeed()).toBe(

package/src/lib/editor/managers/UserPreferencesManager/UserPreferencesManager.ts

@@ -49,6 +49,7 @@ export class UserPreferencesManager {
 			isDarkMode: this.getIsDarkMode(),
 			isWrapMode: this.getIsWrapMode(),
 			isDynamicResizeMode: this.getIsDynamicResizeMode(),
+			showUiLabels: this.getShowUiLabels(),
 		}
 	}
 
@@ -119,4 +120,8 @@ export class UserPreferencesManager {
 			defaultUserPreferences.isPasteAtCursorMode
 		)
 	}
+
+	@computed getShowUiLabels() {
+		return this.user.userPreferences.get().showUiLabels ?? defaultUserPreferences.showUiLabels
+	}
 }

package/src/lib/editor/types/misc-types.ts

@@ -1,4 +1,4 @@
-import { BoxModel } from '@tldraw/tlschema'
+import { BoxModel, TLShape } from '@tldraw/tlschema'
 import { Box } from '../../primitives/Box'
 import { VecLike } from '../../primitives/Vec'
 
@@ -206,3 +206,56 @@ export interface TLUpdatePointerOptions {
 	isPen?: boolean
 	button?: number
 }
+
+/**
+ * Options to {@link Editor.getShapeAtPoint}.
+ *
+ * @public
+ */
+export interface TLGetShapeAtPointOptions {
+	/**
+	 * The margin to apply to the shape.
+	 * If a number, it will be applied to both the inside and outside of the shape.
+	 * If an array, the first element will be applied to the inside of the shape, and the second element will be applied to the outside.
+	 *
+	 * @example
+	 * ```ts
+	 * // Get the shape at the center of the screen
+	 * const shape = editor.getShapeAtProps({
+	 *   margin: 10,
+	 * })
+	 *
+	 * // Get the shape at the center of the screen with a 10px inner margin and a 5px outer margin
+	 * const shape = editor.getShapeAtProps({
+	 *   margin: [10, 5],
+	 * })
+	 * ```
+	 */
+	margin?: number | [number, number]
+	/**
+	 * Whether to register hits inside of shapes (beyond the margin), such as the inside of a solid shape.
+	 */
+	hitInside?: boolean
+	/**
+	 * Whether to register hits on locked shapes.
+	 */
+	hitLocked?: boolean
+	/**
+	 * Whether to register hits on labels.
+	 */
+	hitLabels?: boolean
+	/**
+	 * Whether to only return hits on shapes that are currently being rendered.
+	 * todo: rename this to hitCulled or hitNotRendering
+	 */
+	renderingOnly?: boolean
+	/**
+	 * Whether to register hits on the inside of frame shapes.
+	 * todo: rename this to hitInsideFrames
+	 */
+	hitFrameInside?: boolean
+	/**
+	 * A filter function to apply to the shapes.
+	 */
+	filter?(shape: TLShape): boolean
+}

package/src/lib/hooks/useCanvasEvents.ts

@@ -1,5 +1,5 @@
 import { useValue } from '@tldraw/state-react'
-import React, { useEffect, useMemo } from 'react'
+import React, { useMemo } from 'react'
 import { RIGHT_MOUSE_BUTTON } from '../constants'
 import {
 	preventDefault,
@@ -16,6 +16,9 @@ export function useCanvasEvents() {
 
 	const events = useMemo(
 		function canvasEvents() {
+			// Track the last screen point
+			let lastX: number, lastY: number
+
 			function onPointerDown(e: React.PointerEvent) {
 				if ((e as any).isKilled) return
 
@@ -41,9 +44,35 @@ export function useCanvasEvents() {
 				})
 			}
 
+			function onPointerMove(e: React.PointerEvent) {
+				if ((e as any).isKilled) return
+
+				if (e.clientX === lastX && e.clientY === lastY) return
+				lastX = e.clientX
+				lastY = e.clientY
+
+				// For tools that benefit from a higher fidelity of events,
+				// we dispatch the coalesced events.
+				// N.B. Sometimes getCoalescedEvents isn't present on iOS, ugh.
+				const events =
+					currentTool.useCoalescedEvents && e.nativeEvent.getCoalescedEvents
+						? e.nativeEvent.getCoalescedEvents()
+						: [e]
+				for (const singleEvent of events) {
+					editor.dispatch({
+						type: 'pointer',
+						target: 'canvas',
+						name: 'pointer_move',
+						...getPointerInfo(singleEvent),
+					})
+				}
+			}
+
 			function onPointerUp(e: React.PointerEvent) {
 				if ((e as any).isKilled) return
 				if (e.button !== 0 && e.button !== 1 && e.button !== 2 && e.button !== 5) return
+				lastX = e.clientX
+				lastY = e.clientY
 
 				releasePointerCapture(e.currentTarget, e)
 
@@ -129,6 +158,7 @@ export function useCanvasEvents() {
 
 			return {
 				onPointerDown,
+				onPointerMove,
 				onPointerUp,
 				onPointerEnter,
 				onPointerLeave,
@@ -139,45 +169,8 @@ export function useCanvasEvents() {
 				onClick,
 			}
 		},
-		[editor]
+		[editor, currentTool]
 	)
 
-	// onPointerMove is special: where we're only interested in the other events when they're
-	// happening _on_ the canvas (as opposed to outside of it, or on UI floating over it), we want
-	// the pointer position to be up to date regardless of whether it's over the tldraw canvas or
-	// not. So instead of returning a listener to be attached to the canvas, we directly attach a
-	// listener to the whole document instead.
-	useEffect(() => {
-		let lastX: number, lastY: number
-
-		function onPointerMove(e: PointerEvent) {
-			if ((e as any).isKilled) return
-			;(e as any).isKilled = true
-
-			if (e.clientX === lastX && e.clientY === lastY) return
-			lastX = e.clientX
-			lastY = e.clientY
-
-			// For tools that benefit from a higher fidelity of events,
-			// we dispatch the coalesced events.
-			// N.B. Sometimes getCoalescedEvents isn't present on iOS, ugh.
-			const events =
-				currentTool.useCoalescedEvents && e.getCoalescedEvents ? e.getCoalescedEvents() : [e]
-			for (const singleEvent of events) {
-				editor.dispatch({
-					type: 'pointer',
-					target: 'canvas',
-					name: 'pointer_move',
-					...getPointerInfo(singleEvent),
-				})
-			}
-		}
-
-		document.body.addEventListener('pointermove', onPointerMove)
-		return () => {
-			document.body.removeEventListener('pointermove', onPointerMove)
-		}
-	}, [editor, currentTool])
-
 	return events
 }

package/src/lib/options.ts

@@ -53,6 +53,7 @@ export interface TldrawOptions {
 	readonly flattenImageBoundsPadding: number
 	readonly laserDelayMs: number
 	readonly maxExportDelayMs: number
+	readonly tooltipDelayMs: number
 	/**
 	 * How long should previews created by {@link Editor.createTemporaryAssetPreview} last before
 	 * they expire? Defaults to 3 minutes.
@@ -124,6 +125,7 @@ export const defaultTldrawOptions = {
 	flattenImageBoundsPadding: 16,
 	laserDelayMs: 1200,
 	maxExportDelayMs: 5000,
+	tooltipDelayMs: 700,
 	temporaryAssetPreviewLifetimeMs: 180000,
 	actionShortcutsLocation: 'swap',
 	createTextOnCanvasDoubleClick: true,

package/src/lib/utils/EditorAtom.ts

@@ -0,0 +1,37 @@
+import { atom, Atom } from '@tldraw/state'
+import { WeakCache } from '@tldraw/utils'
+import { Editor } from '../editor/Editor'
+
+/**
+ * An Atom that is scoped to the lifetime of an Editor.
+ *
+ * This is useful for storing UI state for tldraw applications. Keeping state scoped to an editor
+ * instead of stored in a global atom can prevent issues with state being shared between editors
+ * when navigating between pages, or when multiple editor instances are used on the same page.
+ *
+ * @public
+ */
+export class EditorAtom<T> {
+	private states = new WeakCache<Editor, Atom<T>>()
+
+	constructor(
+		private name: string,
+		private getInitialState: (editor: Editor) => T
+	) {}
+
+	getAtom(editor: Editor): Atom<T> {
+		return this.states.get(editor, () => atom(this.name, this.getInitialState(editor)))
+	}
+
+	get(editor: Editor): T {
+		return this.getAtom(editor).get()
+	}
+
+	update(editor: Editor, update: (state: T) => T): T {
+		return this.getAtom(editor).update(update)
+	}
+
+	set(editor: Editor, state: T): T {
+		return this.getAtom(editor).set(state)
+	}
+}

package/src/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',
 }