@tldraw/editor 3.14.0-canary.e0ab6f4c80f9 → 3.14.0-canary.e2a8e4a03aff

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)
 			},
@@ -348,6 +348,8 @@ export class Editor extends EventEmitter<TLEventMap> {
 		this.getContainer = getContainer
 
 		this.textMeasure = new TextManager(this)
+		this.disposables.add(() => this.textMeasure.dispose())
+
 		this.fonts = new FontManager(this, fontAssetUrls)
 
 		this._tickManager = new TickManager(this)
@@ -512,6 +514,7 @@ export class Editor extends EventEmitter<TLEventMap> {
 									binding,
 									shapeBefore,
 									shapeAfter,
+									reason: 'self',
 								})
 							}
 							if (binding.toId === shapeAfter.id) {
@@ -519,6 +522,7 @@ export class Editor extends EventEmitter<TLEventMap> {
 									binding,
 									shapeBefore,
 									shapeAfter,
+									reason: 'self',
 								})
 							}
 						}
@@ -537,6 +541,7 @@ export class Editor extends EventEmitter<TLEventMap> {
 											binding,
 											shapeBefore: descendantShape,
 											shapeAfter: descendantShape,
+											reason: 'ancestry',
 										})
 									}
 									if (binding.toId === descendantShape.id) {
@@ -544,6 +549,7 @@ export class Editor extends EventEmitter<TLEventMap> {
 											binding,
 											shapeBefore: descendantShape,
 											shapeAfter: descendantShape,
+											reason: 'ancestry',
 										})
 									}
 								}
@@ -2116,6 +2122,20 @@ export class Editor extends EventEmitter<TLEventMap> {
 		return this.getShapesPageBounds(this.getSelectedShapeIds())
 	}
 
+	/**
+	 * The bounds of the selection bounding box in the current page space.
+	 *
+	 * @readonly
+	 * @public
+	 */
+	getSelectionScreenBounds(): Box | undefined {
+		const bounds = this.getSelectionPageBounds()
+		if (!bounds) return undefined
+		const { x, y } = this.pageToScreen(bounds.point)
+		const zoom = this.getZoomLevel()
+		return new Box(x, y, bounds.width * zoom, bounds.height * zoom)
+	}
+
 	/**
 	 * @internal
 	 */
@@ -3715,10 +3735,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)
 	}
 
 	/**
@@ -4644,44 +4661,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(
@@ -4794,7 +4773,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))
 		})
 	}
 
@@ -4868,11 +4850,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)
@@ -5070,28 +5053,33 @@ export class Editor extends EventEmitter<TLEventMap> {
 	 *
 	 * @public
 	 */
