@tldraw/editor 3.13.0-canary.fd867adaa211 → 3.14.0-canary.95353287a2be

package/src/lib/primitives/geometry/Geometry2d.test.ts

@@ -0,0 +1,42 @@
+import { Mat } from '../Mat'
+import { Vec, VecLike } from '../Vec'
+import { Geometry2dFilters } from './Geometry2d'
+import { Rectangle2d } from './Rectangle2d'
+
+describe('TransformedGeometry2d', () => {
+	const rect = new Rectangle2d({ width: 100, height: 50, isFilled: true }).transform(
+		Mat.Translate(50, 100).scale(2, 2)
+	)
+
+	test('getVertices', () => {
+		expect(rect.getVertices(Geometry2dFilters.INCLUDE_ALL)).toMatchObject([
+			{ x: 50, y: 100, z: 1 },
+			{ x: 250, y: 100, z: 1 },
+			{ x: 250, y: 200, z: 1 },
+			{ x: 50, y: 200, z: 1 },
+		])
+	})
+
+	test('nearestPoint', () => {
+		expectApproxMatch(rect.nearestPoint(new Vec(100, 300)), { x: 100, y: 200 })
+	})
+
+	test('hitTestPoint', () => {
+		// basic case - no margin / scaling:
+		expect(rect.hitTestPoint(new Vec(0, 0), 0, true)).toBe(false)
+		expect(rect.hitTestPoint(new Vec(50, 100), 0, true)).toBe(true)
+		expect(rect.hitTestPoint(new Vec(49, 100), 0, true)).toBe(false)
+		expect(rect.hitTestPoint(new Vec(100, 150), 0, true)).toBe(true)
+
+		// with margin:
+		// move away 8 px and test with 10px margin:
+		expect(rect.hitTestPoint(new Vec(42, 100), 10, true)).toBe(true)
+		// move away 12 px and test with 10px margin:
+		expect(rect.hitTestPoint(new Vec(38, 100), 10, true)).toBe(false)
+	})
+})
+
+function expectApproxMatch(a: VecLike, b: VecLike) {
+	expect(a.x).toBeCloseTo(b.x, 0.0001)
+	expect(a.y).toBeCloseTo(b.y, 0.0001)
+}

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

@@ -1,4 +1,4 @@
-import { assert } from '@tldraw/utils'
+import { assert, invLerp } from '@tldraw/utils'
 import { Box } from '../Box'
 import { Mat, MatModel } from '../Mat'
 import { Vec, VecLike } from '../Vec'
