@tldraw/editor 3.15.0-canary.21bb6b44433a → 3.15.0-canary.24182c470c85

package/src/lib/editor/tools/StateNode.ts

@@ -62,7 +62,7 @@ export abstract class StateNode implements Partial<TLEventHandlers> {
 
 		this.parent = parent ?? ({} as any)
 
-		if (this.parent) {
+		if (parent) {
 			if (children && initial) {
 				this.type = 'branch'
 				this.initial = initial
@@ -238,6 +238,32 @@ export abstract class StateNode implements Partial<TLEventHandlers> {
 		this._currentToolIdMask.set(id)
 	}
 
+	/**
+	 * Add a child node to this state node.
+	 *
+	 * @public
+	 */
+	addChild(childConstructor: TLStateNodeConstructor): this {
+		if (this.type === 'leaf') {
+			throw new Error('StateNode.addChild: cannot add child to a leaf node')
+		}
+
+		// Initialize children if it's undefined (for root nodes without static children)
+		if (!this.children) {
+			this.children = {}
+		}
+
+		const child = new childConstructor(this.editor, this)
+
+		// Check if a child with this ID already exists
+		if (this.children[child.id]) {
+			throw new Error(`StateNode.addChild: a child with id '${child.id}' already exists`)
+		}
+
+		this.children[child.id] = child
+		return this
+	}
+
 	onWheel?(info: TLWheelEventInfo): void
 	onPointerDown?(info: TLPointerEventInfo): void
 	onPointerMove?(info: TLPointerEventInfo): void

package/src/lib/editor/types/misc-types.ts

@@ -187,3 +187,22 @@ export interface TLCameraConstraints {
 				y: 'free' | 'fixed' | 'inside' | 'outside' | 'contain'
 		  }
 }
+
+/** @public */
+export interface TLUpdatePointerOptions {
+	/** Whether to update the pointer immediately, rather than on the next tick. */
+	immediate?: boolean
+	/**
+	 * The point, in screen-space, to update the pointer to. Defaults to the position of the last
+	 * pointer event.
+	 */
+	point?: VecLike
+	pointerId?: number
+	ctrlKey?: boolean
+	altKey?: boolean
+	shiftKey?: boolean
+	metaKey?: boolean
+	accelKey?: boolean
+	isPen?: boolean
+	button?: number
+}

package/src/lib/hooks/useEditorComponents.tsx

@@ -69,7 +69,7 @@ export interface TLEditorComponents {
 	ShapeIndicator?: ComponentType<TLShapeIndicatorProps> | null
 	ShapeIndicators?: ComponentType | null
 	SnapIndicator?: ComponentType<TLSnapIndicatorProps> | null
-	Spinner?: ComponentType | null
+	Spinner?: ComponentType<React.SVGProps<SVGSVGElement>> | null
 	SvgDefs?: ComponentType | null
 	ZoomBrush?: ComponentType<TLBrushProps> | null
 

package/src/lib/license/Watermark.tsx

@@ -143,7 +143,7 @@ To remove the watermark, please purchase a license at tldraw.dev.
 		}
 
 		.${className}:hover > button {
-			animation: delayed_link 0.2s forwards ease-in-out;
+			animation: ${className}_delayed_link 0.2s forwards ease-in-out;
 			animation-delay: 0.32s;
 		}
 
@@ -153,7 +153,7 @@ To remove the watermark, please purchase a license at tldraw.dev.
 	}
 
 
-	@keyframes delayed_link {
+	@keyframes ${className}_delayed_link {
 		0% {
 			cursor: inherit;
 			opacity: .38;

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

@@ -2,7 +2,7 @@ import { Vec, VecLike } from '../Vec'
 import { intersectLineSegmentCircle } from '../intersect'
 import { getArcMeasure, getPointInArcT, getPointOnCircle } from '../utils'
 import { Geometry2d, Geometry2dOptions } from './Geometry2d'
-import { getVerticesCountForLength } from './geometry-constants'
+import { getVerticesCountForArcLength } from './geometry-constants'
 
 /** @public */
 export class Arc2d extends Geometry2d {
@@ -94,7 +94,7 @@ export class Arc2d extends Geometry2d {
 	getVertices(): Vec[] {
 		const { _center, _measure: measure, length, _radius: radius, _angleStart: angleStart } = this
 		const vertices: Vec[] = []
-		for (let i = 0, n = getVerticesCountForLength(Math.abs(length)); i < n + 1; i++) {
+		for (let i = 0, n = getVerticesCountForArcLength(Math.abs(length)); i < n + 1; i++) {
 			const t = (i / n) * measure
 			const angle = angleStart + t
 			vertices.push(getPointOnCircle(_center, radius, angle))

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

@@ -3,7 +3,7 @@ import { Vec, VecLike } from '../Vec'
 import { intersectLineSegmentCircle } from '../intersect'
 import { PI2, getPointOnCircle } from '../utils'
 import { Geometry2d, Geometry2dOptions } from './Geometry2d'
-import { getVerticesCountForLength } from './geometry-constants'
+import { getVerticesCountForArcLength } from './geometry-constants'
 
 /** @public */
 export class Circle2d extends Geometry2d {
@@ -36,7 +36,7 @@ export class Circle2d extends Geometry2d {
 		const { _center, _radius: radius } = this
 		const perimeter = PI2 * radius
 		const vertices: Vec[] = []
-		for (let i = 0, n = getVerticesCountForLength(perimeter); i < n; i++) {
+		for (let i = 0, n = getVerticesCountForArcLength(perimeter); i < n; i++) {
 			const angle = (i / n) * PI2
 			vertices.push(getPointOnCircle(_center, radius, angle))
 		}

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

@@ -8,6 +8,7 @@ export class CubicBezier2d extends Polyline2d {
 	private _b: Vec
 	private _c: Vec
 	private _d: Vec
+	private _resolution: number
 
 	constructor(
 		config: Omit<Geometry2dOptions, 'isFilled' | 'isClosed'> & {
@@ -15,6 +16,7 @@ export class CubicBezier2d extends Polyline2d {
 			cp1: Vec
 			cp2: Vec
 			end: Vec
+			resolution?: number
 		}
 	) {
 		const { start: a, cp1: b, cp2: c, end: d } = config
@@ -24,13 +26,14 @@ export class CubicBezier2d extends Polyline2d {
 		this._b = b
 		this._c = c
 		this._d = d
+		this._resolution = config.resolution ?? 10
 	}
 
 	override getVertices() {
 		const vertices = [] as Vec[]
 		const { _a: a, _b: b, _c: c, _d: d } = this
 		// we'll always use ten vertices for each bezier curve
-		for (let i = 0, n = 10; i <= n; i++) {
+		for (let i = 0, n = this._resolution; i <= n; i++) {
 			const t = i / n
 			vertices.push(
 				new Vec(

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

@@ -3,7 +3,7 @@ import { Vec, VecLike } from '../Vec'
 import { PI, PI2, clamp, perimeterOfEllipse } from '../utils'
 import { Edge2d } from './Edge2d'
 import { Geometry2d, Geometry2dOptions } from './Geometry2d'
-import { getVerticesCountForLength } from './geometry-constants'
+import { getVerticesCountForArcLength } from './geometry-constants'
 
 /** @public */
 export class Ellipse2d extends Geometry2d {
@@ -47,7 +47,7 @@ export class Ellipse2d extends Geometry2d {
 		const q = Math.pow(cx - cy, 2) / Math.pow(cx + cy, 2)
 		const p = PI * (cx + cy) * (1 + (3 * q) / (10 + Math.sqrt(4 - 3 * q)))
 		// Number of points
-		const len = getVerticesCountForLength(p)
+		const len = getVerticesCountForArcLength(p)
 		// Size of step
 		const step = PI2 / len
 

package/src/lib/primitives/geometry/geometry-constants.ts

@@ -1,6 +1,7 @@
 const SPACING = 20
 const MIN_COUNT = 8
 
-export function getVerticesCountForLength(length: number, spacing = SPACING) {
+/** @internal */
+export function getVerticesCountForArcLength(length: number, spacing = SPACING) {
 	return Math.max(MIN_COUNT, Math.ceil(length / spacing))
 }

package/src/lib/primitives/intersect.test.ts

@@ -181,6 +181,17 @@ describe('intersectLineSegmentLineSegment', () => {
 			expect(result!.x).toBeCloseTo(5, 1)
 			expect(result!.y).toBeCloseTo(5, 1)
 		})
+
+		it('should find intersection when segments cross at endpoints (floating point error case)', () => {
+			const result = intersectLineSegmentLineSegment(
+				{ x: 100, y: 100 },
+				{ x: 20, y: 20 },
+				{ x: 36.141160159025375, y: 31.811740238538057 },
+				{ x: 34.14213562373095, y: 34.14213562373095 }
+			)
+
+			expect(result).not.toBeNull()
+		})
 	})
 
 	describe('edge cases', () => {
@@ -195,17 +206,6 @@ describe('intersectLineSegmentLineSegment', () => {
 			expect(result).not.toBeNull()
 		})
 
-		it('should handle segments with very small coordinates', () => {
-			const a1 = new Vec(1e-10, 1e-10)
-			const a2 = new Vec(1e-9, 1e-9)
-			const b1 = new Vec(1e-10, 1e-9)
-			const b2 = new Vec(1e-9, 1e-10)
-
-			const result = intersectLineSegmentLineSegment(a1, a2, b1, b2)
-
-			expect(result).not.toBeNull()
-		})
-
 		it('should handle segments with very large coordinates', () => {
 			const a1 = new Vec(1e10, 1e10)
 			const a2 = new Vec(1e11, 1e11)
@@ -531,6 +531,52 @@ describe('intersectLineSegmentPolyline', () => {
 		expect(sorted[3].x).toBeCloseTo(18, 5)
 		sorted.forEach((pt) => expect(pt.y).toBeCloseTo(5, 5))
 	})
+
+	// Test cases for vertex intersection issues
+	describe('vertex intersection edge cases', () => {
+		it('should detect intersection when line segment passes through polyline vertex', () => {
+			const a1 = new Vec(0, 5)
+			const a2 = new Vec(10, 5)
+			const points = [new Vec(5, 0), new Vec(5, 10)] // vertical line at x=5
+			const result = intersectLineSegmentPolyline(a1, a2, points)
+			expect(result).not.toBeNull()
+			expect(result!.length).toBe(1)
+			expect(result![0].x).toBeCloseTo(5, 5)
+			expect(result![0].y).toBeCloseTo(5, 5)
+		})
+
+		it('should detect intersection when line segment passes through polyline vertex at angle', () => {
+			const a1 = new Vec(0, 0)
+			const a2 = new Vec(10, 10)
+			const points = [new Vec(5, 0), new Vec(5, 10)] // vertical line at x=5
+			const result = intersectLineSegmentPolyline(a1, a2, points)
+			expect(result).not.toBeNull()
+			expect(result!.length).toBe(1)
+			expect(result![0].x).toBeCloseTo(5, 5)
+			expect(result![0].y).toBeCloseTo(5, 5)
+		})
+
+		it('should detect intersection when line segment passes through polyline vertex at middle', () => {
+			const a1 = new Vec(0, 5)
+			const a2 = new Vec(10, 5)
+			const points = [new Vec(0, 0), new Vec(5, 5), new Vec(10, 0)] // vertex at (5,5)
+			const result = intersectLineSegmentPolyline(a1, a2, points)
+			expect(result).not.toBeNull()
+			expect(result!.length).toBe(1)
+			expect(result![0].x).toBeCloseTo(5, 5)
+			expect(result![0].y).toBeCloseTo(5, 5)
+		})
+
+		it('should detect intersection when line segment passes through a polyline vertext (floating point error case)', () => {
+			const result = intersectLineSegmentPolyline({ x: 100, y: 100 }, { x: 20, y: 20 }, [
+				{ x: 36.141160159025375, y: 31.811740238538057 },
+				{ x: 34.14213562373095, y: 34.14213562373095 },
+				{ x: 31.811740238538057, y: 36.141160159025375 },
+			])
+
+			expect(result).not.toBeNull()
+		})
+	})
 })
 
 describe('intersectLineSegmentPolygon', () => {

package/src/lib/primitives/intersect.ts

@@ -1,5 +1,5 @@
 import { Box } from './Box'
-import { pointInPolygon } from './utils'
+import { approximately, approximatelyLte, pointInPolygon } from './utils'
 import { Vec, VecLike } from './Vec'
 
 // need even more intersections? See https://gist.github.com/steveruizok/35c02d526c707003a5c79761bfb89a52
@@ -17,7 +17,8 @@ export function intersectLineSegmentLineSegment(
 	a1: VecLike,
 	a2: VecLike,
 	b1: VecLike,
-	b2: VecLike
+	b2: VecLike,
+	precision = 1e-10
 ) {
 	const ABx = a1.x - b1.x
 	const ABy = a1.y - b1.y
@@ -29,14 +30,19 @@ export function intersectLineSegmentLineSegment(
 	const ub_t = AVx * ABy - AVy * ABx
 	const u_b = BVy * AVx - BVx * AVy
 
-	if (ua_t === 0 || ub_t === 0) return null // coincident
+	if (approximately(ua_t, 0, precision) || approximately(ub_t, 0, precision)) return null // coincident
 
-	if (u_b === 0) return null // parallel
+	if (approximately(u_b, 0, precision)) return null // parallel
 
 	if (u_b !== 0) {
 		const ua = ua_t / u_b
 		const ub = ub_t / u_b
-		if (0 <= ua && ua <= 1 && 0 <= ub && ub <= 1) {
+		if (
+			approximatelyLte(0, ua, precision) &&
+			approximatelyLte(ua, 1, precision) &&
+			approximatelyLte(0, ub, precision) &&
+			approximatelyLte(ub, 1, precision)
+		) {
 			return Vec.AddXY(a1, ua * AVx, ua * AVy)
 		}
 	}
@@ -125,6 +131,7 @@ export function intersectLineSegmentPolygon(a1: VecLike, a2: VecLike, points: Ve
 			points[i - 1],
 			points[i % points.length]
 		)
+
 		if (segmentIntersection) result.push(segmentIntersection)
 	}
 

package/src/lib/primitives/utils.ts

@@ -77,6 +77,17 @@ export function approximately(a: number, b: number, precision = 0.000001) {
 	return Math.abs(a - b) <= precision
 }
 
+/**
+ * Whether a number is approximately less than or equal to another number.
+ *
+ * @param a - The first number.
+ * @param b - The second number.
+ * @public
+ */
+export function approximatelyLte(a: number, b: number, precision = 0.000001) {
+	return a < b || approximately(a, b, precision)
+}
+
 /**
  * Find the approximate perimeter of an ellipse.
  *

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 = '3.15.0-canary.21bb6b44433a'
+export const version = '3.15.0-canary.24182c470c85'
 export const publishDates = {
 	major: '2024-09-13T14:36:29.063Z',
-	minor: '2025-07-08T16:23:39.770Z',
-	patch: '2025-07-08T16:23:39.770Z',
+	minor: '2025-07-29T14:40:12.366Z',
+	patch: '2025-07-29T14:40:12.366Z',
 }

package/src/lib/test/currentToolIdMask.test.ts

@@ -1,49 +0,0 @@
-import { describe } from 'node:test'
-import { createTLStore } from '../config/createTLStore'
-import { Editor } from '../editor/Editor'
-import { StateNode } from '../editor/tools/StateNode'
-
-let editor: Editor
-
-class A extends StateNode {
-	static override id = 'A'
-}
-
-class B extends StateNode {
-	static override id = 'B'
-}
-
-class C extends StateNode {
-	static override id = 'C'
-
-	override onEnter() {
-		this.setCurrentToolIdMask('A')
-	}
-}
-
-beforeEach(() => {
-	editor = new Editor({
-		initialState: 'A',
-		shapeUtils: [],
-		bindingUtils: [],
-		tools: [A, B, C],
-		store: createTLStore({ shapeUtils: [], bindingUtils: [] }),
-		getContainer: () => document.body,
-	})
-})
-
-describe('current tool id mask', () => {
-	it('starts with the correct tool id', () => {
-		expect(editor.getCurrentToolId()).toBe('A')
-	})
-
-	it('updates the current tool id', () => {
-		editor.setCurrentTool('B')
-		expect(editor.getCurrentToolId()).toBe('B')
-	})
-
-	it('masks the current tool id', () => {
-		editor.setCurrentTool('C')
-		expect(editor.getCurrentToolId()).toBe('A')
-	})
-})