@tldraw/editor 3.14.0-canary.a2263c31d532 → 3.14.0-canary.b477608fafb4

package/dist-esm/lib/utils/richText.mjs.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../src/lib/utils/richText.ts"],
-  "sourcesContent": ["import { getSchema, JSONContent, Editor as TTEditor } from '@tiptap/core'\nimport { Node } from '@tiptap/pm/model'\nimport { EditorProviderProps } from '@tiptap/react'\nimport { TLRichText } from '@tldraw/tlschema'\nimport { assert } from '@tldraw/utils'\nimport { Editor } from '../editor/Editor'\nimport { TLFontFace } from '../editor/managers/FontManager'\n\n/**\n * This is the TipTap editor! Docs are {@link https://tiptap.dev/docs}.\n *\n * @public\n */\nexport type TiptapEditor = TTEditor\n\n/**\n * A TipTap node. See {@link https://tiptap.dev/docs}.\n * @public\n */\nexport type TiptapNode = Node\n\n/** @public */\nexport interface TLTextOptions {\n\ttipTapConfig?: EditorProviderProps\n\taddFontsFromNode?: RichTextFontVisitor\n}\n\n/** @public */\nexport interface RichTextFontVisitorState {\n\treadonly family: string\n\treadonly weight: string\n\treadonly style: string\n}\n\n/** @public */\nexport type RichTextFontVisitor = (\n\tnode: TiptapNode,\n\tstate: RichTextFontVisitorState,\n\taddFont: (font: TLFontFace) => void\n) => RichTextFontVisitorState\n\n/** @public */\nexport function getFontsFromRichText(\n\teditor: Editor,\n\trichText: TLRichText,\n\tinitialState: RichTextFontVisitorState\n) {\n\tconst { tipTapConfig, addFontsFromNode } = editor.getTextOptions()\n\tassert(tipTapConfig, 'textOptions.tipTapConfig must be set to use rich text')\n\tassert(addFontsFromNode, 'textOptions.addFontsFromNode must be set to use rich text')\n\n\tconst schema = getSchema(tipTapConfig.extensions ?? [])\n\tconst rootNode = Node.fromJSON(schema, richText as JSONContent)\n\n\tconst fonts = new Set<TLFontFace>()\n\n\tfunction addFont(font: TLFontFace) {\n\t\tfonts.add(font)\n\t}\n\n\tfunction visit(node: TiptapNode, state: RichTextFontVisitorState) {\n\t\tstate = addFontsFromNode!(node, state, addFont)\n\n\t\tfor (const child of node.children) {\n\t\t\tvisit(child, state)\n\t\t}\n\t}\n\n\tvisit(rootNode, initialState)\n\n\treturn Array.from(fonts)\n}\n"],
+  "sourcesContent": ["import { getSchema, JSONContent, Editor as TTEditor } from '@tiptap/core'\nimport { Node } from '@tiptap/pm/model'\nimport { EditorProviderProps } from '@tiptap/react'\nimport { TLRichText } from '@tldraw/tlschema'\nimport { assert } from '@tldraw/utils'\nimport { Editor } from '../editor/Editor'\nimport { TLFontFace } from '../editor/managers/FontManager/FontManager'\n\n/**\n * This is the TipTap editor! Docs are {@link https://tiptap.dev/docs}.\n *\n * @public\n */\nexport type TiptapEditor = TTEditor\n\n/**\n * A TipTap node. See {@link https://tiptap.dev/docs}.\n * @public\n */\nexport type TiptapNode = Node\n\n/** @public */\nexport interface TLTextOptions {\n\ttipTapConfig?: EditorProviderProps\n\taddFontsFromNode?: RichTextFontVisitor\n}\n\n/** @public */\nexport interface RichTextFontVisitorState {\n\treadonly family: string\n\treadonly weight: string\n\treadonly style: string\n}\n\n/** @public */\nexport type RichTextFontVisitor = (\n\tnode: TiptapNode,\n\tstate: RichTextFontVisitorState,\n\taddFont: (font: TLFontFace) => void\n) => RichTextFontVisitorState\n\n/** @public */\nexport function getFontsFromRichText(\n\teditor: Editor,\n\trichText: TLRichText,\n\tinitialState: RichTextFontVisitorState\n) {\n\tconst { tipTapConfig, addFontsFromNode } = editor.getTextOptions()\n\tassert(tipTapConfig, 'textOptions.tipTapConfig must be set to use rich text')\n\tassert(addFontsFromNode, 'textOptions.addFontsFromNode must be set to use rich text')\n\n\tconst schema = getSchema(tipTapConfig.extensions ?? [])\n\tconst rootNode = Node.fromJSON(schema, richText as JSONContent)\n\n\tconst fonts = new Set<TLFontFace>()\n\n\tfunction addFont(font: TLFontFace) {\n\t\tfonts.add(font)\n\t}\n\n\tfunction visit(node: TiptapNode, state: RichTextFontVisitorState) {\n\t\tstate = addFontsFromNode!(node, state, addFont)\n\n\t\tfor (const child of node.children) {\n\t\t\tvisit(child, state)\n\t\t}\n\t}\n\n\tvisit(rootNode, initialState)\n\n\treturn Array.from(fonts)\n}\n"],
   "mappings": "AAAA,SAAS,iBAAkD;AAC3D,SAAS,YAAY;AAGrB,SAAS,cAAc;AAsChB,SAAS,qBACf,QACA,UACA,cACC;AACD,QAAM,EAAE,cAAc,iBAAiB,IAAI,OAAO,eAAe;AACjE,SAAO,cAAc,uDAAuD;AAC5E,SAAO,kBAAkB,2DAA2D;AAEpF,QAAM,SAAS,UAAU,aAAa,cAAc,CAAC,CAAC;AACtD,QAAM,WAAW,KAAK,SAAS,QAAQ,QAAuB;AAE9D,QAAM,QAAQ,oBAAI,IAAgB;AAElC,WAAS,QAAQ,MAAkB;AAClC,UAAM,IAAI,IAAI;AAAA,EACf;AAEA,WAAS,MAAM,MAAkB,OAAiC;AACjE,YAAQ,iBAAkB,MAAM,OAAO,OAAO;AAE9C,eAAW,SAAS,KAAK,UAAU;AAClC,YAAM,OAAO,KAAK;AAAA,IACnB;AAAA,EACD;AAEA,QAAM,UAAU,YAAY;AAE5B,SAAO,MAAM,KAAK,KAAK;AACxB;",
   "names": []
 }