@@ -81,9 +81,9 @@ export abstract class Geometry2d {
 
 	abstract getVertices(filters: Geometry2dFilters): Vec[]
 
-	abstract nearestPoint(point: Vec, _filters?: Geometry2dFilters): Vec
+	abstract nearestPoint(point: VecLike, _filters?: Geometry2dFilters): Vec
 
-	hitTestPoint(point: Vec, margin = 0, hitInside = false, _filters?: Geometry2dFilters) {
+	hitTestPoint(point: VecLike, margin = 0, hitInside = false, _filters?: Geometry2dFilters) {
 		// First check whether the point is inside
 		if (this.isClosed && (this.isFilled || hitInside) && pointInPolygon(point, this.vertices)) {
 			return true
@@ -92,17 +92,17 @@ export abstract class Geometry2d {
 		return Vec.Dist2(point, this.nearestPoint(point)) <= margin * margin
 	}
 
-	distanceToPoint(point: Vec, hitInside = false, filters?: Geometry2dFilters) {
+	distanceToPoint(point: VecLike, hitInside = false, filters?: Geometry2dFilters) {
 		return (
-			point.dist(this.nearestPoint(point, filters)) *
+			Vec.Dist(point, this.nearestPoint(point, filters)) *
 			(this.isClosed && (this.isFilled || hitInside) && pointInPolygon(point, this.vertices)
 				? -1
 				: 1)
 		)
 	}
 
-	distanceToLineSegment(A: Vec, B: Vec, filters?: Geometry2dFilters) {
-		if (A.equals(B)) return this.distanceToPoint(A, false, filters)
+	distanceToLineSegment(A: VecLike, B: VecLike, filters?: Geometry2dFilters) {
+		if (Vec.Equals(A, B)) return this.distanceToPoint(A, false, filters)
 		const { vertices } = this
 		let nearest: Vec | undefined
 		let dist = Infinity
@@ -120,7 +120,7 @@ export abstract class Geometry2d {
 		return this.isClosed && this.isFilled && pointInPolygon(nearest, this.vertices) ? -dist : dist
 	}
 
-	hitTestLineSegment(A: Vec, B: Vec, distance = 0, filters?: Geometry2dFilters): boolean {
+	hitTestLineSegment(A: VecLike, B: VecLike, distance = 0, filters?: Geometry2dFilters): boolean {
 		return this.distanceToLineSegment(A, B, filters) <= distance
 	}
 
@@ -148,8 +148,76 @@ export abstract class Geometry2d {
 		return intersectPolys(polyline, this.vertices, false, this.isClosed)
 	}
 
+	/**
+	 * Find a point along the edge of the geometry that is a fraction `t` along the entire way round.
+	 */
+	interpolateAlongEdge(t: number, _filters?: Geometry2dFilters): Vec {
+		const { vertices } = this
+
+		if (t <= 0) return vertices[0]
+
+		const distanceToTravel = t * this.length
+		let distanceTraveled = 0
+
+		for (let i = 0; i < (this.isClosed ? vertices.length : vertices.length - 1); i++) {
+			const curr = vertices[i]
+			const next = vertices[(i + 1) % vertices.length]
+			const dist = Vec.Dist(curr, next)
+			const newDistanceTraveled = distanceTraveled + dist
+			if (newDistanceTraveled >= distanceToTravel) {
+				const p = Vec.Lrp(
+					curr,
+					next,
+					invLerp(distanceTraveled, newDistanceTraveled, distanceToTravel)
+				)
+				return p
+			}
+			distanceTraveled = newDistanceTraveled
+		}
+
+		return this.isClosed ? vertices[0] : vertices[vertices.length - 1]
+	}
+
+	/**
+	 * Take `point`, find the closest point to it on the edge of the geometry, and return how far
+	 * along the edge it is as a fraction of the total length.
+	 */
+	uninterpolateAlongEdge(point: VecLike, _filters?: Geometry2dFilters): number {
+		const { vertices, length } = this
+		let closestSegment = null
+		let closestDistance = Infinity
+		let distanceTraveled = 0
+
+		for (let i = 0; i < (this.isClosed ? vertices.length : vertices.length - 1); i++) {
+			const curr = vertices[i]
+			const next = vertices[(i + 1) % vertices.length]
+
+			const nearestPoint = Vec.NearestPointOnLineSegment(curr, next, point, true)
+			const distance = Vec.Dist(nearestPoint, point)
+
+			if (distance < closestDistance) {
+				closestDistance = distance
+				closestSegment = {
+					start: curr,
+					end: next,
+					nearestPoint,
+					distanceToStart: distanceTraveled,
+				}
+			}
+
+			distanceTraveled += Vec.Dist(curr, next)
+		}
+
+		assert(closestSegment)
+
+		const distanceAlongRoute =
+			closestSegment.distanceToStart + Vec.Dist(closestSegment.start, closestSegment.nearestPoint)
+
+		return distanceAlongRoute / length
+	}
+
 	/** @deprecated Iterate the vertices instead. */
-	nearestPointOnLineSegment(A: Vec, B: Vec): Vec {
+	nearestPointOnLineSegment(A: VecLike, B: VecLike): Vec {
 		const { vertices } = this
 		let nearest: Vec | undefined
 		let dist = Infinity
@@ -167,7 +235,7 @@ export abstract class Geometry2d {
 		return nearest
 	}
 
-	isPointInBounds(point: Vec, margin = 0) {
+	isPointInBounds(point: VecLike, margin = 0) {
 		const { bounds } = this
 		return !(
 			point.x < bounds.minX - margin ||
@@ -261,21 +329,24 @@ export abstract class Geometry2d {
 	// eslint-disable-next-line no-restricted-syntax
 	get length() {
 		if (this._length) return this._length
-		this._length = this.getLength()
+		this._length = this.getLength(Geometry2dFilters.EXCLUDE_LABELS)
 		return this._length
 	}
 
-	getLength() {
-		const { vertices } = this
-		let n1: Vec,
-			p1 = vertices[0],
-			length = 0
+	getLength(_filters?: Geometry2dFilters) {
+		const vertices = this.getVertices(_filters ?? Geometry2dFilters.EXCLUDE_LABELS)
+		if (vertices.length === 0) return 0
+		let prev = vertices[0]
+		let length = 0
 		for (let i = 1; i < vertices.length; i++) {
-			n1 = vertices[i]
-			length += Vec.Dist2(p1, n1)
-			p1 = n1
+			const next = vertices[i]
+			length += Vec.Dist(prev, next)
+			prev = next
+		}
+		if (this.isClosed) {
+			length += Vec.Dist(vertices[vertices.length - 1], vertices[0])
 		}
-		return Math.sqrt(length)
+		return length
 	}
 
 	abstract getSvgPathData(first: boolean): string
@@ -317,7 +388,7 @@ export class TransformedGeometry2d extends Geometry2d {
 		return this.geometry.getVertices(filters).map((v) => Mat.applyToPoint(this.matrix, v))
 	}
 
-	nearestPoint(point: Vec, filters?: Geometry2dFilters): Vec {
+	nearestPoint(point: VecLike, filters?: Geometry2dFilters): Vec {
 		return Mat.applyToPoint(
 			this.matrix,
 			this.geometry.nearestPoint(Mat.applyToPoint(this.inverse, point), filters)
@@ -325,7 +396,7 @@ export class TransformedGeometry2d extends Geometry2d {
 	}
 
 	override hitTestPoint(
-		point: Vec,
+		point: VecLike,
 		margin = 0,
 		hitInside?: boolean,
 		filters?: Geometry2dFilters
@@ -338,14 +409,14 @@ export class TransformedGeometry2d extends Geometry2d {
 		)
 	}
 
-	override distanceToPoint(point: Vec, hitInside = false, filters?: Geometry2dFilters) {
+	override distanceToPoint(point: VecLike, hitInside = false, filters?: Geometry2dFilters) {
 		return (
 			this.geometry.distanceToPoint(Mat.applyToPoint(this.inverse, point), hitInside, filters) *
 			this.decomposed.scaleX
 		)
 	}
 
-	override distanceToLineSegment(A: Vec, B: Vec, filters?: Geometry2dFilters) {
+	override distanceToLineSegment(A: VecLike, B: VecLike, filters?: Geometry2dFilters) {
 		return (
 			this.geometry.distanceToLineSegment(
 				Mat.applyToPoint(this.inverse, A),
@@ -355,7 +426,12 @@ export class TransformedGeometry2d extends Geometry2d {
 		)
 	}
 
-	override hitTestLineSegment(A: Vec, B: Vec, distance = 0, filters?: Geometry2dFilters): boolean {
+	override hitTestLineSegment(
+		A: VecLike,
+		B: VecLike,
+		distance = 0,
+		filters?: Geometry2dFilters
+	): boolean {
 		return this.geometry.hitTestLineSegment(
 			Mat.applyToPoint(this.inverse, A),
 			Mat.applyToPoint(this.inverse, B),
@@ -365,27 +441,39 @@ export class TransformedGeometry2d extends Geometry2d {
 	}
 
 	override intersectLineSegment(A: VecLike, B: VecLike, filters?: Geometry2dFilters) {
-		return this.geometry.intersectLineSegment(
-			Mat.applyToPoint(this.inverse, A),
-			Mat.applyToPoint(this.inverse, B),
-			filters
+		return Mat.applyToPoints(
+			this.matrix,
+			this.geometry.intersectLineSegment(
+				Mat.applyToPoint(this.inverse, A),
+				Mat.applyToPoint(this.inverse, B),
+				filters
+			)
 		)
 	}
 
 	override intersectCircle(center: VecLike, radius: number, filters?: Geometry2dFilters) {
-		return this.geometry.intersectCircle(
-			Mat.applyToPoint(this.inverse, center),
-			radius / this.decomposed.scaleX,
-			filters
+		return Mat.applyToPoints(
+			this.matrix,
+			this.geometry.intersectCircle(
+				Mat.applyToPoint(this.inverse, center),
+				radius / this.decomposed.scaleX,
+				filters
+			)
 		)
 	}
 
 	override intersectPolygon(polygon: VecLike[], filters?: Geometry2dFilters): VecLike[] {
-		return this.geometry.intersectPolygon(Mat.applyToPoints(this.inverse, polygon), filters)
+		return Mat.applyToPoints(
+			this.matrix,
+			this.geometry.intersectPolygon(Mat.applyToPoints(this.inverse, polygon), filters)
+		)
 	}
 
 	override intersectPolyline(polyline: VecLike[], filters?: Geometry2dFilters): VecLike[] {
-		return this.geometry.intersectPolyline(Mat.applyToPoints(this.inverse, polyline), filters)
+		return Mat.applyToPoints(
+			this.matrix,
+			this.geometry.intersectPolyline(Mat.applyToPoints(this.inverse, polyline), filters)
+		)
 	}
 
 	override transform(transform: MatModel, opts?: TransformedGeometry2dOptions): Geometry2d {

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

@@ -1,4 +1,5 @@
 import { EMPTY_ARRAY } from '@tldraw/state'
+import { assert, invLerp, lerp } from '@tldraw/utils'
 import { Box } from '../Box'
 import { Mat } from '../Mat'
 import { Vec, VecLike } from '../Vec'
@@ -34,7 +35,7 @@ export class Group2d extends Geometry2d {
 			.flatMap((c) => c.getVertices(filters))
 	}
 
-	override nearestPoint(point: Vec, filters?: Geometry2dFilters): Vec {
+	override nearestPoint(point: VecLike, filters?: Geometry2dFilters): Vec {
 		let dist = Infinity
 		let nearest: Vec | undefined
 
@@ -59,7 +60,7 @@ export class Group2d extends Geometry2d {
 		return nearest
 	}
 
-	override distanceToPoint(point: Vec, hitInside = false, filters?: Geometry2dFilters) {
+	override distanceToPoint(point: VecLike, hitInside = false, filters?: Geometry2dFilters) {
 		let smallestDistance = Infinity
 		for (const child of this.children) {
 			if (child.isExcludedByFilter(filters)) continue
@@ -72,7 +73,7 @@ export class Group2d extends Geometry2d {
 	}
 
 	override hitTestPoint(
-		point: Vec,
+		point: VecLike,
 		margin: number,
 		hitInside: boolean,
 		filters = Geometry2dFilters.EXCLUDE_LABELS
@@ -83,8 +84,8 @@ export class Group2d extends Geometry2d {
 	}
 
 	override hitTestLineSegment(
-		A: Vec,
-		B: Vec,
+		A: VecLike,
+		B: VecLike,
 		zoom: number,
 		filters = Geometry2dFilters.EXCLUDE_LABELS
 	): boolean {
@@ -121,6 +122,63 @@ export class Group2d extends Geometry2d {
 		})
 	}
 
+	override interpolateAlongEdge(t: number, filters?: Geometry2dFilters): Vec {
+		const totalLength = this.getLength(filters)
+
+		const distanceToTravel = t * totalLength
+		let distanceTraveled = 0
+		for (const child of this.children) {
+			if (child.isExcludedByFilter(filters)) continue
+			const childLength = child.length
+			const newDistanceTraveled = distanceTraveled + childLength
+			if (newDistanceTraveled >= distanceToTravel) {
+				return child.interpolateAlongEdge(
+					invLerp(distanceTraveled, newDistanceTraveled, distanceToTravel),
+					filters
+				)
+			}
+			distanceTraveled = newDistanceTraveled
+		}
+
+		return this.children[this.children.length - 1].interpolateAlongEdge(1, filters)
+	}
+
+	override uninterpolateAlongEdge(point: VecLike, filters?: Geometry2dFilters): number {
+		const totalLength = this.getLength(filters)
+
+		let closestChild = null
+		let closestDistance = Infinity
+		let distanceTraveled = 0
+
+		for (const child of this.children) {
+			if (child.isExcludedByFilter(filters)) continue
+			const childLength = child.getLength(filters)
+			const newDistanceTraveled = distanceTraveled + childLength
+
+			const distance = child.distanceToPoint(point, false, filters)
+			if (distance < closestDistance) {
+				closestDistance = distance
+				closestChild = {
+					startLength: distanceTraveled,
+					endLength: newDistanceTraveled,
+					child,
+				}
+			}
+
+			distanceTraveled = newDistanceTraveled
+		}
+
+		assert(closestChild)
+
+		const normalizedDistanceInChild = closestChild.child.uninterpolateAlongEdge(point, filters)
+		const childTLength = lerp(
+			closestChild.startLength,
+			closestChild.endLength,
+			normalizedDistanceInChild
+		)
+		return childTLength / totalLength
+	}
+
 	override transform(transform: Mat): Geometry2d {
 		return new Group2d({
 			children: this.children.map((c) => c.transform(transform)),
@@ -160,8 +218,13 @@ export class Group2d extends Geometry2d {
 		return path
 	}
 
-	getLength(): number {
-		return this.children.reduce((a, c) => (c.isLabel ? a : a + c.length), 0)
+	getLength(filters?: Geometry2dFilters): number {
+		let length = 0
+		for (const child of this.children) {
+			if (child.isExcludedByFilter(filters)) continue
+			length += child.length
+		}
+		return length
 	}
 
 	getSvgPathData(): string {

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

@@ -1,4 +1,4 @@
-import { Vec } from '../Vec'
+import { Vec, VecLike } from '../Vec'
 import { Geometry2d, Geometry2dOptions } from './Geometry2d'
 
 /** @public */
@@ -22,7 +22,7 @@ export class Point2d extends Geometry2d {
 		return this.point
 	}
 
-	hitTestLineSegment(A: Vec, B: Vec, margin: number): boolean {
+	hitTestLineSegment(A: VecLike, B: VecLike, margin: number): boolean {
 		return Vec.DistanceToLineSegment(A, B, this.point) < margin
 	}
 

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

@@ -1,4 +1,4 @@
-import { Vec } from '../Vec'
+import { Vec, VecLike } from '../Vec'
 import { Edge2d } from './Edge2d'
 import { Geometry2d, Geometry2dOptions } from './Geometry2d'
 
@@ -41,7 +41,7 @@ export class Polyline2d extends Geometry2d {
 		return this.points
 	}
 
-	nearestPoint(A: Vec): Vec {
+	nearestPoint(A: VecLike): Vec {
 		const { segments } = this
 		let nearest = this.points[0]
 		let dist = Infinity
@@ -59,7 +59,7 @@ export class Polyline2d extends Geometry2d {
 		return nearest
 	}
 
-	hitTestLineSegment(A: Vec, B: Vec, distance = 0): boolean {
+	hitTestLineSegment(A: VecLike, B: VecLike, distance = 0): boolean {
 		const { segments } = this
 		for (let i = 0, n = segments.length; i < n; i++) {
 			if (segments[i].hitTestLineSegment(A, B, distance)) {

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

@@ -1,5 +1,5 @@
 import { Box } from '../Box'
-import { Vec } from '../Vec'
+import { Vec, VecLike } from '../Vec'
 import { PI } from '../utils'
 import { Arc2d } from './Arc2d'
 import { Edge2d } from './Edge2d'
@@ -65,7 +65,7 @@ export class Stadium2d extends Geometry2d {
 		}
 	}
 
-	nearestPoint(A: Vec): Vec {
+	nearestPoint(A: VecLike): Vec {
 		let nearest: Vec | undefined
 		let dist = Infinity
 		let _d: number
@@ -84,7 +84,7 @@ export class Stadium2d extends Geometry2d {
 		return nearest
 	}
 
-	hitTestLineSegment(A: Vec, B: Vec): boolean {
+	hitTestLineSegment(A: VecLike, B: VecLike): boolean {
 		const { a, b, c, d } = this
 		return [a, b, c, d].some((edge) => edge.hitTestLineSegment(A, B))
 	}

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

@@ -27,7 +27,7 @@ beforeEach(() => {
 		shapeUtils: [],
 		bindingUtils: [],
 		tools: [A, B, C],
-		store: createTLStore({ shapeUtils: [] }),
+		store: createTLStore({ shapeUtils: [], bindingUtils: [] }),
 		getContainer: () => document.body,
 	})
 })

package/src/lib/test/user.test.ts

@@ -8,7 +8,7 @@ beforeEach(() => {
 		shapeUtils: [],
 		bindingUtils: [],
 		tools: [],
-		store: createTLStore({ shapeUtils: [] }),
+		store: createTLStore({ shapeUtils: [], bindingUtils: [] }),
 		getContainer: () => document.body,
 	})
 })

package/src/lib/utils/areShapesContentEqual.ts

@@ -0,0 +1,4 @@
+import { TLShape } from '@tldraw/tlschema'
+
+export const areShapesContentEqual = (a: TLShape, b: TLShape) =>
+	a.props === b.props && a.meta === b.meta

package/src/lib/utils/debug-flags.ts

@@ -54,6 +54,7 @@ export const debugFlags = {
 	hideShapes: createDebugValue('hideShapes', { defaults: { all: false } }),
 	editOnType: createDebugValue('editOnType', { defaults: { all: false } }),
 	a11y: createDebugValue('a11y', { defaults: { all: false } }),
+	debugElbowArrows: createDebugValue('debugElbowArrows', { defaults: { all: false } }),
 } as const
 
 declare global {
@@ -149,7 +150,9 @@ function createDebugValueBase<T>(def: DebugFlagDef<T>): DebugFlag<T> {
 		})
 	}
 
-	return Object.assign(valueAtom, def)
+	return Object.assign(valueAtom, def, {
+		reset: () => valueAtom.set(defaultValue),
+	})
 }
 
 function getStoredInitialValue(name: string) {
@@ -206,4 +209,6 @@ export interface DebugFlagDef<T> {
 }
 
 /** @internal */
-export type DebugFlag<T> = DebugFlagDef<T> & Atom<T>
+export interface DebugFlag<T> extends DebugFlagDef<T>, Atom<T> {
+	reset(): void
+}

package/src/lib/utils/nearestMultiple.ts

@@ -0,0 +1,13 @@
+// Euclidean algorithm to find the GCD
+function gcd(a: number, b: number): number {
+	return b === 0 ? a : gcd(b, a % b)
+}
+
+// Returns the lowest value that the given number can be multiplied by to reach an integer
+export function nearestMultiple(float: number) {
+	const decimal = float.toString().split('.')[1]
+	if (!decimal) return 1
+	const denominator = Math.pow(10, decimal.length)
+	const numerator = parseInt(decimal, 10)
+	return denominator / gcd(numerator, denominator)
+}

package/src/lib/utils/sync/LocalIndexedDb.test.ts

@@ -3,7 +3,7 @@ import { openDB } from 'idb'
 import { hardReset } from './hardReset'
 import { getAllIndexDbNames, LocalIndexedDb } from './LocalIndexedDb'
 
-const schema = createTLSchema({ shapes: {} })
+const schema = createTLSchema({ shapes: {}, bindings: {} })
 describe('LocalIndexedDb', () => {
 	beforeEach(() => {
 		jest.useRealTimers()

package/src/lib/utils/sync/TLLocalSyncClient.test.ts

@@ -19,7 +19,7 @@ class BroadcastChannelMock {
 }
 
 function testClient(channel = new BroadcastChannelMock('test')) {
-	const store = createTLStore({ shapeUtils: [] })
+	const store = createTLStore({ shapeUtils: [], bindingUtils: [] })
 	const onLoad = jest.fn(() => {
 		return
 	})

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.13.0-canary.fd867adaa211'
+export const version = '3.14.0-canary.95353287a2be'
 export const publishDates = {
 	major: '2024-09-13T14:36:29.063Z',
-	minor: '2025-04-30T12:33:09.282Z',
-	patch: '2025-04-30T12:33:09.282Z',
+	minor: '2025-05-22T14:14:36.289Z',
+	patch: '2025-05-22T14:14:36.289Z',
 }