@tldraw/editor 3.9.0-internal.7f0e15f4f7d9 → 3.10.0-canary.075415a2bbc8

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

@@ -1,4 +1,5 @@
-import { atom, Atom, EMPTY_ARRAY, transact } from '@tldraw/state'
+import { computed, EMPTY_ARRAY, transact } from '@tldraw/state'
+import { AtomMap } from '@tldraw/store'
 import { TLShape, TLShapeId } from '@tldraw/tlschema'
 import {
 	areArraysShallowEqual,
@@ -96,13 +97,18 @@ export class FontManager {
 			{ areResultsEqual: areArraysShallowEqual }
 		)
 
-		this.shapeFontLoadStateCache = editor.store.createComputedCache(
-			'shape font load state',
-			(shape: TLShape) => {
-				const states = this.getShapeFontFaces(shape).map((face) => this.getFontState(face))
-				return states
-			},
-			{ areResultsEqual: areArraysShallowEqual }
+		this.shapeFontLoadStateCache = editor.store.createCache<(FontState | null)[], TLShape>(
+			(id: TLShapeId) => {
+				const fontFacesComputed = computed('font faces', () => this.getShapeFontFaces(id))
+				return computed(
+					'font load state',
+					() => {
+						const states = fontFacesComputed.get().map((face) => this.getFontState(face))
+						return states
+					},
+					{ isEqual: areArraysShallowEqual }
+				)
+			}
 		)
 	}
 
@@ -135,40 +141,33 @@ export class FontManager {
 		await Promise.all(promises)
 	}
 
-	private readonly fontStates = atom<ReadonlyMap<TLFontFace, Atom<FontState>>>(
-		'font states',
-		new Map()
-	)
+	private readonly fontStates = new AtomMap<TLFontFace, FontState>('font states')
 	private getFontState(font: TLFontFace): FontState | null {
-		return this.fontStates.get().get(font)?.get() ?? null
+		return this.fontStates.get(font) ?? null
 	}
 
 	ensureFontIsLoaded(font: TLFontFace): Promise<void> {
-		const state = this.getFontState(font)
-		if (state) return state.loadingPromise
+		const existingState = this.getFontState(font)
+		if (existingState) return existingState.loadingPromise
 
 		const instance = this.findOrCreateFontFace(font)
-		const stateAtom = atom<FontState>('font state', {
+		const state: FontState = {
 			state: 'loading',
 			instance,
 			loadingPromise: instance
 				.load()
 				.then(() => {
 					document.fonts.add(instance)
-					stateAtom.update((s) => ({ ...s, state: 'ready' }))
+					this.fontStates.update(font, (s) => ({ ...s, state: 'ready' }))
 				})
 				.catch((err) => {
 					console.error(err)
-					stateAtom.update((s) => ({ ...s, state: 'error' }))
+					this.fontStates.update(font, (s) => ({ ...s, state: 'error' }))
 				}),
-		})
-		this.fontStates.update((map) => {
-			const newMap = new Map(map)
-			newMap.set(font, stateAtom)
-			return newMap
-		})
+		}
 
-		return stateAtom.get().loadingPromise
+		this.fontStates.set(font, state)
+		return state.loadingPromise
 	}
 
 	private fontsToLoad = new Set<TLFontFace>()
@@ -224,8 +223,7 @@ export class FontManager {
 		]).join(' ')
 		return compact([
 			`@font-face {`,
-			`  font-family: ${font.family};`,
-			`  src: ${src};`,
+			`  font-family: "${font.family}";`,
 			font.ascentOverride ? `  ascent-override: ${font.ascentOverride};` : null,
 			font.descentOverride ? `  descent-override: ${font.descentOverride};` : null,
 			font.stretch ? `  font-stretch: ${font.stretch};` : null,
@@ -234,6 +232,7 @@ export class FontManager {
 			font.featureSettings ? `  font-feature-settings: ${font.featureSettings};` : null,
 			font.lineGapOverride ? `  line-gap-override: ${font.lineGapOverride};` : null,
 			font.unicodeRange ? `  unicode-range: ${font.unicodeRange};` : null,
+			`  src: ${src};`,
 			`}`,
 		]).join('\n')
 	}

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

@@ -38,7 +38,7 @@ export interface TLShapeUtilConstructor<
  *
  * @public
  */
