@tldraw/editor 3.16.0-internal.51e99e128bd4 → 3.16.0-internal.a478398270c6

package/src/lib/editor/types/misc-types.ts

@@ -1,4 +1,4 @@
-import { BoxModel, TLShape } from '@tldraw/tlschema'
+import { BoxModel } from '@tldraw/tlschema'
 import { Box } from '../../primitives/Box'
 import { VecLike } from '../../primitives/Vec'
 
@@ -187,75 +187,3 @@ export interface TLCameraConstraints {
 				y: 'free' | 'fixed' | 'inside' | 'outside' | 'contain'
 		  }
 }
-
-/** @public */
-export interface TLUpdatePointerOptions {
-	/** Whether to update the pointer immediately, rather than on the next tick. */
-	immediate?: boolean
-	/**
-	 * The point, in screen-space, to update the pointer to. Defaults to the position of the last
-	 * pointer event.
-	 */
-	point?: VecLike
-	pointerId?: number
-	ctrlKey?: boolean
-	altKey?: boolean
-	shiftKey?: boolean
-	metaKey?: boolean
-	accelKey?: boolean
-	isPen?: boolean
-	button?: number
-}
-
-/**
- * Options to {@link Editor.getShapeAtPoint}.
- *
- * @public
- */
-export interface TLGetShapeAtPointOptions {
-	/**
-	 * The margin to apply to the shape.
-	 * If a number, it will be applied to both the inside and outside of the shape.
-	 * If an array, the first element will be applied to the inside of the shape, and the second element will be applied to the outside.
-	 *
-	 * @example
-	 * ```ts
-	 * // Get the shape at the center of the screen
-	 * const shape = editor.getShapeAtProps({
-	 *   margin: 10,
-	 * })
-	 *
-	 * // Get the shape at the center of the screen with a 10px inner margin and a 5px outer margin
-	 * const shape = editor.getShapeAtProps({
-	 *   margin: [10, 5],
-	 * })
-	 * ```
-	 */
-	margin?: number | [number, number]
-	/**
-	 * Whether to register hits inside of shapes (beyond the margin), such as the inside of a solid shape.
-	 */
-	hitInside?: boolean
-	/**
-	 * Whether to register hits on locked shapes.
-	 */
-	hitLocked?: boolean
-	/**
-	 * Whether to register hits on labels.
-	 */
-	hitLabels?: boolean
-	/**
-	 * Whether to only return hits on shapes that are currently being rendered.
-	 * todo: rename this to hitCulled or hitNotRendering
-	 */
-	renderingOnly?: boolean
-	/**
-	 * Whether to register hits on the inside of frame shapes.
-	 * todo: rename this to hitInsideFrames
-	 */
-	hitFrameInside?: boolean
-	/**
-	 * A filter function to apply to the shapes.
-	 */
-	filter?(shape: TLShape): boolean
-}

package/src/lib/exports/getSvgJsx.tsx

@@ -4,7 +4,6 @@ import {
 	TLGroupShape,
 	TLShape,
 	TLShapeId,
-	getColorValue,
 	getDefaultColorTheme,
 } from '@tldraw/tlschema'
 import { hasOwnProperty, promiseWithResolve, uniqueId } from '@tldraw/utils'
