@tldraw/editor 4.3.0-next.7f179bd04d6c → 4.3.0-next.842fb21476f2

package/src/lib/editor/managers/TickManager/TickManager.test.ts

@@ -21,6 +21,17 @@ describe('TickManager', () => {
 	let tickManager: TickManager
 	let mockEmit: Mock
 	let mockDisposablesAdd: Mock
+	let mockInputs: {
+		_currentScreenPoint: Vec
+		getCurrentScreenPoint(): Vec
+		currentScreenPoint: Vec
+		setCurrentScreenPoint(value: Vec): void
+		_pointerVelocity: Vec
+		getPointerVelocity(): Vec
+		pointerVelocity: Vec
+		setPointerVelocity(value: Vec): void
+		updatePointerVelocity(elapsed: number): void
+	}
 
 	beforeEach(() => {
 		vi.clearAllMocks()
@@ -41,16 +52,40 @@ describe('TickManager', () => {
 		mockEmit = vi.fn()
 		mockDisposablesAdd = vi.fn()
 
+		// Create a mock inputs object with getters and setters
+		mockInputs = {
+			_currentScreenPoint: new Vec(100, 100),
+			getCurrentScreenPoint() {
+				return this._currentScreenPoint
+			},
+			get currentScreenPoint() {
+				return this.getCurrentScreenPoint()
+			},
+			setCurrentScreenPoint(value: Vec) {
+				this._currentScreenPoint = value
+			},
+			_pointerVelocity: new Vec(0, 0),
+			getPointerVelocity() {
+				return this._pointerVelocity
+			},
+			get pointerVelocity() {
+				return this.getPointerVelocity()
+			},
+			setPointerVelocity(value: Vec) {
+				this._pointerVelocity = value
+			},
+			updatePointerVelocity(_elapsed: number) {
+				// Mock implementation - no-op for tests
+			},
+		}
+
 		editor = {
 			emit: mockEmit,
 			disposables: {
 				add: mockDisposablesAdd,
 			},
-			inputs: {
-				currentScreenPoint: new Vec(100, 100),
-				pointerVelocity: new Vec(0, 0),
-			},
-		} as any
+			inputs: mockInputs as unknown as Editor['inputs'],
+		} as unknown as Mocked<Editor>
 
 		tickManager = new TickManager(editor)
 	})
@@ -143,16 +178,6 @@ describe('TickManager', () => {
 			expect(mockEmit).toHaveBeenCalledTimes(2)
 		})
 
-		it('should update pointer velocity', () => {
-			const updatePointerVelocitySpy = vi.spyOn(tickManager as any, 'updatePointerVelocity')
-			tickManager.now = 1000
-			mockDateNow.mockReturnValue(1016)
-
-			tickManager.tick()
-
-			expect(updatePointerVelocitySpy).toHaveBeenCalledWith(16)
-		})
-
 		it('should schedule next RAF', () => {
 			tickManager.tick()
 			expect(mockRequestAnimationFrame).toHaveBeenCalled()
@@ -192,98 +217,6 @@ describe('TickManager', () => {
 		})
 	})
 
-	describe('updatePointerVelocity method', () => {
-		let updatePointerVelocity: any
-
-		beforeEach(() => {
-			// Access private method for testing
-			updatePointerVelocity = (tickManager as any).updatePointerVelocity.bind(tickManager)
-			// Reset the prevPoint to a known state
-			;(tickManager as any).prevPoint = new Vec(50, 50)
-		})
-
-		it('should return early if elapsed time is 0', () => {
-			const originalVelocity = editor.inputs.pointerVelocity.clone()
-
-			updatePointerVelocity(0)
-
-			expect(editor.inputs.pointerVelocity).toEqual(originalVelocity)
-		})
-
-		it('should calculate velocity based on pointer movement', () => {
-			editor.inputs.currentScreenPoint = new Vec(150, 150)
-			;(tickManager as any).prevPoint = new Vec(50, 50)
-			editor.inputs.pointerVelocity = new Vec(0, 0)
-
-			updatePointerVelocity(100) // 100ms elapsed
-
-			// Delta should be (100, 100), length = ~141.42, direction = (~0.707, ~0.707)
-			// Velocity should be length/elapsed = ~1.414 per ms in each direction
-			// But with linear interpolation (lrp factor 0.5), it will be halved
-			const expectedVelocity = new Vec(0.5, 0.5) // With lrp factor 0.5
-			expect(editor.inputs.pointerVelocity.x).toBeCloseTo(expectedVelocity.x, 1)
-			expect(editor.inputs.pointerVelocity.y).toBeCloseTo(expectedVelocity.y, 1)
-		})
-
-		it('should update prevPoint to current screen point', () => {
-			const newPoint = new Vec(200, 200)
-			editor.inputs.currentScreenPoint = newPoint
-
-			updatePointerVelocity(16)
-
-			expect((tickManager as any).prevPoint).toEqual(newPoint)
-		})
-
-		it('should use linear interpolation to smooth velocity', () => {
-			editor.inputs.currentScreenPoint = new Vec(150, 50)
-			;(tickManager as any).prevPoint = new Vec(50, 50)
-			editor.inputs.pointerVelocity = new Vec(2, 2)
-
-			updatePointerVelocity(100)
-
-			// Should interpolate between current velocity (2,2) and new velocity (1,0)
-			// lrp with factor 0.5 should give us something between them
-			expect(editor.inputs.pointerVelocity.x).toBeGreaterThan(0.5)
-			expect(editor.inputs.pointerVelocity.x).toBeLessThan(2)
-		})
-
-		it('should set very small velocity components to 0', () => {
-			editor.inputs.currentScreenPoint = new Vec(50.005, 50.005)
-			;(tickManager as any).prevPoint = new Vec(50, 50)
-			editor.inputs.pointerVelocity = new Vec(0, 0)
-
-			updatePointerVelocity(1000) // Long elapsed time = very small velocity
-
-			expect(editor.inputs.pointerVelocity.x).toBe(0)
-			expect(editor.inputs.pointerVelocity.y).toBe(0)
-		})
-
-		it('should handle zero movement (stationary pointer)', () => {
-			editor.inputs.currentScreenPoint = new Vec(100, 100)
-			;(tickManager as any).prevPoint = new Vec(100, 100)
-			editor.inputs.pointerVelocity = new Vec(1, 1)
-
-			updatePointerVelocity(16)
-
-			// Should interpolate towards zero velocity
-			expect(editor.inputs.pointerVelocity.x).toBeLessThan(1)
-			expect(editor.inputs.pointerVelocity.y).toBeLessThan(1)
-		})
-
-		it('should only update pointerVelocity if it actually changes', () => {
-			// Setup scenario where velocity won't change
-			editor.inputs.currentScreenPoint = new Vec(100, 100)
-			;(tickManager as any).prevPoint = new Vec(100, 100)
-			editor.inputs.pointerVelocity = new Vec(0, 0)
-
-			const originalVelocity = editor.inputs.pointerVelocity
-			updatePointerVelocity(16)
-
-			// Should still be the same object reference since no change occurred
-			expect(editor.inputs.pointerVelocity).toBe(originalVelocity)
-		})
-	})
-
 	describe('RAF throttling behavior', () => {
 		it('should use test-specific RAF behavior in test environment', () => {
 			// The TickManager should detect test environment and use requestAnimationFrame directly

package/src/lib/editor/managers/TickManager/TickManager.ts

@@ -1,5 +1,4 @@
 import { throttleToNextFrame as _throttleToNextFrame, bind } from '@tldraw/utils'
-import { Vec } from '../../../primitives/Vec'
 import { Editor } from '../../Editor'
 
 const throttleToNextFrame =
@@ -13,6 +12,7 @@ const throttleToNextFrame =
 			}
 		: _throttleToNextFrame
 
+/** @internal */
 export class TickManager {
 	constructor(public editor: Editor) {
 		this.editor.disposables.add(this.dispose)
@@ -40,7 +40,7 @@ export class TickManager {
 		const elapsed = now - this.now
 		this.now = now
 
-		this.updatePointerVelocity(elapsed)
+		this.editor.inputs.updatePointerVelocity(elapsed)
 		this.editor.emit('frame', elapsed)
 		this.editor.emit('tick', elapsed)
 		this.cancelRaf = throttleToNextFrame(this.tick)
@@ -53,34 +53,4 @@ export class TickManager {
 
 		this.cancelRaf?.()
 	}
-
-	private prevPoint = new Vec()
-
-	updatePointerVelocity(elapsed: number) {
-		const {
-			prevPoint,
-			editor: {
-				inputs: { currentScreenPoint, pointerVelocity },
-			},
-		} = this
-
-		if (elapsed === 0) return
-
-		const delta = Vec.Sub(currentScreenPoint, prevPoint)
-		this.prevPoint = currentScreenPoint.clone()
-
-		const length = delta.len()
-		const direction = length ? delta.div(length) : new Vec(0, 0)
-
-		// consider adjusting this with an easing rather than a linear interpolation
-		const next = pointerVelocity.clone().lrp(direction.mul(length / elapsed), 0.5)
-
-		// if the velocity is very small, just set it to 0
-		if (Math.abs(next.x) < 0.01) next.x = 0
-		if (Math.abs(next.y) < 0.01) next.y = 0
-
-		if (!pointerVelocity.equals(next)) {
-			this.editor.inputs.pointerVelocity = next
-		}
-	}
 }

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/shapes/group/DashedOutlineBox.tsx

@@ -6,7 +6,7 @@ import { getPerfectDashProps } from '../shared/getPerfectDashProps'
 export function DashedOutlineBox({ bounds, className }: { bounds: Box; className: string }) {
 	const editor = useEditor()
 
-	const zoomLevel = useValue('zoom level', () => editor.getZoomLevel(), [editor])
+	const zoomLevel = useValue('zoom level', () => editor.getEfficientZoomLevel(), [editor])
 
 	return (
 		<g className={className} pointerEvents="none" strokeLinecap="round" strokeLinejoin="round">

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/globals/environment.ts

@@ -1,5 +1,9 @@
+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
  */
@@ -14,15 +18,66 @@ const tlenv = {
 	hasCanvasSupport: false,
 }
 
-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
+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 }
+	)
 }
 
-export { tlenv }
+export { tlenv, tlenvReactive }