-	isShapeOrAncestorLocked(shape?: TLShape): boolean
-	isShapeOrAncestorLocked(id?: TLShapeId): boolean
-	isShapeOrAncestorLocked(arg?: TLShape | TLShapeId): boolean {
-		const shape = typeof arg === 'string' ? this.getShape(arg) : arg
-		if (shape === undefined) return false
-		if (shape.isLocked) return true
-		return this.isShapeOrAncestorLocked(this.getShapeParent(shape))
+	isShapeOrAncestorLocked(shape?: TLShape | TLShapeId): boolean {
+		const _shape = shape && this.getShape(shape)
+		if (_shape === undefined) return false
+		if (_shape.isLocked) return true
+		return this.isShapeOrAncestorLocked(this.getShapeParent(_shape))
 	}
 
+	/**
+	 * Get shapes that are outside of the viewport.
+	 *
+	 * @public
+	 */
 	@computed
-	private _notVisibleShapes() {
-		return notVisibleShapes(this)
+	getNotVisibleShapes() {
+		return this._notVisibleShapes.get()
 	}
 
+	private _notVisibleShapes = notVisibleShapes(this)
+
 	/**
-	 * Get culled shapes.
+	 * Get culled shapes (those that should not render), taking into account which shapes are selected or editing.
 	 *
 	 * @public
 	 */
 	@computed
 	getCulledShapes() {
-		const notVisibleShapes = this._notVisibleShapes().get()
+		const notVisibleShapes = this.getNotVisibleShapes()
 		const selectedShapeIds = this.getSelectedShapeIds()
 		const editingId = this.getEditingShapeId()
 		const culledShapes = new Set<TLShapeId>(notVisibleShapes)
@@ -5340,21 +5328,23 @@ export class Editor extends EventEmitter<TLEventMap> {
 	 * @example
 	 * ```ts
 	 * editor.getShapesAtPoint({ x: 100, y: 100 })
-	 * editor.getShapesAtPoint({ x: 100, y: 100 }, { hitInside: true, exact: true })
+	 * editor.getShapesAtPoint({ x: 100, y: 100 }, { hitInside: true, margin: 8 })
 	 * ```
 	 *
 	 * @param point - The page point to test.
 	 * @param opts - The options for the hit point testing.
 	 *
+	 * @returns An array of shapes at the given point, sorted in reverse order of their absolute z-index (top-most shape first).
+	 *
 	 * @public
 	 */
 	getShapesAtPoint(
 		point: VecLike,
 		opts = {} as { margin?: number; hitInside?: boolean }
 	): TLShape[] {
-		return this.getCurrentPageShapes().filter(
-			(shape) => !this.isShapeHidden(shape) && this.isPointInShape(shape, point, opts)
-		)
+		return this.getCurrentPageShapesSorted()
+			.filter((shape) => !this.isShapeHidden(shape) && this.isPointInShape(shape, point, opts))
+			.reverse()
 	}
 
 	/**
@@ -5796,8 +5786,7 @@ export class Editor extends EventEmitter<TLEventMap> {
 		parent: TLParentId | TLPage | TLShape,
 		visitor: (id: TLShapeId) => void | false
 	): this {
-		const parentId = typeof parent === 'string' ? parent : parent.id
-		const children = this.getSortedChildIdsForParent(parentId)
+		const children = this.getSortedChildIdsForParent(parent)
 		for (const id of children) {
 			if (visitor(id) === false) continue
 			this.visitDescendants(id, visitor)
@@ -6222,11 +6211,12 @@ export class Editor extends EventEmitter<TLEventMap> {
 	 */
 	duplicateShapes(shapes: TLShapeId[] | TLShape[], offset?: VecLike): this {
 		this.run(() => {
-			const ids =
+			const _ids =
 				typeof shapes[0] === 'string'
 					? (shapes as TLShapeId[])
 					: (shapes as TLShape[]).map((s) => s.id)
 
+			const ids = this._shouldIgnoreShapeLock ? _ids : this._getUnlockedShapeIds(_ids)
 			if (ids.length <= 0) return this
 
 			const initialIds = new Set(ids)
@@ -7947,6 +7937,8 @@ export class Editor extends EventEmitter<TLEventMap> {
 				}
 			})
 
+			this.emit('created-shapes', shapeRecordsToCreate)
+			this.emit('edit')
 			this.store.put(shapeRecordsToCreate)
 		})
 
@@ -8341,6 +8333,8 @@ export class Editor extends EventEmitter<TLEventMap> {
 				updates.push(updated)
 			}
 
+			this.emit('edited-shapes', updates)
+			this.emit('edit')
 			this.store.put(updates)
 		})
 	}
@@ -8390,6 +8384,8 @@ export class Editor extends EventEmitter<TLEventMap> {
 			})
 		}
 
+		this.emit('deleted-shapes', [...allShapeIdsToDelete])
+		this.emit('edit')
 		return this.run(() => this.store.remove([...allShapeIdsToDelete]))
 	}
 
