@tldraw/editor 4.5.2 → 4.6.0-canary.4ec045c286e1

package/src/lib/hooks/useViewportHeight.ts

@@ -1,4 +1,5 @@
 import { useLayoutEffect, useState } from 'react'
+import { useMaybeEditor } from './useEditor'
 
 /*!
  * BSD License: https://github.com/outline/rich-markdown-editor/blob/main/LICENSE
@@ -12,26 +13,27 @@ import { useLayoutEffect, useState } from 'react'
  */
 /** @public */
 export function useViewportHeight(): number {
-	const visualViewport = window.visualViewport
+	const editor = useMaybeEditor()
+	const win = editor?.getContainerWindow() ?? window
+	const vv = win.visualViewport
 	const [height, setHeight] = useState<number>(() =>
-		visualViewport ? visualViewport.height + visualViewport.offsetTop : window.innerHeight
+		vv ? vv.height + vv.offsetTop : win.innerHeight
 	)
 
 	useLayoutEffect(() => {
+		const win = editor?.getContainerWindow() ?? window
 		const handleResize = () => {
-			const visualViewport = window.visualViewport
-			setHeight(() =>
-				visualViewport ? visualViewport.height + visualViewport.offsetTop : window.innerHeight
-			)
+			const vv = win.visualViewport
+			setHeight(() => (vv ? vv.height + vv.offsetTop : win.innerHeight))
 		}
 
-		window.visualViewport?.addEventListener('resize', handleResize)
-		window.visualViewport?.addEventListener('scroll', handleResize)
+		win.visualViewport?.addEventListener('resize', handleResize)
+		win.visualViewport?.addEventListener('scroll', handleResize)
 
 		return () => {
-			window.visualViewport?.removeEventListener('resize', handleResize)
-			window.visualViewport?.removeEventListener('scroll', handleResize)
+			win.visualViewport?.removeEventListener('resize', handleResize)
+			win.visualViewport?.removeEventListener('scroll', handleResize)
 		}
-	}, [])
+	}, [editor])
 	return height
 }

package/src/lib/license/Watermark.tsx

@@ -191,6 +191,16 @@ To remove the watermark, please purchase a license at tldraw.dev.
 	height: 32px;
 }
 
