@tldraw/editor 4.6.0-next.0eb36d65eec3 → 4.6.0-next.1a05e8ec7833

package/src/lib/editor/assets/AssetUtil.ts

@@ -0,0 +1,85 @@
+import { LegacyMigrations, MigrationSequence } from '@tldraw/store'
+import {
+	RecordProps,
+	TLAsset,
+	TLAssetId,
+	TLPropsMigrations,
+	TLUnknownAsset,
+} from '@tldraw/tlschema'
+import type { Editor } from '../Editor'
+
+/** @public */
+export interface TLAssetUtilConstructor<
+	T extends TLAsset = TLAsset,
+	U extends AssetUtil<T> = AssetUtil<T>,
+> {
+	new (editor: Editor): U
+	type: T['type']
+	props?: RecordProps<T>
+	migrations?: LegacyMigrations | TLPropsMigrations | MigrationSequence
+}
+
+/**
+ * Abstract base class for defining asset-type-specific behavior.
+ *
+ * Each asset type (image, video, bookmark, etc.) has a corresponding AssetUtil that handles
+ * type-specific operations like determining supported MIME types and creating assets from files.
+ *
+ * @public
+ */
+export abstract class AssetUtil<Asset extends TLAsset = TLAsset> {
+	/** Configure this asset util's {@link AssetUtil.options | `options`}. */
+	static configure<T extends TLAssetUtilConstructor<any, any>>(
+		this: T,
+		options: T extends new (...args: any[]) => { options: infer Options } ? Partial<Options> : never
+	): T {
+		// @ts-expect-error -- typescript has no idea what's going on here but it's fine
+		return class extends this {
+			// @ts-expect-error
+			options = { ...this.options, ...options }
+		}
+	}
+
+	constructor(public editor: Editor) {}
+
+	/**
+	 * Options for this asset util. Override this to provide customization options for your asset.
+	 * Use {@link AssetUtil.configure} to customize existing asset utils.
+	 */
+	options = {}
+
+	static props?: RecordProps<TLUnknownAsset>
+	static migrations?: LegacyMigrations | TLPropsMigrations | MigrationSequence
+
+	/**
+	 * The type of the asset util, which should match the asset's type.
+	 */
+	static type: string
+
+	/**
+	 * Get the default props for an asset of this type.
+	 */
+	abstract getDefaultProps(): Asset['props']
+
+	/**
+	 * Get the MIME types that this asset type supports.
+	 * Return an empty array if this asset type doesn't support files (e.g. bookmarks).
+	 */
+	getSupportedMimeTypes(): readonly string[] {
+		return []
+	}
+
+	/**
+	 * Check whether this asset type accepts a given MIME type.
+	 */
+	acceptsMimeType(mimeType: string): boolean {
+		return this.getSupportedMimeTypes().includes(mimeType)
+	}
+
+	/**
+	 * Create an asset from a file. Return null if this asset type can't handle the file.
+	 */
+	async getAssetFromFile(_file: File, _assetId: TLAssetId): Promise<Asset | null> {
+		return null
+	}
+}

package/src/lib/editor/managers/FontManager/FontManager.test.ts

@@ -1,8 +1,15 @@
-import { TLParentId, TLShape, TLShapeId, createShapeId, toRichText } from '@tldraw/tlschema'
+import {
+	TLFontFace,
+	TLParentId,
+	TLShape,
+	TLShapeId,
+	createShapeId,
+	toRichText,
+} from '@tldraw/tlschema'
 import { IndexKey } from '@tldraw/utils'
 import { Mock, Mocked, vi } from 'vitest'
 import { Editor } from '../../Editor'
-import { FontManager, TLFontFace } from './FontManager'
+import { FontManager } from './FontManager'
 
 // Mock the Editor class
 vi.mock('../../Editor')

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

@@ -1,6 +1,6 @@
 import { computed, EMPTY_ARRAY, transact } from '@tldraw/state'
 import { AtomMap } from '@tldraw/store'