-export interface TLShapeUtilCanBindOpts<Shape extends TLUnknownShape = TLShape> {
+export interface TLShapeUtilCanBindOpts<Shape extends TLUnknownShape = TLUnknownShape> {
 	/** The type of shape referenced by the `fromId` of the binding. */
 	fromShapeType: string
 	/** The type of shape referenced by the `toId` of the binding. */
@@ -47,6 +47,27 @@ export interface TLShapeUtilCanBindOpts<Shape extends TLUnknownShape = TLShape>
 	bindingType: string
 }
 
+/**
+ * Options passed to {@link ShapeUtil.canBeLaidOut}.
+ *
+ * @public
+ */
+export interface TLShapeUtilCanBeLaidOutOpts {
+	/** The type of action causing the layout. */
+	type?: 'align' | 'distribute' | 'pack' | 'stack' | 'flip' | 'stretch'
+	/** The other shapes being laid out */
+	shapes?: TLShape[]
+}
+
+/** Additional options for the {@link ShapeUtil.getGeometry} method.
+ *
+ * @public
+ */
+export interface TLGeometryOpts {
+	/** The context in which the geometry is being requested. */
+	context?: string
+}
+
 /** @public */
 export interface TLShapeUtilCanvasSvgDef {
 	key: string
@@ -130,9 +151,10 @@ export abstract class ShapeUtil<Shape extends TLUnknownShape = TLUnknownShape> {
 	 * Get the shape's geometry.
 	 *
 	 * @param shape - The shape.
+	 * @param opts - Additional options for the request.
 	 * @public
 	 */
-	abstract getGeometry(shape: Shape): Geometry2d
+	abstract getGeometry(shape: Shape, opts?: TLGeometryOpts): Geometry2d
 
 	/**
 	 * Get a JSX element for the shape (as an HTML element).
@@ -164,6 +186,7 @@ export abstract class ShapeUtil<Shape extends TLUnknownShape = TLUnknownShape> {
 	/**
 	 * Whether the shape can be snapped to by another shape.
 	 *
+	 * @param shape - The shape.
 	 * @public
 	 */
 	canSnap(_shape: Shape): boolean {
@@ -184,7 +207,7 @@ export abstract class ShapeUtil<Shape extends TLUnknownShape = TLUnknownShape> {
 	 *
 	 * @public
 	 */
-	canBind(_opts: TLShapeUtilCanBindOpts<Shape>): boolean {
+	canBind(_opts: TLShapeUtilCanBindOpts): boolean {
 		return true
 	}
 
@@ -225,11 +248,15 @@ export abstract class ShapeUtil<Shape extends TLUnknownShape = TLUnknownShape> {
 	}
 
 	/**
-	 * Whether the shape participates in stacking, aligning, and distributing.
+	 * Whether the shape can participate in layout functions such as alignment or distribution.
+	 *
+	 * @param shape - The shape.
+	 * @param info - Additional context information: the type of action causing the layout and the
+	 * @public
 	 *
 	 * @public
 	 */
-	canBeLaidOut(_shape: Shape): boolean {
+	canBeLaidOut(_shape: Shape, _info: TLShapeUtilCanBeLaidOutOpts): boolean {
 		return true
 	}
 

package/src/lib/exports/StyleEmbedder.ts

@@ -242,7 +242,7 @@ function styleFromComputedStyle(
 	{ defaultStyles, parentStyles }: ReadStyleOpts
 ) {
 	const styles: Record<string, string> = {}
-	for (const [property, _] of Object.entries(style)) {
+	for (const property in style) {
 		if (!shouldIncludeCssProperty(property)) continue
 
 		const value = style.getPropertyValue(property)

package/src/lib/exports/getSvgJsx.tsx

@@ -206,6 +206,7 @@ function SvgExport({
 		;(async () => {
 			const shapeDefs: Record<string, { pending: false; element: ReactElement }> = {}
 
+			// Then render everything. The shapes with assets should all hit the cache
 			const unorderedShapeElementPromises = renderingShapes.map(
 				async ({ id, opacity, index, backgroundIndex }) => {
 					// Don't render the frame if we're only exporting a single frame and it's children

package/src/lib/hooks/usePeerIds.ts

@@ -5,7 +5,7 @@ import { useEditor } from './useEditor'
 // TODO: maybe move this to a computed property on the App class?
 /**
  * @returns The list of peer UserIDs
- * @internal
+ * @public
  */
 export function usePeerIds() {
 	const editor = useEditor()

package/src/lib/hooks/usePresence.ts

@@ -4,8 +4,8 @@ import { useEditor } from './useEditor'
 
 // TODO: maybe move this to a computed property on the App class?
 /**
- * @returns The list of peer UserIDs
- * @internal
+ * @returns The latest presence of the user matching userId
+ * @public
  */
 export function usePresence(userId: string): TLInstancePresence | null {
 	const editor = useEditor()

package/src/lib/license/Watermark.tsx

@@ -46,7 +46,7 @@ const WatermarkInner = memo(function WatermarkInner({ src }: { src: string }) {
 	usePassThroughWheelEvents(ref)
 
 	const maskCss = `url('${src}') center 100% / 100% no-repeat`
-	const url = 'https://tldraw.dev'
+	const url = 'https://tldraw.dev/?utm_source=dotcom&utm_medium=organic&utm_campaign=watermark'
 
 	return (
 		<div

package/src/lib/utils/browserCanvasMaxSize.ts

@@ -19,9 +19,11 @@ function getBrowserCanvasMaxSize(): CanvasMaxSize {
 	return maxCanvasSizes
 }
 
-// Extracted from https://github.com/jhildenbiddle/canvas-size
-// MIT License: https://github.com/jhildenbiddle/canvas-size/blob/master/LICENSE
-// Copyright (c) John Hildenbiddle
+/*!
+ * Extracted from https://github.com/jhildenbiddle/canvas-size
+ * MIT License: https://github.com/jhildenbiddle/canvas-size/blob/master/LICENSE
+ * Copyright (c) John Hildenbiddle
+ */
 
 const MAX_SAFE_CANVAS_DIMENSION = 8192
 const MAX_SAFE_CANVAS_AREA = 4096 * 4096

package/src/version.ts

@@ -1,9 +1,9 @@
 // This file is automatically generated by internal/scripts/refresh-assets.ts.
 // Do not edit manually. Or do, I'm a comment, not a cop.
 
-export const version = '3.9.0-internal.7f0e15f4f7d9'
+export const version = '3.10.0-canary.075415a2bbc8'
 export const publishDates = {
 	major: '2024-09-13T14:36:29.063Z',
-	minor: '2025-02-25T14:10:40.799Z',
-	patch: '2025-02-25T14:10:40.799Z',
+	minor: '2025-03-10T22:20:43.042Z',
+	patch: '2025-03-10T22:20:43.042Z',
 }