package/dist-esm/version.mjs

@@ -1,8 +1,8 @@
-const version = "3.14.0-canary.a2263c31d532";
+const version = "3.14.0-canary.b477608fafb4";
 const publishDates = {
   major: "2024-09-13T14:36:29.063Z",
-  minor: "2025-06-03T15:55:11.843Z",
-  patch: "2025-06-03T15:55:11.843Z"
+  minor: "2025-06-07T18:16:19.438Z",
+  patch: "2025-06-07T18:16:19.438Z"
 };
 export {
   publishDates,

package/dist-esm/version.mjs.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../src/version.ts"],
-  "sourcesContent": ["// This file is automatically generated by internal/scripts/refresh-assets.ts.\n// Do not edit manually. Or do, I'm a comment, not a cop.\n\nexport const version = '3.14.0-canary.a2263c31d532'\nexport const publishDates = {\n\tmajor: '2024-09-13T14:36:29.063Z',\n\tminor: '2025-06-03T15:55:11.843Z',\n\tpatch: '2025-06-03T15:55:11.843Z',\n}\n"],
+  "sourcesContent": ["// This file is automatically generated by internal/scripts/refresh-assets.ts.\n// Do not edit manually. Or do, I'm a comment, not a cop.\n\nexport const version = '3.14.0-canary.b477608fafb4'\nexport const publishDates = {\n\tmajor: '2024-09-13T14:36:29.063Z',\n\tminor: '2025-06-07T18:16:19.438Z',\n\tpatch: '2025-06-07T18:16:19.438Z',\n}\n"],
   "mappings": "AAGO,MAAM,UAAU;AAChB,MAAM,eAAe;AAAA,EAC3B,OAAO;AAAA,EACP,OAAO;AAAA,EACP,OAAO;AACR;",
   "names": []
 }

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@tldraw/editor",
   "description": "A tiny little drawing app (editor).",
