@tldraw/editor 3.16.0-canary.8c74738e06fb → 3.16.0-canary.a03de714c746

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/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.8c74738e06fb'
+export const version = '3.16.0-canary.a03de714c746'
 export const publishDates = {
 	major: '2024-09-13T14:36:29.063Z',
-	minor: '2025-08-06T08:29:26.797Z',
-	patch: '2025-08-06T08:29:26.797Z',
+	minor: '2025-08-06T14:07:34.822Z',
+	patch: '2025-08-06T14:07:34.822Z',
 }