@tldraw/editor 3.16.0-internal.a478398270c6 → 3.16.0-internal.f8b97f0c414f

package/src/lib/options.ts

@@ -27,6 +27,8 @@ export interface TldrawOptions {
 	readonly multiClickDurationMs: number
 	readonly coarseDragDistanceSquared: number
 	readonly dragDistanceSquared: number
+	readonly uiDragDistanceSquared: number
+	readonly uiCoarseDragDistanceSquared: number
 	readonly defaultSvgPadding: number
 	readonly cameraSlideFriction: number
 	readonly gridSteps: readonly {
@@ -53,6 +55,7 @@ export interface TldrawOptions {
 	readonly flattenImageBoundsPadding: number
 	readonly laserDelayMs: number
 	readonly maxExportDelayMs: number
+	readonly tooltipDelayMs: number
 	/**
 	 * How long should previews created by {@link Editor.createTemporaryAssetPreview} last before
 	 * they expire? Defaults to 3 minutes.
@@ -97,6 +100,10 @@ export const defaultTldrawOptions = {
 	multiClickDurationMs: 200,
 	coarseDragDistanceSquared: 36, // 6 squared
 	dragDistanceSquared: 16, // 4 squared
+	uiDragDistanceSquared: 16, // 4 squared
+	// it's really easy to accidentally drag from the toolbar on mobile, so we use a much larger
+	// threshold than usual here to try and prevent accidental drags.
+	uiCoarseDragDistanceSquared: 625, // 25 squared
 	defaultSvgPadding: 32,
 	cameraSlideFriction: 0.09,
 	gridSteps: [
@@ -124,6 +131,7 @@ export const defaultTldrawOptions = {
 	flattenImageBoundsPadding: 16,
 	laserDelayMs: 1200,
 	maxExportDelayMs: 5000,
+	tooltipDelayMs: 700,
 	temporaryAssetPreviewLifetimeMs: 180000,
 	actionShortcutsLocation: 'swap',
 	createTextOnCanvasDoubleClick: true,

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

@@ -510,6 +510,132 @@ describe('Box', () => {
 		})
 	})
 
+	describe('Box.ContainsApproximately', () => {
+		it('returns true when first box exactly contains second', () => {
+			const boxA = new Box(0, 0, 100, 100)
+			const boxB = new Box(10, 10, 50, 50)
+			expect(Box.ContainsApproximately(boxA, boxB)).toBe(true)
+		})
+
+		it('returns false when first box clearly does not contain second', () => {
+			const boxA = new Box(0, 0, 50, 50)
+			const boxB = new Box(10, 10, 100, 100)
+			expect(Box.ContainsApproximately(boxA, boxB)).toBe(false)
+		})
+
+		it('returns true when containment is within default precision tolerance', () => {
+			// Box B extends very slightly outside A (within floating-point precision)
+			const boxA = new Box(0, 0, 100, 100)
+			const boxB = new Box(10, 10, 80, 80)
+			// Move B's max edges just slightly outside A's bounds
+			boxB.w = 90.000000000001 // maxX = 100.000000000001 (slightly beyond 100)
+			boxB.h = 90.000000000001 // maxY = 100.000000000001 (slightly beyond 100)
+
+			expect(Box.ContainsApproximately(boxA, boxB)).toBe(true)
+			expect(Box.Contains(boxA, boxB)).toBe(false) // strict contains would fail
+		})
+
+		it('returns false when containment exceeds default precision tolerance', () => {
+			const boxA = new Box(0, 0, 100, 100)
+			const boxB = new Box(10, 10, 80, 80)
+			// Move B's max edges clearly outside A's bounds
+			boxB.w = 95 // maxX = 105 (clearly beyond 100)
+			boxB.h = 95 // maxY = 105 (clearly beyond 100)
+
+			expect(Box.ContainsApproximately(boxA, boxB)).toBe(false)
+		})
+
+		it('respects custom precision parameter', () => {
+			const boxA = new Box(0, 0, 100, 100)
+			const boxB = new Box(10, 10, 85, 85) // maxX=95, maxY=95
+
+			// With loose precision (10), should contain (95 is within 100-10=90 tolerance)
+			expect(Box.ContainsApproximately(boxA, boxB, 10)).toBe(true)
+
+			// With tight precision (4), should still contain (95 is within 100-4=96)
+			expect(Box.ContainsApproximately(boxA, boxB, 4)).toBe(true)
+
+			// Since 95 < 100, the precision parameter doesn't affect containment here
+			expect(Box.ContainsApproximately(boxA, boxB, 4.9)).toBe(true)
+		})
+
+		it('handles negative coordinates correctly', () => {
+			const boxA = new Box(-50, -50, 100, 100) // bounds: (-50,-50) to (50,50)
+			const boxB = new Box(-40, -40, 79.999999999, 79.999999999) // bounds: (-40,-40) to (39.999999999, 39.999999999)
+
+			expect(Box.ContainsApproximately(boxA, boxB)).toBe(true)
+		})
+
+		it('handles edge case where boxes are identical', () => {
+			const boxA = new Box(10, 20, 100, 200)
+			const boxB = new Box(10, 20, 100, 200)
+
+			expect(Box.ContainsApproximately(boxA, boxB)).toBe(true)
+		})
+
+		it('handles edge case where inner box touches outer box edges', () => {
+			const boxA = new Box(0, 0, 100, 100)
+			const boxB = new Box(0, 0, 100, 100) // exactly the same
+
+			expect(Box.ContainsApproximately(boxA, boxB)).toBe(true)
+
+			// Slightly smaller inner box
+			const boxC = new Box(0.000001, 0.000001, 99.999998, 99.999998)
+			expect(Box.ContainsApproximately(boxA, boxC)).toBe(true)
+		})
+
+		it('handles floating-point precision issues in real-world scenarios', () => {
+			// Simulate common floating-point arithmetic issues
+			const containerBox = new Box(0, 0, 100, 100)
+
+			// Box that should be contained but has floating-point errors
+			const innerBox = new Box(10, 10, 80, 80)
+			// Simulate floating-point arithmetic that results in tiny overruns
+			innerBox.w = 90.00000000000001 // maxX = 100.00000000000001 (tiny overrun)
+			innerBox.h = 90.00000000000001 // maxY = 100.00000000000001 (tiny overrun)
+
+			expect(Box.ContainsApproximately(containerBox, innerBox)).toBe(true)
+			expect(Box.Contains(containerBox, innerBox)).toBe(false) // strict contains fails due to precision
+		})
+
+		it('fails when any edge exceeds tolerance', () => {
+			const boxA = new Box(10, 10, 100, 100) // bounds: (10,10) to (110,110)
+
+			// Test each edge exceeding tolerance
+			const testCases = [
+				{ name: 'left edge', box: new Box(5, 20, 80, 80) }, // minX too small
+				{ name: 'top edge', box: new Box(20, 5, 80, 80) }, // minY too small
+				{ name: 'right edge', box: new Box(20, 20, 95, 80) }, // maxX too large (20+95=115 > 110)
+				{ name: 'bottom edge', box: new Box(20, 20, 80, 95) }, // maxY too large (20+95=115 > 110)
+			]
+
+			testCases.forEach(({ box }) => {
+				expect(Box.ContainsApproximately(boxA, box, 1)).toBe(false) // tight precision
+			})
+		})
+
+		it('works with zero-sized dimensions', () => {
+			const boxA = new Box(0, 0, 100, 100)
+			const boxB = new Box(50, 50, 0, 0) // zero-sized box (point)
+
+			expect(Box.ContainsApproximately(boxA, boxB)).toBe(true)
+		})
+
+		it('handles precision parameter edge cases', () => {
+			const boxA = new Box(0, 0, 100, 100)
+			const boxB = new Box(10, 10, 91, 91) // maxX=101, maxY=101 (clearly outside)
+
+			// Zero precision should work like strict Contains
+			expect(Box.ContainsApproximately(boxA, boxB, 0)).toBe(false)
+
+			// Small precision should still fail (101 > 100)
+			expect(Box.ContainsApproximately(boxA, boxB, 0.5)).toBe(false)
+
+			// Sufficient precision should succeed (101 <= 100 + 2)
+			expect(Box.ContainsApproximately(boxA, boxB, 2)).toBe(true)
+		})
+	})
+
 	describe('Box.Includes', () => {
 		it('returns true when boxes collide or contain', () => {
 			const boxA = new Box(0, 0, 50, 50)

package/src/lib/primitives/Box.ts

@@ -1,6 +1,6 @@
 import { BoxModel } from '@tldraw/tlschema'
 import { Vec, VecLike } from './Vec'
-import { PI, PI2, toPrecision } from './utils'
+import { approximatelyLte, PI, PI2, toPrecision } from './utils'
 
 /** @public */
 export type BoxLike = BoxModel | Box
@@ -417,6 +417,15 @@ export class Box {
 		return A.minX < B.minX && A.minY < B.minY && A.maxY > B.maxY && A.maxX > B.maxX
 	}
 
+	static ContainsApproximately(A: Box, B: Box, precision?: number) {
+		return (
+			approximatelyLte(A.minX, B.minX, precision) &&
+			approximatelyLte(A.minY, B.minY, precision) &&
+			approximatelyLte(B.maxX, A.maxX, precision) &&
+			approximatelyLte(B.maxY, A.maxY, precision)
+		)
+	}
+
 	static Includes(A: Box, B: Box) {
 		return Box.Collides(A, B) || Box.Contains(A, B)
 	}

package/src/lib/primitives/Vec.ts

@@ -240,11 +240,6 @@ export class Vec {
 		return Vec.EqualsXY(this, x, y)
 	}
 
-	/** @deprecated use `uni` instead */
-	norm() {
-		return this.uni()
-	}
-
 	toFixed() {
 		this.x = toFixed(this.x)
 		this.y = toFixed(this.y)

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