@tldraw/editor 3.14.0-canary.d926f92ca8d6 → 3.14.0-canary.e099968e8b09

package/src/lib/primitives/Box.ts

@@ -134,33 +134,33 @@ export class Box {
 
 	// eslint-disable-next-line no-restricted-syntax
 	get center() {
-		return new Vec(this.midX, this.midY)
+		return new Vec(this.x + this.w / 2, this.y + this.h / 2)
 	}
 
 	// eslint-disable-next-line no-restricted-syntax
 	set center(v: Vec) {
-		this.minX = v.x - this.width / 2
-		this.minY = v.y - this.height / 2
+		this.x = v.x - this.w / 2
+		this.y = v.y - this.h / 2
 	}
 
 	// eslint-disable-next-line no-restricted-syntax
 	get corners() {
 		return [
-			new Vec(this.minX, this.minY),
-			new Vec(this.maxX, this.minY),
-			new Vec(this.maxX, this.maxY),
-			new Vec(this.minX, this.maxY),
+			new Vec(this.x, this.y),
+			new Vec(this.x + this.w, this.y),
+			new Vec(this.x + this.w, this.y + this.h),
+			new Vec(this.x, this.y + this.h),
 		]
 	}
 
 	// eslint-disable-next-line no-restricted-syntax
 	get cornersAndCenter() {
 		return [
-			new Vec(this.minX, this.minY),
-			new Vec(this.maxX, this.minY),
-			new Vec(this.maxX, this.maxY),
-			new Vec(this.minX, this.maxY),
-			this.center,
+			new Vec(this.x, this.y),
+			new Vec(this.x + this.w, this.y),
+			new Vec(this.x + this.w, this.y + this.h),
+			new Vec(this.x, this.y + this.h),
+			new Vec(this.x + this.w / 2, this.y + this.h / 2),
 		]
 	}
 
@@ -205,10 +205,10 @@ export class Box {
 	}
 
 	expand(A: Box) {
-		const minX = Math.min(this.minX, A.minX)
-		const minY = Math.min(this.minY, A.minY)
-		const maxX = Math.max(this.maxX, A.maxX)
-		const maxY = Math.max(this.maxY, A.maxY)
+		const minX = Math.min(this.x, A.x)
+		const minY = Math.min(this.y, A.y)
+		const maxX = Math.max(this.x + this.w, A.x + A.w)
+		const maxY = Math.max(this.y + this.h, A.y + A.h)
 
 		this.x = minX
 		this.y = minY
@@ -245,10 +245,10 @@ export class Box {
 	}
 
 	snapToGrid(size: number) {
-		const minX = Math.round(this.minX / size) * size
-		const minY = Math.round(this.minY / size) * size
-		const maxX = Math.round(this.maxX / size) * size
-		const maxY = Math.round(this.maxY / size) * size
+		const minX = Math.round(this.x / size) * size
+		const minY = Math.round(this.y / size) * size
+		const maxX = Math.round((this.x + this.w) / size) * size
+		const maxY = Math.round((this.y + this.h) / size) * size
 		this.minX = minX
 		this.minY = minY
 		this.width = Math.max(1, maxX - minX)
@@ -274,26 +274,26 @@ export class Box {
 	getHandlePoint(handle: SelectionCorner | SelectionEdge) {
 		switch (handle) {
 			case 'top_left':
-				return new Vec(this.minX, this.minY)
+				return new Vec(this.x, this.y)
 			case 'top_right':
-				return new Vec(this.maxX, this.minY)
+				return new Vec(this.x + this.w, this.y)
 			case 'bottom_left':
-				return new Vec(this.minX, this.maxY)
+				return new Vec(this.x, this.y + this.h)
 			case 'bottom_right':
-				return new Vec(this.maxX, this.maxY)
+				return new Vec(this.x + this.w, this.y + this.h)
 			case 'top':
-				return new Vec(this.midX, this.minY)
+				return new Vec(this.x + this.w / 2, this.y)
 			case 'right':
-				return new Vec(this.maxX, this.midY)
+				return new Vec(this.x + this.w, this.y + this.h / 2)
 			case 'bottom':
-				return new Vec(this.midX, this.maxY)
+				return new Vec(this.x + this.w / 2, this.y + this.h)
 			case 'left':
-				return new Vec(this.minX, this.midY)
+				return new Vec(this.x, this.y + this.h / 2)
 		}
 	}
 
 	toJson(): BoxModel {
-		return { x: this.minX, y: this.minY, w: this.w, h: this.h }
+		return { x: this.x, y: this.y, w: this.w, h: this.h }
 	}
 
 	resize(handle: SelectionCorner | SelectionEdge | string, dx: number, dy: number) {
@@ -357,10 +357,10 @@ export class Box {
 	}
 
 	union(box: BoxModel) {
-		const minX = Math.min(this.minX, box.x)
-		const minY = Math.min(this.minY, box.y)
-		const maxX = Math.max(this.maxX, box.w + box.x)
-		const maxY = Math.max(this.maxY, box.h + box.y)
+		const minX = Math.min(this.x, box.x)
+		const minY = Math.min(this.y, box.y)
+		const maxX = Math.max(this.x + this.w, box.x + box.w)
+		const maxY = Math.max(this.y + this.h, box.y + box.h)
 
 		this.x = minX
 		this.y = minY
@@ -591,6 +591,14 @@ export class Box {
 		return b.x === a.x && b.y === a.y && b.w === a.w && b.h === a.h
 	}
 
+	prettyMuchEquals(other: Box | BoxModel) {
+		return this.clone().toFixed().equals(Box.From(other).toFixed())
+	}
+
+	static PrettyMuchEquals(a: Box | BoxModel, b: Box | BoxModel) {
+		return b.x === a.x && b.y === a.y && b.w === a.w && b.h === a.h
+	}
+
 	zeroFix() {
 		this.w = Math.max(1, this.w)
 		this.h = Math.max(1, this.h)

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

@@ -144,8 +144,8 @@ describe('Vec.Uni', () => {
 		expect(Vec.Uni(new Vec(10, 10))).toMatchObject(new Vec(0.7071067811865475, 0.7071067811865475))
 	})
 
-	it('Divide-by-zero spits out NaN (at the moment)', () => {
-		expect(Vec.Uni(new Vec(0, 0))).toMatchObject(new Vec(NaN, NaN))
+	it('Divide-by-zero spits out 0', () => {
+		expect(Vec.Uni(new Vec(0, 0))).toMatchObject(new Vec(0, 0))
 	})
 })
 

package/src/lib/primitives/Vec.ts

@@ -189,11 +189,15 @@ export class Vec {
 	}
 
 	uni() {
-		return Vec.Uni(this)
+		const l = this.len()
+		if (l === 0) return this
+		this.x /= l
+		this.y /= l
+		return this
 	}
 
 	tan(V: VecLike): Vec {
-		return Vec.Tan(this, V)
+		return this.sub(V).uni()
 	}
 
 	dist(V: VecLike): number {
@@ -236,15 +240,15 @@ export class Vec {
 		return Vec.EqualsXY(this, x, y)
 	}
 
+	/** @deprecated use `uni` instead */
 	norm() {
-		const l = this.len()
-		this.x = l === 0 ? 0 : this.x / l
-		this.y = l === 0 ? 0 : this.y / l
-		return this
+		return this.uni()
 	}
 
 	toFixed() {
-		return Vec.ToFixed(this)
+		this.x = toFixed(this.x)
+		this.y = toFixed(this.y)
+		return this
 	}
 
 	toString() {
@@ -375,7 +379,8 @@ export class Vec {
 	 * Get the unit vector of A.
 	 */
 	static Uni(A: VecLike) {
-		return Vec.Div(A, Vec.Len(A))
+		const l = Vec.Len(A)
+		return new Vec(l === 0 ? 0 : A.x / l, l === 0 ? 0 : A.y / l)
 	}
 
 	static Tan(A: VecLike, B: VecLike): Vec {

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

@@ -6,16 +6,15 @@ import { getVerticesCountForLength } from './geometry-constants'
 
 /** @public */
 export class Arc2d extends Geometry2d {
-	_center: Vec
-	radius: number
-	start: Vec
-	end: Vec
-	largeArcFlag: number
-	sweepFlag: number
-
-	measure: number
-	angleStart: number
-	angleEnd: number
+	private _center: Vec
+	private _radius: number
+	private _start: Vec
+	private _end: Vec
+	private _largeArcFlag: number
+	private _sweepFlag: number
+	private _measure: number
+	private _angleStart: number
+	private _angleEnd: number
 
 	constructor(
 		config: Omit<Geometry2dOptions, 'isFilled' | 'isClosed'> & {
@@ -31,21 +30,29 @@ export class Arc2d extends Geometry2d {
 		if (start.equals(end)) throw Error(`Arc must have different start and end points.`)
 
 		// ensure that the start and end are clockwise
-		this.angleStart = Vec.Angle(center, start)
-		this.angleEnd = Vec.Angle(center, end)
-		this.radius = Vec.Dist(center, start)
-		this.measure = getArcMeasure(this.angleStart, this.angleEnd, sweepFlag, largeArcFlag)
+		this._angleStart = Vec.Angle(center, start)
+		this._angleEnd = Vec.Angle(center, end)
+		this._radius = Vec.Dist(center, start)
+		this._measure = getArcMeasure(this._angleStart, this._angleEnd, sweepFlag, largeArcFlag)
 
-		this.start = start
-		this.end = end
+		this._start = start
+		this._end = end
 
-		this.sweepFlag = sweepFlag
-		this.largeArcFlag = largeArcFlag
+		this._sweepFlag = sweepFlag
+		this._largeArcFlag = largeArcFlag
 		this._center = center
 	}
 
 	nearestPoint(point: VecLike): Vec {
-		const { _center, measure, radius, angleEnd, angleStart, start: A, end: B } = this
+		const {
+			_center,
+			_measure: measure,
+			_radius: radius,
+			_angleEnd: angleEnd,
+			_angleStart: 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
@@ -68,7 +75,13 @@ export class Arc2d extends Geometry2d {
 	}
 
 	hitTestLineSegment(A: VecLike, B: VecLike): boolean {
-		const { _center, radius, measure, angleStart, angleEnd } = this
+		const {
+			_center,
+			_radius: radius,
+			_measure: measure,
+			_angleStart: angleStart,
+			_angleEnd: angleEnd,
+		} = this
 		const intersection = intersectLineSegmentCircle(A, B, _center, radius)
 		if (intersection === null) return false
 
@@ -79,7 +92,7 @@ export class Arc2d extends Geometry2d {
 	}
 
 	getVertices(): Vec[] {
-		const { _center, measure, length, radius, angleStart } = this
+		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++) {
 			const t = (i / n) * measure
@@ -90,11 +103,17 @@ export class Arc2d extends Geometry2d {
 	}
 
 	getSvgPathData(first = true) {
-		const { start, end, radius, largeArcFlag, sweepFlag } = this
+		const {
+			_start: start,
+			_end: end,
+			_radius: radius,
+			_largeArcFlag: largeArcFlag,
+			_sweepFlag: sweepFlag,
+		} = this
 		return `${first ? `M${start.toFixed()}` : ``} A${radius} ${radius} 0 ${largeArcFlag} ${sweepFlag} ${end.toFixed()}`
 	}
 
 	override getLength() {
-		return Math.abs(this.measure * this.radius)
+		return Math.abs(this._measure * this._radius)
 	}
 }

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

@@ -7,10 +7,10 @@ import { getVerticesCountForLength } from './geometry-constants'
 
 /** @public */
 export class Circle2d extends Geometry2d {
-	_center: Vec
-	radius: number
-	x: number
-	y: number
+	private _center: Vec
+	private _radius: number
+	private _x: number
+	private _y: number
 
 	constructor(
 		public config: Omit<Geometry2dOptions, 'isClosed'> & {
@@ -22,18 +22,18 @@ export class Circle2d extends Geometry2d {
 	) {
 		super({ isClosed: true, ...config })
 		const { x = 0, y = 0, radius } = config
-		this.x = x
-		this.y = y
+		this._x = x
+		this._y = y
 		this._center = new Vec(radius + x, radius + y)
-		this.radius = radius
+		this._radius = radius
 	}
 
 	getBounds() {
-		return new Box(this.x, this.y, this.radius * 2, this.radius * 2)
+		return new Box(this._x, this._y, this._radius * 2, this._radius * 2)
 	}
 
 	getVertices(): Vec[] {
-		const { _center, radius } = this
+		const { _center, _radius: radius } = this
 		const perimeter = PI2 * radius
 		const vertices: Vec[] = []
 		for (let i = 0, n = getVerticesCountForLength(perimeter); i < n; i++) {
@@ -44,18 +44,18 @@ export class Circle2d extends Geometry2d {
 	}
 
 	nearestPoint(point: VecLike): Vec {
-		const { _center, radius } = this
+		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)
 	}
 
 	hitTestLineSegment(A: VecLike, B: VecLike, distance = 0): boolean {
-		const { _center, radius } = this
+		const { _center, _radius: radius } = this
 		return intersectLineSegmentCircle(A, B, _center, radius + distance) !== null
 	}
 
 	getSvgPathData(): string {
-		const { _center, radius } = this
+		const { _center, _radius: radius } = this
 		return `M${_center.x + radius},${_center.y} a${radius},${radius} 0 1,0 ${radius * 2},0a${radius},${radius} 0 1,0 -${radius * 2},0`
 	}
 }

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

@@ -0,0 +1,5 @@
+describe('CubicBezier2d', () => {
+	it('should be tested', () => {
+		expect(true).toBe(true)
+	})
+})

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

@@ -4,10 +4,10 @@ import { Polyline2d } from './Polyline2d'
 
 /** @public */
 export class CubicBezier2d extends Polyline2d {
-	a: Vec
-	b: Vec
-	c: Vec
-	d: Vec
+	private _a: Vec
+	private _b: Vec
+	private _c: Vec
+	private _d: Vec
 
 	constructor(
 		config: Omit<Geometry2dOptions, 'isFilled' | 'isClosed'> & {
@@ -20,15 +20,15 @@ export class CubicBezier2d extends Polyline2d {
 		const { start: a, cp1: b, cp2: c, end: d } = config
 		super({ ...config, points: [a, d] })
 
-		this.a = a
-		this.b = b
-		this.c = c
-		this.d = d
+		this._a = a
+		this._b = b
+		this._c = c
+		this._d = d
 	}
 
 	override getVertices() {
 		const vertices = [] as Vec[]
-		const { a, b, c, d } = this
+		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++) {
 			const t = i / n
@@ -48,10 +48,6 @@ export class CubicBezier2d extends Polyline2d {
 		return vertices
 	}
 
-	midPoint() {
-		return CubicBezier2d.GetAtT(this, 0.5)
-	}
-
 	nearestPoint(A: VecLike): Vec {
 		let nearest: Vec | undefined
 		let dist = Infinity
@@ -71,12 +67,12 @@ export class CubicBezier2d extends Polyline2d {
 	}
 
 	getSvgPathData(first = true) {
-		const { a, b, c, d } = this
+		const { _a: a, _b: b, _c: c, _d: d } = this
 		return `${first ? `M ${a.toFixed()} ` : ``} C${b.toFixed()} ${c.toFixed()} ${d.toFixed()}`
 	}
 
 	static GetAtT(segment: CubicBezier2d, t: number) {
-		const { a, b, c, d } = segment
+		const { _a: a, _b: b, _c: c, _d: d } = segment
 		return new Vec(
 			(1 - t) * (1 - t) * (1 - t) * a.x +
 				3 * ((1 - t) * (1 - t)) * t * b.x +
@@ -89,9 +85,9 @@ export class CubicBezier2d extends Polyline2d {
 		)
 	}
 
-	override getLength(filters?: Geometry2dFilters, precision = 32) {
+	override getLength(_filters?: Geometry2dFilters, precision = 32) {
 		let n1: Vec,
-			p1 = this.a,
+			p1 = this._a,
 			length = 0
 		for (let i = 1; i <= precision; i++) {
 			n1 = CubicBezier2d.GetAtT(this, i / precision)

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

@@ -4,22 +4,22 @@ import { Geometry2d, Geometry2dOptions } from './Geometry2d'
 
 /** @public */
 export class CubicSpline2d extends Geometry2d {
-	points: Vec[]
+	private _points: Vec[]
 
 	constructor(config: Omit<Geometry2dOptions, 'isClosed' | 'isFilled'> & { points: Vec[] }) {
 		super({ ...config, isClosed: false, isFilled: false })
 		const { points } = config
 
-		this.points = points
+		this._points = points
 	}
 
-	_segments?: CubicBezier2d[]
+	private _segments?: CubicBezier2d[]
 
 	// eslint-disable-next-line no-restricted-syntax
 	get segments() {
 		if (!this._segments) {
 			this._segments = []
-			const { points } = this
+			const { _points: points } = this
 
 			const len = points.length
 			const last = len - 2
@@ -54,7 +54,7 @@ export class CubicSpline2d extends Geometry2d {
 		const vertices = this.segments.reduce((acc, segment) => {
 			return acc.concat(segment.vertices)
 		}, [] as Vec[])
-		vertices.push(this.points[this.points.length - 1])
+		vertices.push(this._points[this._points.length - 1])
 		return vertices
 	}
 

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

@@ -3,38 +3,34 @@ import { Geometry2d } from './Geometry2d'
 
 /** @public */
 export class Edge2d extends Geometry2d {
-	start: Vec
-	end: Vec
-	d: Vec
-	u: Vec
-	ul: number
+	private _start: Vec
+	private _end: Vec
+	private _d: Vec
+	private _u: Vec
+	private _ul: number
 
 	constructor(config: { start: Vec; end: Vec }) {
 		super({ ...config, isClosed: false, isFilled: false })
 		const { start, end } = config
 
-		this.start = start
-		this.end = end
+		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
+		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
 	}
 
 	override getLength() {
-		return this.d.len()
-	}
-
-	midPoint(): Vec {
-		return this.start.lrp(this.end, 0.5)
+		return this._d.len()
 	}
 
 	override getVertices(): Vec[] {
-		return [this.start, this.end]
+		return [this._start, this._end]
 	}
 
 	override nearestPoint(point: VecLike): Vec {
-		const { start, end, d, u, ul: l } = this
+		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
@@ -48,7 +44,7 @@ export class Edge2d extends Geometry2d {
 	}
 
 	getSvgPathData(first = true) {
-		const { start, end } = this
+		const { _start: start, _end: end } = this
 		return `${first ? `M${start.toFixed()}` : ``} L${end.toFixed()}`
 	}
 }

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

@@ -1,14 +1,15 @@
 import { Box } from '../Box'
 import { Vec, VecLike } from '../Vec'
-import { PI, PI2, perimeterOfEllipse } from '../utils'
+import { PI, PI2, clamp, perimeterOfEllipse } from '../utils'
 import { Edge2d } from './Edge2d'
 import { Geometry2d, Geometry2dOptions } from './Geometry2d'
 import { getVerticesCountForLength } from './geometry-constants'
 
 /** @public */
 export class Ellipse2d extends Geometry2d {
-	w: number
-	h: number
+	private _w: number
+	private _h: number
+	private _edges?: Edge2d[]
 
 	constructor(
 		public config: Omit<Geometry2dOptions, 'isClosed'> & {
@@ -18,12 +19,10 @@ export class Ellipse2d extends Geometry2d {
 	) {
 		super({ ...config, isClosed: true })
 		const { width, height } = config
-		this.w = width
-		this.h = height
+		this._w = width
+		this._h = height
 	}
 
-	_edges?: Edge2d[]
-
 	// eslint-disable-next-line no-restricted-syntax
 	get edges() {
 		if (!this._edges) {
@@ -41,8 +40,8 @@ export class Ellipse2d extends Geometry2d {
 
 	getVertices() {
 		// Perimeter of the ellipse
-		const w = Math.max(1, this.w)
-		const h = Math.max(1, this.h)
+		const w = Math.max(1, this._w)
+		const h = Math.max(1, this._h)
 		const cx = w / 2
 		const cy = h / 2
 		const q = Math.pow(cx - cy, 2) / Math.pow(cx + cy, 2)
@@ -63,7 +62,7 @@ export class Ellipse2d extends Geometry2d {
 		const vertices = Array(len)
 
 		for (let i = 0; i < len; i++) {
-			vertices[i] = new Vec(cx + cx * cos, cy + cy * sin)
+			vertices[i] = new Vec(clamp(cx + cx * cos, 0, w), clamp(cy + cy * sin, 0, h))
 			ts = b * cos + a * sin
 			tc = a * cos - b * sin
 			sin = ts
@@ -95,11 +94,11 @@ export class Ellipse2d extends Geometry2d {
 	}
 
 	getBounds() {
-		return new Box(0, 0, this.w, this.h)
+		return new Box(0, 0, this._w, this._h)
 	}
 
 	getLength(): number {
-		const { w, h } = this
+		const { _w: w, _h: h } = this
 		const cx = w / 2
 		const cy = h / 2
 		const rx = Math.max(0, cx)
@@ -108,7 +107,7 @@ export class Ellipse2d extends Geometry2d {
 	}
 
 	getSvgPathData(first = false) {
-		const { w, h } = this
+		const { _w: w, _h: h } = this
 		const cx = w / 2
 		const cy = h / 2
 		const rx = Math.max(0, cx)

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

@@ -3,7 +3,7 @@ import { Geometry2d, Geometry2dOptions } from './Geometry2d'
 
 /** @public */
 export class Point2d extends Geometry2d {
-	point: Vec
+	private _point: Vec
 
 	constructor(
 		config: Omit<Geometry2dOptions, 'isClosed' | 'isFilled'> & { margin: number; point: Vec }
@@ -11,23 +11,23 @@ export class Point2d extends Geometry2d {
 		super({ ...config, isClosed: true, isFilled: true })
 		const { point } = config
 
-		this.point = point
+		this._point = point
 	}
 
 	getVertices() {
-		return [this.point]
+		return [this._point]
 	}
 
 	nearestPoint(): Vec {
-		return this.point
+		return this._point
 	}
 
 	hitTestLineSegment(A: VecLike, B: VecLike, margin: number): boolean {
-		return Vec.DistanceToLineSegment(A, B, this.point) < margin
+		return Vec.DistanceToLineSegment(A, B, this._point) < margin
 	}
 
 	getSvgPathData() {
-		const { point } = this
+		const { _point: point } = this
 		return `M${point.toFixed()}`
 	}
 }

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

@@ -7,5 +7,9 @@ export class Polygon2d extends Polyline2d {
 	constructor(config: Omit<Geometry2dOptions, 'isClosed'> & { points: Vec[] }) {
 		super({ ...config })
 		this.isClosed = true
+
+		if (config.points.length < 3) {
+			throw new Error('Polygon2d: points must be an array of at least 3 points')
+		}
 	}
 }