-  "version": "3.14.0-canary.a2263c31d532",
+  "version": "3.14.0-canary.b477608fafb4",
   "author": {
     "name": "tldraw Inc.",
     "email": "hello@tldraw.com"
@@ -48,12 +48,12 @@
     "@tiptap/core": "^2.9.1",
     "@tiptap/pm": "^2.9.1",
     "@tiptap/react": "^2.9.1",
-    "@tldraw/state": "3.14.0-canary.a2263c31d532",
-    "@tldraw/state-react": "3.14.0-canary.a2263c31d532",
-    "@tldraw/store": "3.14.0-canary.a2263c31d532",
-    "@tldraw/tlschema": "3.14.0-canary.a2263c31d532",
-    "@tldraw/utils": "3.14.0-canary.a2263c31d532",
-    "@tldraw/validate": "3.14.0-canary.a2263c31d532",
+    "@tldraw/state": "3.14.0-canary.b477608fafb4",
+    "@tldraw/state-react": "3.14.0-canary.b477608fafb4",
+    "@tldraw/store": "3.14.0-canary.b477608fafb4",
+    "@tldraw/tlschema": "3.14.0-canary.b477608fafb4",
+    "@tldraw/utils": "3.14.0-canary.b477608fafb4",
+    "@tldraw/validate": "3.14.0-canary.b477608fafb4",
     "@types/core-js": "^2.5.8",
     "@use-gesture/react": "^10.3.1",
     "classnames": "^2.5.1",

package/src/index.ts

@@ -148,15 +148,18 @@ export {
 	type BindingOnShapeIsolateOptions,
 	type TLBindingUtilConstructor,
 } from './lib/editor/bindings/BindingUtil'
-export { ClickManager, type TLClickState } from './lib/editor/managers/ClickManager'
-export { EdgeScrollManager } from './lib/editor/managers/EdgeScrollManager'
+export { ClickManager, type TLClickState } from './lib/editor/managers/ClickManager/ClickManager'
+export { EdgeScrollManager } from './lib/editor/managers/EdgeScrollManager/EdgeScrollManager'
 export {
 	FontManager,
 	type TLFontFace,
 	type TLFontFaceSource,
-} from './lib/editor/managers/FontManager'
-export { HistoryManager } from './lib/editor/managers/HistoryManager'
-export { ScribbleManager, type ScribbleItem } from './lib/editor/managers/ScribbleManager'
+} from './lib/editor/managers/FontManager/FontManager'
+export { HistoryManager } from './lib/editor/managers/HistoryManager/HistoryManager'
+export {
+	ScribbleManager,
+	type ScribbleItem,
+} from './lib/editor/managers/ScribbleManager/ScribbleManager'
 export {
 	BoundsSnaps,
 	type BoundsSnapGeometry,
@@ -170,8 +173,11 @@ export {
 	type SnapData,
 	type SnapIndicator,
 } from './lib/editor/managers/SnapManager/SnapManager'
-export { TextManager, type TLMeasureTextSpanOpts } from './lib/editor/managers/TextManager'
-export { UserPreferencesManager } from './lib/editor/managers/UserPreferencesManager'
+export {
+	TextManager,
+	type TLMeasureTextSpanOpts,
+} from './lib/editor/managers/TextManager/TextManager'
+export { UserPreferencesManager } from './lib/editor/managers/UserPreferencesManager/UserPreferencesManager'
 export { BaseBoxShapeUtil, type TLBaseBoxShape } from './lib/editor/shapes/BaseBoxShapeUtil'
 export {
 	ShapeUtil,

package/src/lib/editor/Editor.ts

@@ -148,16 +148,16 @@ import { bindingsIndex } from './derivations/bindingsIndex'
 import { notVisibleShapes } from './derivations/notVisibleShapes'
 import { parentsToChildren } from './derivations/parentsToChildren'
 import { deriveShapeIdsInCurrentPage } from './derivations/shapeIdsInCurrentPage'
-import { ClickManager } from './managers/ClickManager'
-import { EdgeScrollManager } from './managers/EdgeScrollManager'
-import { FocusManager } from './managers/FocusManager'
-import { FontManager } from './managers/FontManager'
-import { HistoryManager } from './managers/HistoryManager'
-import { ScribbleManager } from './managers/ScribbleManager'
+import { ClickManager } from './managers/ClickManager/ClickManager'
+import { EdgeScrollManager } from './managers/EdgeScrollManager/EdgeScrollManager'
+import { FocusManager } from './managers/FocusManager/FocusManager'
+import { FontManager } from './managers/FontManager/FontManager'
+import { HistoryManager } from './managers/HistoryManager/HistoryManager'
+import { ScribbleManager } from './managers/ScribbleManager/ScribbleManager'
 import { SnapManager } from './managers/SnapManager/SnapManager'
-import { TextManager } from './managers/TextManager'
-import { TickManager } from './managers/TickManager'
-import { UserPreferencesManager } from './managers/UserPreferencesManager'
+import { TextManager } from './managers/TextManager/TextManager'
+import { TickManager } from './managers/TickManager/TickManager'
+import { UserPreferencesManager } from './managers/UserPreferencesManager/UserPreferencesManager'
 import { ShapeUtil, TLGeometryOpts, TLResizeMode } from './shapes/ShapeUtil'
 import { RootState } from './tools/RootState'
 import { StateNode, TLStateNodeConstructor } from './tools/StateNode'
@@ -328,7 +328,7 @@ export class Editor extends EventEmitter<TLEventMap> {
 		this.store = store
 		this.history = new HistoryManager<TLRecord>({
 			store,
-			annotateError: (error) => {
+			annotateError: (error: any) => {
 				this.annotateError(error, { origin: 'history.batch', willCrashApp: true })
 				this.crash(error)
 			},
@@ -3717,10 +3717,7 @@ export class Editor extends EventEmitter<TLEventMap> {
 	 */
 	@computed getViewportScreenCenter() {
 		const viewportScreenBounds = this.getViewportScreenBounds()
-		return new Vec(
-			viewportScreenBounds.midX - viewportScreenBounds.minX,
-			viewportScreenBounds.midY - viewportScreenBounds.minY
-		)
+		return new Vec(viewportScreenBounds.w / 2, viewportScreenBounds.h / 2)
 	}
 
 	/**
@@ -4646,44 +4643,6 @@ export class Editor extends EventEmitter<TLEventMap> {
 		)! as T
 	}
 
-	private _shapePageGeometryCaches: Record<string, ComputedCache<Geometry2d, TLShape>> = {}
-
-	/**
-	 * Get the geometry of a shape in page-space.
-	 *
-	 * @example
-	 * ```ts
-	 * editor.getShapePageGeometry(myShape)
-	 * editor.getShapePageGeometry(myShapeId)
-	 * editor.getShapePageGeometry(myShapeId, { context: "arrow" })
-	 * ```
-	 *
-	 * @param shape - The shape (or shape id) to get the geometry for.
-	 * @param opts - Additional options about the request for geometry. Passed to {@link ShapeUtil.getGeometry}.
-	 *
-	 * @public
-	 */
-	getShapePageGeometry<T extends Geometry2d>(shape: TLShape | TLShapeId, opts?: TLGeometryOpts): T {
-		const context = opts?.context ?? 'none'
-		if (!this._shapePageGeometryCaches[context]) {
-			this._shapePageGeometryCaches[context] = this.store.createComputedCache(
-				'bounds',
-				(shape) => {
-					const geometry = this.getShapeGeometry(shape.id, opts)
-					const pageTransform = this.getShapePageTransform(shape.id)
-					return geometry.transform(pageTransform)
-				},
-				{
-					// we only depend directly on the shape id, and changing geometry/transform will update us anyway
-					areRecordsEqual: () => true,
-				}
-			)
-		}
-		return this._shapePageGeometryCaches[context].get(
-			typeof shape === 'string' ? shape : shape.id
-		)! as T
-	}
-
 	/** @internal */
 	@computed private _getShapeHandlesCache(): ComputedCache<TLHandle[] | undefined, TLShape> {
 		return this.store.createComputedCache(
@@ -4796,7 +4755,10 @@ export class Editor extends EventEmitter<TLEventMap> {
 	/** @internal */
 	@computed private _getShapePageBoundsCache(): ComputedCache<Box, TLShape> {
 		return this.store.createComputedCache<Box, TLShape>('pageBoundsCache', (shape) => {
-			return this.getShapePageGeometry(shape).bounds
+			const pageTransform = this.getShapePageTransform(shape)
+			if (!pageTransform) return undefined
+			const geometry = this.getShapeGeometry(shape)
+			return Box.FromPoints(pageTransform.applyToPoints(geometry.vertices))
 		})
 	}
 
@@ -4870,11 +4832,12 @@ export class Editor extends EventEmitter<TLEventMap> {
 			if (frameAncestors.length === 0) return undefined
 
 			const pageMask = frameAncestors
-				.map<Vec[] | undefined>(
-					(s) =>
-						// Apply the frame transform to the frame outline to get the frame outline in the current page space
-						this.getShapePageGeometry(s.id).vertices
-				)
+				.map<Vec[] | undefined>((s) => {
+					// Apply the frame transform to the frame outline to get the frame outline in the current page space
+					const geometry = this.getShapeGeometry(s.id)
+					const pageTransform = this.getShapePageTransform(s.id)
+					return pageTransform.applyToPoints(geometry.vertices)
+				})
 				.reduce((acc, b) => {
 					if (!(b && acc)) return undefined
 					const intersection = intersectPolygonPolygon(acc, b)

package/src/lib/editor/derivations/bindingsIndex.ts

@@ -1,41 +1,42 @@
 import { Computed, RESET_VALUE, computed, isUninitialized } from '@tldraw/state'
-import { TLBinding, TLShapeId } from '@tldraw/tlschema'
+import { TLArrowBinding, TLBinding, TLShapeId, TLUnknownBinding } from '@tldraw/tlschema'
 import { objectMapValues } from '@tldraw/utils'
 import { Editor } from '../Editor'
 
 type TLBindingsIndex = Map<TLShapeId, TLBinding[]>
 
-export const bindingsIndex = (editor: Editor): Computed<TLBindingsIndex> => {
-	const { store } = editor
-	const bindingsHistory = store.query.filterHistory('binding')
-	const bindingsQuery = store.query.records('binding')
-	function fromScratch() {
-		const allBindings = bindingsQuery.get() as TLBinding[]
+function fromScratch(bindingsQuery: Computed<(TLArrowBinding | TLUnknownBinding)[], unknown>) {
+	const allBindings = bindingsQuery.get() as TLBinding[]
 
-		const shape2Binding: TLBindingsIndex = new Map()
+	const shapesToBindings: TLBindingsIndex = new Map()
 
-		for (const binding of allBindings) {
-			const { fromId, toId } = binding
-			const bindingsForFromShape = shape2Binding.get(fromId)
-			if (!bindingsForFromShape) {
-				shape2Binding.set(fromId, [binding])
-			} else {
-				bindingsForFromShape.push(binding)
-			}
-			const bindingsForToShape = shape2Binding.get(toId)
-			if (!bindingsForToShape) {
-				shape2Binding.set(toId, [binding])
-			} else {
-				bindingsForToShape.push(binding)
-			}
+	for (const binding of allBindings) {
+		const { fromId, toId } = binding
+		const bindingsForFromShape = shapesToBindings.get(fromId)
+		if (!bindingsForFromShape) {
+			shapesToBindings.set(fromId, [binding])
+		} else {
+			bindingsForFromShape.push(binding)
+		}
+		const bindingsForToShape = shapesToBindings.get(toId)
+		if (!bindingsForToShape) {
+			shapesToBindings.set(toId, [binding])
+		} else {
+			bindingsForToShape.push(binding)
 		}
-
-		return shape2Binding
 	}
 
+	return shapesToBindings
+}
+
+export const bindingsIndex = (editor: Editor): Computed<TLBindingsIndex> => {
+	const { store } = editor
+	const bindingsHistory = store.query.filterHistory('binding')
+	const bindingsQuery = store.query.records('binding')
+
 	return computed<TLBindingsIndex>('arrowBindingsIndex', (_lastValue, lastComputedEpoch) => {
 		if (isUninitialized(_lastValue)) {
-			return fromScratch()
+			return fromScratch(bindingsQuery)
 		}
 
 		const lastValue = _lastValue
@@ -43,7 +44,7 @@ export const bindingsIndex = (editor: Editor): Computed<TLBindingsIndex> => {
 		const diff = bindingsHistory.getDiffSince(lastComputedEpoch)
 
 		if (diff === RESET_VALUE) {
-			return fromScratch()
+			return fromScratch(bindingsQuery)
 		}
 
 		let nextValue: TLBindingsIndex | undefined = undefined

package/src/lib/editor/derivations/parentsToChildren.ts

@@ -1,45 +1,48 @@
-import { computed, isUninitialized, RESET_VALUE } from '@tldraw/state'
-import { RecordsDiff } from '@tldraw/store'
+import { Computed, computed, isUninitialized, RESET_VALUE } from '@tldraw/state'
+import { CollectionDiff, RecordsDiff } from '@tldraw/store'
 import { isShape, TLParentId, TLRecord, TLShape, TLShapeId, TLStore } from '@tldraw/tlschema'
 import { compact, sortByIndex } from '@tldraw/utils'
 
-type Parents2Children = Record<TLParentId, TLShapeId[]>
+type ParentShapeIdsToChildShapeIds = Record<TLParentId, TLShapeId[]>
 
-export const parentsToChildren = (store: TLStore) => {
-	const shapeIdsQuery = store.query.ids<'shape'>('shape')
-	const shapeHistory = store.query.filterHistory('shape')
+function fromScratch(
+	shapeIdsQuery: Computed<Set<TLShapeId>, CollectionDiff<TLShapeId>>,
+	store: TLStore
+) {
+	const result: ParentShapeIdsToChildShapeIds = {}
+	const shapeIds = shapeIdsQuery.get()
+	const shapes = Array(shapeIds.size) as TLShape[]
+	shapeIds.forEach((id) => shapes.push(store.get(id)!))
 
-	function fromScratch() {
-		const result: Parents2Children = {}
-		const shapeIds = shapeIdsQuery.get()
-		const shapes = Array(shapeIds.size) as TLShape[]
-		shapeIds.forEach((id) => shapes.push(store.get(id)!))
+	// Sort the shapes by index
+	shapes.sort(sortByIndex)
 
-		// Sort the shapes by index
-		shapes.sort(sortByIndex)
+	// Populate the result object with an array for each parent.
+	shapes.forEach((shape) => {
+		if (!result[shape.parentId]) {
+			result[shape.parentId] = []
+		}
+		result[shape.parentId].push(shape.id)
+	})
 
-		// Populate the result object with an array for each parent.
-		shapes.forEach((shape) => {
-			if (!result[shape.parentId]) {
-				result[shape.parentId] = []
-			}
-			result[shape.parentId].push(shape.id)
-		})
+	return result
+}
 
-		return result
-	}
+export const parentsToChildren = (store: TLStore) => {
+	const shapeIdsQuery = store.query.ids<'shape'>('shape')
+	const shapeHistory = store.query.filterHistory('shape')
 
-	return computed<Parents2Children>(
+	return computed<ParentShapeIdsToChildShapeIds>(
 		'parentsToChildrenWithIndexes',
 		(lastValue, lastComputedEpoch) => {
 			if (isUninitialized(lastValue)) {
-				return fromScratch()
+				return fromScratch(shapeIdsQuery, store)
 			}
 
 			const diff = shapeHistory.getDiffSince(lastComputedEpoch)
 
 			if (diff === RESET_VALUE) {
-				return fromScratch()
+				return fromScratch(shapeIdsQuery, store)
 			}
 
 			if (diff.length === 0) return lastValue