@tldraw/editor 4.2.2 → 4.2.3

package/src/lib/exports/getSvgJsx.tsx

@@ -1,6 +1,7 @@
 import { useAtom, useValue } from '@tldraw/state-react'
 import {
 	TLFrameShape,
+	TLGroupShape,
 	TLShape,
 	TLShapeId,
 	getColorValue,
@@ -57,7 +58,9 @@ export function getSvgJsx(editor: Editor, ids: TLShapeId[], opts: TLImageExportO
 
 	// --- Common bounding box of all shapes
 	const singleFrameShapeId =
-		ids.length === 1 && editor.isShapeOfType(editor.getShape(ids[0])!, 'frame') ? ids[0] : null
+		ids.length === 1 && editor.isShapeOfType<TLFrameShape>(editor.getShape(ids[0])!, 'frame')
+			? ids[0]
+			: null
 
 	let bbox: null | Box = null
 	if (opts.bounds) {
@@ -269,7 +272,7 @@ function SvgExport({
 
 					const shape = editor.getShape(id)!
 
-					if (editor.isShapeOfType(shape, 'group')) return []
+					if (editor.isShapeOfType<TLGroupShape>(shape, 'group')) return []
 
 					const elements = []
 					const util = editor.getShapeUtil(shape)

package/src/lib/exports/parseCss.test.ts

@@ -364,5 +364,4 @@ test('parseCssValueUrls', () => {
 		  },
 		]
 	`)
-	expect(parseCssValueUrls(`url(#arrowhead)`)).toMatchInlineSnapshot(`[]`)
 })

package/src/lib/exports/parseCss.ts

@@ -108,5 +108,5 @@ export function parseCssValueUrls(value: string) {
 	return Array.from(value.matchAll(urlsRegex), (m) => ({
 		original: m[0],
 		url: m[1] || m[2] || m[3],
-	})).filter((m) => !m.url.startsWith('#'))
+	}))
 }

package/src/lib/globals/environment.ts

@@ -1,9 +1,5 @@
-import { atom } from '@tldraw/state'
-
 /**
  * An object that contains information about the current device and environment.
- * This object is not reactive and will not update automatically when the environment changes,
- * so only include values that are fixed, such as the user's browser and operating system.
  *
  * @public
  */
@@ -18,66 +14,15 @@ const tlenv = {
 	hasCanvasSupport: false,
 }
 
-let isForcedFinePointer = false
-
-if (typeof window !== 'undefined') {
-	if ('navigator' in window) {
-		tlenv.isSafari = /^((?!chrome|android).)*safari/i.test(navigator.userAgent)
-		tlenv.isIos = !!navigator.userAgent.match(/iPad/i) || !!navigator.userAgent.match(/iPhone/i)
-		tlenv.isChromeForIos = /crios.*safari/i.test(navigator.userAgent)
-		tlenv.isFirefox = /firefox/i.test(navigator.userAgent)
-		tlenv.isAndroid = /android/i.test(navigator.userAgent)
-		tlenv.isDarwin = window.navigator.userAgent.toLowerCase().indexOf('mac') > -1
-	}
-	tlenv.hasCanvasSupport = 'Promise' in window && 'HTMLCanvasElement' in window
-	isForcedFinePointer = tlenv.isFirefox && !tlenv.isAndroid && !tlenv.isIos
-}
-
-/**
- * An atom that contains information about the current device and environment.
- * This object is reactive and will update automatically when the environment changes.
- * Use it for values that may change over time, such as the pointer type.
- *
- * @public
- */
-const tlenvReactive = atom('tlenvReactive', {
-	// Whether the user's device has a coarse pointer. This is dynamic on many systems, especially
-	// on touch-screen laptops, which will become "coarse" if the user touches the screen.
-	// See https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/At-rules/@media/pointer#coarse
-	isCoarsePointer: false,
-})
-
-if (typeof window !== 'undefined' && !isForcedFinePointer) {
-	const mql = window.matchMedia && window.matchMedia('(any-pointer: coarse)')
-
-	const isCurrentCoarsePointer = () => tlenvReactive.__unsafe__getWithoutCapture().isCoarsePointer
-
-	if (mql) {
-		// 1. Update the coarse pointer automatically when the media query changes
-		const updateIsCoarsePointer = () => {
-			const isCoarsePointer = mql.matches
-			if (isCoarsePointer !== isCurrentCoarsePointer()) {
-				tlenvReactive.update((prev) => ({ ...prev, isCoarsePointer: isCoarsePointer }))
-			}
-		}
-		updateIsCoarsePointer()
-		mql.addEventListener('change', updateIsCoarsePointer)
-	}
-
-	// 2. Also update the coarse pointer state when a pointer down event occurs. We need `capture: true`
-	// here because the tldraw component itself stops propagation on pointer events it receives.
-	window.addEventListener(
-		'pointerdown',
-		(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 (isCoarseEvent !== isCurrentCoarsePointer()) {
-				tlenvReactive.update((prev) => ({ ...prev, isCoarsePointer: isCoarseEvent }))
-			}
-		},
-		{ capture: true }
-	)
+if (typeof window !== 'undefined' && 'navigator' in window) {
+	tlenv.isSafari = /^((?!chrome|android).)*safari/i.test(navigator.userAgent)
+	tlenv.isIos = !!navigator.userAgent.match(/iPad/i) || !!navigator.userAgent.match(/iPhone/i)
+	tlenv.isChromeForIos = /crios.*safari/i.test(navigator.userAgent)
+	tlenv.isFirefox = /firefox/i.test(navigator.userAgent)
+	tlenv.isAndroid = /android/i.test(navigator.userAgent)
+	tlenv.isDarwin = window.navigator.userAgent.toLowerCase().indexOf('mac') > -1
+	tlenv.hasCanvasSupport =
+		typeof window !== 'undefined' && 'Promise' in window && 'HTMLCanvasElement' in window
 }
 
-export { tlenv, tlenvReactive }
+export { tlenv }

package/src/lib/globals/menus.ts

@@ -148,7 +148,7 @@ export const tlmenus = {
 	 * @public
 	 */
 	isMenuOpen(id: string, contextId?: string): boolean {
-		return this.getOpenMenus(contextId).includes(`${id}-${contextId}`)
+		return this.getOpenMenus(contextId).includes(id)
 	},
 
 	/**

package/src/lib/hooks/useCanvasEvents.ts

@@ -8,7 +8,6 @@ import { useEditor } from './useEditor'
 
 export function useCanvasEvents() {
 	const editor = useEditor()
-	const ownerDocument = editor.getContainer().ownerDocument
 	const currentTool = useValue('current tool', () => editor.getCurrentTool(), [editor])
 
 	const events = useMemo(
@@ -181,11 +180,11 @@ export function useCanvasEvents() {
 			}
 		}
 
-		ownerDocument.body.addEventListener('pointermove', onPointerMove)
+		document.body.addEventListener('pointermove', onPointerMove)
 		return () => {
-			ownerDocument.body.removeEventListener('pointermove', onPointerMove)
+			document.body.removeEventListener('pointermove', onPointerMove)
 		}
-	}, [editor, currentTool, ownerDocument])
+	}, [editor, currentTool])
 
 	return events
 }

package/src/lib/hooks/useCoarsePointer.ts

@@ -1,23 +1,66 @@
-import { unsafe__withoutCapture } from '@tldraw/state'
-import { useReactor } from '@tldraw/state-react'
-import { tlenvReactive } from '../globals/environment'
+import { useEffect } from 'react'
+import { tlenv } from '../globals/environment'
 import { useEditor } from './useEditor'
 
 /** @internal */
 export function useCoarsePointer() {
 	const editor = useEditor()
 
-	// 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]
-	)
+	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])
 }

