@tldraw/editor 3.13.0-canary.3ac739625a6f → 3.13.0-canary.409fd05a1a56

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,
@@ -51,29 +48,30 @@ import { useShallowObjectIdentity } from './useIdentity'
 /** @public */
 export interface TLEditorComponents {
 	Background?: ComponentType | null
-	SvgDefs?: ComponentType | null
 	Brush?: ComponentType<TLBrushProps> | null
-	ZoomBrush?: ComponentType<TLBrushProps> | null
-	ShapeIndicators?: ComponentType | null
-	ShapeIndicator?: ComponentType<TLShapeIndicatorProps> | null
-	Cursor?: ComponentType<TLCursorProps> | null
 	Canvas?: ComponentType<TLCanvasComponentProps> | null
 	CollaboratorBrush?: ComponentType<TLBrushProps> | null
 	CollaboratorCursor?: ComponentType<TLCursorProps> | null
 	CollaboratorHint?: ComponentType<TLCollaboratorHintProps> | null
+	CollaboratorScribble?: ComponentType<TLScribbleProps> | null
 	CollaboratorShapeIndicator?: ComponentType<TLShapeIndicatorProps> | null
+	Cursor?: ComponentType<TLCursorProps> | null
 	Grid?: ComponentType<TLGridProps> | null
-	Scribble?: ComponentType<TLScribbleProps> | null
-	CollaboratorScribble?: ComponentType<TLScribbleProps> | null
-	SnapIndicator?: ComponentType<TLSnapIndicatorProps> | null
-	Handles?: ComponentType<TLHandlesProps> | null
 	Handle?: ComponentType<TLHandleProps> | null
-	Spinner?: ComponentType | null
-	SelectionForeground?: ComponentType<TLSelectionForegroundProps> | null
-	SelectionBackground?: ComponentType<TLSelectionBackgroundProps> | null
-	OnTheCanvas?: ComponentType | null
+	Handles?: ComponentType<TLHandlesProps> | null
 	InFrontOfTheCanvas?: ComponentType | null
 	LoadingScreen?: ComponentType | null
+	OnTheCanvas?: ComponentType | null
+	Overlays?: ComponentType | null
+	Scribble?: ComponentType<TLScribbleProps> | null
+	SelectionBackground?: ComponentType<TLSelectionBackgroundProps> | null
+	SelectionForeground?: ComponentType<TLSelectionForegroundProps> | null
+	ShapeIndicator?: ComponentType<TLShapeIndicatorProps> | null
+	ShapeIndicators?: ComponentType | null
+	SnapIndicator?: ComponentType<TLSnapIndicatorProps> | null
+	Spinner?: ComponentType | null
+	SvgDefs?: ComponentType | null
+	ZoomBrush?: ComponentType<TLBrushProps> | null
 
 	// These will always have defaults
 	ErrorFallback?: TLErrorFallbackComponent
@@ -96,32 +94,35 @@ export function EditorComponentsProvider({
 	const value = useMemo(
 		(): Required<TLEditorComponents> => ({
 			Background: DefaultBackground,
-			SvgDefs: DefaultSvgDefs,
 			Brush: DefaultBrush,
-			ZoomBrush: DefaultBrush,
+			Canvas: DefaultCanvas,
 			CollaboratorBrush: DefaultBrush,
-			Cursor: DefaultCursor,
 			CollaboratorCursor: DefaultCursor,
 			CollaboratorHint: DefaultCollaboratorHint,
+			CollaboratorScribble: DefaultScribble,
 			CollaboratorShapeIndicator: DefaultShapeIndicator,
+			Cursor: DefaultCursor,
 			Grid: DefaultGrid,
+			Handle: DefaultHandle,
+			Handles: DefaultHandles,
+			InFrontOfTheCanvas: null,
+			LoadingScreen: DefaultLoadingScreen,
+			OnTheCanvas: null,
+			Overlays: null,
 			Scribble: DefaultScribble,
+			SelectionBackground: null,
+			SelectionForeground: DefaultSelectionForeground,
+			ShapeIndicator: DefaultShapeIndicator,
+			ShapeIndicators: DefaultShapeIndicators,
 			SnapIndicator: DefaultSnapIndicator,
-			Handles: DefaultHandles,
-			Handle: DefaultHandle,
-			CollaboratorScribble: DefaultScribble,
+			Spinner: DefaultSpinner,
+			SvgDefs: DefaultSvgDefs,
+			ZoomBrush: DefaultBrush,
+
 			ErrorFallback: DefaultErrorFallback,
 			ShapeErrorFallback: DefaultShapeErrorFallback,
 			ShapeIndicatorErrorFallback: DefaultShapeIndicatorErrorFallback,
-			Spinner: DefaultSpinner,
-			SelectionBackground: DefaultSelectionBackground,
-			SelectionForeground: DefaultSelectionForeground,
-			ShapeIndicators: DefaultShapeIndicators,
-			ShapeIndicator: DefaultShapeIndicator,
-			OnTheCanvas: null,
-			InFrontOfTheCanvas: null,
-			Canvas: DefaultCanvas,
-			LoadingScreen: DefaultLoadingScreen,
+
 			..._overrides,
 		}),
 		[_overrides]

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

@@ -317,6 +317,46 @@ describe('LicenseManager', () => {
 		expect(result.isDomainValid).toBe(false)
 	})
 
+	it('Succeeds if it is a vscode extension', async () => {
+		// @ts-ignore
+		delete window.location
+		// @ts-ignore
+		window.location = new URL(
+			'vscode-webview:vscode-webview://1ipd8pun8ud7nd7hv9d112g7evi7m10vak9vviuvia66ou6aibp3/index.html?id=6ec2dc7a-afe9-45d9-bd71-1749f9568d28&origin=955b256f-37e1-4a72-a2f4-ad633e88239c&swVersion=4&extensionId=tldraw-org.tldraw-vscode&platform=electron&vscode-resource-base-authority=vscode-resource.vscode-cdn.net&parentOrigin=vscode-file%3A%2F%2Fvscode-app'
+		)
+
+		const permissiveHostsInfo = JSON.parse(STANDARD_LICENSE_INFO)
+		permissiveHostsInfo[PROPERTIES.HOSTS] = ['tldraw-org.tldraw-vscode']
+		const permissiveLicenseKey = await generateLicenseKey(
+			JSON.stringify(permissiveHostsInfo),
+			keyPair
+		)
+		const result = (await licenseManager.getLicenseFromKey(
+			permissiveLicenseKey
+		)) as ValidLicenseKeyResult
+		expect(result.isDomainValid).toBe(true)
+	})
+
+	it('Fails if it is a vscode extension with the wrong id', async () => {
+		// @ts-ignore
+		delete window.location
+		// @ts-ignore
+		window.location = new URL(
+			'vscode-webview:vscode-webview://1ipd8pun8ud7nd7hv9d112g7evi7m10vak9vviuvia66ou6aibp3/index.html?id=6ec2dc7a-afe9-45d9-bd71-1749f9568d28&origin=955b256f-37e1-4a72-a2f4-ad633e88239c&swVersion=4&extensionId=tldraw-org.tldraw-vscode&platform=electron&vscode-resource-base-authority=vscode-resource.vscode-cdn.net&parentOrigin=vscode-file%3A%2F%2Fvscode-app'
+		)
+
+		const permissiveHostsInfo = JSON.parse(STANDARD_LICENSE_INFO)
+		permissiveHostsInfo[PROPERTIES.HOSTS] = ['blah-org.blah-vscode']
+		const permissiveLicenseKey = await generateLicenseKey(
+			JSON.stringify(permissiveHostsInfo),
+			keyPair
+		)
+		const result = (await licenseManager.getLicenseFromKey(
+			permissiveLicenseKey
+		)) as ValidLicenseKeyResult
+		expect(result.isDomainValid).toBe(false)
+	})
+
 	it('Checks for internal license', async () => {
 		const internalLicenseInfo = JSON.parse(STANDARD_LICENSE_INFO)
 		internalLicenseInfo[PROPERTIES.FLAGS] = FLAGS.INTERNAL_LICENSE

package/src/lib/license/LicenseManager.ts

@@ -111,7 +111,10 @@ export class LicenseManager {
 		if (testEnvironment === 'production') return false
 
 		// If we are using https on a non-localhost domain we assume it's a production env and a development one otherwise
-		return window.location.protocol !== 'https:' || window.location.hostname === 'localhost'
+		return (
+			!['https:', 'vscode-webview:'].includes(window.location.protocol) ||
+			window.location.hostname === 'localhost'
+		)
 	}
 
 	private async extractLicenseKey(licenseKey: string): Promise<LicenseInfo> {
@@ -250,6 +253,15 @@ export class LicenseManager {
 				return globToRegex.test(currentHostname) || globToRegex.test(`www.${currentHostname}`)
 			}
 
+			// VSCode support
+			if (window.location.protocol === 'vscode-webview:') {
+				const currentUrl = new URL(window.location.href)
+				const extensionId = currentUrl.searchParams.get('extensionId')
+				if (normalizedHost === extensionId) {
+					return true
+				}
+			}
+
 			return false
 		})
 	}

package/src/lib/options.ts

@@ -80,6 +80,10 @@ export interface TldrawOptions {
 	 * nonce to use in the editor's styles.
 	 */
 	readonly nonce: string | undefined
+	/**
+	 * Branding name of the app, currently only used for adding aria-label for the application.
+	 */
+	readonly branding?: string
 }
 
 /** @public */

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

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

@@ -0,0 +1,42 @@
+import { Mat } from '../Mat'
+import { Vec, VecLike } from '../Vec'
+import { Geometry2dFilters } from './Geometry2d'
+import { Rectangle2d } from './Rectangle2d'
+
+describe('TransformedGeometry2d', () => {
+	const rect = new Rectangle2d({ width: 100, height: 50, isFilled: true }).transform(
+		Mat.Translate(50, 100).scale(2, 2)
+	)
+
+	test('getVertices', () => {
+		expect(rect.getVertices(Geometry2dFilters.INCLUDE_ALL)).toMatchObject([
+			{ x: 50, y: 100, z: 1 },
+			{ x: 250, y: 100, z: 1 },
+			{ x: 250, y: 200, z: 1 },
+			{ x: 50, y: 200, z: 1 },
+		])
+	})
+
+	test('nearestPoint', () => {
+		expectApproxMatch(rect.nearestPoint(new Vec(100, 300)), { x: 100, y: 200 })
+	})
+
+	test('hitTestPoint', () => {
+		// basic case - no margin / scaling:
+		expect(rect.hitTestPoint(new Vec(0, 0), 0, true)).toBe(false)
+		expect(rect.hitTestPoint(new Vec(50, 100), 0, true)).toBe(true)
+		expect(rect.hitTestPoint(new Vec(49, 100), 0, true)).toBe(false)
+		expect(rect.hitTestPoint(new Vec(100, 150), 0, true)).toBe(true)
+
+		// with margin:
+		// move away 8 px and test with 10px margin:
+		expect(rect.hitTestPoint(new Vec(42, 100), 10, true)).toBe(true)
+		// move away 12 px and test with 10px margin:
+		expect(rect.hitTestPoint(new Vec(38, 100), 10, true)).toBe(false)
+	})
+})
+
+function expectApproxMatch(a: VecLike, b: VecLike) {
+	expect(a.x).toBeCloseTo(b.x, 0.0001)
+	expect(a.y).toBeCloseTo(b.y, 0.0001)
+}