@tldraw/editor 3.14.0-canary.50d6947a73ff → 3.14.0-canary.67f5b0896cc3

package/src/lib/editor/managers/FocusManager.ts

@@ -58,6 +58,8 @@ export class FocusManager {
 
 	private handleKeyDown(keyEvent: KeyboardEvent) {
 		const container = this.editor.getContainer()
+		if (this.editor.isIn('select.editing_shape')) return
+		if (document.activeElement === container && this.editor.getSelectedShapeIds().length > 0) return
 		if (['Tab', 'ArrowUp', 'ArrowDown'].includes(keyEvent.key)) {
 			container.classList.remove('tl-container__no-focus-ring')
 		}

package/src/lib/editor/shapes/ShapeUtil.ts

@@ -240,6 +240,15 @@ export abstract class ShapeUtil<Shape extends TLUnknownShape = TLUnknownShape> {
 		return true
 	}
 
+	/**
+	 * When the shape is resized, whether the shape's children should also be resized.
+	 *
+	 * @public
+	 */
+	canResizeChildren(_shape: Shape): boolean {
+		return true
+	}
+
 	/**
 	 * Whether the shape can be edited in read-only mode.
 	 *

package/src/lib/editor/shapes/group/GroupShapeUtil.tsx

@@ -20,6 +20,14 @@ export class GroupShapeUtil extends ShapeUtil<TLGroupShape> {
 		return false
 	}
 
+	canResize() {
+		return false
+	}
+
+	canResizeChildren() {
+		return true
+	}
+
 	getDefaultProps(): TLGroupShape['props'] {
 		return {}
 	}

package/src/lib/editor/shapes/shared/getPerfectDashProps.ts

@@ -1,5 +1,8 @@
 import { TLDefaultDashStyle } from '@tldraw/tlschema'
 
+/** @public */
+export type PerfectDashTerminal = 'skip' | 'outset' | 'none'
+
 /** @public */
 export function getPerfectDashProps(
 	totalLength: number,
@@ -7,8 +10,8 @@ export function getPerfectDashProps(
 	opts: {
 		style?: TLDefaultDashStyle
 		snap?: number
-		end?: 'skip' | 'outset' | 'none'
-		start?: 'skip' | 'outset' | 'none'
+		end?: PerfectDashTerminal
+		start?: PerfectDashTerminal
 		lengthRatio?: number
 		closed?: boolean
 		forceSolid?: boolean

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

@@ -1,6 +1,6 @@
 import { VecModel } from '@tldraw/tlschema'
 import { EASINGS } from './easings'
-import { toFixed } from './utils'
+import { clamp, toFixed } from './utils'
 
 /** @public */
 export type VecLike = Vec | VecModel
@@ -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 {
@@ -487,7 +492,7 @@ export class Vec {
 			(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)
+		const angle = sign * Math.acos(clamp(p / n, -1, 1))
 
 		return angle
 	}

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

@@ -1,41 +1,36 @@
-import { linesIntersect } from '../intersect'
 import { Vec, VecLike } from '../Vec'
 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,14 +43,8 @@ export class Edge2d extends Geometry2d {
 		return new Vec(cx, cy)
 	}
 
-	override hitTestLineSegment(A: VecLike, B: VecLike, distance = 0): boolean {
-		return (
-			linesIntersect(A, B, this.start, this.end) || this.distanceToLineSegment(A, B) <= distance
-		)
-	}
-
 	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/Geometry2d.ts

@@ -8,6 +8,7 @@ import {
 	intersectLineSegmentPolygon,
 	intersectLineSegmentPolyline,
 	intersectPolys,
+	linesIntersect,
 } from '../intersect'
 import { approximately, pointInPolygon } from '../utils'
 
@@ -107,8 +108,13 @@ export abstract class Geometry2d {
 		let nearest: Vec | undefined
 		let dist = Infinity
 		let d: number, p: Vec, q: Vec
+		const nextLimit = this.isClosed ? vertices.length : vertices.length - 1
 		for (let i = 0; i < vertices.length; i++) {
 			p = vertices[i]
+			if (i < nextLimit) {
+				const next = vertices[(i + 1) % vertices.length]
+				if (linesIntersect(A, B, p, next)) return 0
+			}
 			q = Vec.NearestPointOnLineSegment(A, B, p, true)
 			d = Vec.Dist2(p, q)
 			if (d < dist) {

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')
+		}
 	}
 }