@tldraw/editor 5.1.1 → 5.2.0-canary.019da1aa690a

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

@@ -48,7 +48,11 @@ export class HistoryManager<R extends UnknownRecord> {
 			switch (this.state) {
 				case HistoryRecorderState.Recording:
 					this.pendingDiff.apply(entry.changes)
-					this.stacks.update(({ undos }) => ({ undos, redos: stack() }))
+					// this interceptor runs for every store change, so skip the update when the
+					// redo stack is already empty
+					if (this.stacks.get().redos.length > 0) {
+						this.stacks.update(({ undos }) => ({ undos, redos: stack() }))
+					}
 					break
 				case HistoryRecorderState.RecordingPreserveRedoStack:
 					this.pendingDiff.apply(entry.changes)
@@ -79,6 +83,14 @@ export class HistoryManager<R extends UnknownRecord> {
 		return this.stacks.get().redos.length
 	}
 
+	/** @internal */
+	private _isReplaying = false
+
+	/** @internal */
+	isReplaying() {
+		return this._isReplaying
+	}
+
 	/** @internal */
 	_isInBatch = false
 
@@ -115,7 +127,9 @@ export class HistoryManager<R extends UnknownRecord> {
 	// History
 	_undo({ pushToRedoStack, toMark = undefined }: { pushToRedoStack: boolean; toMark?: string }) {
 		const previousState = this.state
+		const previousIsReplaying = this._isReplaying
 		this.state = HistoryRecorderState.Paused
+		this._isReplaying = true
 		try {
 			let { undos, redos } = this.stacks.get()
 
@@ -176,11 +190,11 @@ export class HistoryManager<R extends UnknownRecord> {
 				this.pendingDiff.restore(pendingDiff)
 				return this
 			}
-
 			this.store.applyDiff(diffToUndo, { ignoreEphemeralKeys: true })
 			this.store.ensureStoreIsUsable()
 			this.stacks.set({ undos, redos })
 		} finally {
+			this._isReplaying = previousIsReplaying
 			this.state = previousState
 		}
 
@@ -195,7 +209,9 @@ export class HistoryManager<R extends UnknownRecord> {
 
 	redo() {
 		const previousState = this.state
+		const previousIsReplaying = this._isReplaying
 		this.state = HistoryRecorderState.Paused
+		this._isReplaying = true
 		try {
 			this.flushPendingDiff()
 
@@ -224,11 +240,11 @@ export class HistoryManager<R extends UnknownRecord> {
 					break
 				}
 			}
-
 			this.store.applyDiff(diffToRedo, { ignoreEphemeralKeys: true })
 			this.store.ensureStoreIsUsable()
 			this.stacks.set({ undos, redos })
 		} finally {
+			this._isReplaying = previousIsReplaying
 			this.state = previousState
 		}
 
@@ -349,7 +365,16 @@ class PendingDiff<R extends UnknownRecord> {
 
 	apply(diff: RecordsDiff<R>) {
 		squashRecordDiffsMutable(this.diff, [diff])
-		this.isEmptyAtom.set(isRecordsDiffEmpty(this.diff))
+		// Recomputing emptiness from the accumulated diff is O(N) (for-in over a
+		// dictionary-mode object pays an O(N) key-collection prologue), and this runs on
+		// every history interceptor call — e.g. every input tick while resizing many
+		// shapes. Updates can never cancel out existing entries during a squash, so the
+		// full recompute is only needed when the incoming diff adds or removes records.
+		if (hasAnyKey(diff.added) || hasAnyKey(diff.removed)) {
+			this.isEmptyAtom.set(isRecordsDiffEmpty(this.diff))
+		} else if (this.isEmptyAtom.__unsafe__getWithoutCapture()) {
+			this.isEmptyAtom.set(!hasAnyKey(diff.updated))
+		}
 	}
 
 	debug() {
@@ -357,6 +382,11 @@ class PendingDiff<R extends UnknownRecord> {
 	}
 }
 
+function hasAnyKey(obj: object) {
+	for (const _ in obj) return true
+	return false
+}
+
 type Stack<T> = StackItem<T> | EmptyStackItem<T>
 
 function stack<T>(): Stack<T> {

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

@@ -0,0 +1,61 @@
+import { createTLStore } from '../../../config/createTLStore'
+import { Editor } from '../../Editor'
+
+function createTestEditor() {
+	const store = createTLStore({})
+	store.ensureStoreIsUsable()
+	return new Editor({
+		store,
+		bindingUtils: [],
+		shapeUtils: [],
+		getContainer: () => document.createElement('div'),
+		tools: [],
+	})
+}
+
+describe('InputsManager', () => {
+	let editor: Editor
+
+	beforeEach(() => {
+		editor = createTestEditor()
+	})
+
+	afterEach(() => {
+		editor.dispose()
+	})
+
+	it('updates pointer velocity on frame events', () => {
+		const point = editor.inputs.getCurrentScreenPoint()
+		point.x = 0
+		point.y = 0
+		editor.emit('frame', 16)
+
+		point.x = 100
+		point.y = 0
+		editor.emit('frame', 16)
+
+		expect(editor.inputs.getPointerVelocity().len()).toBeGreaterThan(0)
+	})
+
+	it('stops updating pointer velocity after dispose', () => {
+		const point = editor.inputs.getCurrentScreenPoint()
+		point.x = 0
+		point.y = 0
+		editor.emit('frame', 16)
+
+		point.x = 100
+		point.y = 0
+		editor.emit('frame', 16)
+
+		const velocityBeforeDispose = editor.inputs.getPointerVelocity().clone()
+		expect(velocityBeforeDispose.len()).toBeGreaterThan(0)
+
+		editor.inputs.dispose()
+
+		point.x = 200
+		point.y = 0
+		editor.emit('frame', 16)
+
+		expect(editor.inputs.getPointerVelocity()).toEqual(velocityBeforeDispose)
+	})
+})

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

@@ -1,6 +1,7 @@
 import { atom, computed, unsafe__withoutCapture } from '@tldraw/state'
 import { AtomSet } from '@tldraw/store'
 import { TLINSTANCE_ID, TLPOINTER_ID } from '@tldraw/tlschema'
+import { bind } from '@tldraw/utils'
 import { INTERNAL_POINTER_IDS } from '../../../constants'
 import { Vec } from '../../../primitives/Vec'
 import { isAccelKey } from '../../../utils/keyboard'
@@ -12,7 +13,19 @@ const POINTER_VELOCITY_REFERENCE_SMOOTHING = 0.5
 
 /** @public */
 export class InputsManager {
-	constructor(private readonly editor: Editor) {}
+	constructor(private readonly editor: Editor) {
+		this.editor.on('frame', this._onFrame)
+	}
+
+	/** @internal */
+	dispose() {
+		this.editor.off('frame', this._onFrame)
+	}
+
+	@bind
+	private _onFrame(elapsed: number) {
+		this.updatePointerVelocity(elapsed)
+	}
 
 	private _originPagePoint = atom<Vec>('originPagePoint', new Vec())
 	/**
@@ -120,8 +133,7 @@ export class InputsManager {
 	}
 
 	/**
-	 * Normally you shouldn't need to set the pointer velocity directly, this is set by the tick manager.
-	 * However, this is currently used in tests to fake pointer velocity.
+	 * Normally you shouldn't need to set the pointer velocity directly. Used in tests to fake pointer velocity.
 	 * @param pointerVelocity - The pointer velocity.
 	 * @internal
 	 */
@@ -460,7 +472,7 @@ export class InputsManager {
 	private _velocityPrevPoint = new Vec()
 
 	/**
-	 * Update the pointer velocity based on elapsed time. Called by the tick manager.
+	 * Update the pointer velocity based on elapsed time. Called each frame.
 	 * @param elapsed - The time elapsed since the last tick in milliseconds.
 	 * @internal
 	 */

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

@@ -46,6 +46,10 @@ export class SpatialIndexManager {
 
 	private createSpatialIndexComputed() {
 		const shapeHistory = this.editor.store.query.filterHistory('shape')
+		// Binding changes can move a shape's derived bounds (e.g. creating or
+		// deleting an arrow binding relocates the arrow's body) without
+		// touching any shape record, so they must also invalidate the index.
+		const bindingHistory = this.editor.store.query.filterHistory('binding')
 
 		return computed<number>('spatialIndex', (_prevValue, lastComputedEpoch) => {
 			if (isUninitialized(_prevValue)) {
@@ -53,8 +57,9 @@ export class SpatialIndexManager {
 			}
 
 			const shapeDiff = shapeHistory.getDiffSince(lastComputedEpoch)
+			const bindingDiff = bindingHistory.getDiffSince(lastComputedEpoch)
 
-			if (shapeDiff === RESET_VALUE) {
+			if (shapeDiff === RESET_VALUE || bindingDiff === RESET_VALUE) {
 				return this.rebuildAndBumpEpoch()
 			}
 
@@ -63,8 +68,10 @@ export class SpatialIndexManager {
 				return this.rebuildAndBumpEpoch()
 			}
 
-			if (shapeDiff.length === 0) return this._boundsEpoch
+			if (shapeDiff.length === 0 && bindingDiff.length === 0) return this._boundsEpoch
 
+			// A binding-only diff passes an empty shape diff: step 1 is a no-op
+			// and the step-2 sweep re-checks the indexed bounds of every shape.
 			if (this.processIncrementalUpdate(shapeDiff)) {
 				this._boundsEpoch++
 			}

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

@@ -82,20 +82,22 @@ const mockEditor = {
 	getContainerDocument: vi.fn(() => mockDocument),
 } as unknown as Editor
 
-global.Range = vi.fn(() => ({
-	setStart: vi.fn(),
-	setEnd: vi.fn(),
-	getClientRects: vi.fn(() => [
-		{
-			width: 10,
-			height: 16,
-			left: 0,
-			top: 0,
-			right: 10,
-			bottom: 16,
-		},
-	]),
-})) as any
+global.Range = vi.fn(function () {
+	return {
+		setStart: vi.fn(),
+		setEnd: vi.fn(),
+		getClientRects: vi.fn(() => [
+			{
+				width: 10,
+				height: 16,
+				left: 0,
+				top: 0,
+				right: 10,
+				bottom: 16,
+			},
+		]),
+	}
+}) as any
 
 describe('TextManager', () => {
 	let textManager: TextManager

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

@@ -2,6 +2,21 @@ import { BoxModel, TLDefaultHorizontalAlignStyle } from '@tldraw/tlschema'
 import { objectMapKeys } from '@tldraw/utils'
 import type { Editor } from '../../Editor'
 
+/**
+ * The whole-pixel line-height for a given font size and tldraw's unitless line-height
+ * multiplier. tldraw's theme stores line-height as a multiplier (e.g. 1.35); resolving it
+ * to a whole pixel keeps line spacing identical across rendering engines, which otherwise
+ * disagree on fractional line boxes (WebKit snaps them to whole pixels, Blink keeps the
+ * fraction) and let multi-line text drift apart. Apply it everywhere line-height is used —
+ * measurement, on-canvas render, and export — so geometry and rendering agree.
+ * See https://github.com/tldraw/tldraw/issues/8970.
+ *
+ * @public
+ */
+export function resolveLineHeightPx(fontSize: number, lineHeight: number): number {
+	return Math.round(fontSize * lineHeight)
+}
+
 const fixNewLines = /\r?\n|\r/g
 
 function normalizeTextForDom(text: string) {
@@ -154,7 +169,7 @@ export class TextManager {
 			'font-style': opts.fontStyle,
 			'font-weight': opts.fontWeight,
 			'font-size': opts.fontSize + 'px',
-			'line-height': opts.lineHeight.toString(),
+			'line-height': `${resolveLineHeightPx(opts.fontSize, opts.lineHeight)}px`,
 			padding: opts.padding,
 			'max-width': opts.maxWidth ? opts.maxWidth + 'px' : undefined,
 			'min-width': opts.minWidth ? opts.minWidth + 'px' : undefined,
@@ -382,7 +397,7 @@ export class TextManager {
 			'font-style': opts.fontStyle,
 			'font-weight': opts.fontWeight,
 			'font-size': opts.fontSize + 'px',
-			'line-height': opts.lineHeight.toString(),
+			'line-height': `${resolveLineHeightPx(opts.fontSize, opts.lineHeight)}px`,
 			width: `${elementWidth}px`,
 			height: 'min-content',
 			'text-align': textAlignmentsForLtr[opts.textAlign],

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

@@ -1,5 +1,4 @@
 import { Mock, Mocked, vi } from 'vitest'
-import { Vec } from '../../../primitives/Vec'
 import { Editor } from '../../Editor'
 import { TickManager } from './TickManager'
 
@@ -21,17 +20,6 @@ describe('TickManager', () => {
 	let tickManager: TickManager
 	let mockEmit: Mock
 	let mockDisposablesAdd: Mock
-	let mockInputs: {
-		_currentScreenPoint: Vec
-		getCurrentScreenPoint(): Vec
-		currentScreenPoint: Vec
-		setCurrentScreenPoint(value: Vec): void
-		_pointerVelocity: Vec
-		getPointerVelocity(): Vec
-		pointerVelocity: Vec
-		setPointerVelocity(value: Vec): void
-		updatePointerVelocity(elapsed: number): void
-	}
 
 	beforeEach(() => {
 		vi.clearAllMocks()
@@ -52,39 +40,11 @@ describe('TickManager', () => {
 		mockEmit = vi.fn()
 		mockDisposablesAdd = vi.fn()
 
-		// Create a mock inputs object with getters and setters
-		mockInputs = {
-			_currentScreenPoint: new Vec(100, 100),
-			getCurrentScreenPoint() {
-				return this._currentScreenPoint
-			},
-			get currentScreenPoint() {
-				return this.getCurrentScreenPoint()
-			},
-			setCurrentScreenPoint(value: Vec) {
-				this._currentScreenPoint = value
-			},
-			_pointerVelocity: new Vec(0, 0),
-			getPointerVelocity() {
-				return this._pointerVelocity
-			},
-			get pointerVelocity() {
-				return this.getPointerVelocity()
-			},
-			setPointerVelocity(value: Vec) {
-				this._pointerVelocity = value
-			},
-			updatePointerVelocity(_elapsed: number) {
-				// Mock implementation - no-op for tests
-			},
-		}
-
 		editor = {
 			emit: mockEmit,
 			disposables: {
 				add: mockDisposablesAdd,
 			},
-			inputs: mockInputs as unknown as Editor['inputs'],
 		} as unknown as Mocked<Editor>
 
 		tickManager = new TickManager(editor)

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

@@ -40,7 +40,6 @@ export class TickManager {
 		const elapsed = now - this.now
 		this.now = now
 
-		this.editor.inputs.updatePointerVelocity(elapsed)
 		this.editor.emit('frame', elapsed)
 		this.editor.emit('tick', elapsed)
 		this.cancelRaf = throttleToNextFrame(this.tick)

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

@@ -1,4 +1,5 @@
 import { atom } from '@tldraw/state'
+import { createUserId } from '@tldraw/tlschema'
 import { Mocked, vi } from 'vitest'
 import { TLCurrentUser } from '../../../config/createTLCurrentUser'
 import { TLUserPreferences, defaultUserPreferences } from '../../../config/TLUserPreferences'
@@ -296,8 +297,17 @@ describe('UserPreferencesManager', () => {
 			userPreferencesManager = new UserPreferencesManager(mockUser, 'light')
 		})
 
-		describe('getId', () => {
-			it('should return user id', () => {
+		describe('getExternalId / getRecordId', () => {
+			it('should return the raw external user id', () => {
+				expect(userPreferencesManager.getExternalId()).toBe(mockUserPreferences.id)
+			})
+
+			it('should return the prefixed record id', () => {
+				expect(userPreferencesManager.getRecordId()).toBe(createUserId(mockUserPreferences.id))
+			})
+
+			it('getId() still returns the external id', () => {
+				// eslint-disable-next-line @typescript-eslint/no-deprecated
 				expect(userPreferencesManager.getId()).toBe(mockUserPreferences.id)
 			})
 		})

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

@@ -1,4 +1,5 @@
 import { atom, computed } from '@tldraw/state'
+import { createUserId, TLUserId } from '@tldraw/tlschema'
 import { TLCurrentUser } from '../../../config/createTLCurrentUser'
 import { TLUserPreferences, defaultUserPreferences } from '../../../config/TLUserPreferences'
 import { getGlobalWindow } from '../../../utils/dom'
@@ -39,7 +40,7 @@ export class UserPreferencesManager {
 	}
 	@computed getUserPreferences() {
 		return {
-			id: this.getId(),
+			id: this.getExternalId(),
 			name: this.getName(),
 			locale: this.getLocale(),
 			color: this.getColor(),
@@ -89,10 +90,34 @@ export class UserPreferencesManager {
 		)
 	}
 
-	@computed getId() {
+	/**
+	 * The current user's raw, app-provided id — the value set in the user's
+	 * {@link @tldraw/editor#TLUserPreferences}. Use this when you need the id your application
+	 * assigned to the user. To compare against or look up store records, use
+	 * {@link UserPreferencesManager.getRecordId} instead.
+	 */
+	@computed getExternalId(): string {
 		return this.user.userPreferences.get().id
 	}
 
+	/**
+	 * @deprecated Use {@link UserPreferencesManager.getExternalId} for the raw app-provided id, or
+	 * {@link UserPreferencesManager.getRecordId} for the prefixed `TLUserId` record id.
+	 */
+	@computed getId() {
+		return this.getExternalId()
+	}
+
+	/**
+	 * The current user's id as a tldraw {@link @tldraw/tlschema#TLUserId} record id (prefixed
+	 * with `user:`). Use this when comparing against or looking up store records, such as a
+	 * presence record's `userId` or `followingUserId`. For the raw, app-provided id, use
+	 * {@link UserPreferencesManager.getExternalId}.
+	 */
+	@computed getRecordId(): TLUserId {
+		return createUserId(this.getExternalId())
+	}
+
 	@computed getName() {
 		return this.user.userPreferences.get().name?.trim() ?? defaultUserPreferences.name
 	}

package/src/lib/editor/overlays/strokeShapeIndicators.ts

@@ -0,0 +1,86 @@
+import { createComputedCache } from '@tldraw/store'
+import { TLShape, TLShapeId } from '@tldraw/tlschema'
+import type { Editor } from '../Editor'
+
+const indicatorPathCache = createComputedCache(
+	'shapeIndicatorPath',
+	(editor: Editor, shape: TLShape) => {
+		const util = editor.getShapeUtil(shape)
+		return util.getIndicatorPath(shape)
+	},
+	{
+		areRecordsEqual(a, b) {
+			return a.props === b.props
+		},
+	}
+)
+
+/**
+ * Combine every batchable shape indicator into a single page-space `Path2D` and
+ * emit one stroke call. Shapes whose indicator needs an evenodd clip (e.g.
+ * arrows with labels or complex arrowheads) can't be batched — they still
+ * stroke individually inside a save/restore with `ctx.clip` applied.
+ *
+ * Shared by any overlay util that paints shape indicators (e.g. collaborator
+ * selections).
+ *
+ * @public
+ */
+export function strokeShapeIndicators(
+	editor: Editor,
+	ctx: CanvasRenderingContext2D,
+	shapeIds: TLShapeId[]
+): void {
+	if (shapeIds.length === 0) return
+
+	const batched = new Path2D()
+
+	for (const shapeId of shapeIds) {
+		const shape = editor.getShape(shapeId)
+		if (!shape || shape.isLocked) continue
+
+		const pageTransform = editor.getShapePageTransform(shape)
+		if (!pageTransform) continue
+
+		const indicatorPath = indicatorPathCache.get(editor, shape.id)
+		if (!indicatorPath) continue
+
+		if (indicatorPath instanceof Path2D) {
+			batched.addPath(indicatorPath, pageTransform)
+			continue
+		}
+
+		const { path, clipPath, additionalPaths } = indicatorPath
+
+		if (!clipPath) {
+			batched.addPath(path, pageTransform)
+			if (additionalPaths) {
+				for (const p of additionalPaths) batched.addPath(p, pageTransform)
+			}
+			continue
+		}
+
+		// Clipped case: fall back to an individual stroke. Rare (arrows with
+		// labels / complex arrowheads), so the extra save/restore/stroke
+		// pair per such shape isn't worth batching away.
+		ctx.save()
+		ctx.transform(
+			pageTransform.a,
+			pageTransform.b,
+			pageTransform.c,
+			pageTransform.d,
+			pageTransform.e,
+			pageTransform.f
+		)
+		ctx.save()
+		ctx.clip(clipPath, 'evenodd')
+		ctx.stroke(path)
+		ctx.restore()
+		if (additionalPaths) {
+			for (const p of additionalPaths) ctx.stroke(p)
+		}
+		ctx.restore()
+	}
+
+	ctx.stroke(batched)
+}

package/src/lib/editor/tools/BaseBoxShapeTool/children/Pointing.ts

@@ -77,6 +77,10 @@ export class Pointing extends StateNode {
 		this.cancel()
 	}
 
+	override onLongPress() {
+		if (this.editor.getInstanceState().isCoarsePointer) this.cancel()
+	}
+
 	complete() {
 		const originPagePoint = this.editor.inputs.getOriginPagePoint()
 

package/src/lib/editor/tools/StateNode.ts

@@ -268,8 +268,6 @@ export abstract class StateNode implements Partial<TLEventHandlers> {
 	onLongPress?(info: TLPointerEventInfo): void
 	onPointerUp?(info: TLPointerEventInfo): void
 	onDoubleClick?(info: TLClickEventInfo): void
-	onTripleClick?(info: TLClickEventInfo): void
-	onQuadrupleClick?(info: TLClickEventInfo): void
 	onRightClick?(info: TLPointerEventInfo): void
 	onMiddleClick?(info: TLPointerEventInfo): void
 	onKeyDown?(info: TLKeyboardEventInfo): void

package/src/lib/editor/types/event-types.ts

@@ -24,7 +24,7 @@ export type TLPointerEventName =
 	| 'middle_click'
 
 /** @public */
-export type TLCLickEventName = 'double_click' | 'triple_click' | 'quadruple_click'
+export type TLCLickEventName = 'double_click'
 
 /** @public */
 export type TLPinchEventName = 'pinch_start' | 'pinch' | 'pinch_end'
@@ -72,7 +72,7 @@ export type TLClickEventInfo = TLBaseEventInfo & {
 	point: VecLike
 	pointerId: number
 	button: number
-	phase: 'down' | 'up' | 'settle'
+	phase: 'down' | 'up' | 'settle-down' | 'settle-up'
 } & TLPointerEventTarget
 
 /** @public */
@@ -173,8 +173,6 @@ export interface TLEventHandlers {
 	onLongPress: TLPointerEvent
 	onRightClick: TLPointerEvent
 	onDoubleClick: TLClickEvent
-	onTripleClick: TLClickEvent
-	onQuadrupleClick: TLClickEvent
 	onMiddleClick: TLPointerEvent
 	onPointerUp: TLPointerEvent
 	onKeyDown: TLKeyboardEvent
@@ -206,7 +204,5 @@ export const EVENT_NAME_MAP: Record<
 	complete: 'onComplete',
 	interrupt: 'onInterrupt',
 	double_click: 'onDoubleClick',
-	triple_click: 'onTripleClick',
-	quadruple_click: 'onQuadrupleClick',
 	tick: 'onTick',
 }