@tldraw/editor 3.13.0-canary.d403fcffd1eb → 3.13.0-canary.d6fe56e14603

package/src/lib/editor/Editor.ts

@@ -42,6 +42,7 @@ import {
 	TLImageAsset,
 	TLInstance,
 	TLInstancePageState,
+	TLInstancePresence,
 	TLNoteShape,
 	TLPOINTER_ID,
 	TLPage,
@@ -128,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 {
@@ -1704,8 +1706,7 @@ export class Editor extends EventEmitter<TLEventMap> {
 	 * @readonly
 	 */
 	@computed getSelectedShapes(): TLShape[] {
-		const { selectedShapeIds } = this.getCurrentPageState()
-		return compact(selectedShapeIds.map((id) => this.store.get(id)))
+		return compact(this.getSelectedShapeIds().map((id) => this.store.get(id)))
 	}
 
 	/**
@@ -2275,13 +2276,15 @@ 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 })
+							this.getShapeUtil(shape).onEditStart?.(shape)
 						},
 						{ history: 'ignore' }
 					)
@@ -2294,6 +2297,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' }
 			)
@@ -2575,14 +2584,25 @@ export class Editor extends EventEmitter<TLEventMap> {
 		return baseCamera
 	}
 
+	private _getFollowingPresence(targetUserId: string | null) {
+		const visited = [this.user.getId()]
+		const collaborators = this.getCollaborators()
+		let leaderPresence = null as null | TLInstancePresence
+		while (targetUserId && !visited.includes(targetUserId)) {
+			leaderPresence = collaborators.find((c) => c.userId === targetUserId) ?? null
+			targetUserId = leaderPresence?.followingUserId ?? null
+			if (leaderPresence) {
+				visited.push(leaderPresence.userId)
+			}
+		}
+		return leaderPresence
+	}
+
 	@computed
 	private getViewportPageBoundsForFollowing(): null | Box {
-		const followingUserId = this.getInstanceState().followingUserId
-		if (!followingUserId) return null
-		const leaderPresence = this.getCollaborators().find((c) => c.userId === followingUserId)
-		if (!leaderPresence) return null
+		const leaderPresence = this._getFollowingPresence(this.getInstanceState().followingUserId)
 
-		if (!leaderPresence.camera || !leaderPresence.screenBounds) return null
+		if (!leaderPresence?.camera || !leaderPresence?.screenBounds) return null
 
 		// Fit their viewport inside of our screen bounds
 		// 1. calculate their viewport in page space
@@ -3781,15 +3801,6 @@ export class Editor extends EventEmitter<TLEventMap> {
 		// if we were already following someone, stop following them
 		this.stopFollowingUser()
 
-		const leaderPresences = this._getCollaboratorsQuery()
-			.get()
-			.filter((p) => p.userId === userId)
-
-		if (!leaderPresences.length) {
-			console.warn('User not found')
-			return this
-		}
-
 		const thisUserId = this.user.getId()
 
 		if (!thisUserId) {
@@ -3797,13 +3808,14 @@ export class Editor extends EventEmitter<TLEventMap> {
 			// allow to continue since it's probably fine most of the time.
 		}
 
-		// If the leader is following us, then we can't follow them
-		if (leaderPresences.some((p) => p.followingUserId === thisUserId)) {
+		const leaderPresence = this._getFollowingPresence(userId)
+
+		if (!leaderPresence) {
 			return this
 		}
 
 		const latestLeaderPresence = computed('latestLeaderPresence', () => {
-			return this.getCollaborators().find((p) => p.userId === userId)
+			return this._getFollowingPresence(userId)
 		})
 
 		transact(() => {
@@ -4571,7 +4583,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(
@@ -4619,9 +4631,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,
+			}
+		)
 	}
 
 	/**
@@ -5842,9 +5860,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 }
+		)
 	}
 
 	/**
@@ -10211,7 +10235,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': {
@@ -10327,12 +10351,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

@@ -19,6 +19,7 @@ import { TLFontFace } from '../managers/FontManager'
 import { BoundsSnapGeometry } from '../managers/SnapManager/BoundsSnaps'
 import { HandleSnapGeometry } from '../managers/SnapManager/HandleSnaps'
 import { SvgExportContext } from '../types/SvgExportContext'
+import { TLClickEventInfo } from '../types/event-types'
 import { TLResizeHandle } from '../types/selection-types'
 
 /** @public */
@@ -671,10 +672,21 @@ export abstract class ShapeUtil<Shape extends TLUnknownShape = TLUnknownShape> {
 	 * A callback called when a shape's edge is double clicked.
 	 *
 	 * @param shape - The shape.
+	 * @param info - Info about the edge.
 	 * @returns A change to apply to the shape, or void.
 	 * @public
 	 */
-	onDoubleClickEdge?(shape: Shape): TLShapePartial<Shape> | void
+	onDoubleClickEdge?(shape: Shape, info: TLClickEventInfo): TLShapePartial<Shape> | void
+
+	/**
+	 * A callback called when a shape's corner is double clicked.
+	 *
+	 * @param shape - The shape.
+	 * @param info - Info about the corner.
+	 * @returns A change to apply to the shape, or void.
+	 * @public
+	 */
+	onDoubleClickCorner?(shape: Shape, info: TLClickEventInfo): TLShapePartial<Shape> | void
 
 	/**
 	 * A callback called when a shape is double clicked.
@@ -695,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/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/useDocumentEvents.ts

@@ -11,6 +11,7 @@ export function useDocumentEvents() {
 	const editor = useEditor()
 	const container = useContainer()
 
+	const isEditing = useValue('isEditing', () => editor.getEditingShapeId(), [editor])
 	const isAppFocused = useValue('isFocused', () => editor.getIsFocused(), [editor])
 
 	// Prevent the browser's default drag and drop behavior on our container (UI, etc)
@@ -125,7 +126,11 @@ export function useDocumentEvents() {
 					if (areShortcutsDisabled(editor)) {
 						return
 					}
-					if (hasSelectedShapes) {
+					// isEditing here sounds like it's about text editing
+					// but more specifically, this is so you can tab into an
+					// embed that's being 'edited'. In our world,
+					// editing an embed, means it's interactive.
+					if (hasSelectedShapes && !isEditing) {
 						// This is used in tandem with shape navigation.
 						preventDefault(e)
 					}
@@ -289,7 +294,7 @@ export function useDocumentEvents() {
 			container.removeEventListener('keydown', handleKeyDown)
 			container.removeEventListener('keyup', handleKeyUp)
 		}
-	}, [editor, container, isAppFocused])
+	}, [editor, container, isAppFocused, isEditing])
 }
 
 function areShortcutsDisabled(editor: Editor) {

package/src/lib/hooks/useEditorComponents.tsx

@@ -51,29 +51,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 +97,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: DefaultSelectionBackground,
+			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.