@@ -374,7 +373,8 @@ function SvgExport({
 			| { options: { showColors: boolean } }
 		if (frameShapeUtil?.options.showColors) {
 			const shape = editor.getShape(singleFrameShapeId)! as TLFrameShape
-			backgroundColor = getColorValue(theme, shape.props.color, 'frameFill')
+			const color = theme[shape.props.color]
+			backgroundColor = color.frame.fill
 		} else {
 			backgroundColor = theme.solid
 		}

package/src/lib/hooks/useCanvasEvents.ts

@@ -1,5 +1,5 @@
 import { useValue } from '@tldraw/state-react'
-import React, { useEffect, useMemo } from 'react'
+import React, { useMemo } from 'react'
 import { RIGHT_MOUSE_BUTTON } from '../constants'
 import {
 	preventDefault,
@@ -16,6 +16,9 @@ export function useCanvasEvents() {
 
 	const events = useMemo(
 		function canvasEvents() {
+			// Track the last screen point
+			let lastX: number, lastY: number
+
 			function onPointerDown(e: React.PointerEvent) {
 				if ((e as any).isKilled) return
 
@@ -41,9 +44,35 @@ export function useCanvasEvents() {
 				})
 			}
 
+			function onPointerMove(e: React.PointerEvent) {
+				if ((e as any).isKilled) return
+
+				if (e.clientX === lastX && e.clientY === lastY) return
+				lastX = e.clientX
+				lastY = e.clientY
+
+				// For tools that benefit from a higher fidelity of events,
+				// we dispatch the coalesced events.
+				// N.B. Sometimes getCoalescedEvents isn't present on iOS, ugh.
+				const events =
+					currentTool.useCoalescedEvents && e.nativeEvent.getCoalescedEvents
+						? e.nativeEvent.getCoalescedEvents()
+						: [e]
+				for (const singleEvent of events) {
+					editor.dispatch({
+						type: 'pointer',
+						target: 'canvas',
+						name: 'pointer_move',
+						...getPointerInfo(singleEvent),
+					})
+				}
+			}
+
 			function onPointerUp(e: React.PointerEvent) {
 				if ((e as any).isKilled) return
 				if (e.button !== 0 && e.button !== 1 && e.button !== 2 && e.button !== 5) return
+				lastX = e.clientX
+				lastY = e.clientY
 
 				releasePointerCapture(e.currentTarget, e)
 
@@ -129,6 +158,7 @@ export function useCanvasEvents() {
 
 			return {
 				onPointerDown,
+				onPointerMove,
 				onPointerUp,
 				onPointerEnter,
 				onPointerLeave,
@@ -139,45 +169,8 @@ export function useCanvasEvents() {
 				onClick,
 			}
 		},
-		[editor]
+		[editor, currentTool]
 	)
 
-	// onPointerMove is special: where we're only interested in the other events when they're
-	// happening _on_ the canvas (as opposed to outside of it, or on UI floating over it), we want
-	// the pointer position to be up to date regardless of whether it's over the tldraw canvas or
-	// not. So instead of returning a listener to be attached to the canvas, we directly attach a
-	// listener to the whole document instead.
-	useEffect(() => {
-		let lastX: number, lastY: number
-
-		function onPointerMove(e: PointerEvent) {
-			if ((e as any).isKilled) return
-			;(e as any).isKilled = true
-
-			if (e.clientX === lastX && e.clientY === lastY) return
-			lastX = e.clientX
-			lastY = e.clientY
-
-			// For tools that benefit from a higher fidelity of events,
-			// we dispatch the coalesced events.
-			// N.B. Sometimes getCoalescedEvents isn't present on iOS, ugh.
-			const events =
-				currentTool.useCoalescedEvents && e.getCoalescedEvents ? e.getCoalescedEvents() : [e]
-			for (const singleEvent of events) {
-				editor.dispatch({
-					type: 'pointer',
-					target: 'canvas',
-					name: 'pointer_move',
-					...getPointerInfo(singleEvent),
-				})
-			}
-		}
-
-		document.body.addEventListener('pointermove', onPointerMove)
-		return () => {
-			document.body.removeEventListener('pointermove', onPointerMove)
-		}
-	}, [editor, currentTool])
-
 	return events
 }

package/src/lib/hooks/useEditor.tsx

@@ -21,14 +21,13 @@ export function useMaybeEditor(): Editor | null {
 	return React.useContext(EditorContext)
 }
 
-/** @public */
-export interface EditorProviderProps {
+export function EditorProvider({
+	editor,
+	children,
+}: {
 	editor: Editor
 	children: React.ReactNode
-}
-
-/** @public @react */
-export function EditorProvider({ editor, children }: EditorProviderProps) {
+}) {
 	return (
 		<EditorContext.Provider value={editor}>
 			<IdProvider>{children}</IdProvider>

package/src/lib/hooks/useEditorComponents.tsx

@@ -1,4 +1,4 @@
-import { ComponentType, ReactNode, RefAttributes, createContext, useContext, useMemo } from 'react'
+import { ComponentType, ReactNode, createContext, useContext, useMemo } from 'react'
 import { DefaultBackground } from '../components/default-components/DefaultBackground'
 import { DefaultBrush, TLBrushProps } from '../components/default-components/DefaultBrush'
 import {
@@ -37,10 +37,6 @@ import {
 	TLShapeIndicatorErrorFallbackComponent,
 } from '../components/default-components/DefaultShapeIndicatorErrorFallback'
 import { DefaultShapeIndicators } from '../components/default-components/DefaultShapeIndicators'
-import {
-	DefaultShapeWrapper,
-	TLShapeWrapperProps,
-} from '../components/default-components/DefaultShapeWrapper'
 import {
 	DefaultSnapIndicator,
 	TLSnapIndicatorProps,
@@ -72,9 +68,8 @@ export interface TLEditorComponents {
 	SelectionForeground?: ComponentType<TLSelectionForegroundProps> | null
 	ShapeIndicator?: ComponentType<TLShapeIndicatorProps> | null
 	ShapeIndicators?: ComponentType | null
-	ShapeWrapper?: ComponentType<TLShapeWrapperProps & RefAttributes<HTMLDivElement>> | null
 	SnapIndicator?: ComponentType<TLSnapIndicatorProps> | null
-	Spinner?: ComponentType<React.SVGProps<SVGSVGElement>> | null
+	Spinner?: ComponentType | null
 	SvgDefs?: ComponentType | null
 	ZoomBrush?: ComponentType<TLBrushProps> | null
 
@@ -119,7 +114,6 @@ export function EditorComponentsProvider({
 			SelectionForeground: DefaultSelectionForeground,
 			ShapeIndicator: DefaultShapeIndicator,
 			ShapeIndicators: DefaultShapeIndicators,
-			ShapeWrapper: DefaultShapeWrapper,
 			SnapIndicator: DefaultSnapIndicator,
 			Spinner: DefaultSpinner,
 			SvgDefs: DefaultSvgDefs,

package/src/lib/license/LicenseManager.test.ts

@@ -1,5 +1,4 @@
 import crypto from 'crypto'
-import { vi } from 'vitest'
 import { publishDates } from '../../version'
 import { str2ab } from '../utils/licensing'
 import {
@@ -10,9 +9,8 @@ import {
 	ValidLicenseKeyResult,
 } from './LicenseManager'
 
-vi.mock('../../version', () => {
+jest.mock('../../version', () => {
 	return {
-		version: '3.15.1',
 		publishDates: {
 			major: '2024-06-28T10:56:07.893Z',
 			minor: '2024-07-02T16:49:50.397Z',

package/src/lib/license/Watermark.test.tsx

@@ -1,11 +1,10 @@
 import { act, render, waitFor } from '@testing-library/react'
-import { vi } from 'vitest'
 import { TldrawEditor } from '../TldrawEditor'
 import { LicenseManager } from './LicenseManager'
 
 let mockLicenseState = 'unlicensed'
 
-vi.mock('./useLicenseManagerState', () => ({
+jest.mock('./useLicenseManagerState', () => ({
 	useLicenseManagerState: () => mockLicenseState,
 }))
 

package/src/lib/license/Watermark.tsx

@@ -86,15 +86,15 @@ To remove the watermark, please purchase a license at tldraw.dev.
 
 	.${className} {
 		position: absolute;
-		bottom: var(--tl-space-2);
-		right: var(--tl-space-2);
+		bottom: var(--space-2);
+		right: var(--space-2);
 		width: 96px;
 		height: 32px;
 		display: flex;
 		align-items: center;
 		justify-content: center;
-		z-index: var(--tl-layer-watermark) !important;
-		background-color: color-mix(in srgb, var(--tl-color-background) 62%, transparent);
+		z-index: var(--layer-watermark) !important;
+		background-color: color-mix(in srgb, var(--color-background) 62%, transparent);
 		opacity: 1;
 		border-radius: 5px;
 		pointer-events: all;
@@ -108,7 +108,7 @@ To remove the watermark, please purchase a license at tldraw.dev.
 		height: 32px;
 		pointer-events: all;
 		cursor: inherit;
-		color: var(--tl-color-text);
+		color: var(--color-text);
 		opacity: .38;
 		border: 0;
 		padding: 0;
@@ -137,13 +137,13 @@ To remove the watermark, please purchase a license at tldraw.dev.
 		}
 
 		.${className}:hover {
-			background-color: var(--tl-color-background);
+			background-color: var(--color-background);
 			transition: background-color 0.2s ease-in-out;
 			transition-delay: 0.32s;
 		}
 
 		.${className}:hover > button {
-			animation: ${className}_delayed_link 0.2s forwards ease-in-out;
+			animation: delayed_link 0.2s forwards ease-in-out;
 			animation-delay: 0.32s;
 		}
 
@@ -153,7 +153,7 @@ To remove the watermark, please purchase a license at tldraw.dev.
 	}
 
 
-	@keyframes ${className}_delayed_link {
+	@keyframes delayed_link {
 		0% {
 			cursor: inherit;
 			opacity: .38;

package/src/lib/options.ts

@@ -27,8 +27,6 @@ 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 {
@@ -55,7 +53,6 @@ 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.
@@ -100,10 +97,6 @@ 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: [
@@ -131,7 +124,6 @@ export const defaultTldrawOptions = {
 	flattenImageBoundsPadding: 16,
 	laserDelayMs: 1200,
 	maxExportDelayMs: 5000,
-	tooltipDelayMs: 700,
 	temporaryAssetPreviewLifetimeMs: 180000,
 	actionShortcutsLocation: 'swap',
 	createTextOnCanvasDoubleClick: true,

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 { getVerticesCountForArcLength } from './geometry-constants'
+import { getVerticesCountForLength } 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 = getVerticesCountForArcLength(Math.abs(length)); i < n + 1; i++) {
+		for (let i = 0, n = getVerticesCountForLength(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 { getVerticesCountForArcLength } from './geometry-constants'
+import { getVerticesCountForLength } 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 = getVerticesCountForArcLength(perimeter); i < n; i++) {
+		for (let i = 0, n = getVerticesCountForLength(perimeter); i < n; i++) {
 			const angle = (i / n) * PI2
 			vertices.push(getPointOnCircle(_center, radius, angle))
 		}

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

@@ -8,7 +8,6 @@ export class CubicBezier2d extends Polyline2d {
 	private _b: Vec
 	private _c: Vec
 	private _d: Vec
-	private _resolution: number
 
 	constructor(
 		config: Omit<Geometry2dOptions, 'isFilled' | 'isClosed'> & {
@@ -16,7 +15,6 @@ export class CubicBezier2d extends Polyline2d {
 			cp1: Vec
 			cp2: Vec
 			end: Vec
-			resolution?: number
 		}
 	) {
 		const { start: a, cp1: b, cp2: c, end: d } = config
@@ -26,14 +24,13 @@ 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 = this._resolution; i <= n; i++) {
+		for (let i = 0, n = 10; 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 { getVerticesCountForArcLength } from './geometry-constants'
+import { getVerticesCountForLength } 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 = getVerticesCountForArcLength(p)
+		const len = getVerticesCountForLength(p)
 		// Size of step
 		const step = PI2 / len
 

package/src/lib/primitives/geometry/geometry-constants.ts

@@ -1,7 +1,6 @@
 const SPACING = 20
 const MIN_COUNT = 8
 
-/** @internal */
-export function getVerticesCountForArcLength(length: number, spacing = SPACING) {
+export function getVerticesCountForLength(length: number, spacing = SPACING) {
 	return Math.max(MIN_COUNT, Math.ceil(length / spacing))
 }

package/src/lib/primitives/intersect.ts

@@ -1,5 +1,5 @@
 import { Box } from './Box'
-import { approximately, approximatelyLte, pointInPolygon } from './utils'
+import { pointInPolygon } from './utils'
 import { Vec, VecLike } from './Vec'
 
 // need even more intersections? See https://gist.github.com/steveruizok/35c02d526c707003a5c79761bfb89a52
@@ -17,8 +17,7 @@ export function intersectLineSegmentLineSegment(
 	a1: VecLike,
 	a2: VecLike,
 	b1: VecLike,
-	b2: VecLike,
-	precision = 1e-10
+	b2: VecLike
 ) {
 	const ABx = a1.x - b1.x
 	const ABy = a1.y - b1.y
@@ -30,19 +29,14 @@ export function intersectLineSegmentLineSegment(
 	const ub_t = AVx * ABy - AVy * ABx
 	const u_b = BVy * AVx - BVx * AVy
 
-	if (approximately(ua_t, 0, precision) || approximately(ub_t, 0, precision)) return null // coincident
+	if (ua_t === 0 || ub_t === 0) return null // coincident
 
-	if (approximately(u_b, 0, precision)) return null // parallel
+	if (u_b === 0) return null // parallel
 
 	if (u_b !== 0) {
 		const ua = ua_t / u_b
 		const ub = ub_t / u_b
-		if (
-			approximatelyLte(0, ua, precision) &&
-			approximatelyLte(ua, 1, precision) &&
-			approximatelyLte(0, ub, precision) &&
-			approximatelyLte(ub, 1, precision)
-		) {
+		if (0 <= ua && ua <= 1 && 0 <= ub && ub <= 1) {
 			return Vec.AddXY(a1, ua * AVx, ua * AVy)
 		}
 	}
@@ -131,7 +125,6 @@ export function intersectLineSegmentPolygon(a1: VecLike, a2: VecLike, points: Ve
 			points[i - 1],
 			points[i % points.length]
 		)
-
 		if (segmentIntersection) result.push(segmentIntersection)
 	}
 

package/src/lib/primitives/utils.ts

@@ -77,17 +77,6 @@ export function approximately(a: number, b: number, precision = 0.000001) {
 	return Math.abs(a - b) <= precision
 }
 
-/**
- * Whether a number is approximately less than or equal to another number.
- *
- * @param a - The first number.
- * @param b - The second number.
- * @public
- */
-export function approximatelyLte(a: number, b: number, precision = 0.000001) {
-	return a < b || approximately(a, b, precision)
-}
-
 /**
  * Find the approximate perimeter of an ellipse.
  *

package/src/lib/test/currentToolIdMask.test.ts

@@ -0,0 +1,49 @@
+import { describe } from 'node:test'
+import { createTLStore } from '../config/createTLStore'
+import { Editor } from '../editor/Editor'
+import { StateNode } from '../editor/tools/StateNode'
+
+let editor: Editor
+
+class A extends StateNode {
+	static override id = 'A'
+}
+
+class B extends StateNode {
+	static override id = 'B'
+}
+
+class C extends StateNode {
+	static override id = 'C'
+
+	override onEnter() {
+		this.setCurrentToolIdMask('A')
+	}
+}
+
+beforeEach(() => {
+	editor = new Editor({
+		initialState: 'A',
+		shapeUtils: [],
+		bindingUtils: [],
+		tools: [A, B, C],
+		store: createTLStore({ shapeUtils: [], bindingUtils: [] }),
+		getContainer: () => document.body,
+	})
+})
+
+describe('current tool id mask', () => {
+	it('starts with the correct tool id', () => {
+		expect(editor.getCurrentToolId()).toBe('A')
+	})
+
+	it('updates the current tool id', () => {
+		editor.setCurrentTool('B')
+		expect(editor.getCurrentToolId()).toBe('B')
+	})
+
+	it('masks the current tool id', () => {
+		editor.setCurrentTool('C')
+		expect(editor.getCurrentToolId()).toBe('A')
+	})
+})

package/src/lib/utils/sync/LocalIndexedDb.test.ts

@@ -1,13 +1,12 @@
 import { createTLSchema } from '@tldraw/tlschema'
 import { openDB } from 'idb'
-import { vi } from 'vitest'
 import { hardReset } from './hardReset'
 import { getAllIndexDbNames, LocalIndexedDb } from './LocalIndexedDb'
 
 const schema = createTLSchema({ shapes: {}, bindings: {} })
 describe('LocalIndexedDb', () => {
 	beforeEach(() => {
-		vi.useRealTimers()
+		jest.useRealTimers()
 	})
 	afterEach(async () => {
 		await hardReset({ shouldReload: false })