@tldraw/editor 4.3.0-next.f4772c19540d → 4.4.0-canary.29afdff6bb04

package/src/lib/hooks/useGestureEvents.ts

@@ -75,7 +75,7 @@ const isWheelEndEvent = (time: number) => {
 	return false
 }
 
-export function useGestureEvents(ref: React.RefObject<HTMLDivElement>) {
+export function useGestureEvents(ref: React.RefObject<HTMLDivElement | null>) {
 	const editor = useEditor()
 
 	const events = React.useMemo(() => {
@@ -105,7 +105,7 @@ export function useGestureEvents(ref: React.RefObject<HTMLDivElement>) {
 					const util = editor.getShapeUtil(shape)
 					if (util.canScroll(shape)) {
 						const bounds = editor.getShapePageBounds(editingShapeId)
-						if (bounds?.containsPoint(editor.inputs.currentPagePoint)) {
+						if (bounds?.containsPoint(editor.inputs.getCurrentPagePoint())) {
 							return
 						}
 					}

package/src/lib/hooks/usePassThroughMouseOverEvents.ts

@@ -4,7 +4,7 @@ import { useContainer } from './useContainer'
 import { useMaybeEditor } from './useEditor'
 
 /** @public */
-export function usePassThroughMouseOverEvents(ref: RefObject<HTMLElement>) {
+export function usePassThroughMouseOverEvents(ref: RefObject<HTMLElement | null>) {
 	if (!ref) throw Error('usePassThroughWheelEvents must be passed a ref')
 	const container = useContainer()
 	const editor = useMaybeEditor()

package/src/lib/hooks/usePassThroughWheelEvents.ts

@@ -4,7 +4,7 @@ import { useContainer } from './useContainer'
 import { useMaybeEditor } from './useEditor'
 
 /** @public */
-export function usePassThroughWheelEvents(ref: RefObject<HTMLElement>) {
+export function usePassThroughWheelEvents(ref: RefObject<HTMLElement | null>) {
 	if (!ref) throw Error('usePassThroughWheelEvents must be passed a ref')
 	const container = useContainer()
 	const editor = useMaybeEditor()

package/src/lib/hooks/useScreenBounds.ts

@@ -2,7 +2,7 @@ import { throttle } from '@tldraw/utils'
 import { useLayoutEffect } from 'react'
 import { useEditor } from './useEditor'
 
-export function useScreenBounds(ref: React.RefObject<HTMLElement>) {
+export function useScreenBounds(ref: React.RefObject<HTMLElement | null>) {
 	const editor = useEditor()
 
 	useLayoutEffect(() => {

package/src/lib/hooks/useStateAttribute.ts

@@ -9,7 +9,10 @@ export function useStateAttribute() {
 	// editor mounting and this attribute being applied, because styles may depend on it:
 	useLayoutEffect(() => {
 		return react('stateAttribute', () => {
-			editor.getContainer().setAttribute('data-state', editor.getPath())
+			const container = editor.getContainer()
+			const instanceState = editor.getInstanceState()
+			container.setAttribute('data-state', editor.getPath())
+			container.setAttribute('data-coarse', String(instanceState.isCoarsePointer))
 		})
 	}, [editor])
 }

package/src/lib/hooks/useTransform.ts

@@ -3,7 +3,7 @@ import { VecLike } from '../primitives/Vec'
 
 /** @public */
 export function useTransform(
-	ref: React.RefObject<HTMLElement | SVGElement>,
+	ref: React.RefObject<HTMLElement | SVGElement | null>,
 	x?: number,
 	y?: number,
 	scale?: number,

package/src/lib/hooks/useZoomCss.ts

@@ -12,14 +12,9 @@ export function useZoomCss() {
 		const setScale = (s: number) => container.style.setProperty('--tl-zoom', s.toString())
 		const setScaleDebounced = debounce(setScale, 100)
 
-		const scheduler = new EffectScheduler('useZoomCss', () => {
-			const numShapes = editor.getCurrentPageShapeIds().size
-			if (numShapes < 300) {
-				setScale(editor.getZoomLevel())
-			} else {
-				setScaleDebounced(editor.getZoomLevel())
-			}
-		})
+		const scheduler = new EffectScheduler('useZoomCss', () =>
+			setScale(editor.getEfficientZoomLevel())
+		)
 
 		scheduler.attach()
 		scheduler.execute()

package/src/lib/options.ts

@@ -87,6 +87,33 @@ export interface TldrawOptions {
 	 * Branding name of the app, currently only used for adding aria-label for the application.
 	 */
 	readonly branding?: string
+	/**
+	 * Whether to use debounced zoom level for certain rendering optimizations. When true,
+	 * `editor.getDebouncedZoomLevel()` returns a cached zoom value while the camera is moving,
+	 * reducing re-renders. When false, it always returns the current zoom level.
+	 */
+	readonly debouncedZoom: boolean
+	/**
+	 * The number of shapes that must be on the page for the debounced zoom level to be used.
+	 * Defaults to 300 shapes.
+	 */
+	readonly debouncedZoomThreshold: number
+	/**
+	 * Whether to allow spacebar panning. When true, the spacebar will pan the camera when held down.
+	 * When false, the spacebar will not pan the camera.
+	 */
+	readonly spacebarPanning: boolean
+	/**
+	 * The default padding (in pixels) used when zooming to fit content in the viewport.
+	 * This affects methods like `zoomToFit()`, `zoomToSelection()`, and `zoomToBounds()`.
+	 * The actual padding used is the minimum of this value and 28% of the viewport width.
+	 * Defaults to 128 pixels.
+	 */
+	readonly zoomToFitPadding: number
+	/**
+	 * The distance (in screen pixels) at which shapes snap to guides and other shapes.
+	 */
+	readonly snapThreshold: number
 }
 
 /** @public */
@@ -139,4 +166,9 @@ export const defaultTldrawOptions = {
 	enableToolbarKeyboardShortcuts: true,
 	maxFontsToLoadBeforeRender: Infinity,
 	nonce: undefined,
+	debouncedZoom: true,
+	debouncedZoomThreshold: 500,
+	spacebarPanning: true,
+	zoomToFitPadding: 128,
+	snapThreshold: 8,
 } as const satisfies TldrawOptions

package/src/lib/primitives/Box.ts

@@ -180,6 +180,15 @@ export class Box {
 		return new Vec(this.w, this.h)
 	}
 
+	isValid() {
+		return (
+			Number.isFinite(this.x) &&
+			Number.isFinite(this.y) &&
+			Number.isFinite(this.w) &&
+			Number.isFinite(this.h)
+		)
+	}
+
 	toFixed() {
 		this.x = toPrecision(this.x)
 		this.y = toPrecision(this.y)

package/src/lib/primitives/geometry/Geometry2d.ts

@@ -140,6 +140,7 @@ export abstract class Geometry2d {
 			}
 		}
 		if (!nearest) throw Error('nearest point not found')
+		dist = Math.sqrt(dist) // return the actual distance, not the squared distance
 		return this.isClosed && this.isFilled && pointInPolygon(nearest, this.vertices) ? -dist : dist
 	}
 

package/src/lib/utils/reparenting.ts

@@ -95,8 +95,8 @@ export function kickoutOccludedShapes(
 		if (remainingShapesToReparent.size > 0) {
 			// The remaining shapes are going to be reparented to the old parent's containing group, if there was one, or else to the page
 			const newParentId =
-				editor.findShapeAncestor(prevParent, (s) => editor.isShapeOfType<TLGroupShape>(s, 'group'))
-					?.id ?? editor.getCurrentPageId()
+				editor.findShapeAncestor(prevParent, (s) => editor.isShapeOfType(s, 'group'))?.id ??
+				editor.getCurrentPageId()
 
 			remainingShapesToReparent.forEach((shape) => {
 				if (!parentsToNewChildren[newParentId]) {
@@ -211,7 +211,7 @@ export function getDroppedShapesToNewParents(
 
 	for (const shape of shapes) {
 		const parent = editor.getShapeParent(shape)
-		if (parent && editor.isShapeOfType<TLGroupShape>(parent, 'group')) {
+		if (parent && editor.isShapeOfType(parent, 'group')) {
 			if (!movingGroups.has(parent)) {
 				movingGroups.add(parent)
 			}
@@ -248,7 +248,7 @@ export function getDroppedShapesToNewParents(
 	parentCheck: for (let i = potentialParentShapes.length - 1; i >= 0; i--) {
 		const parentShape = potentialParentShapes[i]
 		const parentShapeContainingGroupId = editor.findShapeAncestor(parentShape, (s) =>
-			editor.isShapeOfType<TLGroupShape>(s, 'group')
+			editor.isShapeOfType(s, 'group')
 		)?.id
 
 		const parentGeometry = editor.getShapeGeometry(parentShape)
@@ -274,7 +274,7 @@ export function getDroppedShapesToNewParents(
 			if (!shapeGroupIds.has(shape.id)) {
 				shapeGroupIds.set(
 					shape.id,
-					editor.findShapeAncestor(shape, (s) => editor.isShapeOfType<TLGroupShape>(s, 'group'))?.id
+					editor.findShapeAncestor(shape, (s) => editor.isShapeOfType(s, 'group'))?.id
 				)
 			}
 

package/src/lib/utils/rotation.ts

@@ -32,7 +32,7 @@ export function getRotationSnapshot({
 
 	return {
 		initialPageCenter,
-		initialCursorAngle: initialPageCenter.angle(editor.inputs.originPagePoint),
+		initialCursorAngle: initialPageCenter.angle(editor.inputs.getOriginPagePoint()),
 		initialShapesRotation: rotation,
 		shapeSnapshots: shapes.map((shape) => ({
 			shape,

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 = '4.3.0-next.f4772c19540d'
+export const version = '4.4.0-canary.29afdff6bb04'
 export const publishDates = {
 	major: '2025-09-18T14:39:22.803Z',
-	minor: '2025-11-25T09:10:05.987Z',
-	patch: '2025-11-25T09:10:05.987Z',
+	minor: '2026-01-21T13:27:27.357Z',
+	patch: '2026-01-21T13:27:27.357Z',
 }