package/src/lib/hooks/useEvent.tsx

@@ -27,7 +27,7 @@ import { useCallback, useDebugValue, useLayoutEffect, useRef } from 'react'
 export function useEvent<Args extends Array<unknown>, Result>(
 	handler: (...args: Args) => Result
 ): (...args: Args) => Result {
-	const handlerRef = useRef<((...args: Args) => Result) | undefined>(undefined)
+	const handlerRef = useRef<(...args: Args) => Result>()
 
 	// In a real implementation, this would run before layout effects
 	useLayoutEffect(() => {

package/src/lib/hooks/useFixSafariDoubleTapZoomPencilEvents.ts

@@ -9,7 +9,7 @@ const IGNORED_TAGS = ['textarea', 'input']
  * want this for drawing operations and can disable it by setting 'disableDoubleTapZoom' in the main
  * editor.
  */
-export function useFixSafariDoubleTapZoomPencilEvents(ref: React.RefObject<HTMLElement | null>) {
+export function useFixSafariDoubleTapZoomPencilEvents(ref: React.RefObject<HTMLElement>) {
 	const editor = useEditor()
 
 	useEffect(() => {

package/src/lib/hooks/useGestureEvents.ts

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

package/src/lib/hooks/useStateAttribute.ts

@@ -9,10 +9,7 @@ export function useStateAttribute() {
 	// editor mounting and this attribute being applied, because styles may depend on it:
 	useLayoutEffect(() => {
 		return react('stateAttribute', () => {
-			const container = editor.getContainer()
-			const instanceState = editor.getInstanceState()
-			container.setAttribute('data-state', editor.getPath())
-			container.setAttribute('data-coarse', String(instanceState.isCoarsePointer))
+			editor.getContainer().setAttribute('data-state', editor.getPath())
 		})
 	}, [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 | null>,
+	ref: React.RefObject<HTMLElement | SVGElement>,
 	x?: number,
 	y?: number,
 	scale?: number,

package/src/lib/hooks/useZoomCss.ts

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

package/src/lib/options.ts

@@ -87,33 +87,6 @@ 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 */
@@ -166,9 +139,4 @@ 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,15 +180,6 @@ 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,7 +140,6 @@ 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(s, 'group'))?.id ??
-				editor.getCurrentPageId()
+				editor.findShapeAncestor(prevParent, (s) => editor.isShapeOfType<TLGroupShape>(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(parent, 'group')) {
+		if (parent && editor.isShapeOfType<TLGroupShape>(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(s, 'group')
+			editor.isShapeOfType<TLGroupShape>(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(s, 'group'))?.id
+					editor.findShapeAncestor(shape, (s) => editor.isShapeOfType<TLGroupShape>(s, 'group'))?.id
 				)
 			}
 

package/src/lib/utils/rotation.ts

@@ -32,7 +32,7 @@ export function getRotationSnapshot({
 
 	return {
 		initialPageCenter,
-		initialCursorAngle: initialPageCenter.angle(editor.inputs.getOriginPagePoint()),
+		initialCursorAngle: initialPageCenter.angle(editor.inputs.originPagePoint),
 		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.2.2'
+export const version = '4.2.3'
 export const publishDates = {
 	major: '2025-09-18T14:39:22.803Z',
-	minor: '2025-11-19T11:53:58.692Z',
-	patch: '2026-01-07T11:19:27.083Z',
+	minor: '2025-11-19T11:47:45.748Z',
+	patch: '2026-01-08T10:11:20.530Z',
 }