@tldraw/editor 5.1.0-next.d7c83ba698ae → 5.1.0

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

@@ -28,51 +28,56 @@ export class SpatialIndexManager {
 	private spatialIndexComputed: Computed<number>
 	private lastPageId: TLPageId | null = null
 
+	// Bumps only when the rbush content may have changed. Consumers subscribe
+	// via the computed; a stable epoch lets prop-only diffs skip downstream
+	// invalidations.
+	private _boundsEpoch = 0
+
 	constructor(public readonly editor: Editor) {
 		this.rbush = new RBushIndex()
 		this.spatialIndexComputed = this.createSpatialIndexComputed()
 	}
 
+	private rebuildAndBumpEpoch(): number {
+		this.buildFromScratch()
+		this._boundsEpoch++
+		return this._boundsEpoch
+	}
+
 	private createSpatialIndexComputed() {
 		const shapeHistory = this.editor.store.query.filterHistory('shape')
 
 		return computed<number>('spatialIndex', (_prevValue, lastComputedEpoch) => {
 			if (isUninitialized(_prevValue)) {
-				return this.buildFromScratch(lastComputedEpoch)
+				return this.rebuildAndBumpEpoch()
 			}
 
 			const shapeDiff = shapeHistory.getDiffSince(lastComputedEpoch)
 
 			if (shapeDiff === RESET_VALUE) {
-				return this.buildFromScratch(lastComputedEpoch)
+				return this.rebuildAndBumpEpoch()
 			}
 
 			const currentPageId = this.editor.getCurrentPageId()
 			if (this.lastPageId !== currentPageId) {
-				return this.buildFromScratch(lastComputedEpoch)
+				return this.rebuildAndBumpEpoch()
 			}
 
-			// No shape changes - index is already up to date
-			if (shapeDiff.length === 0) {
-				return lastComputedEpoch
-			}
-
-			// Process incremental updates
-			this.processIncrementalUpdate(shapeDiff)
+			if (shapeDiff.length === 0) return this._boundsEpoch
 
-			return lastComputedEpoch
+			if (this.processIncrementalUpdate(shapeDiff)) {
+				this._boundsEpoch++
+			}
+			return this._boundsEpoch
 		})
 	}
 
-	private buildFromScratch(epoch: number): number {
+	private buildFromScratch(): void {
 		this.rbush.clear()
 		this.lastPageId = this.editor.getCurrentPageId()
 
-		const shapes = this.editor.getCurrentPageShapes()
 		const elements: SpatialElement[] = []
-
-		// Collect all shape elements for bulk loading
-		for (const shape of shapes) {
+		for (const shape of this.editor.getCurrentPageShapes()) {
 			const bounds = this.editor.getShapePageBounds(shape.id)
 			if (bounds && bounds.isValid()) {
 				elements.push({
@@ -87,36 +92,38 @@ export class SpatialIndexManager {
 
 		// Bulk load for efficiency
 		this.rbush.bulkLoad(elements)
-
-		return epoch
 	}
 
-	private processIncrementalUpdate(shapeDiff: RecordsDiff<TLRecord>[]): void {
-		// Track shapes we've already processed from the diff
+	private processIncrementalUpdate(shapeDiff: RecordsDiff<TLRecord>[]): boolean {
 		const processedShapeIds = new Set<TLShapeId>()
+		let changed = false
 
-		// 1. Process shape additions, removals, and updates from diff
+		// Step 1: apply diff entries directly. `changed` flips only on real
+		// rbush mutations, so prop-only updates and no-op removes (e.g. shapes
+		// from other pages, or never-indexed shapes with invalid bounds) don't
+		// bump the epoch.
 		for (const changes of shapeDiff) {
-			// Handle additions (only for shapes on current page)
 			for (const shape of objectMapValues(changes.added) as TLShape[]) {
 				if (isShape(shape) && this.editor.getAncestorPageId(shape) === this.lastPageId) {
 					const bounds = this.editor.getShapePageBounds(shape.id)
 					if (bounds && bounds.isValid()) {
 						this.rbush.upsert(shape.id, bounds)
+						changed = true
 					}
 					processedShapeIds.add(shape.id)
 				}
 			}
 
-			// Handle removals
 			for (const shape of objectMapValues(changes.removed) as TLShape[]) {
 				if (isShape(shape)) {
-					this.rbush.remove(shape.id)
+					if (this.rbush.has(shape.id)) {
+						this.rbush.remove(shape.id)
+						changed = true
+					}
 					processedShapeIds.add(shape.id)
 				}
 			}
 
-			// Handle updated shapes: page changes and bounds updates
 			for (const [, to] of objectMapValues(changes.updated) as [TLShape, TLShape][]) {
 				if (!isShape(to)) continue
 				processedShapeIds.add(to.id)
@@ -126,35 +133,55 @@ export class SpatialIndexManager {
 				if (isOnPage) {
 					const bounds = this.editor.getShapePageBounds(to.id)
 					if (bounds && bounds.isValid()) {
-						this.rbush.upsert(to.id, bounds)
+						const indexedElement = this.rbush.getElement(to.id)
+						if (!this.areBoundsEqualToSpatialElement(bounds, indexedElement)) {
+							this.rbush.upsert(to.id, bounds)
+							changed = true
+						}
+					} else if (this.rbush.has(to.id)) {
+						this.rbush.remove(to.id)
+						changed = true
 					}
-				} else {
+				} else if (this.rbush.has(to.id)) {
 					this.rbush.remove(to.id)
+					changed = true
 				}
 			}
 		}
 
-		// 2. Check remaining shapes in index for bounds changes
-		// This handles shapes with computed bounds (arrows bound to moved shapes, groups with moved children, etc.)
-		const allShapeIds = this.rbush.getAllShapeIds()
-
-		for (const shapeId of allShapeIds) {
+		// Step 2: must always run. Diff entries can dirty derived bounds —
+		// arrows bound to moved shapes, groups with moved children — without
+		// touching any record visited in step 1. Also catches outline-only
+		// changes (e.g. geo rectangle→ellipse at the same w/h) that shift a
+		// bound arrow's intersection points: step 1 sees the geo's
+		// axis-aligned bounds unchanged and skips, but the dependent arrow's
+		// bounds have moved.
+		//
+		// Iterating the rbush's element map directly avoids allocating a
+		// shape-id array per pointer move. Mutation here is limited to
+		// upserts of existing keys and deletions, both safe during Map
+		// iteration.
+		for (const [shapeId, indexedElement] of this.rbush.entries()) {
 			if (processedShapeIds.has(shapeId)) continue
 
 			const currentBounds = this.editor.getShapePageBounds(shapeId)
-			const indexedBounds = this.rbush.getBounds(shapeId)
+			if (this.areBoundsEqualToSpatialElement(currentBounds, indexedElement)) continue
 
-			if (!this.areBoundsEqual(currentBounds, indexedBounds)) {
-				if (currentBounds && currentBounds.isValid()) {
-					this.rbush.upsert(shapeId, currentBounds)
-				} else {
-					this.rbush.remove(shapeId)
-				}
+			if (currentBounds && currentBounds.isValid()) {
+				this.rbush.upsert(shapeId, currentBounds)
+			} else {
+				this.rbush.remove(shapeId)
 			}
+			changed = true
 		}
+
+		return changed
 	}
 
-	private areBoundsEqual(a: Box | undefined, b: Box | undefined): boolean {
+	private areBoundsEqualToSpatialElement(
+		a: Box | undefined,
+		b: SpatialElement | undefined
+	): boolean {
 		if (!a && !b) return true
 		if (!a || !b) return false
 		return a.minX === b.minX && a.minY === b.minY && a.maxX === b.maxX && a.maxY === b.maxY

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

@@ -38,6 +38,12 @@ export class OverlayManager {
 		this._overlayUtils.set(type, util)
 	}
 
+	dispose() {
+		for (const util of this._overlayUtils.values()) {
+			util.dispose()
+		}
+	}
+
 	/**
 	 * Get an overlay util by type string, overlay instance, or by passing
 	 * a util class as a generic parameter for type-safe lookup.

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

@@ -140,4 +140,9 @@ export abstract class OverlayUtil<T extends TLOverlay = TLOverlay> {
 	 * at minimap scale (e.g. brushes, collaborator cursors) should opt in.
 	 */
 	renderMinimap(_ctx: CanvasRenderingContext2D, _overlays: T[], _zoom: number): void {}
+
+	/**
+	 * Clean up any resources held by this overlay util.
+	 */
+	dispose(): void {}
 }

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

@@ -133,7 +133,7 @@ export class GroupShapeUtil extends ShapeUtil<TLGroupShape> {
 			if (this.editor.getCurrentPageState().focusedGroupId === group.id) {
 				this.editor.popFocusedGroupId()
 			}
-			this.editor.reparentShapes(children, group.parentId)
+			this.editor.reparentShapes(children, group.parentId, group.index)
 			this.editor.deleteShapes([group.id])
 			return
 		}

package/src/lib/hooks/usePeerIds.ts

@@ -4,6 +4,7 @@ import { useEditor } from './useEditor'
 
 /**
  * Reactive list of peer user IDs for collaborators currently shown in the UI.
+ * This list includes user ids who are not on the user's current page.
  * Mirrors {@link Editor.getVisibleCollaborators} — peers fade out as they
  * transition to idle/inactive, without requiring a manual re-render.
  *

package/src/lib/options.ts

@@ -171,6 +171,13 @@ export interface TldrawOptions {
 	 * The distance (in screen pixels) at which shapes snap to guides and other shapes.
 	 */
 	readonly snapThreshold: number
+	/**
+	 * Whether locked shapes can be selected with a left click. When false (default), left-clicking
+	 * a locked shape is treated as a click on the canvas — only right-click selects it. When true,
+	 * locked shapes can be selected via left click and included in brush and scribble selections,
+	 * but the editor's lock guards still prevent moving, resizing, editing, or deleting them.
+	 */
+	readonly selectLockedShapes: boolean
 	/**
 	 * Options for the editor's camera. These are the initial camera options.
 	 * Use {@link Editor.setCameraOptions} to update camera options at runtime.
@@ -335,6 +342,7 @@ export const defaultTldrawOptions = {
 	rightClickPanning: true,
 	zoomToFitPadding: 128,
 	snapThreshold: 8,
+	selectLockedShapes: false,
 	camera: DEFAULT_CAMERA_OPTIONS,
 	text: {},
 	deepLinks: undefined,

package/src/lib/utils/dom.ts

@@ -35,6 +35,7 @@ export function loopToHtmlElement(elm: Element): HTMLElement {
  * @public
  */
 export function preventDefault(event: React.BaseSyntheticEvent | Event) {
+	if ('cancelable' in event && !event.cancelable) return
 	event.preventDefault()
 	if (debugFlags.logPreventDefaults.get()) {
 		console.warn('preventDefault called on event:', event)

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 = '5.1.0-next.d7c83ba698ae'
+export const version = '5.1.0'
 export const publishDates = {
 	major: '2026-05-06T16:28:18.473Z',
-	minor: '2026-05-13T18:49:11.769Z',
-	patch: '2026-05-13T18:49:11.769Z',
+	minor: '2026-06-03T10:26:13.606Z',
+	patch: '2026-06-03T10:26:13.606Z',
 }

package/dist-cjs/lib/utils/collaboratorState.js

@@ -1,42 +0,0 @@
-"use strict";
-var __defProp = Object.defineProperty;
-var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
-var __getOwnPropNames = Object.getOwnPropertyNames;
-var __hasOwnProp = Object.prototype.hasOwnProperty;
-var __export = (target, all) => {
-  for (var name in all)
-    __defProp(target, name, { get: all[name], enumerable: true });
-};
-var __copyProps = (to, from, except, desc) => {
-  if (from && typeof from === "object" || typeof from === "function") {
-    for (let key of __getOwnPropNames(from))
-      if (!__hasOwnProp.call(to, key) && key !== except)
-        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
-  }
-  return to;
-};
-var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
-var collaboratorState_exports = {};
-__export(collaboratorState_exports, {
-  getCollaboratorStateFromElapsedTime: () => getCollaboratorStateFromElapsedTime,
-  shouldShowCollaborator: () => shouldShowCollaborator
-});
-module.exports = __toCommonJS(collaboratorState_exports);
-function getCollaboratorStateFromElapsedTime(editor, elapsed) {
-  return elapsed > editor.options.collaboratorInactiveTimeoutMs ? "inactive" : elapsed > editor.options.collaboratorIdleTimeoutMs ? "idle" : "active";
-}
-function shouldShowCollaborator(editor, presence, state) {
-  const { followingUserId, highlightedUserIds } = editor.getInstanceState();
-  switch (state) {
-    case "inactive":
-      return followingUserId === presence.userId || highlightedUserIds.includes(presence.userId);
-    case "idle":
-      if (presence.followingUserId === editor.user.getId()) {
-        return !!(presence.chatMessage || highlightedUserIds.includes(presence.userId));
-      }
-      return true;
-    case "active":
-      return true;
-  }
-}
-//# sourceMappingURL=collaboratorState.js.map

package/dist-cjs/lib/utils/collaboratorState.js.map

@@ -1,7 +0,0 @@
-{
-  "version": 3,
-  "sources": ["../../../src/lib/utils/collaboratorState.ts"],
-  "sourcesContent": ["import { TLInstancePresence } from '@tldraw/tlschema'\nimport { Editor } from '../editor/Editor'\n\n/** The activity state of a collaborator */\nexport type CollaboratorState = 'active' | 'idle' | 'inactive'\n\n/**\n * Get the activity state of a collaborator based on elapsed time since their last activity.\n *\n * @param editor - The editor instance\n * @param elapsed - Time in milliseconds since the collaborator's last activity\n * @returns The collaborator's activity state\n */\nexport function getCollaboratorStateFromElapsedTime(\n\teditor: Editor,\n\telapsed: number\n): CollaboratorState {\n\treturn elapsed > editor.options.collaboratorInactiveTimeoutMs\n\t\t? 'inactive'\n\t\t: elapsed > editor.options.collaboratorIdleTimeoutMs\n\t\t\t? 'idle'\n\t\t\t: 'active'\n}\n\n/**\n * Determine whether a collaborator should be shown based on their activity state\n * and the current instance state (following, highlighted users, etc.).\n *\n * @param editor - The editor instance\n * @param presence - The collaborator's presence data\n * @param state - The collaborator's activity state\n * @returns Whether the collaborator should be shown\n */\nexport function shouldShowCollaborator(\n\teditor: Editor,\n\tpresence: TLInstancePresence,\n\tstate: CollaboratorState\n): boolean {\n\tconst { followingUserId, highlightedUserIds } = editor.getInstanceState()\n\n\tswitch (state) {\n\t\tcase 'inactive':\n\t\t\t// If they're inactive, only show if we're following them or they're highlighted\n\t\t\treturn followingUserId === presence.userId || highlightedUserIds.includes(presence.userId)\n\t\tcase 'idle':\n\t\t\t// If they're idle and following us, hide them unless they have a chat message or are highlighted\n\t\t\tif (presence.followingUserId === editor.user.getId()) {\n\t\t\t\treturn !!(presence.chatMessage || highlightedUserIds.includes(presence.userId))\n\t\t\t}\n\t\t\treturn true\n\t\tcase 'active':\n\t\t\treturn true\n\t}\n}\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAaO,SAAS,oCACf,QACA,SACoB;AACpB,SAAO,UAAU,OAAO,QAAQ,gCAC7B,aACA,UAAU,OAAO,QAAQ,4BACxB,SACA;AACL;AAWO,SAAS,uBACf,QACA,UACA,OACU;AACV,QAAM,EAAE,iBAAiB,mBAAmB,IAAI,OAAO,iBAAiB;AAExE,UAAQ,OAAO;AAAA,IACd,KAAK;AAEJ,aAAO,oBAAoB,SAAS,UAAU,mBAAmB,SAAS,SAAS,MAAM;AAAA,IAC1F,KAAK;AAEJ,UAAI,SAAS,oBAAoB,OAAO,KAAK,MAAM,GAAG;AACrD,eAAO,CAAC,EAAE,SAAS,eAAe,mBAAmB,SAAS,SAAS,MAAM;AAAA,MAC9E;AACA,aAAO;AAAA,IACR,KAAK;AACJ,aAAO;AAAA,EACT;AACD;",
-  "names": []
-}

package/dist-esm/lib/utils/collaboratorState.mjs

@@ -1,22 +0,0 @@
-function getCollaboratorStateFromElapsedTime(editor, elapsed) {
-  return elapsed > editor.options.collaboratorInactiveTimeoutMs ? "inactive" : elapsed > editor.options.collaboratorIdleTimeoutMs ? "idle" : "active";
-}
-function shouldShowCollaborator(editor, presence, state) {
-  const { followingUserId, highlightedUserIds } = editor.getInstanceState();
-  switch (state) {
-    case "inactive":
-      return followingUserId === presence.userId || highlightedUserIds.includes(presence.userId);
-    case "idle":
-      if (presence.followingUserId === editor.user.getId()) {
-        return !!(presence.chatMessage || highlightedUserIds.includes(presence.userId));
-      }
-      return true;
-    case "active":
-      return true;
-  }
-}
-export {
-  getCollaboratorStateFromElapsedTime,
-  shouldShowCollaborator
-};
-//# sourceMappingURL=collaboratorState.mjs.map

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

@@ -1,7 +0,0 @@
-{
-  "version": 3,
-  "sources": ["../../../src/lib/utils/collaboratorState.ts"],
-  "sourcesContent": ["import { TLInstancePresence } from '@tldraw/tlschema'\nimport { Editor } from '../editor/Editor'\n\n/** The activity state of a collaborator */\nexport type CollaboratorState = 'active' | 'idle' | 'inactive'\n\n/**\n * Get the activity state of a collaborator based on elapsed time since their last activity.\n *\n * @param editor - The editor instance\n * @param elapsed - Time in milliseconds since the collaborator's last activity\n * @returns The collaborator's activity state\n */\nexport function getCollaboratorStateFromElapsedTime(\n\teditor: Editor,\n\telapsed: number\n): CollaboratorState {\n\treturn elapsed > editor.options.collaboratorInactiveTimeoutMs\n\t\t? 'inactive'\n\t\t: elapsed > editor.options.collaboratorIdleTimeoutMs\n\t\t\t? 'idle'\n\t\t\t: 'active'\n}\n\n/**\n * Determine whether a collaborator should be shown based on their activity state\n * and the current instance state (following, highlighted users, etc.).\n *\n * @param editor - The editor instance\n * @param presence - The collaborator's presence data\n * @param state - The collaborator's activity state\n * @returns Whether the collaborator should be shown\n */\nexport function shouldShowCollaborator(\n\teditor: Editor,\n\tpresence: TLInstancePresence,\n\tstate: CollaboratorState\n): boolean {\n\tconst { followingUserId, highlightedUserIds } = editor.getInstanceState()\n\n\tswitch (state) {\n\t\tcase 'inactive':\n\t\t\t// If they're inactive, only show if we're following them or they're highlighted\n\t\t\treturn followingUserId === presence.userId || highlightedUserIds.includes(presence.userId)\n\t\tcase 'idle':\n\t\t\t// If they're idle and following us, hide them unless they have a chat message or are highlighted\n\t\t\tif (presence.followingUserId === editor.user.getId()) {\n\t\t\t\treturn !!(presence.chatMessage || highlightedUserIds.includes(presence.userId))\n\t\t\t}\n\t\t\treturn true\n\t\tcase 'active':\n\t\t\treturn true\n\t}\n}\n"],
-  "mappings": "AAaO,SAAS,oCACf,QACA,SACoB;AACpB,SAAO,UAAU,OAAO,QAAQ,gCAC7B,aACA,UAAU,OAAO,QAAQ,4BACxB,SACA;AACL;AAWO,SAAS,uBACf,QACA,UACA,OACU;AACV,QAAM,EAAE,iBAAiB,mBAAmB,IAAI,OAAO,iBAAiB;AAExE,UAAQ,OAAO;AAAA,IACd,KAAK;AAEJ,aAAO,oBAAoB,SAAS,UAAU,mBAAmB,SAAS,SAAS,MAAM;AAAA,IAC1F,KAAK;AAEJ,UAAI,SAAS,oBAAoB,OAAO,KAAK,MAAM,GAAG;AACrD,eAAO,CAAC,EAAE,SAAS,eAAe,mBAAmB,SAAS,SAAS,MAAM;AAAA,MAC9E;AACA,aAAO;AAAA,IACR,KAAK;AACJ,aAAO;AAAA,EACT;AACD;",
-  "names": []
-}

package/src/lib/utils/collaboratorState.ts

@@ -1,54 +0,0 @@
-import { TLInstancePresence } from '@tldraw/tlschema'
-import { Editor } from '../editor/Editor'
-
-/** The activity state of a collaborator */
-export type CollaboratorState = 'active' | 'idle' | 'inactive'
-
-/**
- * Get the activity state of a collaborator based on elapsed time since their last activity.
- *
- * @param editor - The editor instance
- * @param elapsed - Time in milliseconds since the collaborator's last activity
- * @returns The collaborator's activity state
- */
-export function getCollaboratorStateFromElapsedTime(
-	editor: Editor,
-	elapsed: number
-): CollaboratorState {
-	return elapsed > editor.options.collaboratorInactiveTimeoutMs
-		? 'inactive'
-		: elapsed > editor.options.collaboratorIdleTimeoutMs
-			? 'idle'
-			: 'active'
-}
-
-/**
- * Determine whether a collaborator should be shown based on their activity state
- * and the current instance state (following, highlighted users, etc.).
- *
- * @param editor - The editor instance
- * @param presence - The collaborator's presence data
- * @param state - The collaborator's activity state
- * @returns Whether the collaborator should be shown
- */
-export function shouldShowCollaborator(
-	editor: Editor,
-	presence: TLInstancePresence,
-	state: CollaboratorState
-): boolean {
-	const { followingUserId, highlightedUserIds } = editor.getInstanceState()
-
-	switch (state) {
-		case 'inactive':
-			// If they're inactive, only show if we're following them or they're highlighted
-			return followingUserId === presence.userId || highlightedUserIds.includes(presence.userId)
-		case 'idle':
-			// If they're idle and following us, hide them unless they have a chat message or are highlighted
-			if (presence.followingUserId === editor.user.getId()) {
-				return !!(presence.chatMessage || highlightedUserIds.includes(presence.userId))
-			}
-			return true
-		case 'active':
-			return true
-	}
-}