+.tl-container[dir='rtl'] .${className} {
+	right: auto;
+	left: max(var(--tl-space-2), env(safe-area-inset-left));
+}
+
+.tl-container[dir='rtl'] .${className}[data-mobile='true'] {
+	border-radius: 0px 4px 4px 0px;
+	left: max(-2px, calc(env(safe-area-inset-left) - 2px));
+}
+
 .${className}[data-unlicensed='true'] > button {
 	font-size: 100px;
 	position: absolute;

package/src/lib/primitives/Vec.ts

@@ -430,32 +430,58 @@ export class Vec {
 	 * @param P - A point not on the line to test.
 	 */
 	static NearestPointOnLineThroughPoint(A: VecLike, u: VecLike, P: VecLike): Vec {
-		return Vec.Mul(u, Vec.Sub(P, A).pry(u)).add(A)
+		// Inlined: t = Vec.Sub(P, A).pry(u), return Vec.Mul(u, t).add(A)
+		const t = (P.x - A.x) * u.x + (P.y - A.y) * u.y
+		return new Vec(A.x + u.x * t, A.y + u.y * t)
 	}
 
 	static NearestPointOnLineSegment(A: VecLike, B: VecLike, P: VecLike, clamp = true): Vec {
-		if (Vec.Equals(A, P)) return Vec.From(P)
-		if (Vec.Equals(B, P)) return Vec.From(P)
+		// Parametric projection of P onto segment AB.
+		// Inlined: d = Vec.Sub(B, A); t = Vec.Sub(P, A).pry(d) / d.len(); return Vec.Lrp(A, B, t)
+		const dx = B.x - A.x
+		const dy = B.y - A.y
+		const d2 = dx * dx + dy * dy
 
-		const u = Vec.Tan(B, A)
-		const C = Vec.Add(A, Vec.Mul(u, Vec.Sub(P, A).pry(u)))
+		if (d2 === 0) return Vec.From(A)
+
+		let t = ((P.x - A.x) * dx + (P.y - A.y) * dy) / d2
 
 		if (clamp) {
-			if (C.x < Math.min(A.x, B.x)) return Vec.Cast(A.x < B.x ? A : B)
-			if (C.x > Math.max(A.x, B.x)) return Vec.Cast(A.x > B.x ? A : B)
-			if (C.y < Math.min(A.y, B.y)) return Vec.Cast(A.y < B.y ? A : B)
-			if (C.y > Math.max(A.y, B.y)) return Vec.Cast(A.y > B.y ? A : B)
+			if (t < 0) t = 0
+			else if (t > 1) t = 1
 		}
 
-		return C
+		return new Vec(A.x + t * dx, A.y + t * dy)
 	}
 
 	static DistanceToLineThroughPoint(A: VecLike, u: VecLike, P: VecLike): number {
-		return Vec.Dist(P, Vec.NearestPointOnLineThroughPoint(A, u, P))
+		// Inlined: Vec.Dist(P, Vec.NearestPointOnLineThroughPoint(A, u, P))
+		// Uses |cross(P-A, u)| which equals the perpendicular distance when u is a unit vector.
+		const dx = P.x - A.x
+		const dy = P.y - A.y
+		return Math.abs(dx * u.y - dy * u.x)
 	}
 
 	static DistanceToLineSegment(A: VecLike, B: VecLike, P: VecLike, clamp = true): number {
-		return Vec.Dist(P, Vec.NearestPointOnLineSegment(A, B, P, clamp))
+		// Inlined: Vec.Dist(P, Vec.NearestPointOnLineSegment(A, B, P, clamp))
+		// Computes the nearest point via parametric t-projection then returns the scalar distance,
+		// avoiding the intermediate Vec allocation that NearestPointOnLineSegment would create.
+		const dx = B.x - A.x
+		const dy = B.y - A.y
+		const d2 = dx * dx + dy * dy
+
+		if (d2 === 0) return Vec.Dist(A, P)
+
+		let t = ((P.x - A.x) * dx + (P.y - A.y) * dy) / d2
+
+		if (clamp) {
+			if (t < 0) t = 0
+			else if (t > 1) t = 1
+		}
+
+		const nx = A.x + t * dx - P.x
+		const ny = A.y + t * dy - P.y
+		return Math.sqrt(nx * nx + ny * ny)
 	}
 
 	static Snap(A: VecLike, step = 1) {
@@ -476,6 +502,10 @@ export class Vec {
 		return isNaN(A.x) || isNaN(A.y)
 	}
 
+	static IsFinite(A: VecLike): boolean {
+		return Number.isFinite(A.x) && Number.isFinite(A.y)
+	}
+
 	/**
 	 * Get the angle from position A to position B.
 	 */
@@ -488,14 +518,11 @@ export class Vec {
 	 * two vectors, between -π and π. The sign indicates direction of angle.
 	 */
 	static AngleBetween(A: VecLike, B: VecLike): number {
+		// p = dot(A, B); n = |A| * |B| (uses x*x instead of Math.pow(x, 2))
 		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 n = Math.sqrt((A.x * A.x + A.y * A.y) * (B.x * B.x + B.y * B.y))
 		const sign = A.x * B.y - A.y * B.x < 0 ? -1 : 1
-		const angle = sign * Math.acos(clamp(p / n, -1, 1))
-
-		return angle
+		return sign * Math.acos(clamp(p / n, -1, 1))
 	}
 
 	/**
@@ -506,7 +533,8 @@ export class Vec {
 	 * @returns The interpolated point.
 	 */
 	static Lrp(A: VecLike, B: VecLike, t: number): Vec {
-		return Vec.Sub(B, A).mul(t).add(A)
+		// Inlined: Vec.Sub(B, A).mul(t).add(A) — note: only interpolates x/y, not z.
+		return new Vec(A.x + (B.x - A.x) * t, A.y + (B.y - A.y) * t)
 	}
 
 	static Med(A: VecLike, B: VecLike): Vec {
@@ -604,14 +632,15 @@ export class Vec {
 	 * @param A - The first point.
 	 * @param B - The second point.
 	 * @param steps - The number of points to return.
+	 * @param ease - The easing to use.
 	 */
-	static PointsBetween(A: VecModel, B: VecModel, steps = 6): Vec[] {
+	static PointsBetween(A: VecModel, B: VecModel, steps = 6, ease = EASINGS.easeInQuad): Vec[] {
 		const results: Vec[] = []
 
 		for (let i = 0; i < steps; i++) {
-			const t = EASINGS.easeInQuad(i / (steps - 1))
+			const t = ease(i / (steps - 1))
 			const point = Vec.Lrp(A, B, t)
-			point.z = Math.min(1, 0.5 + Math.abs(0.5 - ease(t)) * 0.65)
+			point.z = Math.min(1, 0.5 + Math.abs(0.5 - EASINGS.easeInOutQuad(t)) * 0.65)
 			results.push(point)
 		}
 
@@ -622,5 +651,3 @@ export class Vec {
 		return new Vec(Math.round(A.x / gridSize) * gridSize, Math.round(A.y / gridSize) * gridSize)
 	}
 }
-
-const ease = (t: number) => (t < 0.5 ? 2 * t * t : -1 + (4 - 2 * t) * t)

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

@@ -57,21 +57,16 @@ export class Arc2d extends Geometry2d {
 		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 = Vec.Sub(point, _center).uni().mul(radius).add(_center)
-
-		let nearest: Vec | undefined
-		let dist = Infinity
-		let d: number
-		for (const p of [A, B, P]) {
-			d = Vec.Dist2(point, p)
-			if (d < dist) {
-				nearest = p
-				dist = d
-			}
-		}
-		if (!nearest) throw Error('nearest point not found')
-		return nearest
+		// Inlined: Vec.Sub(point, _center).uni().mul(radius).add(_center)
+		// When t is in (0,1), the nearest point is the radial projection of point onto the arc.
+		// Previously this also checked min-distance against A and B, but that's unnecessary when
+		// t is already in range — the radial projection is always closer.
+		const dx = point.x - _center.x
+		const dy = point.y - _center.y
+		const len = Math.sqrt(dx * dx + dy * dy)
+		if (len === 0) return A
+		const scale = radius / len
+		return new Vec(_center.x + dx * scale, _center.y + dy * scale)
 	}
 
 	hitTestLineSegment(A: VecLike, B: VecLike): boolean {

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

@@ -44,9 +44,47 @@ export class Circle2d extends Geometry2d {
 	}
 
 	nearestPoint(point: VecLike): Vec {
+		// Inlined: Vec.Sub(point, _center).uni().mul(radius).add(_center)
+		// Computes direction from center to point, normalizes, scales by radius, offsets by center.
 		const { _center, _radius: radius } = this
-		if (_center.equals(point)) return Vec.AddXY(_center, radius, 0)
-		return Vec.Sub(point, _center).uni().mul(radius).add(_center)
+		const dx = point.x - _center.x
+		const dy = point.y - _center.y
+		const len = Math.sqrt(dx * dx + dy * dy)
+		if (len === 0) return new Vec(_center.x + radius, _center.y)
+		const scale = radius / len
+		return new Vec(_center.x + dx * scale, _center.y + dy * scale)
+	}
+
+	override distanceToPoint(point: VecLike, hitInside = false): number {
+		// Inlined: Math.abs(Vec.Dist(point, _center) - radius)
+		// Computes distance from point to center, then subtracts radius for edge distance.
+		// Returns negative when inside a filled circle to indicate containment.
+		const { _center, _radius: radius } = this
+		const dx = point.x - _center.x
+		const dy = point.y - _center.y
+		const dist = Math.sqrt(dx * dx + dy * dy)
+		const distToEdge = dist - radius
+		if (distToEdge < 0 && (this.isFilled || hitInside)) {
+			return distToEdge
+		}
+		return Math.abs(distToEdge)
+	}
+
+	override hitTestPoint(point: VecLike, margin = 0, hitInside = false): boolean {
+		// Equivalent to: dist = Vec.Dist(point, _center); return dist within [radius - margin, radius + margin]
+		// Uses squared distances throughout to avoid any sqrt calls.
+		const { _center, _radius: radius } = this
+		const dx = point.x - _center.x
+		const dy = point.y - _center.y
+		const dist2 = dx * dx + dy * dy
+		if ((this.isFilled || hitInside) && dist2 <= radius * radius) {
+			return true
+		}
+		const outerR = radius + margin
+		if (dist2 > outerR * outerR) return false
+		const innerR = radius - margin
+		if (innerR <= 0) return true
+		return dist2 >= innerR * innerR
 	}
 
 	hitTestLineSegment(A: VecLike, B: VecLike, distance = 0): boolean {

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

@@ -69,6 +69,16 @@ export class CubicBezier2d extends Polyline2d {
 		return nearest
 	}
 
+	override distanceToPoint(point: VecLike, _hitInside = false): number {
+		const { segments } = this
+		let minDist = Infinity
+		for (let i = 0; i < segments.length; i++) {
+			const d = segments[i].distanceToPoint(point)
+			if (d < minDist) minDist = d
+		}
+		return minDist
+	}
+
 	getSvgPathData(first = true) {
 		const { _a: a, _b: b, _c: c, _d: d } = this
 		return `${first ? `M ${a.toFixed()} ` : ``} C${b.toFixed()} ${c.toFixed()} ${d.toFixed()}`

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

@@ -75,6 +75,16 @@ export class CubicSpline2d extends Geometry2d {
 		return nearest
 	}
 
+	override distanceToPoint(point: VecLike, _hitInside = false): number {
+		const { segments } = this
+		let minDist = Infinity
+		for (let i = 0; i < segments.length; i++) {
+			const d = segments[i].distanceToPoint(point)
+			if (d < minDist) minDist = d
+		}
+		return minDist
+	}
+
 	hitTestLineSegment(A: VecLike, B: VecLike): boolean {
 		return this.segments.some((segment) => segment.hitTestLineSegment(A, B))
 	}

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

@@ -5,9 +5,9 @@ import { Geometry2d } from './Geometry2d'
 export class Edge2d extends Geometry2d {
 	private _start: Vec
 	private _end: Vec
-	private _d: Vec
-	private _u: Vec
-	private _ul: number
+	private _dx: number
+	private _dy: number
+	private _len2: number
 
 	constructor(config: { start: Vec; end: Vec }) {
 		super({ ...config, isClosed: false, isFilled: false })
@@ -16,13 +16,14 @@ export class Edge2d extends Geometry2d {
 		this._start = start
 		this._end = end
 
-		this._d = start.clone().sub(end) // the delta from start to end
-		this._u = this._d.clone().uni() // the unit vector of the edge
-		this._ul = this._u.len() // the length of the unit vector
+		// Precomputed segment delta and squared length (replaces Vec.Sub(end, start) and Vec.Len2)
+		this._dx = end.x - start.x
+		this._dy = end.y - start.y
+		this._len2 = this._dx * this._dx + this._dy * this._dy
 	}
 
 	override getLength() {
-		return this._d.len()
+		return Math.sqrt(this._len2)
 	}
 
 	override getVertices(): Vec[] {
@@ -30,17 +31,39 @@ export class Edge2d extends Geometry2d {
 	}
 
 	override nearestPoint(point: VecLike): Vec {
-		const { _start: start, _end: end, _d: d, _u: 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
-		const k = Vec.Sub(point, start).dpr(u) / l
-		const cx = start.x + u.x * k
-		if (cx < Math.min(start.x, end.x)) return start.x < end.x ? start : end
-		if (cx > Math.max(start.x, end.x)) return start.x > end.x ? start : end
-		const cy = start.y + u.y * k
-		if (cy < Math.min(start.y, end.y)) return start.y < end.y ? start : end
-		if (cy > Math.max(start.y, end.y)) return start.y > end.y ? start : end
-		return new Vec(cx, cy)
+		// Inlined: Vec.NearestPointOnLineSegment(start, end, point)
+		// Uses precomputed dx/dy/len2 and parametric t-clamping instead of Vec allocations.
+		const { _start: start, _end: end, _dx: dx, _dy: dy, _len2: len2 } = this
+		if (len2 === 0) return start
+
+		const t = ((point.x - start.x) * dx + (point.y - start.y) * dy) / len2
+		if (t <= 0) return start
+		if (t >= 1) return end
+		return new Vec(start.x + dx * t, start.y + dy * t)
+	}
+
+	override distanceToPoint(point: VecLike, _hitInside = false): number {
+		// Inlined: Vec.Dist(point, this.nearestPoint(point))
+		// Finds nearest point via parametric t-projection then returns scalar distance directly,
+		// avoiding the Vec allocation that nearestPoint would create.
+		const { _start: start, _end: end, _dx: dx, _dy: dy, _len2: len2 } = this
+		if (len2 === 0) return Vec.Dist(point, start)
+
+		const t = ((point.x - start.x) * dx + (point.y - start.y) * dy) / len2
+		let nx: number, ny: number
+		if (t <= 0) {
+			nx = start.x
+			ny = start.y
+		} else if (t >= 1) {
+			nx = end.x
+			ny = end.y
+		} else {
+			nx = start.x + dx * t
+			ny = start.y + dy * t
+		}
+		const ex = point.x - nx
+		const ey = point.y - ny
+		return Math.sqrt(ex * ex + ey * ey)
 	}
 
 	getSvgPathData(first = true) {

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

@@ -1,6 +1,6 @@
 import { Box } from '../Box'
 import { Vec, VecLike } from '../Vec'
-import { PI, PI2, clamp, perimeterOfEllipse } from '../utils'
+import { PI, PI2, clamp, perimeterOfEllipse, pointInPolygon } from '../utils'
 import { Edge2d } from './Edge2d'
 import { Geometry2d, Geometry2dOptions } from './Geometry2d'
 import { getVerticesCountForArcLength } from './geometry-constants'
@@ -89,6 +89,19 @@ export class Ellipse2d extends Geometry2d {
 		return nearest
 	}
 
+	override distanceToPoint(point: VecLike, hitInside = false): number {
+		const { edges } = this
+		let minDist = Infinity
+		for (let i = 0; i < edges.length; i++) {
+			const d = edges[i].distanceToPoint(point)
+			if (d < minDist) minDist = d
+		}
+		if (this.isClosed && (this.isFilled || hitInside) && pointInPolygon(point, this.vertices)) {
+			return -minDist
+		}
+		return minDist
+	}
+
 	hitTestLineSegment(A: VecLike, B: VecLike): boolean {
 		return this.edges.some((edge) => edge.hitTestLineSegment(A, B))
 	}

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

@@ -1,4 +1,5 @@
 import { Vec, VecLike } from '../Vec'
+import { pointInPolygon } from '../utils'
 import { Edge2d } from './Edge2d'
 import { Geometry2d, Geometry2dOptions } from './Geometry2d'
 
@@ -45,21 +46,68 @@ export class Polyline2d extends Geometry2d {
 	}
 
 	nearestPoint(A: VecLike): Vec {
+		// Inlined: for each segment, Edge2d.nearestPoint(A) + Vec.Dist2(result, A), pick closest.
+		// Inlines the per-segment nearest-point math to avoid N Edge2d.nearestPoint Vec allocations;
+		// only allocates a single Vec at the end for the best result.
+		const { vertices } = this
+		let bestX = vertices[0].x
+		let bestY = vertices[0].y
+		let bestDist2 = (A.x - bestX) * (A.x - bestX) + (A.y - bestY) * (A.y - bestY)
+
+		const limit = this.isClosed ? vertices.length : vertices.length - 1
+		for (let i = 0; i < limit; i++) {
+			const start = vertices[i]
+			const end = vertices[(i + 1) % vertices.length]
+			const dx = end.x - start.x
+			const dy = end.y - start.y
+			const len2 = dx * dx + dy * dy
+
+			let nx: number, ny: number
+			if (len2 === 0) {
+				nx = start.x
+				ny = start.y
+			} else {
+				const t = ((A.x - start.x) * dx + (A.y - start.y) * dy) / len2
+				if (t <= 0) {
+					nx = start.x
+					ny = start.y
+				} else if (t >= 1) {
+					nx = end.x
+					ny = end.y
+				} else {
+					nx = start.x + dx * t
+					ny = start.y + dy * t
+				}
+			}
+
+			const ex = A.x - nx
+			const ey = A.y - ny
+			const d2 = ex * ex + ey * ey
+			if (d2 < bestDist2) {
+				bestX = nx
+				bestY = ny
+				bestDist2 = d2
+			}
+		}
+
+		return new Vec(bestX, bestY)
+	}
+
+	override hitTestPoint(point: VecLike, margin = 0, hitInside = false): boolean {
+		return this.distanceToPoint(point, hitInside) <= margin
+	}
+
+	override distanceToPoint(point: VecLike, hitInside = false): number {
 		const { segments } = this
-		let nearest = this._points[0]
-		let dist = Infinity
-		let p: Vec // current point on segment
-		let d: number // distance from A to p
+		let minDist = Infinity
 		for (let i = 0; i < segments.length; i++) {
-			p = segments[i].nearestPoint(A)
-			d = Vec.Dist2(p, A)
-			if (d < dist) {
-				nearest = p
-				dist = d
-			}
+			const d = segments[i].distanceToPoint(point)
+			if (d < minDist) minDist = d
+		}
+		if (this.isClosed && (this.isFilled || hitInside) && pointInPolygon(point, this.vertices)) {
+			return -minDist
 		}
-		if (!nearest) throw Error('nearest point not found')
-		return nearest
+		return minDist
 	}
 
 	hitTestLineSegment(A: VecLike, B: VecLike, distance = 0): boolean {

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

@@ -1,6 +1,6 @@
 import { Box } from '../Box'
 import { Vec, VecLike } from '../Vec'
-import { PI } from '../utils'
+import { PI, pointInPolygon } from '../utils'
 import { Arc2d } from './Arc2d'
 import { Edge2d } from './Edge2d'
 import { Geometry2d, Geometry2dOptions } from './Geometry2d'
@@ -83,6 +83,19 @@ export class Stadium2d extends Geometry2d {
 		return nearest
 	}
 
+	override distanceToPoint(point: VecLike, hitInside = false): number {
+		const { _a: a, _b: b, _c: c, _d: d } = this
+		let minDist = Infinity
+		for (const part of [a, b, c, d]) {
+			const dist = part.distanceToPoint(point)
+			if (dist < minDist) minDist = dist
+		}
+		if (this.isClosed && (this.isFilled || hitInside) && pointInPolygon(point, this.vertices)) {
+			return -minDist
+		}
+		return minDist
+	}
+
 	hitTestLineSegment(A: VecLike, B: VecLike): boolean {
 		const { _a: a, _b: b, _c: c, _d: d } = this
 		return [a, b, c, d].some((edge) => edge.hitTestLineSegment(A, B))