@tldraw/editor 4.3.0-canary.ef37ae623ce8 → 4.3.0-canary.ef709265bb13

package/src/lib/hooks/useCoarsePointer.ts

@@ -1,66 +1,23 @@
-import { useEffect } from 'react'
-import { tlenv } from '../globals/environment'
+import { unsafe__withoutCapture } from '@tldraw/state'
+import { useReactor } from '@tldraw/state-react'
+import { tlenvReactive } from '../globals/environment'
 import { useEditor } from './useEditor'
 
 /** @internal */
 export function useCoarsePointer() {
 	const editor = useEditor()
 
-	useEffect(() => {
-		// We'll track our own state for the pointer type
-		let isCoarse = editor.getInstanceState().isCoarsePointer
-
-		// 1.
-		// We'll use pointer events to detect coarse pointer.
-
-		const handlePointerDown = (e: PointerEvent) => {
-			// when the user interacts with a mouse, we assume they have a fine pointer.
-			// otherwise, we assume they have a coarse pointer.
-			const isCoarseEvent = e.pointerType !== 'mouse'
-			if (isCoarse === isCoarseEvent) return
-			isCoarse = isCoarseEvent
-			editor.updateInstanceState({ isCoarsePointer: isCoarseEvent })
-		}
-
-		// we need `capture: true` here because the tldraw component itself stops propagation on
-		// pointer events it receives.
-		window.addEventListener('pointerdown', handlePointerDown, { capture: true })
-
-		// 2.
-		// We can also use the media query to detect / set the initial pointer type
-		// and update the state if the pointer type changes.
-
-		// We want the touch / mouse events to run even if the browser does not
-		// support matchMedia. We'll have to handle the media query changes
-		// conditionally in the code below.
-		const mql = window.matchMedia && window.matchMedia('(any-pointer: coarse)')
-
-		// This is a workaround for a Firefox bug where we don't correctly
-		// detect coarse VS fine pointer. For now, let's assume that you have a fine
-		// pointer if you're on Firefox on desktop.
-		const isForcedFinePointer = tlenv.isFirefox && !tlenv.isAndroid && !tlenv.isIos
-
-		const handleMediaQueryChange = () => {
-			const next = isForcedFinePointer ? false : mql.matches // get the value from the media query
-			if (isCoarse !== next) return // bail if the value hasn't changed
-			isCoarse = next // update the local value
-			editor.updateInstanceState({ isCoarsePointer: next }) // update the value in state
-		}
-
-		if (mql) {
-			// set up the listener
-			mql.addEventListener('change', handleMediaQueryChange)
-
-			// and run the handler once to set the initial value
-			handleMediaQueryChange()
-		}
-
-		return () => {
-			window.removeEventListener('pointerdown', handlePointerDown, { capture: true })
-
-			if (mql) {
-				mql.removeEventListener('change', handleMediaQueryChange)
-			}
-		}
-	}, [editor])
+	// When the coarse pointer state changes, update the instance state
+	useReactor(
+		'coarse pointer change',
+		() => {
+			const isCoarsePointer = tlenvReactive.get().isCoarsePointer
+			const isInstanceStateCoarsePointer = unsafe__withoutCapture(
+				() => editor.getInstanceState().isCoarsePointer
+			)
+			if (isCoarsePointer === isInstanceStateCoarsePointer) return
+			editor.updateInstanceState({ isCoarsePointer: isCoarsePointer })
+		},
+		[editor]
+	)
 }

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,17 @@ 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
 }
 
 /** @public */
@@ -139,4 +150,6 @@ export const defaultTldrawOptions = {
 	enableToolbarKeyboardShortcuts: true,
 	maxFontsToLoadBeforeRender: Infinity,
 	nonce: undefined,
+	debouncedZoom: true,
+	debouncedZoomThreshold: 500,
 } as const satisfies TldrawOptions

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-canary.ef37ae623ce8'
+export const version = '4.3.0-canary.ef709265bb13'
 export const publishDates = {
 	major: '2025-09-18T14:39:22.803Z',
-	minor: '2025-12-02T10:57:55.682Z',
-	patch: '2025-12-02T10:57:55.682Z',
+	minor: '2025-12-06T09:01:14.443Z',
+	patch: '2025-12-06T09:01:14.443Z',
 }