@tldraw/editor 5.5.4 → 5.6.0-canary.0091c91994d6

package/src/lib/editor/Editor.ts

@@ -107,6 +107,7 @@ import {
 	getSnapshot,
 	loadSnapshot,
 } from '../config/TLEditorSnapshot'
+import { TLI18nAdapter, defaultI18n } from '../config/TLI18n'
 import {
 	DEFAULT_ANIMATION_OPTIONS,
 	DEFAULT_CAMERA_OPTIONS,
@@ -137,6 +138,7 @@ import {
 	areAnglesCompatible,
 	clamp,
 	pointInPolygon,
+	shortAngleDist,
 } from '../primitives/utils'
 import { Vec, VecLike } from '../primitives/Vec'
 import { areShapesContentEqual } from '../utils/areShapesContentEqual'
@@ -265,6 +267,11 @@ export interface TLEditorOptions {
 	 * given, the body element will be used.
 	 */
 	getContainer(): HTMLElement
+
+	/**
+	 * An i18n adapter for translating strings.
+	 */
+	i18n?: TLI18nAdapter
 	/**
 	 * Provides a way to hide shapes.
 	 *
@@ -372,9 +379,11 @@ export class Editor extends EventEmitter<TLEventMap> {
 		fontAssetUrls,
 		themes,
 		initialTheme,
+		i18n,
 	}: TLEditorOptions) {
 		super()
 
+		this.i18n = i18n ?? defaultI18n
 		this._getShapeVisibility = getShapeVisibility
 
 		// Merge deprecated textOptions prop with options.text
@@ -1017,6 +1026,13 @@ export class Editor extends EventEmitter<TLEventMap> {
 
 	readonly contextId = uniqueId()
 
+	/**
+	 * The i18n adapter for translating strings.
+	 *
+	 * @public
+	 */
+	readonly i18n: TLI18nAdapter
+
 	/**
 	 * The editor's store
 	 *
@@ -2291,12 +2307,8 @@ export class Editor extends EventEmitter<TLEventMap> {
 			firstParentId &&
 			selectedShapeIds.every((shapeId) => this.getShape(shapeId)?.parentId === firstParentId) &&
 			!isPageId(firstParentId)
-		// Locked shapes (and children of locked containers) can't be selected by clicking or
-		// select all, so traversal skips them too
-		const filteredShapes = this.getCurrentPageShapes().filter(
-			(shape) =>
-				!this.isShapeOrAncestorLocked(shape) &&
-				(isSelectedWithinContainer ? shape.parentId === firstParentId : isPageId(shape.parentId))
+		const filteredShapes = this.getCurrentPageShapes().filter((shape) =>
+			isSelectedWithinContainer ? shape.parentId === firstParentId : isPageId(shape.parentId)
 		)
 		const readingOrderShapes = this._getShapesInReadingOrder(filteredShapes)
 		const currentShapeId: TLShapeId | undefined =
@@ -2307,8 +2319,8 @@ export class Editor extends EventEmitter<TLEventMap> {
 		let adjacentShapeId: TLShapeId
 		if (direction === 'next' || direction === 'prev') {
 			const shapeIds = readingOrderShapes.map((shape) => shape.id)
-			// Every candidate can be filtered out (e.g. a locked shape is selected and nothing
-			// else is unlocked); indexing an empty list would hand getShape undefined
+			// Every candidate can be filtered out (e.g. every util returns false from canTabTo);
+			// indexing an empty list would hand getShape undefined
 			if (shapeIds.length === 0) return
 
 			const currentIndex = currentShapeId ? shapeIds.indexOf(currentShapeId) : -1
@@ -2332,6 +2344,8 @@ export class Editor extends EventEmitter<TLEventMap> {
 	/**
 	 * Generates a reading order for shapes based on rows grouping.
 	 * Tries to keep a natural reading order (left-to-right, top-to-bottom).
+	 * Shapes whose util returns `false` from {@link ShapeUtil.canTabTo} are left out. Locked
+	 * shapes are included, so keyboard users can reach them to unlock them.
 	 *
 	 * @public
 	 */
@@ -2513,6 +2527,15 @@ export class Editor extends EventEmitter<TLEventMap> {
 	}
 
 	private _selectShapesAndZoom(ids: TLShapeId[]) {
+		// setSelectedShapes is a no-op for an unchanged selection (Tab with a single shape,
+		// Ctrl+arrow with no neighbour); marking anyway would leave an empty stopping point
+		// that makes undo available with nothing to undo
+		const selectedShapeIds = this.getSelectedShapeIds()
+		const isSelectionChanging =
+			ids.length !== selectedShapeIds.length || ids.some((id) => !selectedShapeIds.includes(id))
+		if (isSelectionChanging) {
+			this.markHistoryStoppingPoint('selecting adjacent shape')
+		}
 		this.setSelectedShapes(ids)
 		this.zoomToSelectionIfOffscreen(256, {
 			animation: {
@@ -5122,7 +5145,11 @@ export class Editor extends EventEmitter<TLEventMap> {
 		const freshPage = this.getPage(id) // get the most recent version of the page anyway
 		if (!freshPage) return this
 
-		const prevCamera = { ...this.getCamera() }
+		// Read the source page's own camera rather than getCamera(), which is the
+		// current page's and is wrong when duplicating a page that isn't being viewed
+		const prevCamera = {
+			...(this.store.get(CameraRecordType.createId(freshPage.id)) ?? this.getCamera()),
+		}
 		const content = this.getContentFromCurrentPage(this.getSortedChildIdsForParent(freshPage.id))
 
 		this.run(() => {
@@ -5137,8 +5164,9 @@ export class Editor extends EventEmitter<TLEventMap> {
 			this.setCamera(prevCamera)
 
 			if (content) {
-				// If we had content on the previous page, put it on the new page
-				return this.putContentOntoCurrentPage(content)
+				// Without preservePosition the paste rule recenters off-screen content
+				// in the viewport, so the copy's layout would not match the original
+				return this.putContentOntoCurrentPage(content, { preservePosition: true })
 			}
 		})
 
@@ -8171,10 +8199,12 @@ export class Editor extends EventEmitter<TLEventMap> {
 
 		let workingShape: TLShape | null = null
 
+		const initialPagePoint = Mat.applyToPoint(pageTransform, new Vec())
+
 		if (util.onResize && util.canResize(initialShape)) {
 			// get the model changes from the shape util
 			const newPagePoint = this._scalePagePoint(
-				Mat.applyToPoint(pageTransform, new Vec(0, 0)),
+				initialPagePoint,
 				scaleOrigin,
 				scale,
 				scaleAxisRotation
@@ -8194,11 +8224,8 @@ export class Editor extends EventEmitter<TLEventMap> {
 			myScale.x = areWidthAndHeightAlignedWithCorrectAxis ? scale.x : scale.y
 			myScale.y = areWidthAndHeightAlignedWithCorrectAxis ? scale.y : scale.x
 
-			// adjust initial model for situations where the parent has moved during the resize
-			// e.g. groups
-			const initialPagePoint = Mat.applyToPoint(pageTransform, new Vec())
-
-			// need to adjust the shape's x and y points in case the parent has moved since start of resizing
+			// need to adjust the shape's x and y points in case the parent has moved since start of
+			// resizing, e.g. groups
 			const { x, y } = this.getPointInParentSpace(initialShape.id, initialPagePoint)
 
 			workingShape = initialShape
@@ -8255,29 +8282,32 @@ export class Editor extends EventEmitter<TLEventMap> {
 			scaleAxisRotation
 		)
 
-		const initialPageCenterInParentSpace = this.getPointInParentSpace(
+		// A parent-space delta added to the shape's initial x/y would double-count the parent's own
+		// move during the same gesture — a repositioned group carries its children with it (#10617).
+		const repositionedPagePoint = Vec.Add(
+			newPageCenter,
+			Vec.Sub(initialPagePoint, initialPageCenter)
+		)
+		const repositionedLocalPoint = this.getPointInParentSpace(
 			initialShape.id,
-			initialPageCenter
+			repositionedPagePoint
 		)
-		const newPageCenterInParentSpace = this.getPointInParentSpace(initialShape.id, newPageCenter)
-
-		const delta = Vec.Sub(newPageCenterInParentSpace, initialPageCenterInParentSpace)
 
 		if (workingShape) {
 			// the util's onResize ran but returned no change; keep the working update (which may
 			// include changes from onResizeStart / onResizeEnd) and reposition the shape
 			return {
 				...workingShape,
-				x: initialShape.x + delta.x,
-				y: initialShape.y + delta.y,
+				x: repositionedLocalPoint.x,
+				y: repositionedLocalPoint.y,
 			}
 		}
 
 		return {
 			id,
 			type: initialShape.type as any,
-			x: initialShape.x + delta.x,
-			y: initialShape.y + delta.y,
+			x: repositionedLocalPoint.x,
+			y: repositionedLocalPoint.y,
 		}
 	}
 
@@ -8313,6 +8343,9 @@ export class Editor extends EventEmitter<TLEventMap> {
 			initialShape: TLShape
 			isAspectRatioLocked: boolean
 			initialPageTransform: MatLike
+			dragHandle?: TLResizeHandle
+			mode?: TLResizeMode
+			skipStartAndEndCallbacks?: boolean
 		}
 	) {
 		const { type } = options.initialShape
@@ -8337,19 +8370,39 @@ export class Editor extends EventEmitter<TLEventMap> {
 			initialBounds: options.initialBounds,
 			isAspectRatioLocked: options.isAspectRatioLocked,
 			initialPageTransform: options.initialPageTransform,
+			dragHandle: options.dragHandle,
+			mode: options.mode,
+			// this is one frame of the same resize, not a new one, so don't fire start/end again
+			skipStartAndEndCallbacks: options.skipStartAndEndCallbacks,
 		})
 
 		// then if the shape is flipped in one axis only, we need to apply an extra rotation
 		// to make sure the shape is mirrored correctly
 		if (Math.sign(scale.x) * Math.sign(scale.y) < 0) {
-			// We need to compute the new local rotation that will result in the negated page rotation.
-			// For a shape with local rotation `localRot` and parent page rotation `parentRot`:
+			// Mirroring across an axis at angle `axisRot` maps a page rotation `pageRot` to
+			// `2 * axisRot - pageRot`. For a shape with local rotation `localRot` whose parent had
+			// page rotation `parentRot` when the resize began:
 			// - pageRot = parentRot + localRot
-			// - newPageRot = -pageRot (we want to negate the page rotation)
-			// - newPageRot = parentRot + newLocalRot (parent hasn't changed)
-			// - Therefore: newLocalRot = -pageRot - parentRot = -(parentRot + localRot) - parentRot = -localRot - 2*parentRot
+			// - newPageRot = 2 * axisRot - pageRot
+			// - newPageRot = (parentRot + parentDelta) + newLocalRot
+			// - Therefore: newLocalRot = 2 * axisRot - localRot - 2 * parentRot - parentDelta
+			// `parentDelta` is how far the parent has rotated since the resize began. Nested resizes
+			// commit ancestors before descendants, so an unaligned parent may itself have been
+			// flipped by the time its child gets here; reading the parent's current rotation as if
+			// it were the initial one would then double-count that flip.
 			const parentRotation = this.getShapeParentTransform(id).rotation()
-			const rotation = -options.initialShape.rotation - 2 * parentRotation
+			// take the shortest arc so the stored rotation doesn't drift by 2π when the parent
+			// hasn't moved and the initial page rotation happens to be wrapped
+			const parentDelta = shortAngleDist(
+				Mat.Cast(options.initialPageTransform).rotation() - options.initialShape.rotation,
+				parentRotation
+			)
+			const initialParentRotation = parentRotation - parentDelta
+			const rotation =
+				2 * options.scaleAxisRotation -
+				options.initialShape.rotation -
+				2 * initialParentRotation -
+				parentDelta
 			this.updateShapes([{ id, type, rotation }])
 		}
 
@@ -11522,7 +11575,11 @@ export class Editor extends EventEmitter<TLEventMap> {
 						break
 					}
 					case 'key_repeat': {
-						// noop
+						// A repeat is the only positive evidence that a key is still physically
+						// down, so it is also the only way one we lost track of can get back in.
+						// A key still held when Meta is released is dropped there on the
+						// assumption macOS ate its keyup; this is what corrects that.
+						inputs.keys.add(info.code)
 						break
 					}
 				}

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

@@ -68,16 +68,32 @@ export function deriveShapeIdsInCurrentPage(store: TLStore, getCurrentPageId: ()
 			prevValue
 		) as IncrementalSetConstructor<TLShapeId>
 
+		const addedIds = new Set<TLShapeId>()
+
 		for (const changes of diff) {
 			for (const record of Object.values(changes.added)) {
-				if (isShape(record) && isShapeInPage(store, currentPageId, record)) {
+				if (!isShape(record)) continue
+				addedIds.add(record.id)
+				if (isShapeInPage(store, currentPageId, record)) {
 					builder.add(record.id)
 				}
 			}
 
-			for (const [_from, to] of Object.values(changes.updated)) {
+			for (const [from, to] of Object.values(changes.updated)) {
 				if (isShape(to)) {
-					if (isShapeInPage(store, currentPageId, to)) {
+					const inPage = isShapeInPage(store, currentPageId, to)
+					// A reparent that moves a shape onto or off this page takes its descendants
+					// with it, but they are not in the diff; rebuild so they don't keep stale membership.
+					// A shape created in this diff has no pre-existing descendants, so it can't go stale.
+					if (
+						isShape(from) &&
+						from.parentId !== to.parentId &&
+						!addedIds.has(to.id) &&
+						inPage !== prevValue.has(to.id)
+					) {
+						return fromScratch()
+					}
+					if (inPage) {
 						builder.add(to.id)
 					} else {
 						builder.remove(to.id)

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

@@ -164,6 +164,23 @@ describe('EdgeScrollManager', () => {
 			edgeScrollManager.updateEdgeScrolling(150)
 			expect(editor.setCamera).toHaveBeenCalled()
 		})
+
+		it('should start easing after the edge scroll delay', () => {
+			mockInputs.setCurrentScreenPoint(new Vec(0, 300))
+
+			edgeScrollManager.updateEdgeScrolling(200)
+			expect(editor.setCamera).not.toHaveBeenCalled()
+
+			// 20ms into a 200ms cubic ease, the speed factor is 0.1³.
+			edgeScrollManager.updateEdgeScrolling(20)
+			expect((editor.setCamera.mock.calls[0][0] as Vec).x).toBeCloseTo(0.03)
+
+			editor.setCamera.mockClear()
+
+			// The ease reaches full speed 200ms after the delay.
+			edgeScrollManager.updateEdgeScrolling(180)
+			expect((editor.setCamera.mock.calls[0][0] as Vec).x).toBeCloseTo(270)
+		})
 	})
 
 	describe('edge proximity detection', () => {

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

@@ -47,8 +47,8 @@ export class EdgeScrollManager {
 						? EASINGS.easeInCubic(
 								Math.min(
 									1,
-									this._edgeScrollDuration /
-										(editor.options.edgeScrollDelay + editor.options.edgeScrollEaseDuration)
+									(this._edgeScrollDuration - editor.options.edgeScrollDelay) /
+										editor.options.edgeScrollEaseDuration
 								)
 							)
 						: 1

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

@@ -101,6 +101,7 @@ describe('FontManager', () => {
 			getCurrentPageShapeIds: vi.fn(() => new Set()),
 			getShape: vi.fn(),
 			getContainerDocument: vi.fn(() => document),
+			timers: { requestAnimationFrame: vi.fn() },
 			isDisposed: false,
 		} as any
 

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

@@ -1,4 +1,4 @@
-import { computed, EMPTY_ARRAY, transact } from '@tldraw/state'
+import { atom, computed, EMPTY_ARRAY, transact } from '@tldraw/state'
 import { AtomMap } from '@tldraw/store'
 import { TLFontFace, TLShape, TLShapeId } from '@tldraw/tlschema'
 import {
@@ -102,6 +102,29 @@ export class FontManager {
 		return this.fontStates.get(font) ?? null
 	}
 
+	// One signal for consumers that deliberately avoid per-shape font tracking (the
+	// spatial index); otherwise their cached text bounds stay at the fallback-font size.
+	private readonly fontLoadEpoch = atom('font load epoch', 0)
+
+	/** @internal */
+	getFontLoadEpoch(): number {
+		return this.fontLoadEpoch.get()
+	}
+
+	private isFontLoadEpochBumpPending = false
+
+	private setFontState(font: TLFontFace, state: FontState['state']) {
+		this.fontStates.update(font, (s) => ({ ...s, state }))
+		// Each bump rebuilds the whole spatial index, and fonts finish loading in
+		// separate callbacks, so coalesce loads that land in the same frame.
+		if (this.isFontLoadEpochBumpPending) return
+		this.isFontLoadEpochBumpPending = true
+		this.editor.timers.requestAnimationFrame(() => {
+			this.isFontLoadEpochBumpPending = false
+			this.fontLoadEpoch.update((n) => n + 1)
+		})
+	}
+
 	ensureFontIsLoaded(font: TLFontFace): Promise<void> {
 		const existingState = this.getFontState(font)
 		if (existingState) return existingState.loadingPromise
@@ -123,7 +146,7 @@ export class FontManager {
 						return
 					}
 					this.editor.getContainerDocument().fonts.add(instance)
-					this.fontStates.update(font, (s) => ({ ...s, state: 'ready' }))
+					this.setFontState(font, 'ready')
 				})
 				.catch((err) => {
 					if (isStale()) {
@@ -132,7 +155,7 @@ export class FontManager {
 						return
 					}
 					console.error(err)
-					this.fontStates.update(font, (s) => ({ ...s, state: 'error' }))
+					this.setFontState(font, 'error')
 				}),
 		}
 

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

@@ -177,6 +177,38 @@ describe(HistoryManager, () => {
 		expect(editor.getCount()).toBe(3)
 	})
 
+	// Callers mark before code that may change nothing, such as a shape util's double-click
+	// handler (#11075), so an empty stopping point must not cost an extra undo or redo
+	it('treats back-to-back stopping points as one on undo and redo', () => {
+		editor.history._mark('stop at 0')
+		editor.increment()
+		editor.history._mark('nothing follows this mark')
+		editor.history._mark('stop at 1')
+		editor.increment()
+		expect(editor.getCount()).toBe(2)
+
+		editor.history.undo()
+		expect(editor.getCount()).toBe(1)
+		editor.history.undo()
+		expect(editor.getCount()).toBe(0)
+
+		editor.history.redo()
+		expect(editor.getCount()).toBe(1)
+		editor.history.redo()
+		expect(editor.getCount()).toBe(2)
+	})
+
+	it('skips a trailing stopping point with no changes after it on undo', () => {
+		editor.history._mark('stop at 0')
+		editor.increment()
+		editor.history._mark('nothing follows this mark')
+
+		editor.history.undo()
+		expect(editor.getCount()).toBe(0)
+		editor.history.redo()
+		expect(editor.getCount()).toBe(1)
+	})
+
 	it('allows squashing of commands', () => {
 		editor.increment()
 

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

@@ -444,13 +444,11 @@ export class ScribbleManager {
 			}
 		}
 
-		// Remove completed items in individual fade mode
+		// Keep starting scribbles with no point yet, or addPoint can't find them (#7681).
 		if (session.options.fadeMode === 'individual') {
-			for (let i = session.items.length - 1; i >= 0; i--) {
-				if (session.items[i].scribble.points.length === 0) {
-					session.items.splice(i, 1)
-				}
-			}
+			session.items = session.items.filter(
+				({ scribble }) => scribble.points.length > 0 || scribble.state === 'starting'
+			)
 		}
 	}
 

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

@@ -41,6 +41,7 @@ export class SpatialIndexManager {
 	private rbush: RBushIndex
 	private spatialIndexComputed: Computed<number>
 	private lastPageId: TLPageId | null = null
+	private lastFontLoadEpoch = -1
 
 	// Bumps only when the rbush content may have changed. Consumers subscribe
 	// via the computed; a stable epoch lets prop-only diffs skip downstream
@@ -66,21 +67,28 @@ export class SpatialIndexManager {
 		const bindingHistory = this.editor.store.query.filterHistory('binding')
 
 		return computed<number>('spatialIndex', (_prevValue, lastComputedEpoch) => {
-			// These three reads are the computed's only tracked dependencies.
-			// Every input to a shape's page bounds is a shape or binding record,
-			// so the two histories cover all invalidation; the rebuild/update
-			// paths below run without capture to avoid registering a dependency
-			// per checked shape on every update (and ~page-size dependencies on
-			// every rebuild).
+			// These four reads are the computed's only tracked dependencies: shape
+			// and binding record changes, plus font loads (measured text resizes
+			// when its font swaps in). Theme changes that resize shapes without a
+			// record diff (e.g. `updateTheme({ fontSize })`) are not tracked, so
+			// the index stays stale for those until the next rebuild.
+			// The rebuild/update paths below run without capture to avoid
+			// registering a dependency per checked shape on every update (and
+			// ~page-size dependencies on every rebuild).
 			const shapeDiff = shapeHistory.getDiffSince(lastComputedEpoch)
 			const bindingDiff = bindingHistory.getDiffSince(lastComputedEpoch)
 			const currentPageId = this.editor.getCurrentPageId()
+			const fontLoadEpoch = this.editor.fonts.getFontLoadEpoch()
 
 			if (
 				isUninitialized(_prevValue) ||
 				shapeDiff === RESET_VALUE ||
 				bindingDiff === RESET_VALUE ||
-				this.lastPageId !== currentPageId
+				this.lastPageId !== currentPageId ||
+				// Which shapes a font load resizes isn't known without visiting
+				// every shape, so rebuild; loads are rare and bounded by the
+				// number of distinct fonts.
+				this.lastFontLoadEpoch !== fontLoadEpoch
 			) {
 				return unsafe__withoutCapture(() => this.rebuildAndBumpEpoch())
 			}
@@ -97,6 +105,7 @@ export class SpatialIndexManager {
 	private buildFromScratch(): void {
 		this.rbush.clear()
 		this.lastPageId = this.editor.getCurrentPageId()
+		this.lastFontLoadEpoch = this.editor.fonts.getFontLoadEpoch()
 
 		const elements: SpatialElement[] = []
 		for (const shape of this.editor.getCurrentPageShapes()) {

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

@@ -200,6 +200,24 @@ export abstract class ShapeUtil<Shape extends TLShape = TLShape> {
 	 */
 	createShapeForAsset?(asset: TLAsset, position: VecModel): TLShapePartial | null
 
+	/**
+	 * The shape's name, translated, as a screen reader should announce it.
+	 *
+	 * Return `undefined` — the default — and the shape is announced by its tool's label, under the
+	 * `tool.<type>` convention. Override this when the name isn't that: a geo shape is a "Rectangle"
+	 * or an "Ellipse" rather than a "Shape", so it names itself from its geo style.
+	 *
+	 * Resolve the name through {@link translateMessage} and the editor's `i18n` rather than
+	 * returning English, so it follows the user's locale and still reads as words when an app
+	 * supplies no translations.
+	 *
+	 * @param shape - The shape.
+	 * @public
+	 */
+	getShapeName(_shape: Shape): string | undefined {
+		return undefined
+	}
+
 	/**
 	 * Get the shape's geometry.
 	 *
@@ -349,6 +367,18 @@ export abstract class ShapeUtil<Shape extends TLShape = TLShape> {
 		return false
 	}
 
+	/**
+	 * Whether flipping changes the shape itself, by mirroring it or toggling its stored flip. The
+	 * default UI only offers flip for a lone selected shape when this is true; {@link Editor.flipShapes}
+	 * doesn't check it, so shapes that return false still move when flipped as part of a larger
+	 * selection. Use {@link ShapeUtil.canBeLaidOut} to opt out of that.
+	 *
+	 * @public
+	 */
+	canFlip(shape: Shape): boolean {
+		return false
+	}
+
 	/**
 	 * Whether the shape can participate in layout functions such as alignment or distribution.
 	 *

package/src/lib/editor/shapes/group/GroupShapeUtil.tsx

@@ -17,6 +17,10 @@ export class GroupShapeUtil extends ShapeUtil<TLGroupShape> {
 		return true
 	}
 
+	override canFlip() {
+		return true
+	}
+
 	override canBind() {
 		return false
 	}