-import { TLShape, TLShapeId } from '@tldraw/tlschema'
+import { TLFontFace, TLShape, TLShapeId } from '@tldraw/tlschema'
 import {
 	areArraysShallowEqual,
 	compact,
@@ -10,72 +10,6 @@ import {
 } from '@tldraw/utils'
 import type { Editor } from '../../Editor'
 
-/**
- * Represents the `src` property of a {@link TLFontFace}.
- * See {@link https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/src | `src`} for details of the properties here.
- * @public
- */
-export interface TLFontFaceSource {
-	/**
-	 * A URL from which to load the font. If the value here is a key in
-	 * {@link tldraw#TLEditorAssetUrls.fonts}, the value from there will be used instead.
-	 */
-	url: string
-	format?: string
-	tech?: string
-}
-
-/**
- * A font face that can be used in the editor. The properties of this are largely the same as the
- * ones in the
- * {@link https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face | css `@font-face` rule}.
- * @public
- */
-export interface TLFontFace {
-	/**
-	 * How this font can be referred to in CSS.
-	 * See {@link https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-family | `font-family`}.
-	 */
-	readonly family: string
-	/**
-	 * The source of the font. This
-	 * See {@link https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/src | `src`}.
-	 */
-	readonly src: TLFontFaceSource
-	/**
-	 * See {@link https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/ascent-override | `ascent-override`}.
-	 */
-	readonly ascentOverride?: string
-	/**
-	 * See {@link https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/descent-override | `descent-override`}.
-	 */
-	readonly descentOverride?: string
-	/**
-	 * See {@link https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-stretch | `font-stretch`}.
-	 */
-	readonly stretch?: string
-	/**
-	 * See {@link https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-style | `font-style`}.
-	 */
-	readonly style?: string
-	/**
-	 * See {@link https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-weight | `font-weight`}.
-	 */
-	readonly weight?: string
-	/**
-	 * See {@link https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-feature-settings | `font-feature-settings`}.
-	 */
-	readonly featureSettings?: string
-	/**
-	 * See {@link https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/line-gap-override | `line-gap-override`}.
-	 */
-	readonly lineGapOverride?: string
-	/**
-	 * See {@link https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/unicode-range | `unicode-range`}.
-	 */
-	readonly unicodeRange?: string
-}
-
 interface FontState {
 	readonly state: 'loading' | 'ready' | 'error'
 	readonly instance: FontFace

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

@@ -331,6 +331,18 @@ export class InputsManager {
 		this._isPointing.set(isPointing)
 	}
 
+	private _isRightPointing = atom<boolean>('isRightPointing', false)
+	/**
+	 * Whether the user is right-click pointing (before drag threshold).
+	 */
+	getIsRightPointing() {
+		return this._isRightPointing.get()
+	}
+	/** @internal */
+	setIsRightPointing(isRightPointing: boolean) {
+		this._isRightPointing.set(isRightPointing)
+	}
+
 	private _isPinching = atom<boolean>('isPinching', false)
 	/**
 	 * Whether the user is pinching.

package/src/lib/editor/managers/PerformanceManager/PerformanceApiAdapter.ts

@@ -0,0 +1,82 @@
+import type { PerformanceManager } from './PerformanceManager'
+
+/** Wrap performance.mark with try/catch — `detail` option may throw in Safari/Firefox. */
+function safeMark(name: string, detail?: Record<string, unknown>) {
+	try {
+		performance.mark(name, detail ? { detail } : undefined)
+	} catch {
+		performance.mark(name)
+	}
+}
+
+/**
+ * Optional adapter that pipes PerformanceManager events into browser
+ * `performance.mark()` / `performance.measure()` for DevTools integration.
+ *
+ * Tree-shakeable — only included if imported.
+ *
+ * @example
+ * ```ts
+ * const adapter = new PerformanceApiAdapter(editor.performance)
+ * // ... later
+ * adapter.dispose()
+ * ```
+ *
+ * @public
+ */
+export class PerformanceApiAdapter {
+	private cleanups: (() => void)[] = []
+
+	constructor(perfManager: PerformanceManager) {
+		this.cleanups.push(
+			perfManager.on('interaction-start', (event) => {
+				safeMark(`tldraw:interaction:${event.name}:start`, { path: event.path })
+			})
+		)
+
+		this.cleanups.push(
+			perfManager.on('interaction-end', (event) => {
+				const startMark = `tldraw:interaction:${event.name}:start`
+				const endMark = `tldraw:interaction:${event.name}:end`
+				safeMark(endMark, {
+					path: event.path,
+					fps: event.fps,
+					frameCount: event.frameCount,
+					shapeCount: event.shapeCount,
+				})
+				try {
+					performance.measure(`tldraw:interaction:${event.name}`, startMark, endMark)
+				} catch {
+					// start mark may not exist if adapter attached mid-interaction
+				}
+			})
+		)
+
+		this.cleanups.push(
+			perfManager.on('camera-start', (event) => {
+				safeMark(`tldraw:camera:${event.type}:start`)
+			})
+		)
+
+		this.cleanups.push(
+			perfManager.on('camera-end', (event) => {
+				const startMark = `tldraw:camera:${event.type}:start`
+				const endMark = `tldraw:camera:${event.type}:end`
+				safeMark(endMark, { fps: event.fps, shapeCount: event.shapeCount })
+				try {
+					performance.measure(`tldraw:camera:${event.type}`, startMark, endMark)
+				} catch {
+					// start mark may not exist
+				}
+			})
+		)
+	}
+
+	/** Remove all listeners and stop piping events. @public */
+	dispose() {
+		for (const cleanup of this.cleanups) {
+			cleanup()
+		}
+		this.cleanups.length = 0
+	}
+}