@tldraw/editor 3.13.0-canary.ce8e6cffa809 → 3.13.0-canary.d6fe56e14603

package/src/lib/primitives/Box.ts

@@ -57,6 +57,11 @@ export class Box {
 		this.x = n
 	}
 
+	// eslint-disable-next-line no-restricted-syntax
+	get left() {
+		return this.x
+	}
+
 	// eslint-disable-next-line no-restricted-syntax
 	get midX() {
 		return this.x + this.w / 2
@@ -67,6 +72,11 @@ export class Box {
 		return this.x + this.w
 	}
 
+	// eslint-disable-next-line no-restricted-syntax
+	get right() {
+		return this.x + this.w
+	}
+
 	// eslint-disable-next-line no-restricted-syntax
 	get minY() {
 		return this.y
@@ -77,6 +87,11 @@ export class Box {
 		this.y = n
 	}
 
+	// eslint-disable-next-line no-restricted-syntax
+	get top() {
+		return this.y
+	}
+
 	// eslint-disable-next-line no-restricted-syntax
 	get midY() {
 		return this.y + this.h / 2
@@ -87,6 +102,11 @@ export class Box {
 		return this.y + this.h
 	}
 
+	// eslint-disable-next-line no-restricted-syntax
+	get bottom() {
+		return this.y + this.h
+	}
+
 	// eslint-disable-next-line no-restricted-syntax
 	get width() {
 		return this.w

package/src/lib/primitives/Mat.ts

@@ -157,12 +157,13 @@ export class Mat {
 		return Mat.Compose(Mat.Translate(cx, cy!), rotationMatrix, Mat.Translate(-cx, -cy!))
 	}
 
-	static Scale(x: number, y: number): MatModel
-	static Scale(x: number, y: number, cx: number, cy: number): MatModel
-	static Scale(x: number, y: number, cx?: number, cy?: number): MatModel {
+	static Scale(x: number, y: number): Mat
+	static Scale(x: number, y: number, cx: number, cy: number): Mat
+	static Scale(x: number, y: number, cx?: number, cy?: number): Mat {
 		const scaleMatrix = new Mat(x, 0, 0, y, 0, 0)
 		if (cx === undefined) return scaleMatrix
-		return Mat.Compose(Mat.Translate(cx, cy!), scaleMatrix, Mat.Translate(-cx, -cy!))
+
+		return Mat.Translate(cx, cy!).multiply(scaleMatrix).translate(-cx, -cy!)
 	}
 	static Multiply(m1: MatModel, m2: MatModel): MatModel {
 		return {

package/src/lib/primitives/Vec.ts

@@ -319,6 +319,11 @@ export class Vec {
 		return ((A.y - B.y) ** 2 + (A.x - B.x) ** 2) ** 0.5
 	}
 
+	// Get the Manhattan distance between two points.
+	static ManhattanDist(A: VecLike, B: VecLike): number {
+		return Math.abs(A.x - B.x) + Math.abs(A.y - B.y)
+	}
+
 	// Get whether a distance between two points is less than a number. This is faster to calulate than using `Vec.Dist(a, b) < n`.
 	static DistMin(A: VecLike, B: VecLike, n: number): boolean {
 		return (A.x - B.x) * (A.x - B.x) + (A.y - B.y) * (A.y - B.y) < n ** 2
@@ -465,10 +470,28 @@ export class Vec {
 		return isNaN(A.x) || isNaN(A.y)
 	}
 
+	/**
+	 * Get the angle from position A to position B.
+	 */
 	static Angle(A: VecLike, B: VecLike): number {
 		return Math.atan2(B.y - A.y, B.x - A.x)
 	}
 
+	/**
+	 * Get the angle between vector A and vector B. This will return the smallest angle between the
+	 * two vectors, between -π and π. The sign indicates direction of angle.
+	 */
+	static AngleBetween(A: VecLike, B: VecLike): number {
+		const p = A.x * B.x + A.y * B.y
+		const n = Math.sqrt(
+			(Math.pow(A.x, 2) + Math.pow(A.y, 2)) * (Math.pow(B.x, 2) + Math.pow(B.y, 2))
+		)
+		const sign = A.x * B.y - A.y * B.x < 0 ? -1 : 1
+		const angle = sign * Math.acos(p / n)
+
+		return angle
+	}
+
 	/**
 	 * Linearly interpolate between two points.
 	 * @param A - The first point.

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

@@ -1,4 +1,4 @@
-import { Vec } from '../Vec'
+import { Vec, VecLike } from '../Vec'
 import { intersectLineSegmentCircle } from '../intersect'
 import { getArcMeasure, getPointInArcT, getPointOnCircle } from '../utils'
 import { Geometry2d, Geometry2dOptions } from './Geometry2d'
@@ -44,14 +44,14 @@ export class Arc2d extends Geometry2d {
 		this._center = center
 	}
 
-	nearestPoint(point: Vec): Vec {
+	nearestPoint(point: VecLike): Vec {
 		const { _center, measure, radius, angleEnd, angleStart, start: A, end: B } = this
 		const t = getPointInArcT(measure, angleStart, angleEnd, _center.angle(point))
 		if (t <= 0) return A
 		if (t >= 1) return B
 
 		// Get the point (P) on the arc, then pick the nearest of A, B, and P
-		const P = _center.clone().add(point.clone().sub(_center).uni().mul(radius))
+		const P = Vec.Sub(point, _center).uni().mul(radius).add(_center)
 
 		let nearest: Vec | undefined
 		let dist = Infinity
@@ -67,7 +67,7 @@ export class Arc2d extends Geometry2d {
 		return nearest
 	}
 
-	hitTestLineSegment(A: Vec, B: Vec): boolean {
+	hitTestLineSegment(A: VecLike, B: VecLike): boolean {
 		const { _center, radius, measure, angleStart, angleEnd } = this
 		const intersection = intersectLineSegmentCircle(A, B, _center, radius)
 		if (intersection === null) return false
@@ -95,6 +95,6 @@ export class Arc2d extends Geometry2d {
 	}
 
 	override getLength() {
-		return this.measure * this.radius
+		return Math.abs(this.measure * this.radius)
 	}
 }

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

@@ -1,5 +1,5 @@
 import { Box } from '../Box'
-import { Vec } from '../Vec'
+import { Vec, VecLike } from '../Vec'
 import { intersectLineSegmentCircle } from '../intersect'
 import { PI2, getPointOnCircle } from '../utils'
 import { Geometry2d, Geometry2dOptions } from './Geometry2d'
@@ -43,13 +43,13 @@ export class Circle2d extends Geometry2d {
 		return vertices
 	}
 
-	nearestPoint(point: Vec): Vec {
+	nearestPoint(point: VecLike): Vec {
 		const { _center, radius } = this
 		if (_center.equals(point)) return Vec.AddXY(_center, radius, 0)
-		return _center.clone().add(point.clone().sub(_center).uni().mul(radius))
+		return Vec.Sub(point, _center).uni().mul(radius).add(_center)
 	}
 
-	hitTestLineSegment(A: Vec, B: Vec, distance = 0): boolean {
+	hitTestLineSegment(A: VecLike, B: VecLike, distance = 0): boolean {
 		const { _center, radius } = this
 		return intersectLineSegmentCircle(A, B, _center, radius + distance) !== null
 	}

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

@@ -1,5 +1,5 @@
-import { Vec } from '../Vec'
-import { Geometry2dOptions } from './Geometry2d'
+import { Vec, VecLike } from '../Vec'
+import { Geometry2dFilters, Geometry2dOptions } from './Geometry2d'
 import { Polyline2d } from './Polyline2d'
 
 /** @public */
@@ -52,7 +52,7 @@ export class CubicBezier2d extends Polyline2d {
 		return CubicBezier2d.GetAtT(this, 0.5)
 	}
 
-	nearestPoint(A: Vec): Vec {
+	nearestPoint(A: VecLike): Vec {
 		let nearest: Vec | undefined
 		let dist = Infinity
 		let d: number
@@ -89,7 +89,7 @@ export class CubicBezier2d extends Polyline2d {
 		)
 	}
 
-	override getLength(precision = 32) {
+	override getLength(filters?: Geometry2dFilters, precision = 32) {
 		let n1: Vec,
 			p1 = this.a,
 			length = 0

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

@@ -1,4 +1,4 @@
-import { Vec } from '../Vec'
+import { Vec, VecLike } from '../Vec'
 import { CubicBezier2d } from './CubicBezier2d'
 import { Geometry2d, Geometry2dOptions } from './Geometry2d'
 
@@ -58,7 +58,7 @@ export class CubicSpline2d extends Geometry2d {
 		return vertices
 	}
 
-	nearestPoint(A: Vec): Vec {
+	nearestPoint(A: VecLike): Vec {
 		let nearest: Vec | undefined
 		let dist = Infinity
 		let d: number
@@ -75,7 +75,7 @@ export class CubicSpline2d extends Geometry2d {
 		return nearest
 	}
 
-	hitTestLineSegment(A: Vec, B: Vec): boolean {
+	hitTestLineSegment(A: VecLike, B: VecLike): boolean {
 		return this.segments.some((segment) => segment.hitTestLineSegment(A, B))
 	}
 

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

@@ -1,5 +1,5 @@
-import { Vec } from '../Vec'
 import { linesIntersect } from '../intersect'
+import { Vec, VecLike } from '../Vec'
 import { Geometry2d } from './Geometry2d'
 
 /** @public */
@@ -34,7 +34,7 @@ export class Edge2d extends Geometry2d {
 		return [this.start, this.end]
 	}
 
-	override nearestPoint(point: Vec): Vec {
+	override nearestPoint(point: VecLike): Vec {
 		const { start, end, d, u, ul: l } = this
 		if (d.len() === 0) return start // start and end are the same
 		if (l === 0) return start // no length in the unit vector
@@ -48,7 +48,7 @@ export class Edge2d extends Geometry2d {
 		return new Vec(cx, cy)
 	}
 
-	override hitTestLineSegment(A: Vec, B: Vec, distance = 0): boolean {
+	override hitTestLineSegment(A: VecLike, B: VecLike, distance = 0): boolean {
 		return (
 			linesIntersect(A, B, this.start, this.end) || this.distanceToLineSegment(A, B) <= distance
 		)

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

@@ -1,5 +1,5 @@
 import { Box } from '../Box'
-import { Vec } from '../Vec'
+import { Vec, VecLike } from '../Vec'
 import { PI, PI2, perimeterOfEllipse } from '../utils'
 import { Edge2d } from './Edge2d'
 import { Geometry2d, Geometry2dOptions } from './Geometry2d'
@@ -73,7 +73,7 @@ export class Ellipse2d extends Geometry2d {
 		return vertices
 	}
 
-	nearestPoint(A: Vec): Vec {
+	nearestPoint(A: VecLike): Vec {
 		let nearest: Vec | undefined
 		let dist = Infinity
 		let d: number
@@ -90,7 +90,7 @@ export class Ellipse2d extends Geometry2d {
 		return nearest
 	}
 
-	hitTestLineSegment(A: Vec, B: Vec): boolean {
+	hitTestLineSegment(A: VecLike, B: VecLike): boolean {
 		return this.edges.some((edge) => edge.hitTestLineSegment(A, B))
 	}
 

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 {