@tldraw/editor 4.3.0-canary.bf87ebaf143a → 4.3.0-canary.c08047039e53

package/src/lib/editor/shapes/ShapeUtil.ts

@@ -190,7 +190,7 @@ export abstract class ShapeUtil<Shape extends TLShape = TLShape> {
 	 * @param shape - The shape.
 	 * @public
 	 */
-	canSnap(_shape: Shape): boolean {
+	canSnap(shape: Shape): boolean {
 		return true
 	}
 
@@ -200,7 +200,7 @@ export abstract class ShapeUtil<Shape extends TLShape = TLShape> {
 	 * @param shape - The shape.
 	 * @public
 	 */
-	canTabTo(_shape: Shape): boolean {
+	canTabTo(shape: Shape): boolean {
 		return true
 	}
 
@@ -209,7 +209,7 @@ export abstract class ShapeUtil<Shape extends TLShape = TLShape> {
 	 *
 	 * @public
 	 */
-	canScroll(_shape: Shape): boolean {
+	canScroll(shape: Shape): boolean {
 		return false
 	}
 
@@ -227,7 +227,7 @@ export abstract class ShapeUtil<Shape extends TLShape = TLShape> {
 	 *
 	 * @public
 	 */
-	canEdit(_shape: Shape): boolean {
+	canEdit(shape: Shape, info: TLEditStartInfo): boolean {
 		return false
 	}
 
@@ -236,7 +236,7 @@ export abstract class ShapeUtil<Shape extends TLShape = TLShape> {
 	 *
 	 * @public
 	 */
-	canResize(_shape: Shape): boolean {
+	canResize(shape: Shape): boolean {
 		return true
 	}
 
@@ -245,7 +245,7 @@ export abstract class ShapeUtil<Shape extends TLShape = TLShape> {
 	 *
 	 * @public
 	 */
-	canResizeChildren(_shape: Shape): boolean {
+	canResizeChildren(shape: Shape): boolean {
 		return true
 	}
 
@@ -254,7 +254,16 @@ export abstract class ShapeUtil<Shape extends TLShape = TLShape> {
 	 *
 	 * @public
 	 */
-	canEditInReadonly(_shape: Shape): boolean {
+	canEditInReadonly(shape: Shape): boolean {
+		return false
+	}
+
+	/**
+	 * Whether the shape can be edited while locked or while an ancestor is locked.
+	 *
+	 * @public
+	 */
+	canEditWhileLocked(shape: Shape): boolean {
 		return false
 	}
 
@@ -263,7 +272,7 @@ export abstract class ShapeUtil<Shape extends TLShape = TLShape> {
 	 *
 	 * @public
 	 */
-	canCrop(_shape: Shape): boolean {
+	canCrop(shape: Shape): boolean {
 		return false
 	}
 
@@ -276,7 +285,7 @@ export abstract class ShapeUtil<Shape extends TLShape = TLShape> {
 	 *
 	 * @public
 	 */
-	canBeLaidOut(_shape: Shape, _info: TLShapeUtilCanBeLaidOutOpts): boolean {
+	canBeLaidOut(shape: Shape, info: TLShapeUtilCanBeLaidOutOpts): boolean {
 		return true
 	}
 
@@ -287,7 +296,7 @@ export abstract class ShapeUtil<Shape extends TLShape = TLShape> {
 	 *
 	 * @param shape - The shape.
 	 */
-	canCull(_shape: Shape): boolean {
+	canCull(shape: Shape): boolean {
 		return true
 	}
 
@@ -300,13 +309,33 @@ export abstract class ShapeUtil<Shape extends TLShape = TLShape> {
 	 *
 	 * @internal
 	 */
-	providesBackgroundForChildren(_shape: Shape): boolean {
+	providesBackgroundForChildren(shape: Shape): boolean {
 		return false
 	}
 
 	/**
 	 * Get the clip path to apply to this shape's children.
 	 *
+	 * The returned points should define the **inner** clip boundary - the area where
+	 * children will be visible. If your shape has a stroke, you should inset the clip
+	 * path by half the stroke width so children are clipped to the inner edge of the
+	 * stroke rather than its center line.
+	 *
+	 * @example
+	 * ```ts
+	 * override getClipPath(shape: MyShape): Vec[] | undefined {
+	 *   const strokeWidth = 2
+	 *   const inset = strokeWidth / 2
+	 *   // Return points inset by half the stroke width
+	 *   return [
+	 *     new Vec(inset, inset),
+	 *     new Vec(shape.props.w - inset, inset),
+	 *     new Vec(shape.props.w - inset, shape.props.h - inset),
+	 *     new Vec(inset, shape.props.h - inset),
+	 *   ]
+	 * }
+	 * ```
+	 *
 	 * @param shape - The shape to get the clip path for
 	 * @returns Array of points defining the clipping polygon in local coordinates, or undefined if no clipping
 	 * @public
@@ -333,14 +362,14 @@ export abstract class ShapeUtil<Shape extends TLShape = TLShape> {
 	 * @returns boolean indicating if this shape should hide in the minimap
 	 * @public
 	 */
-	hideInMinimap?(_shape: Shape): boolean
+	hideInMinimap?(shape: Shape): boolean
 
 	/**
 	 * Whether the shape should hide its resize handles when selected.
 	 *
 	 * @public
 	 */
-	hideResizeHandles(_shape: Shape): boolean {
+	hideResizeHandles(shape: Shape): boolean {
 		return false
 	}
 
@@ -349,7 +378,7 @@ export abstract class ShapeUtil<Shape extends TLShape = TLShape> {
 	 *
 	 * @public
 	 */
-	hideRotateHandle(_shape: Shape): boolean {
+	hideRotateHandle(shape: Shape): boolean {
 		return false
 	}
 
@@ -358,7 +387,7 @@ export abstract class ShapeUtil<Shape extends TLShape = TLShape> {
 	 *
 	 * @public
 	 */
-	hideSelectionBoundsBg(_shape: Shape): boolean {
+	hideSelectionBoundsBg(shape: Shape): boolean {
 		return false
 	}
 
@@ -367,7 +396,7 @@ export abstract class ShapeUtil<Shape extends TLShape = TLShape> {
 	 *
 	 * @public
 	 */
-	hideSelectionBoundsFg(_shape: Shape): boolean {
+	hideSelectionBoundsFg(shape: Shape): boolean {
 		return false
 	}
 
@@ -376,7 +405,7 @@ export abstract class ShapeUtil<Shape extends TLShape = TLShape> {
 	 *
 	 * @public
 	 */
-	isAspectRatioLocked(_shape: Shape): boolean {
+	isAspectRatioLocked(shape: Shape): boolean {
 		return false
 	}
 
@@ -387,10 +416,10 @@ export abstract class ShapeUtil<Shape extends TLShape = TLShape> {
 	 * useful in cases like annotating on top of an image, where you usually want to avoid extra
 	 * padding around the image if you don't need it.
 	 *
-	 * @param _shape - The shape to check
+	 * @param shape - The shape to check
 	 * @returns True if this shape should be treated as an export bounds container
 	 */
-	isExportBoundsContainer(_shape: Shape): boolean {
+	isExportBoundsContainer(shape: Shape): boolean {
 		return false
 	}
 
@@ -439,7 +468,7 @@ export abstract class ShapeUtil<Shape extends TLShape = TLShape> {
 	 * @param type - The shape type.
 	 * @public
 	 */
-	canReceiveNewChildrenOfType(_shape: Shape, _type: TLShape['type']) {
+	canReceiveNewChildrenOfType(shape: Shape, _type: TLShape['type']) {
 		return false
 	}
 
@@ -487,7 +516,7 @@ export abstract class ShapeUtil<Shape extends TLShape = TLShape> {
 	 * Get the geometry to use when snapping to this this shape in translate/resize operations. See
 	 * {@link BoundsSnapGeometry} for details.
 	 */
-	getBoundsSnapGeometry(_shape: Shape): BoundsSnapGeometry {
+	getBoundsSnapGeometry(shape: Shape): BoundsSnapGeometry {
 		return {}
 	}
 
@@ -495,15 +524,15 @@ export abstract class ShapeUtil<Shape extends TLShape = TLShape> {
 	 * Get the geometry to use when snapping handles to this shape. See {@link HandleSnapGeometry}
 	 * for details.
 	 */
-	getHandleSnapGeometry(_shape: Shape): HandleSnapGeometry {
+	getHandleSnapGeometry(shape: Shape): HandleSnapGeometry {
 		return {}
 	}
 
-	getText(_shape: Shape): string | undefined {
+	getText(shape: Shape): string | undefined {
 		return undefined
 	}
 
-	getAriaDescriptor(_shape: Shape): string | undefined {
+	getAriaDescriptor(shape: Shape): string | undefined {
 		return undefined
 	}
 
@@ -931,3 +960,17 @@ export interface TLHandleDragInfo<T extends TLShape> {
 	isCreatingShape: boolean
 	initial?: T | undefined
 }
+
+/* --------------------------------- Editing -------------------------------- */
+
+/** @public */
+export interface TLEditStartInfo {
+	type:
+		| 'press_enter'
+		| 'click'
+		| 'double-click'
+		| 'double-click-edge'
+		| 'double-click-corner'
+		| 'click-header'
+		| 'unknown'
+}

package/src/lib/editor/tools/BaseBoxShapeTool/children/Pointing.ts

@@ -12,8 +12,8 @@ export class Pointing extends StateNode {
 
 	override onPointerMove(info: TLPointerEventInfo) {
 		const { editor } = this
-		if (editor.inputs.isDragging) {
-			const { originPagePoint } = editor.inputs
+		if (editor.inputs.getIsDragging()) {
+			const originPagePoint = editor.inputs.getOriginPagePoint()
 
 			const shapeType = (this.parent as BaseBoxShapeTool)!.shapeType
 
@@ -78,7 +78,7 @@ export class Pointing extends StateNode {
 	}
 
 	complete() {
-		const { originPagePoint } = this.editor.inputs
+		const originPagePoint = this.editor.inputs.getOriginPagePoint()
 
 		const shapeType = (this.parent as BaseBoxShapeTool)!.shapeType as TLBaseBoxShape['type']
 

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

@@ -364,4 +364,5 @@ 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/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>()
+	const handlerRef = useRef<((...args: Args) => Result) | undefined>(undefined)
 
 	// 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>) {
+export function useFixSafariDoubleTapZoomPencilEvents(ref: React.RefObject<HTMLElement | null>) {
 	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>) {
+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/options.ts

@@ -98,6 +98,22 @@ export interface TldrawOptions {
 	 * 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 */
@@ -152,4 +168,7 @@ export const defaultTldrawOptions = {
 	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/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-canary.bf87ebaf143a'
+export const version = '4.3.0-canary.c08047039e53'
 export const publishDates = {
 	major: '2025-09-18T14:39:22.803Z',
-	minor: '2025-12-09T12:22:59.455Z',
-	patch: '2025-12-09T12:22:59.455Z',
+	minor: '2026-01-21T09:45:12.761Z',
+	patch: '2026-01-21T09:45:12.761Z',
 }