@@ -8838,6 +8834,7 @@ export class Editor extends EventEmitter<TLEventMap> {
 	} = {
 		text: null,
 		files: null,
+		'file-replace': null,
 		embed: null,
 		'svg-text': null,
 		url: null,
@@ -8887,6 +8884,15 @@ export class Editor extends EventEmitter<TLEventMap> {
 		return this.externalContentHandlers[info.type]?.(info as any)
 	}
 
+	/**
+	 * Handle replacing external content.
+	 *
+	 * @param info - Info about the external content.
+	 */
+	async replaceExternalContent<E>(info: TLExternalContent<E>): Promise<void> {
+		return this.externalContentHandlers[info.type]?.(info as any)
+	}
+
 	/**
 	 * Get content that can be exported for the given shape ids.
 	 *
@@ -9304,6 +9310,7 @@ export class Editor extends EventEmitter<TLEventMap> {
 			if (rootShapes.length === 1) {
 				const onlyRoot = rootShapes[0] as TLFrameShape
 				// If the old bounds are in the viewport...
+				// todo: replace frame references with shapes that can accept children
 				if (this.isShapeOfType<TLFrameShape>(onlyRoot, 'frame')) {
 					while (
 						this.getShapesAtPoint(point).some(

package/src/lib/editor/bindings/BindingUtil.ts

@@ -62,6 +62,12 @@ export interface BindingOnShapeChangeOptions<Binding extends TLUnknownBinding> {
 	shapeBefore: TLShape
 	/** The shape record after the change is made. */
 	shapeAfter: TLShape
+	/**
+	 * Why did this shape change?
+	 * - 'self': the shape itself changed
+	 * - 'ancestry': the ancestry of the shape changed, but the shape itself may not have done
+	 */
+	reason: 'self' | 'ancestry'
 }
 
 /**

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/notVisibleShapes.ts

@@ -1,49 +1,48 @@
 import { computed, isUninitialized } from '@tldraw/state'
 import { TLShapeId } from '@tldraw/tlschema'
-import { Box } from '../../primitives/Box'
 import { Editor } from '../Editor'
 
-function isShapeNotVisible(editor: Editor, id: TLShapeId, viewportPageBounds: Box): boolean {
-	const maskedPageBounds = editor.getShapeMaskedPageBounds(id)
-	// if the shape is fully outside of its parent's clipping bounds...
-	if (maskedPageBounds === undefined) return true
-
-	// if the shape is fully outside of the viewport page bounds...
-	return !viewportPageBounds.includes(maskedPageBounds)
+function fromScratch(editor: Editor): Set<TLShapeId> {
+	const shapesIds = editor.getCurrentPageShapeIds()
+	const viewportPageBounds = editor.getViewportPageBounds()
+	const notVisibleShapes = new Set<TLShapeId>()
+	shapesIds.forEach((id) => {
+		// If the shape is fully outside of the viewport page bounds, add it to the set.
+		// We'll ignore masks here, since they're more expensive to compute and the overhead is not worth it.
+		const pageBounds = editor.getShapePageBounds(id)
+		if (pageBounds === undefined || !viewportPageBounds.includes(pageBounds)) {
+			notVisibleShapes.add(id)
+		}
+	})
+	return notVisibleShapes
 }
 
 /**
  * Incremental derivation of not visible shapes.
- * Non visible shapes are shapes outside of the viewport page bounds and shapes outside of parent's clipping bounds.
+ * Non visible shapes are shapes outside of the viewport page bounds.
  *
  * @param editor - Instance of the tldraw Editor.
  * @returns Incremental derivation of non visible shapes.
  */
-export const notVisibleShapes = (editor: Editor) => {
-	function fromScratch(editor: Editor): Set<TLShapeId> {
-		const shapes = editor.getCurrentPageShapeIds()
-		const viewportPageBounds = editor.getViewportPageBounds()
-		const notVisibleShapes = new Set<TLShapeId>()
-		shapes.forEach((id) => {
-			if (isShapeNotVisible(editor, id, viewportPageBounds)) {
-				notVisibleShapes.add(id)
-			}
-		})
-		return notVisibleShapes
-	}
-	return computed<Set<TLShapeId>>('notVisibleShapes', (prevValue) => {
+export function notVisibleShapes(editor: Editor) {
+	return computed<Set<TLShapeId>>('notVisibleShapes', function updateNotVisibleShapes(prevValue) {
+		const nextValue = fromScratch(editor)
+
 		if (isUninitialized(prevValue)) {
-			return fromScratch(editor)
+			return nextValue
 		}
 
-		const nextValue = fromScratch(editor)
-
+		// If there are more or less shapes, we know there's a change
 		if (prevValue.size !== nextValue.size) return nextValue
+
+		// If any of the old shapes are not in the new set, we know there's a change
 		for (const prev of prevValue) {
 			if (!nextValue.has(prev)) {
 				return nextValue
 			}
 		}
+
+		// If we've made it here, we know that the set is the same
 		return prevValue
 	})
 }

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