@tldraw/editor 3.13.0-canary.bec6f90d283a → 3.13.0-canary.befc69663d98

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/dom.ts

@@ -91,14 +91,14 @@ export const setStyleProperty = (
 	elm.style.setProperty(property, value as string)
 }
 
-const INPUTS = ['input', 'select', 'button', 'textarea']
-
 /** @internal */
-export function activeElementShouldCaptureKeys() {
+export function activeElementShouldCaptureKeys(allowButtons = false) {
 	const { activeElement } = document
+	const elements = allowButtons ? ['input', 'textarea'] : ['input', 'select', 'button', 'textarea']
 	return !!(
 		activeElement &&
 		((activeElement as HTMLElement).isContentEditable ||
-			INPUTS.indexOf(activeElement.tagName.toLowerCase()) > -1)
+			elements.indexOf(activeElement.tagName.toLowerCase()) > -1 ||
+			activeElement.classList.contains('tlui-slider__thumb'))
 	)
 }

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/rotation.ts

@@ -26,11 +26,13 @@ export function getRotationSnapshot({
 		return null
 	}
 
-	const pageCenter = rotatedPageBounds.center.clone().rotWith(rotatedPageBounds.point, rotation)
+	const initialPageCenter = rotatedPageBounds.center
+		.clone()
+		.rotWith(rotatedPageBounds.point, rotation)
 
 	return {
-		pageCenter,
-		initialCursorAngle: pageCenter.angle(editor.inputs.originPagePoint),
+		initialPageCenter,
+		initialCursorAngle: initialPageCenter.angle(editor.inputs.originPagePoint),
 		initialShapesRotation: rotation,
 		shapeSnapshots: shapes.map((shape) => ({
 			shape,
@@ -43,7 +45,7 @@ export function getRotationSnapshot({
  * @internal
  **/
 export interface TLRotationSnapshot {
-	pageCenter: Vec
+	initialPageCenter: Vec
 	initialCursorAngle: number
 	initialShapesRotation: number
 	shapeSnapshots: {
@@ -66,7 +68,7 @@ export function applyRotationToSnapshotShapes({
 	stage: 'start' | 'update' | 'end' | 'one-off'
 	centerOverride?: VecLike
 }) {
-	const { pageCenter, shapeSnapshots } = snapshot
+	const { initialPageCenter, shapeSnapshots } = snapshot
 
 	editor.updateShapes(
 		shapeSnapshots.map(({ shape, initialPagePoint }) => {
@@ -77,7 +79,7 @@ export function applyRotationToSnapshotShapes({
 				? editor.getShapePageTransform(shape.parentId)!
 				: Mat.Identity()
 
-			const newPagePoint = Vec.RotWith(initialPagePoint, centerOverride ?? pageCenter, delta)
+			const newPagePoint = Vec.RotWith(initialPagePoint, centerOverride ?? initialPageCenter, delta)
 
 			const newLocalPoint = Mat.applyToPoint(
 				// use the current parent transform in case it has moved/resized since the start

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.bec6f90d283a'
+export const version = '3.13.0-canary.befc69663d98'
 export const publishDates = {
 	major: '2024-09-13T14:36:29.063Z',
-	minor: '2025-04-17T13:31:58.284Z',
-	patch: '2025-04-17T13:31:58.284Z',
+	minor: '2025-05-20T18:47:53.225Z',
+	patch: '2025-05-20T18:47:53.225Z',
 }