@tldraw/editor 3.13.0-canary.fd867adaa211 → 3.14.0-canary.50ad892ef195

package/src/lib/editor/Editor.ts

@@ -129,6 +129,7 @@ import { Group2d } from '../primitives/geometry/Group2d'
 import { intersectPolygonPolygon } from '../primitives/intersect'
 import { PI, approximately, areAnglesCompatible, clamp, pointInPolygon } from '../primitives/utils'
 import { ReadonlySharedStyleMap, SharedStyle, SharedStyleMap } from '../utils/SharedStylesMap'
+import { areShapesContentEqual } from '../utils/areShapesContentEqual'
 import { dataUrlToFile } from '../utils/assets'
 import { debugFlags } from '../utils/debug-flags'
 import {
@@ -325,7 +326,6 @@ export class Editor extends EventEmitter<TLEventMap> {
 		this.options = { ...defaultTldrawOptions, ...options }
 
 		this.store = store
-		this.disposables.add(this.store.dispose.bind(this.store))
 		this.history = new HistoryManager<TLRecord>({
 			store,
 			annotateError: (error) => {
@@ -955,6 +955,7 @@ export class Editor extends EventEmitter<TLEventMap> {
 	dispose() {
 		this.disposables.forEach((dispose) => dispose())
 		this.disposables.clear()
+		this.store.dispose()
 		this.isDisposed = true
 	}
 
@@ -1814,9 +1815,28 @@ export class Editor extends EventEmitter<TLEventMap> {
 		return this
 	}
 
+	/**
+	 * Select the next shape in the reading order or in cardinal order.
+	 *
+	 * @example
+	 * ```ts
+	 * editor.selectAdjacentShape('next')
+	 * ```
+	 *
+	 * @public
+	 */
 	selectAdjacentShape(direction: TLAdjacentDirection) {
-		const readingOrderShapes = this.getCurrentPageShapesInReadingOrder()
 		const selectedShapeIds = this.getSelectedShapeIds()
+		const firstParentId = selectedShapeIds[0] ? this.getShape(selectedShapeIds[0])?.parentId : null
+		const isSelectedWithinContainer =
+			firstParentId &&
+			selectedShapeIds.every((shapeId) => this.getShape(shapeId)?.parentId === firstParentId) &&
+			!isPageId(firstParentId)
+		const readingOrderShapes = isSelectedWithinContainer
+			? this._getShapesInReadingOrder(
+					this.getCurrentPageShapes().filter((shape) => shape.parentId === firstParentId)
+				)
+			: this.getCurrentPageShapesInReadingOrder()
 		const currentShapeId: TLShapeId | undefined =
 			selectedShapeIds.length === 1
 				? selectedShapeIds[0]
@@ -1838,13 +1858,7 @@ export class Editor extends EventEmitter<TLEventMap> {
 		const shape = this.getShape(adjacentShapeId)
 		if (!shape) return
 
-		this.setSelectedShapes([shape.id])
-		this.zoomToSelectionIfOffscreen(256, {
-			animation: {
-				duration: this.options.animationMediumMs,
-			},
-			inset: 0,
-		})
+		this._selectShapesAndZoom([shape.id])
 	}
 
 	/**
@@ -1854,10 +1868,14 @@ export class Editor extends EventEmitter<TLEventMap> {
 	 * @public
 	 */
 	@computed getCurrentPageShapesInReadingOrder(): TLShape[] {
+		const shapes = this.getCurrentPageShapes().filter((shape) => isPageId(shape.parentId))
+		return this._getShapesInReadingOrder(shapes)
+	}
+
+	private _getShapesInReadingOrder(shapes: TLShape[]): TLShape[] {
 		const SHALLOW_ANGLE = 20
 		const ROW_THRESHOLD = 100
 
-		const shapes = this.getCurrentPageShapes()
 		const tabbableShapes = shapes.filter((shape) => this.getShapeUtil(shape).canTabTo(shape))
 
 		if (tabbableShapes.length <= 1) return tabbableShapes
@@ -2003,6 +2021,36 @@ export class Editor extends EventEmitter<TLEventMap> {
 		return lowestScoringShape!.shape.id
 	}
 
+	selectParentShape() {
+		const selectedShape = this.getOnlySelectedShape()
+		if (!selectedShape) return
+		const parentShape = this.getShape(selectedShape.parentId)
+		if (!parentShape) return
+		this._selectShapesAndZoom([parentShape.id])
+	}
+
+	selectFirstChildShape() {
+		const selectedShapes = this.getSelectedShapes()
+		if (!selectedShapes.length) return
+		const selectedShape = selectedShapes[0]
+		const children = this.getSortedChildIdsForParent(selectedShape.id)
+			.map((id) => this.getShape(id))
+			.filter((i) => i) as TLShape[]
+		const sortedChildren = this._getShapesInReadingOrder(children)
+		if (sortedChildren.length === 0) return
+		this._selectShapesAndZoom([sortedChildren[0].id])
+	}
+
+	private _selectShapesAndZoom(ids: TLShapeId[]) {
+		this.setSelectedShapes(ids)
+		this.zoomToSelectionIfOffscreen(256, {
+			animation: {
+				duration: this.options.animationMediumMs,
+			},
+			inset: 0,
+		})
+	}
+
 	/**
 	 * Clear the selection.
 	 *
@@ -2275,13 +2323,21 @@ export class Editor extends EventEmitter<TLEventMap> {
 	setEditingShape(shape: TLShapeId | TLShape | null): this {
 		const id = typeof shape === 'string' ? shape : (shape?.id ?? null)
 		this.setRichTextEditor(null)
-		if (id !== this.getEditingShapeId()) {
+		const prevEditingShapeId = this.getEditingShapeId()
+		if (id !== prevEditingShapeId) {
 			if (id) {
 				const shape = this.getShape(id)
 				if (shape && this.getShapeUtil(shape).canEdit(shape)) {
 					this.run(
 						() => {
 							this._updateCurrentPageState({ editingShapeId: id })
+							if (prevEditingShapeId) {
+								const prevEditingShape = this.getShape(prevEditingShapeId)
+								if (prevEditingShape) {
+									this.getShapeUtil(prevEditingShape).onEditEnd?.(prevEditingShape)
+								}
+							}
+							this.getShapeUtil(shape).onEditStart?.(shape)
 						},
 						{ history: 'ignore' }
 					)
@@ -2294,6 +2350,12 @@ export class Editor extends EventEmitter<TLEventMap> {
 				() => {
 					this._updateCurrentPageState({ editingShapeId: null })
 					this._currentRichTextEditor.set(null)
+					if (prevEditingShapeId) {
+						const prevEditingShape = this.getShape(prevEditingShapeId)
+						if (prevEditingShape) {
+							this.getShapeUtil(prevEditingShape).onEditEnd?.(prevEditingShape)
+						}
+					}
 				},
 				{ history: 'ignore' }
 			)
@@ -4574,7 +4636,7 @@ export class Editor extends EventEmitter<TLEventMap> {
 					this.fonts.trackFontsForShape(shape)
 					return this.getShapeUtil(shape).getGeometry(shape, opts)
 				},
-				{ areRecordsEqual: (a, b) => a.props === b.props }
+				{ areRecordsEqual: areShapesContentEqual }
 			)
 		}
 		return this._shapeGeometryCaches[context].get(
@@ -4622,9 +4684,15 @@ export class Editor extends EventEmitter<TLEventMap> {
 
 	/** @internal */
 	@computed private _getShapeHandlesCache(): ComputedCache<TLHandle[] | undefined, TLShape> {
-		return this.store.createComputedCache('handles', (shape) => {
-			return this.getShapeUtil(shape).getHandles?.(shape)
-		})
+		return this.store.createComputedCache(
+			'handles',
+			(shape) => {
+				return this.getShapeUtil(shape).getHandles?.(shape)
+			},
+			{
+				areRecordsEqual: areShapesContentEqual,
+			}
+		)
 	}
 
 	/**
@@ -5845,9 +5913,15 @@ export class Editor extends EventEmitter<TLEventMap> {
 	@computed
 	private _getBindingsIndexCache() {
 		const index = bindingsIndex(this)
-		return this.store.createComputedCache<TLBinding[], TLShape>('bindingsIndex', (shape) => {
-			return index.get().get(shape.id)
-		})
+		return this.store.createComputedCache<TLBinding[], TLShape>(
+			'bindingsIndex',
+			(shape) => {
+				return index.get().get(shape.id)
+			},
+			// we can ignore the shape equality check here because the index is
+			// computed incrementally based on what bindings are in the store
+			{ areRecordsEqual: () => true }
+		)
 	}
 
 	/**
@@ -10214,7 +10288,7 @@ export class Editor extends EventEmitter<TLEventMap> {
 
 					// If the camera behavior is "zoom" and the ctrl key is pressed, then pan;
 					// If the camera behavior is "pan" and the ctrl key is not pressed, then zoom
-					if (inputs.ctrlKey) behavior = wheelBehavior === 'pan' ? 'zoom' : 'pan'
+					if (info.ctrlKey) behavior = wheelBehavior === 'pan' ? 'zoom' : 'pan'
 
 					switch (behavior) {
 						case 'zoom': {
@@ -10330,12 +10404,10 @@ export class Editor extends EventEmitter<TLEventMap> {
 						if (this.inputs.isPanning && this.inputs.isPointing) {
 							// Handle spacebar / middle mouse button panning
 							const { currentScreenPoint, previousScreenPoint } = this.inputs
-							const { panSpeed } = cameraOptions
 							const offset = Vec.Sub(currentScreenPoint, previousScreenPoint)
-							this.setCamera(
-								new Vec(cx + (offset.x * panSpeed) / cz, cy + (offset.y * panSpeed) / cz, cz),
-								{ immediate: true }
-							)
+							this.setCamera(new Vec(cx + offset.x / cz, cy + offset.y / cz, cz), {
+								immediate: true,
+							})
 							this.maybeTrackPerformance('Panning')
 							return
 						}

package/src/lib/editor/managers/SnapManager/HandleSnaps.ts

@@ -45,7 +45,6 @@ export interface HandleSnapGeometry {
 
 const defaultGetSelfSnapOutline = () => null
 const defaultGetSelfSnapPoints = () => []
-
 /** @public */
 export class HandleSnaps {
 	readonly editor: Editor

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

@@ -32,6 +32,7 @@ export interface TLMeasureTextSpanOpts {
 	fontStyle: string
 	lineHeight: number
 	textAlign: TLDefaultHorizontalAlignStyle
+	otherStyles?: Record<string, string>
 }
 
 const spaceCharacterRegex = /\s/
@@ -86,6 +87,7 @@ export class TextManager {
 			 */
 			maxWidth: null | number
 			minWidth?: null | number
+			otherStyles?: Record<string, string>
 			padding: string
 			disableOverflowWrapBreaking?: boolean
 		}
@@ -112,6 +114,11 @@ export class TextManager {
 			'overflow-wrap',
 			opts.disableOverflowWrapBreaking ? 'normal' : 'break-word'
 		)
+		if (opts.otherStyles) {
+			for (const [key, value] of Object.entries(opts.otherStyles)) {
+				wrapperElm.style.setProperty(key, value)
+			}
+		}
 
 		const scrollWidth = wrapperElm.scrollWidth
 		const rect = wrapperElm.getBoundingClientRect()
@@ -256,6 +263,11 @@ export class TextManager {
 		elm.style.setProperty('line-height', `${opts.lineHeight * opts.fontSize}px`)
 		elm.style.setProperty('text-align', textAlignmentsForLtr[opts.textAlign])
 		elm.style.setProperty('font-style', opts.fontStyle)
+		if (opts.otherStyles) {
+			for (const [key, value] of Object.entries(opts.otherStyles)) {
+				elm.style.setProperty(key, value)
+			}
+		}
 
 		const shouldTruncateToFirstLine =
 			opts.overflow === 'truncate-ellipsis' || opts.overflow === 'truncate-clip'

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

@@ -245,7 +245,7 @@ export abstract class ShapeUtil<Shape extends TLUnknownShape = TLUnknownShape> {
 	 *
 	 * @public
 	 */
-	canEditInReadOnly(_shape: Shape): boolean {
+	canEditInReadonly(_shape: Shape): boolean {
 		return false
 	}
 
@@ -707,7 +707,15 @@ export abstract class ShapeUtil<Shape extends TLUnknownShape = TLUnknownShape> {
 	onClick?(shape: Shape): TLShapePartial<Shape> | void
 
 	/**
-	 * A callback called when a shape finishes being editing.
+	 * A callback called when a shape starts being edited.
+	 *
+	 * @param shape - The shape.
+	 * @public
+	 */
+	onEditStart?(shape: Shape): void
+
+	/**
+	 * A callback called when a shape finishes being edited.
 	 *
 	 * @param shape - The shape.
 	 * @public

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

@@ -12,10 +12,6 @@ export class GroupShapeUtil extends ShapeUtil<TLGroupShape> {
 	static override props = groupShapeProps
 	static override migrations = groupShapeMigrations
 
-	override canTabTo() {
-		return false
-	}
-
 	override hideSelectionBoundsFg() {
 		return true
 	}

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

@@ -4,15 +4,15 @@ import { TLDefaultDashStyle } from '@tldraw/tlschema'
 export function getPerfectDashProps(
 	totalLength: number,
 	strokeWidth: number,
-	opts = {} as Partial<{
-		style: TLDefaultDashStyle
-		snap: number
-		end: 'skip' | 'outset' | 'none'
-		start: 'skip' | 'outset' | 'none'
-		lengthRatio: number
-		closed: boolean
-		forceSolid: boolean
-	}>
+	opts: {
+		style?: TLDefaultDashStyle
+		snap?: number
+		end?: 'skip' | 'outset' | 'none'
+		start?: 'skip' | 'outset' | 'none'
+		lengthRatio?: number
+		closed?: boolean
+		forceSolid?: boolean
+	} = {}
 ): {
 	strokeDasharray: string
 	strokeDashoffset: string

package/src/lib/exports/getSvgJsx.tsx

@@ -365,6 +365,21 @@ function SvgExport({
 		onMount()
 	}, [onMount, shapeElements])
 
+	let backgroundColor = background ? theme.background : 'transparent'
+
+	if (singleFrameShapeId && background) {
+		const frameShapeUtil = editor.getShapeUtil('frame') as any as
+			| undefined
+			| { options: { showColors: boolean } }
+		if (frameShapeUtil?.options.showColors) {
+			const shape = editor.getShape(singleFrameShapeId)! as TLFrameShape
+			const color = theme[shape.props.color]
+			backgroundColor = color.frame.fill
+		} else {
+			backgroundColor = theme.solid
+		}
+	}
+
 	return (
 		<SvgExportContextProvider editor={editor} context={exportContext}>
 			<svg
@@ -375,13 +390,7 @@ function SvgExport({
 				viewBox={`${bbox.minX} ${bbox.minY} ${bbox.width} ${bbox.height}`}
 				strokeLinecap="round"
 				strokeLinejoin="round"
-				style={{
-					backgroundColor: background
-						? singleFrameShapeId
-							? theme.solid
-							: theme.background
-						: 'transparent',
-				}}
+				style={{ backgroundColor }}
 				data-color-mode={isDarkMode ? 'dark' : 'light'}
 				className={`tl-container tl-theme__force-sRGB ${isDarkMode ? 'tl-theme__dark' : 'tl-theme__light'}`}
 			>

package/src/lib/hooks/useEditorComponents.tsx

@@ -19,10 +19,7 @@ import { DefaultHandle, TLHandleProps } from '../components/default-components/D
 import { DefaultHandles, TLHandlesProps } from '../components/default-components/DefaultHandles'
 import { DefaultLoadingScreen } from '../components/default-components/DefaultLoadingScreen'
 import { DefaultScribble, TLScribbleProps } from '../components/default-components/DefaultScribble'
-import {
-	DefaultSelectionBackground,
-	TLSelectionBackgroundProps,
-} from '../components/default-components/DefaultSelectionBackground'
+import { TLSelectionBackgroundProps } from '../components/default-components/DefaultSelectionBackground'
 import {
 	DefaultSelectionForeground,
 	TLSelectionForegroundProps,
@@ -113,7 +110,7 @@ export function EditorComponentsProvider({
 			OnTheCanvas: null,
 			Overlays: null,
 			Scribble: DefaultScribble,
-			SelectionBackground: DefaultSelectionBackground,
+			SelectionBackground: null,
 			SelectionForeground: DefaultSelectionForeground,
 			ShapeIndicator: DefaultShapeIndicator,
 			ShapeIndicators: DefaultShapeIndicators,

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