@tldraw/editor 4.3.0 → 4.4.0-canary.1e3b436e33e4

package/dist-esm/lib/editor/derivations/notVisibleShapes.mjs

@@ -1,32 +1,24 @@
 import { computed, isUninitialized } from "@tldraw/state";
 function notVisibleShapes(editor) {
-  return computed("notVisibleShapes", function updateNotVisibleShapes(prevValue) {
-    const shapeIds = editor.getCurrentPageShapeIds();
-    const nextValue = /* @__PURE__ */ new Set();
+  return computed("notVisibleShapes", function(prevValue) {
+    const allShapeIds = editor.getCurrentPageShapeIds();
     const viewportPageBounds = editor.getViewportPageBounds();
-    const viewMinX = viewportPageBounds.minX;
-    const viewMinY = viewportPageBounds.minY;
-    const viewMaxX = viewportPageBounds.maxX;
-    const viewMaxY = viewportPageBounds.maxY;
-    for (const id of shapeIds) {
-      const pageBounds = editor.getShapePageBounds(id);
-      if (pageBounds !== void 0 && pageBounds.maxX >= viewMinX && pageBounds.minX <= viewMaxX && pageBounds.maxY >= viewMinY && pageBounds.minY <= viewMaxY) {
-        continue;
+    const visibleIds = editor.getShapeIdsInsideBounds(viewportPageBounds);
+    const nextValue = /* @__PURE__ */ new Set();
+    for (const id of allShapeIds) {
+      if (!visibleIds.has(id)) {
+        const shape = editor.getShape(id);
+        if (!shape) continue;
+        const canCull = editor.getShapeUtil(shape.type).canCull(shape);
+        if (!canCull) continue;
+        nextValue.add(id);
       }
-      const shape = editor.getShape(id);
-      if (!shape) continue;
-      const canCull = editor.getShapeUtil(shape.type).canCull(shape);
-      if (!canCull) continue;
-      nextValue.add(id);
     }
-    if (isUninitialized(prevValue)) {
+    if (isUninitialized(prevValue) || prevValue.size !== nextValue.size) {
       return nextValue;
     }
-    if (prevValue.size !== nextValue.size) return nextValue;
     for (const prev of prevValue) {
-      if (!nextValue.has(prev)) {
-        return nextValue;
-      }
+      if (!nextValue.has(prev)) return nextValue;
     }
     return prevValue;
   });

package/dist-esm/lib/editor/derivations/notVisibleShapes.mjs.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../src/lib/editor/derivations/notVisibleShapes.ts"],
-  "sourcesContent": ["import { computed, isUninitialized } from '@tldraw/state'\nimport { TLShapeId } from '@tldraw/tlschema'\nimport { Editor } from '../Editor'\n\n/**\n * Non visible shapes are shapes outside of the viewport page bounds.\n *\n * @param editor - Instance of the tldraw Editor.\n * @returns Incremental derivation of non visible shapes.\n */\nexport function notVisibleShapes(editor: Editor) {\n\treturn computed<Set<TLShapeId>>('notVisibleShapes', function updateNotVisibleShapes(prevValue) {\n\t\tconst shapeIds = editor.getCurrentPageShapeIds()\n\t\tconst nextValue = new Set<TLShapeId>()\n\n\t\t// Extract viewport bounds once to avoid repeated property access\n\t\tconst viewportPageBounds = editor.getViewportPageBounds()\n\t\tconst viewMinX = viewportPageBounds.minX\n\t\tconst viewMinY = viewportPageBounds.minY\n\t\tconst viewMaxX = viewportPageBounds.maxX\n\t\tconst viewMaxY = viewportPageBounds.maxY\n\n\t\tfor (const id of shapeIds) {\n\t\t\tconst pageBounds = editor.getShapePageBounds(id)\n\n\t\t\t// Hybrid check: if bounds exist and shape overlaps viewport, it's visible.\n\t\t\t// This inlines Box.Collides to avoid function call overhead and the\n\t\t\t// redundant Contains check that Box.Includes was doing.\n\t\t\tif (\n\t\t\t\tpageBounds !== undefined &&\n\t\t\t\tpageBounds.maxX >= viewMinX &&\n\t\t\t\tpageBounds.minX <= viewMaxX &&\n\t\t\t\tpageBounds.maxY >= viewMinY &&\n\t\t\t\tpageBounds.minY <= viewMaxY\n\t\t\t) {\n\t\t\t\tcontinue\n\t\t\t}\n\n\t\t\t// Shape is outside viewport or has no bounds - check if it can be culled.\n\t\t\t// We defer getShape and canCull checks until here since most shapes are\n\t\t\t// typically visible and we can skip these calls for them.\n\t\t\tconst shape = editor.getShape(id)\n\t\t\tif (!shape) continue\n\n\t\t\tconst canCull = editor.getShapeUtil(shape.type).canCull(shape)\n\t\t\tif (!canCull) continue\n\n\t\t\tnextValue.add(id)\n\t\t}\n\n\t\tif (isUninitialized(prevValue)) {\n\t\t\treturn nextValue\n\t\t}\n\n\t\t// If there are more or less shapes, we know there's a change\n\t\tif (prevValue.size !== nextValue.size) return nextValue\n\n\t\t// If any of the old shapes are not in the new set, we know there's a change\n\t\tfor (const prev of prevValue) {\n\t\t\tif (!nextValue.has(prev)) {\n\t\t\t\treturn nextValue\n\t\t\t}\n\t\t}\n\n\t\t// If we've made it here, we know that the set is the same\n\t\treturn prevValue\n\t})\n}\n"],
-  "mappings": "AAAA,SAAS,UAAU,uBAAuB;AAUnC,SAAS,iBAAiB,QAAgB;AAChD,SAAO,SAAyB,oBAAoB,SAAS,uBAAuB,WAAW;AAC9F,UAAM,WAAW,OAAO,uBAAuB;AAC/C,UAAM,YAAY,oBAAI,IAAe;AAGrC,UAAM,qBAAqB,OAAO,sBAAsB;AACxD,UAAM,WAAW,mBAAmB;AACpC,UAAM,WAAW,mBAAmB;AACpC,UAAM,WAAW,mBAAmB;AACpC,UAAM,WAAW,mBAAmB;AAEpC,eAAW,MAAM,UAAU;AAC1B,YAAM,aAAa,OAAO,mBAAmB,EAAE;AAK/C,UACC,eAAe,UACf,WAAW,QAAQ,YACnB,WAAW,QAAQ,YACnB,WAAW,QAAQ,YACnB,WAAW,QAAQ,UAClB;AACD;AAAA,MACD;AAKA,YAAM,QAAQ,OAAO,SAAS,EAAE;AAChC,UAAI,CAAC,MAAO;AAEZ,YAAM,UAAU,OAAO,aAAa,MAAM,IAAI,EAAE,QAAQ,KAAK;AAC7D,UAAI,CAAC,QAAS;AAEd,gBAAU,IAAI,EAAE;AAAA,IACjB;AAEA,QAAI,gBAAgB,SAAS,GAAG;AAC/B,aAAO;AAAA,IACR;AAGA,QAAI,UAAU,SAAS,UAAU,KAAM,QAAO;AAG9C,eAAW,QAAQ,WAAW;AAC7B,UAAI,CAAC,UAAU,IAAI,IAAI,GAAG;AACzB,eAAO;AAAA,MACR;AAAA,IACD;AAGA,WAAO;AAAA,EACR,CAAC;AACF;",
+  "sourcesContent": ["import { computed, isUninitialized } from '@tldraw/state'\nimport { TLShapeId } from '@tldraw/tlschema'\nimport { Editor } from '../Editor'\n\n/**\n * Non visible shapes are shapes outside of the viewport page bounds.\n *\n * @param editor - Instance of the tldraw Editor.\n * @returns Incremental derivation of non visible shapes.\n */\nexport function notVisibleShapes(editor: Editor) {\n\treturn computed<Set<TLShapeId>>('notVisibleShapes', function (prevValue) {\n\t\tconst allShapeIds = editor.getCurrentPageShapeIds()\n\t\tconst viewportPageBounds = editor.getViewportPageBounds()\n\t\tconst visibleIds = editor.getShapeIdsInsideBounds(viewportPageBounds)\n\n\t\tconst nextValue = new Set<TLShapeId>()\n\n\t\t// Non-visible shapes are all shapes minus visible shapes\n\t\tfor (const id of allShapeIds) {\n\t\t\tif (!visibleIds.has(id)) {\n\t\t\t\tconst shape = editor.getShape(id)\n\t\t\t\tif (!shape) continue\n\n\t\t\t\tconst canCull = editor.getShapeUtil(shape.type).canCull(shape)\n\t\t\t\tif (!canCull) continue\n\n\t\t\t\tnextValue.add(id)\n\t\t\t}\n\t\t}\n\n\t\tif (isUninitialized(prevValue) || prevValue.size !== nextValue.size) {\n\t\t\treturn nextValue\n\t\t}\n\n\t\tfor (const prev of prevValue) {\n\t\t\tif (!nextValue.has(prev)) return nextValue\n\t\t}\n\n\t\treturn prevValue\n\t})\n}\n"],
+  "mappings": "AAAA,SAAS,UAAU,uBAAuB;AAUnC,SAAS,iBAAiB,QAAgB;AAChD,SAAO,SAAyB,oBAAoB,SAAU,WAAW;AACxE,UAAM,cAAc,OAAO,uBAAuB;AAClD,UAAM,qBAAqB,OAAO,sBAAsB;AACxD,UAAM,aAAa,OAAO,wBAAwB,kBAAkB;AAEpE,UAAM,YAAY,oBAAI,IAAe;AAGrC,eAAW,MAAM,aAAa;AAC7B,UAAI,CAAC,WAAW,IAAI,EAAE,GAAG;AACxB,cAAM,QAAQ,OAAO,SAAS,EAAE;AAChC,YAAI,CAAC,MAAO;AAEZ,cAAM,UAAU,OAAO,aAAa,MAAM,IAAI,EAAE,QAAQ,KAAK;AAC7D,YAAI,CAAC,QAAS;AAEd,kBAAU,IAAI,EAAE;AAAA,MACjB;AAAA,IACD;AAEA,QAAI,gBAAgB,SAAS,KAAK,UAAU,SAAS,UAAU,MAAM;AACpE,aAAO;AAAA,IACR;AAEA,eAAW,QAAQ,WAAW;AAC7B,UAAI,CAAC,UAAU,IAAI,IAAI,EAAG,QAAO;AAAA,IAClC;AAEA,WAAO;AAAA,EACR,CAAC;AACF;",
   "names": []
 }

package/dist-esm/lib/editor/managers/SpatialIndexManager/RBushIndex.mjs

@@ -0,0 +1,114 @@
+import RBush from "rbush";
+import { Box } from "../../../primitives/Box.mjs";
+class TldrawRBush extends RBush {
+}
+class RBushIndex {
+  rBush;
+  elementsInTree;
+  constructor() {
+    this.rBush = new TldrawRBush();
+    this.elementsInTree = /* @__PURE__ */ new Map();
+  }
+  /**
+   * Search for shapes within the given bounds.
+   * Returns set of shape IDs that intersect with the bounds.
+   */
+  search(bounds) {
+    const results = this.rBush.search({
+      minX: bounds.minX,
+      minY: bounds.minY,
+      maxX: bounds.maxX,
+      maxY: bounds.maxY
+    });
+    return new Set(results.map((e) => e.id));
+  }
+  /**
+   * Insert or update a shape in the spatial index.
+   * If the shape already exists, it will be removed first to prevent duplicates.
+   */
+  upsert(id, bounds) {
+    const existing = this.elementsInTree.get(id);
+    if (existing) {
+      this.rBush.remove(existing);
+    }
+    const element = {
+      minX: bounds.minX,
+      minY: bounds.minY,
+      maxX: bounds.maxX,
+      maxY: bounds.maxY,
+      id
+    };
+    this.rBush.insert(element);
+    this.elementsInTree.set(id, element);
+  }
+  /**
+   * Remove a shape from the spatial index.
+   */
+  remove(id) {
+    const element = this.elementsInTree.get(id);
+    if (element) {
+      this.rBush.remove(element);
+      this.elementsInTree.delete(id);
+    }
+  }
+  /**
+   * Bulk load elements into the spatial index.
+   * More efficient than individual inserts for initial loading.
+   */
+  bulkLoad(elements) {
+    this.rBush.load(elements);
+    for (const element of elements) {
+      this.elementsInTree.set(element.id, element);
+    }
+  }
+  /**
+   * Clear all elements from the spatial index.
+   */
+  clear() {
+    this.rBush.clear();
+    this.elementsInTree.clear();
+  }
+  /**
+   * Check if a shape is in the spatial index.
+   */
+  has(id) {
+    return this.elementsInTree.has(id);
+  }
+  /**
+   * Get the number of elements in the spatial index.
+   */
+  getSize() {
+    return this.elementsInTree.size;
+  }
+  /**
+   * Get all shape IDs currently in the spatial index.
+   */
+  getAllShapeIds() {
+    return Array.from(this.elementsInTree.keys());
+  }
+  /**
+   * Get the bounds currently stored in the spatial index for a shape.
+   * Returns undefined if the shape is not in the index.
+   */
+  getBounds(id) {
+    const element = this.elementsInTree.get(id);
+    if (!element) return void 0;
+    return new Box(
+      element.minX,
+      element.minY,
+      element.maxX - element.minX,
+      element.maxY - element.minY
+    );
+  }
+  /**
+   * Dispose of the spatial index.
+   * Clears all data structures to prevent memory leaks.
+   */
+  dispose() {
+    this.clear();
+  }
+}
+export {
+  RBushIndex
+};
+//# sourceMappingURL=RBushIndex.mjs.map

package/dist-esm/lib/editor/managers/SpatialIndexManager/RBushIndex.mjs.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../../src/lib/editor/managers/SpatialIndexManager/RBushIndex.ts"],
+  "sourcesContent": ["import type { TLShapeId } from '@tldraw/tlschema'\nimport RBush from 'rbush'\nimport { Box } from '../../../primitives/Box'\n\n/**\n * Element stored in the R-tree spatial index.\n * Contains bounds (minX, minY, maxX, maxY) and shape ID.\n */\nexport interface SpatialElement {\n\tminX: number\n\tminY: number\n\tmaxX: number\n\tmaxY: number\n\tid: TLShapeId\n}\n\n/**\n * Custom RBush class for tldraw shapes.\n */\nclass TldrawRBush extends RBush<SpatialElement> {}\n\n/**\n * Wrapper around RBush R-tree for efficient spatial queries.\n * Maintains a map of elements currently in the tree for efficient updates.\n */\nexport class RBushIndex {\n\tprivate rBush: TldrawRBush\n\tprivate elementsInTree: Map<TLShapeId, SpatialElement>\n\n\tconstructor() {\n\t\tthis.rBush = new TldrawRBush()\n\t\tthis.elementsInTree = new Map()\n\t}\n\n\t/**\n\t * Search for shapes within the given bounds.\n\t * Returns set of shape IDs that intersect with the bounds.\n\t */\n\tsearch(bounds: Box): Set<TLShapeId> {\n\t\tconst results = this.rBush.search({\n\t\t\tminX: bounds.minX,\n\t\t\tminY: bounds.minY,\n\t\t\tmaxX: bounds.maxX,\n\t\t\tmaxY: bounds.maxY,\n\t\t})\n\t\treturn new Set(results.map((e: SpatialElement) => e.id))\n\t}\n\n\t/**\n\t * Insert or update a shape in the spatial index.\n\t * If the shape already exists, it will be removed first to prevent duplicates.\n\t */\n\tupsert(id: TLShapeId, bounds: Box): void {\n\t\t// Remove existing entry to prevent map-tree desync\n\t\tconst existing = this.elementsInTree.get(id)\n\t\tif (existing) {\n\t\t\tthis.rBush.remove(existing)\n\t\t}\n\n\t\tconst element: SpatialElement = {\n\t\t\tminX: bounds.minX,\n\t\t\tminY: bounds.minY,\n\t\t\tmaxX: bounds.maxX,\n\t\t\tmaxY: bounds.maxY,\n\t\t\tid,\n\t\t}\n\t\tthis.rBush.insert(element)\n\t\tthis.elementsInTree.set(id, element)\n\t}\n\n\t/**\n\t * Remove a shape from the spatial index.\n\t */\n\tremove(id: TLShapeId): void {\n\t\tconst element = this.elementsInTree.get(id)\n\t\tif (element) {\n\t\t\tthis.rBush.remove(element)\n\t\t\tthis.elementsInTree.delete(id)\n\t\t}\n\t}\n\n\t/**\n\t * Bulk load elements into the spatial index.\n\t * More efficient than individual inserts for initial loading.\n\t */\n\tbulkLoad(elements: SpatialElement[]): void {\n\t\tthis.rBush.load(elements)\n\t\tfor (const element of elements) {\n\t\t\tthis.elementsInTree.set(element.id, element)\n\t\t}\n\t}\n\n\t/**\n\t * Clear all elements from the spatial index.\n\t */\n\tclear(): void {\n\t\tthis.rBush.clear()\n\t\tthis.elementsInTree.clear()\n\t}\n\n\t/**\n\t * Check if a shape is in the spatial index.\n\t */\n\thas(id: TLShapeId): boolean {\n\t\treturn this.elementsInTree.has(id)\n\t}\n\n\t/**\n\t * Get the number of elements in the spatial index.\n\t */\n\tgetSize(): number {\n\t\treturn this.elementsInTree.size\n\t}\n\n\t/**\n\t * Get all shape IDs currently in the spatial index.\n\t */\n\tgetAllShapeIds(): TLShapeId[] {\n\t\treturn Array.from(this.elementsInTree.keys())\n\t}\n\n\t/**\n\t * Get the bounds currently stored in the spatial index for a shape.\n\t * Returns undefined if the shape is not in the index.\n\t */\n\tgetBounds(id: TLShapeId): Box | undefined {\n\t\tconst element = this.elementsInTree.get(id)\n\t\tif (!element) return undefined\n\t\treturn new Box(\n\t\t\telement.minX,\n\t\t\telement.minY,\n\t\t\telement.maxX - element.minX,\n\t\t\telement.maxY - element.minY\n\t\t)\n\t}\n\n\t/**\n\t * Dispose of the spatial index.\n\t * Clears all data structures to prevent memory leaks.\n\t */\n\tdispose(): void {\n\t\tthis.clear()\n\t}\n}\n"],
+  "mappings": "AACA,OAAO,WAAW;AAClB,SAAS,WAAW;AAiBpB,MAAM,oBAAoB,MAAsB;AAAC;AAM1C,MAAM,WAAW;AAAA,EACf;AAAA,EACA;AAAA,EAER,cAAc;AACb,SAAK,QAAQ,IAAI,YAAY;AAC7B,SAAK,iBAAiB,oBAAI,IAAI;AAAA,EAC/B;AAAA;AAAA;AAAA;AAAA;AAAA,EAMA,OAAO,QAA6B;AACnC,UAAM,UAAU,KAAK,MAAM,OAAO;AAAA,MACjC,MAAM,OAAO;AAAA,MACb,MAAM,OAAO;AAAA,MACb,MAAM,OAAO;AAAA,MACb,MAAM,OAAO;AAAA,IACd,CAAC;AACD,WAAO,IAAI,IAAI,QAAQ,IAAI,CAAC,MAAsB,EAAE,EAAE,CAAC;AAAA,EACxD;AAAA;AAAA;AAAA;AAAA;AAAA,EAMA,OAAO,IAAe,QAAmB;AAExC,UAAM,WAAW,KAAK,eAAe,IAAI,EAAE;AAC3C,QAAI,UAAU;AACb,WAAK,MAAM,OAAO,QAAQ;AAAA,IAC3B;AAEA,UAAM,UAA0B;AAAA,MAC/B,MAAM,OAAO;AAAA,MACb,MAAM,OAAO;AAAA,MACb,MAAM,OAAO;AAAA,MACb,MAAM,OAAO;AAAA,MACb;AAAA,IACD;AACA,SAAK,MAAM,OAAO,OAAO;AACzB,SAAK,eAAe,IAAI,IAAI,OAAO;AAAA,EACpC;AAAA;AAAA;AAAA;AAAA,EAKA,OAAO,IAAqB;AAC3B,UAAM,UAAU,KAAK,eAAe,IAAI,EAAE;AAC1C,QAAI,SAAS;AACZ,WAAK,MAAM,OAAO,OAAO;AACzB,WAAK,eAAe,OAAO,EAAE;AAAA,IAC9B;AAAA,EACD;AAAA;AAAA;AAAA;AAAA;AAAA,EAMA,SAAS,UAAkC;AAC1C,SAAK,MAAM,KAAK,QAAQ;AACxB,eAAW,WAAW,UAAU;AAC/B,WAAK,eAAe,IAAI,QAAQ,IAAI,OAAO;AAAA,IAC5C;AAAA,EACD;AAAA;AAAA;AAAA;AAAA,EAKA,QAAc;AACb,SAAK,MAAM,MAAM;AACjB,SAAK,eAAe,MAAM;AAAA,EAC3B;AAAA;AAAA;AAAA;AAAA,EAKA,IAAI,IAAwB;AAC3B,WAAO,KAAK,eAAe,IAAI,EAAE;AAAA,EAClC;AAAA;AAAA;AAAA;AAAA,EAKA,UAAkB;AACjB,WAAO,KAAK,eAAe;AAAA,EAC5B;AAAA;AAAA;AAAA;AAAA,EAKA,iBAA8B;AAC7B,WAAO,MAAM,KAAK,KAAK,eAAe,KAAK,CAAC;AAAA,EAC7C;AAAA;AAAA;AAAA;AAAA;AAAA,EAMA,UAAU,IAAgC;AACzC,UAAM,UAAU,KAAK,eAAe,IAAI,EAAE;AAC1C,QAAI,CAAC,QAAS,QAAO;AACrB,WAAO,IAAI;AAAA,MACV,QAAQ;AAAA,MACR,QAAQ;AAAA,MACR,QAAQ,OAAO,QAAQ;AAAA,MACvB,QAAQ,OAAO,QAAQ;AAAA,IACxB;AAAA,EACD;AAAA;AAAA;AAAA;AAAA;AAAA,EAMA,UAAgB;AACf,SAAK,MAAM;AAAA,EACZ;AACD;",
+  "names": []
+}

package/dist-esm/lib/editor/managers/SpatialIndexManager/SpatialIndexManager.mjs

@@ -0,0 +1,161 @@
+import { RESET_VALUE, computed, isUninitialized } from "@tldraw/state";
+import { isShape } from "@tldraw/tlschema";
+import { objectMapValues } from "@tldraw/utils";
+import { Box } from "../../../primitives/Box.mjs";
+import { RBushIndex } from "./RBushIndex.mjs";
+class SpatialIndexManager {
+  constructor(editor) {
+    this.editor = editor;
+    this.rbush = new RBushIndex();
+    this.spatialIndexComputed = this.createSpatialIndexComputed();
+  }
+  rbush;
+  spatialIndexComputed;
+  lastPageId = null;
+  createSpatialIndexComputed() {
+    const shapeHistory = this.editor.store.query.filterHistory("shape");
+    return computed("spatialIndex", (_prevValue, lastComputedEpoch) => {
+      if (isUninitialized(_prevValue)) {
+        return this.buildFromScratch(lastComputedEpoch);
+      }
+      const shapeDiff = shapeHistory.getDiffSince(lastComputedEpoch);
+      if (shapeDiff === RESET_VALUE) {
+        return this.buildFromScratch(lastComputedEpoch);
+      }
+      const currentPageId = this.editor.getCurrentPageId();
+      if (this.lastPageId !== currentPageId) {
+        return this.buildFromScratch(lastComputedEpoch);
+      }
+      if (shapeDiff.length === 0) {
+        return lastComputedEpoch;
+      }
+      this.processIncrementalUpdate(shapeDiff);
+      return lastComputedEpoch;
+    });
+  }
+  buildFromScratch(epoch) {
+    this.rbush.clear();
+    this.lastPageId = this.editor.getCurrentPageId();
+    const shapes = this.editor.getCurrentPageShapes();
+    const elements = [];
+    for (const shape of shapes) {
+      const bounds = this.editor.getShapePageBounds(shape.id);
+      if (bounds) {
+        elements.push({
+          minX: bounds.minX,
+          minY: bounds.minY,
+          maxX: bounds.maxX,
+          maxY: bounds.maxY,
+          id: shape.id
+        });
+      }
+    }
+    this.rbush.bulkLoad(elements);
+    return epoch;
+  }
+  processIncrementalUpdate(shapeDiff) {
+    const processedShapeIds = /* @__PURE__ */ new Set();
+    for (const changes of shapeDiff) {
+      for (const shape of objectMapValues(changes.added)) {
+        if (isShape(shape) && this.editor.getAncestorPageId(shape) === this.lastPageId) {
+          const bounds = this.editor.getShapePageBounds(shape.id);
+          if (bounds) {
+            this.rbush.upsert(shape.id, bounds);
+          }
+          processedShapeIds.add(shape.id);
+        }
+      }
+      for (const shape of objectMapValues(changes.removed)) {
+        if (isShape(shape)) {
+          this.rbush.remove(shape.id);
+          processedShapeIds.add(shape.id);
+        }
+      }
+      for (const [from, to] of objectMapValues(changes.updated)) {
+        if (!isShape(to)) continue;
+        processedShapeIds.add(to.id);
+        const wasOnPage = this.editor.getAncestorPageId(from) === this.lastPageId;
+        const isOnPage = this.editor.getAncestorPageId(to) === this.lastPageId;
+        if (isOnPage) {
+          const bounds = this.editor.getShapePageBounds(to.id);
+          if (bounds) {
+            this.rbush.upsert(to.id, bounds);
+          }
+        } else if (wasOnPage) {
+          this.rbush.remove(to.id);
+        }
+      }
+    }
+    const allShapeIds = this.rbush.getAllShapeIds();
+    for (const shapeId of allShapeIds) {
+      if (processedShapeIds.has(shapeId)) continue;
+      const currentBounds = this.editor.getShapePageBounds(shapeId);
+      const indexedBounds = this.rbush.getBounds(shapeId);
+      if (!this.areBoundsEqual(currentBounds, indexedBounds)) {
+        if (currentBounds) {
+          this.rbush.upsert(shapeId, currentBounds);
+        } else {
+          this.rbush.remove(shapeId);
+        }
+      }
+    }
+  }
+  areBoundsEqual(a, b) {
+    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;
+  }
+  /**
+   * Get shape IDs within the given bounds.
+   * Optimized for viewport culling queries.
+   *
+   * Note: Results are unordered. If you need z-order, combine with sorted shapes:
+   * ```ts
+   * const candidates = editor.spatialIndex.getShapeIdsInsideBounds(bounds)
+   * const sorted = editor.getCurrentPageShapesSorted().filter(s => candidates.has(s.id))
+   * ```
+   *
+   * @param bounds - The bounds to search within
+   * @returns Unordered set of shape IDs within the bounds
+   *
+   * @public
+   */
+  getShapeIdsInsideBounds(bounds) {
+    this.spatialIndexComputed.get();
+    return this.rbush.search(bounds);
+  }
+  /**
+   * Get shape IDs at a point (with optional margin).
+   * Creates a small bounding box around the point and searches the spatial index.
+   *
+   * Note: Results are unordered. If you need z-order, combine with sorted shapes:
+   * ```ts
+   * const candidates = editor.spatialIndex.getShapeIdsAtPoint(point, margin)
+   * const sorted = editor.getCurrentPageShapesSorted().filter(s => candidates.has(s.id))
+   * ```
+   *
+   * @param point - The point to search at
+   * @param margin - The margin around the point to search (default: 0)
+   * @returns Unordered set of shape IDs that could potentially contain the point
+   *
+   * @public
+   */
+  getShapeIdsAtPoint(point, margin = 0) {
+    this.spatialIndexComputed.get();
+    return this.rbush.search(new Box(point.x - margin, point.y - margin, margin * 2, margin * 2));
+  }
+  /**
+   * Dispose of the spatial index manager.
+   * Clears the R-tree to prevent memory leaks.
+   *
+   * @public
+   */
+  dispose() {
+    this.rbush.dispose();
+    this.lastPageId = null;
+  }
+}
+export {
+  SpatialIndexManager
+};
+//# sourceMappingURL=SpatialIndexManager.mjs.map

package/dist-esm/lib/editor/managers/SpatialIndexManager/SpatialIndexManager.mjs.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../../src/lib/editor/managers/SpatialIndexManager/SpatialIndexManager.ts"],
+  "sourcesContent": ["import { Computed, RESET_VALUE, computed, isUninitialized } from '@tldraw/state'\nimport type { RecordsDiff } from '@tldraw/store'\nimport type { TLRecord } from '@tldraw/tlschema'\nimport { TLPageId, TLShape, TLShapeId, isShape } from '@tldraw/tlschema'\nimport { objectMapValues } from '@tldraw/utils'\nimport { Box } from '../../../primitives/Box'\nimport type { Editor } from '../../Editor'\nimport { RBushIndex, type SpatialElement } from './RBushIndex'\n\n/**\n * Manages spatial indexing for efficient shape location queries.\n *\n * Uses an R-tree (via RBush) to enable O(log n) spatial queries instead of O(n) iteration.\n * Handles shapes with computed bounds (arrows, groups, custom shapes) by checking all shapes'\n * bounds on each update using the reactive bounds cache.\n *\n * Key features:\n * - Incremental updates using filterHistory pattern\n * - Leverages existing bounds cache reactivity for dependency tracking\n * - Works with any custom shape type with computed bounds\n * - Per-page index (rebuilds on page change)\n * - Optimized for viewport culling queries\n *\n * @internal\n */\nexport class SpatialIndexManager {\n\tprivate rbush: RBushIndex\n\tprivate spatialIndexComputed: Computed<number>\n\tprivate lastPageId: TLPageId | null = null\n\n\tconstructor(public readonly editor: Editor) {\n\t\tthis.rbush = new RBushIndex()\n\t\tthis.spatialIndexComputed = this.createSpatialIndexComputed()\n\t}\n\n\tprivate createSpatialIndexComputed() {\n\t\tconst shapeHistory = this.editor.store.query.filterHistory('shape')\n\n\t\treturn computed<number>('spatialIndex', (_prevValue, lastComputedEpoch) => {\n\t\t\tif (isUninitialized(_prevValue)) {\n\t\t\t\treturn this.buildFromScratch(lastComputedEpoch)\n\t\t\t}\n\n\t\t\tconst shapeDiff = shapeHistory.getDiffSince(lastComputedEpoch)\n\n\t\t\tif (shapeDiff === RESET_VALUE) {\n\t\t\t\treturn this.buildFromScratch(lastComputedEpoch)\n\t\t\t}\n\n\t\t\tconst currentPageId = this.editor.getCurrentPageId()\n\t\t\tif (this.lastPageId !== currentPageId) {\n\t\t\t\treturn this.buildFromScratch(lastComputedEpoch)\n\t\t\t}\n\n\t\t\t// No shape changes - index is already up to date\n\t\t\tif (shapeDiff.length === 0) {\n\t\t\t\treturn lastComputedEpoch\n\t\t\t}\n\n\t\t\t// Process incremental updates\n\t\t\tthis.processIncrementalUpdate(shapeDiff)\n\n\t\t\treturn lastComputedEpoch\n\t\t})\n\t}\n\n\tprivate buildFromScratch(epoch: number): number {\n\t\tthis.rbush.clear()\n\t\tthis.lastPageId = this.editor.getCurrentPageId()\n\n\t\tconst shapes = this.editor.getCurrentPageShapes()\n\t\tconst elements: SpatialElement[] = []\n\n\t\t// Collect all shape elements for bulk loading\n\t\tfor (const shape of shapes) {\n\t\t\tconst bounds = this.editor.getShapePageBounds(shape.id)\n\t\t\tif (bounds) {\n\t\t\t\telements.push({\n\t\t\t\t\tminX: bounds.minX,\n\t\t\t\t\tminY: bounds.minY,\n\t\t\t\t\tmaxX: bounds.maxX,\n\t\t\t\t\tmaxY: bounds.maxY,\n\t\t\t\t\tid: shape.id,\n\t\t\t\t})\n\t\t\t}\n\t\t}\n\n\t\t// Bulk load for efficiency\n\t\tthis.rbush.bulkLoad(elements)\n\n\t\treturn epoch\n\t}\n\n\tprivate processIncrementalUpdate(shapeDiff: RecordsDiff<TLRecord>[]): void {\n\t\t// Track shapes we've already processed from the diff\n\t\tconst processedShapeIds = new Set<TLShapeId>()\n\n\t\t// 1. Process shape additions, removals, and updates from diff\n\t\tfor (const changes of shapeDiff) {\n\t\t\t// Handle additions (only for shapes on current page)\n\t\t\tfor (const shape of objectMapValues(changes.added) as TLShape[]) {\n\t\t\t\tif (isShape(shape) && this.editor.getAncestorPageId(shape) === this.lastPageId) {\n\t\t\t\t\tconst bounds = this.editor.getShapePageBounds(shape.id)\n\t\t\t\t\tif (bounds) {\n\t\t\t\t\t\tthis.rbush.upsert(shape.id, bounds)\n\t\t\t\t\t}\n\t\t\t\t\tprocessedShapeIds.add(shape.id)\n\t\t\t\t}\n\t\t\t}\n\n\t\t\t// Handle removals\n\t\t\tfor (const shape of objectMapValues(changes.removed) as TLShape[]) {\n\t\t\t\tif (isShape(shape)) {\n\t\t\t\t\tthis.rbush.remove(shape.id)\n\t\t\t\t\tprocessedShapeIds.add(shape.id)\n\t\t\t\t}\n\t\t\t}\n\n\t\t\t// Handle updated shapes: page changes and bounds updates\n\t\t\tfor (const [from, to] of objectMapValues(changes.updated) as [TLShape, TLShape][]) {\n\t\t\t\tif (!isShape(to)) continue\n\t\t\t\tprocessedShapeIds.add(to.id)\n\n\t\t\t\tconst wasOnPage = this.editor.getAncestorPageId(from) === this.lastPageId\n\t\t\t\tconst isOnPage = this.editor.getAncestorPageId(to) === this.lastPageId\n\n\t\t\t\tif (isOnPage) {\n\t\t\t\t\tconst bounds = this.editor.getShapePageBounds(to.id)\n\t\t\t\t\tif (bounds) {\n\t\t\t\t\t\tthis.rbush.upsert(to.id, bounds)\n\t\t\t\t\t}\n\t\t\t\t} else if (wasOnPage) {\n\t\t\t\t\tthis.rbush.remove(to.id)\n\t\t\t\t}\n\t\t\t}\n\t\t}\n\n\t\t// 2. Check remaining shapes in index for bounds changes\n\t\t// This handles shapes with computed bounds (arrows bound to moved shapes, groups with moved children, etc.)\n\t\tconst allShapeIds = this.rbush.getAllShapeIds()\n\n\t\tfor (const shapeId of allShapeIds) {\n\t\t\tif (processedShapeIds.has(shapeId)) continue\n\n\t\t\tconst currentBounds = this.editor.getShapePageBounds(shapeId)\n\t\t\tconst indexedBounds = this.rbush.getBounds(shapeId)\n\n\t\t\tif (!this.areBoundsEqual(currentBounds, indexedBounds)) {\n\t\t\t\tif (currentBounds) {\n\t\t\t\t\tthis.rbush.upsert(shapeId, currentBounds)\n\t\t\t\t} else {\n\t\t\t\t\tthis.rbush.remove(shapeId)\n\t\t\t\t}\n\t\t\t}\n\t\t}\n\t}\n\n\tprivate areBoundsEqual(a: Box | undefined, b: Box | undefined): boolean {\n\t\tif (!a && !b) return true\n\t\tif (!a || !b) return false\n\t\treturn a.minX === b.minX && a.minY === b.minY && a.maxX === b.maxX && a.maxY === b.maxY\n\t}\n\n\t/**\n\t * Get shape IDs within the given bounds.\n\t * Optimized for viewport culling queries.\n\t *\n\t * Note: Results are unordered. If you need z-order, combine with sorted shapes:\n\t * ```ts\n\t * const candidates = editor.spatialIndex.getShapeIdsInsideBounds(bounds)\n\t * const sorted = editor.getCurrentPageShapesSorted().filter(s => candidates.has(s.id))\n\t * ```\n\t *\n\t * @param bounds - The bounds to search within\n\t * @returns Unordered set of shape IDs within the bounds\n\t *\n\t * @public\n\t */\n\tgetShapeIdsInsideBounds(bounds: Box): Set<TLShapeId> {\n\t\tthis.spatialIndexComputed.get()\n\t\treturn this.rbush.search(bounds)\n\t}\n\n\t/**\n\t * Get shape IDs at a point (with optional margin).\n\t * Creates a small bounding box around the point and searches the spatial index.\n\t *\n\t * Note: Results are unordered. If you need z-order, combine with sorted shapes:\n\t * ```ts\n\t * const candidates = editor.spatialIndex.getShapeIdsAtPoint(point, margin)\n\t * const sorted = editor.getCurrentPageShapesSorted().filter(s => candidates.has(s.id))\n\t * ```\n\t *\n\t * @param point - The point to search at\n\t * @param margin - The margin around the point to search (default: 0)\n\t * @returns Unordered set of shape IDs that could potentially contain the point\n\t *\n\t * @public\n\t */\n\tgetShapeIdsAtPoint(point: { x: number; y: number }, margin = 0): Set<TLShapeId> {\n\t\tthis.spatialIndexComputed.get()\n\t\treturn this.rbush.search(new Box(point.x - margin, point.y - margin, margin * 2, margin * 2))\n\t}\n\n\t/**\n\t * Dispose of the spatial index manager.\n\t * Clears the R-tree to prevent memory leaks.\n\t *\n\t * @public\n\t */\n\tdispose(): void {\n\t\tthis.rbush.dispose()\n\t\tthis.lastPageId = null\n\t}\n}\n"],
+  "mappings": "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",
+  "names": []
+}

package/dist-esm/version.mjs

@@ -1,8 +1,8 @@
-const version = "4.3.0";
+const version = "4.4.0-canary.1e3b436e33e4";
 const publishDates = {
   major: "2025-09-18T14:39:22.803Z",
-  minor: "2026-01-21T11:56:39.106Z",
-  patch: "2026-01-21T11:56:39.106Z"
+  minor: "2026-01-21T13:45:38.121Z",
+  patch: "2026-01-21T13:45:38.121Z"
 };
 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 = '4.3.0'\nexport const publishDates = {\n\tmajor: '2025-09-18T14:39:22.803Z',\n\tminor: '2026-01-21T11:56:39.106Z',\n\tpatch: '2026-01-21T11:56:39.106Z',\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 = '4.4.0-canary.1e3b436e33e4'\nexport const publishDates = {\n\tmajor: '2025-09-18T14:39:22.803Z',\n\tminor: '2026-01-21T13:45:38.121Z',\n\tpatch: '2026-01-21T13:45:38.121Z',\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": "tldraw infinite canvas SDK (editor).",
-  "version": "4.3.0",
+  "version": "4.4.0-canary.1e3b436e33e4",
   "author": {
     "name": "tldraw Inc.",
     "email": "hello@tldraw.com"
@@ -50,19 +50,20 @@
     "@tiptap/core": "^3.12.1",
     "@tiptap/pm": "^3.12.1",
     "@tiptap/react": "^3.12.1",
-    "@tldraw/state": "4.3.0",
-    "@tldraw/state-react": "4.3.0",
-    "@tldraw/store": "4.3.0",
-    "@tldraw/tlschema": "4.3.0",
-    "@tldraw/utils": "4.3.0",
-    "@tldraw/validate": "4.3.0",
+    "@tldraw/state": "4.4.0-canary.1e3b436e33e4",
+    "@tldraw/state-react": "4.4.0-canary.1e3b436e33e4",
+    "@tldraw/store": "4.4.0-canary.1e3b436e33e4",
+    "@tldraw/tlschema": "4.4.0-canary.1e3b436e33e4",
+    "@tldraw/utils": "4.4.0-canary.1e3b436e33e4",
+    "@tldraw/validate": "4.4.0-canary.1e3b436e33e4",
     "@types/core-js": "^2.5.8",
     "@use-gesture/react": "^10.3.1",
     "classnames": "^2.5.1",
     "core-js": "^3.40.0",
     "eventemitter3": "^4.0.7",
     "idb": "^7.1.1",
-    "is-plain-object": "^5.0.0"
+    "is-plain-object": "^5.0.0",
+    "rbush": "^4.0.1"
   },
   "peerDependencies": {
     "react": "^18.2.0 || ^19.2.1",
@@ -73,6 +74,7 @@
     "@testing-library/dom": "^10.0.0",
     "@testing-library/react": "^16.0.0",
     "@types/benchmark": "^2.1.5",
+    "@types/rbush": "^4.0.0",
     "@types/react": "^19.2.7",
     "@types/react-dom": "^19.2.3",
     "@types/wicg-file-system-access": "^2020.9.8",

package/src/index.ts

@@ -164,6 +164,7 @@ export {
 	type SnapData,
 	type SnapIndicator,
 } from './lib/editor/managers/SnapManager/SnapManager'
+export { SpatialIndexManager } from './lib/editor/managers/SpatialIndexManager/SpatialIndexManager'
 export {
 	TextManager,
 	type TLMeasureTextOpts,

package/src/lib/components/default-components/DefaultCanvas.tsx

@@ -412,11 +412,7 @@ function ReflowIfNeeded() {
 		'reflow for culled shapes',
 		() => {
 			const culledShapes = editor.getCulledShapes()
-			if (
-				culledShapesRef.current.size === culledShapes.size &&
-				[...culledShapes].every((id) => culledShapesRef.current.has(id))
-			)
-				return
+			if (culledShapesRef.current === culledShapes) return
 
 			culledShapesRef.current = culledShapes
 			const canvas = document.getElementsByClassName('tl-canvas')

package/src/lib/editor/Editor.ts

@@ -149,6 +149,7 @@ import { HistoryManager } from './managers/HistoryManager/HistoryManager'
 import { InputsManager } from './managers/InputsManager/InputsManager'
 import { ScribbleManager } from './managers/ScribbleManager/ScribbleManager'
 import { SnapManager } from './managers/SnapManager/SnapManager'
+import { SpatialIndexManager } from './managers/SpatialIndexManager/SpatialIndexManager'
 import { TextManager } from './managers/TextManager/TextManager'
 import { TickManager } from './managers/TickManager/TickManager'
 import { UserPreferencesManager } from './managers/UserPreferencesManager/UserPreferencesManager'
@@ -308,6 +309,9 @@ export class Editor extends EventEmitter<TLEventMap> {
 
 		this.snaps = new SnapManager(this)
 
+		this._spatialIndex = new SpatialIndexManager(this)
+		this.disposables.add(() => this._spatialIndex.dispose())
+
 		this.disposables.add(this.timers.dispose)
 
 		this._cameraOptions.set({ ...DEFAULT_CAMERA_OPTIONS, ...cameraOptions })
@@ -895,6 +899,8 @@ export class Editor extends EventEmitter<TLEventMap> {
 	 */
 	readonly snaps: SnapManager
 
+	private readonly _spatialIndex: SpatialIndexManager
+
 	/**
 	 * A manager for the any asynchronous events and making sure they're
 	 * cleaned up upon disposal.
@@ -5135,6 +5141,7 @@ export class Editor extends EventEmitter<TLEventMap> {
 	}
 
 	private _notVisibleShapes = notVisibleShapes(this)
+	private _culledShapesCache: Set<TLShapeId> | null = null
 
 	/**
 	 * Get culled shapes (those that should not render), taking into account which shapes are selected or editing.
@@ -5146,16 +5153,41 @@ export class Editor extends EventEmitter<TLEventMap> {
 		const notVisibleShapes = this.getNotVisibleShapes()
 		const selectedShapeIds = this.getSelectedShapeIds()
 		const editingId = this.getEditingShapeId()
-		const culledShapes = new Set<TLShapeId>(notVisibleShapes)
+		const nextValue = new Set<TLShapeId>(notVisibleShapes)
 		// we don't cull the shape we are editing
 		if (editingId) {
-			culledShapes.delete(editingId)
+			nextValue.delete(editingId)
 		}
 		// we also don't cull selected shapes
 		selectedShapeIds.forEach((id) => {
-			culledShapes.delete(id)
+			nextValue.delete(id)
 		})
-		return culledShapes
+
+		// Cache optimization: return same Set object if contents unchanged
+		// This allows consumers to use === comparison and prevents unnecessary re-renders
+		const prevValue = this._culledShapesCache
+		if (prevValue) {
+			// If sizes differ, contents must differ
+			if (prevValue.size !== nextValue.size) {
+				this._culledShapesCache = nextValue
+				return nextValue
+			}
+
+			// Check if all elements are the same
+			for (const id of prevValue) {
+				if (!nextValue.has(id)) {
+					// Found a difference, update cache and return new set
+					this._culledShapesCache = nextValue
+					return nextValue
+				}
+			}
+
+			// Loop completed without finding differences - contents identical
+			return prevValue
+		}
+
+		this._culledShapesCache = nextValue
+		return nextValue
 	}
 
 	/**
@@ -5222,11 +5254,18 @@ export class Editor extends EventEmitter<TLEventMap> {
 		let inMarginClosestToEdgeDistance = Infinity
 		let inMarginClosestToEdgeHit: TLShape | null = null
 
+		// Use larger margin for spatial search to account for edge distance checks
+		const searchMargin = Math.max(innerMargin, outerMargin, this.options.hitTestMargin / zoomLevel)
+		const candidateIds = this._spatialIndex.getShapeIdsAtPoint(point, searchMargin)
+
 		const shapesToCheck = (
 			opts.renderingOnly
 				? this.getCurrentPageRenderingShapesSorted()
 				: this.getCurrentPageShapesSorted()
 		).filter((shape) => {
+			// Frames have labels positioned above the shape (outside bounds), so always include them
+			if (!candidateIds.has(shape.id) && !this.isShapeOfType(shape, 'frame')) return false
+
 			if (
 				(shape.isLocked && !hitLocked) ||
 				this.isShapeHidden(shape) ||
@@ -5412,11 +5451,41 @@ export class Editor extends EventEmitter<TLEventMap> {
 		point: VecLike,
 		opts = {} as { margin?: number; hitInside?: boolean }
 	): TLShape[] {
+		const margin = opts.margin ?? 0
+		const candidateIds = this._spatialIndex.getShapeIdsAtPoint(point, margin)
+
+		// Get all page shapes in z-index order and filter to candidates that pass isPointInShape
+		// Frames are always checked because their labels can be outside their bounds
 		return this.getCurrentPageShapesSorted()
-			.filter((shape) => !this.isShapeHidden(shape) && this.isPointInShape(shape, point, opts))
+			.filter((shape) => {
+				if (this.isShapeHidden(shape)) return false
+				if (!candidateIds.has(shape.id) && !this.isShapeOfType(shape, 'frame')) return false
+				return this.isPointInShape(shape, point, opts)
+			})
 			.reverse()
 	}
 
+	/**
+	 * Get shape IDs within the given bounds.
+	 *
+	 * Note: Uses shape page bounds only. Frames with labels outside their bounds
+	 * may not be included even if the label is within the search bounds.
+	 *
+	 * Note: Results are unordered. If you need z-order, combine with sorted shapes:
+	 * ```ts
+	 * const candidates = editor.getShapeIdsInsideBounds(bounds)
+	 * const sorted = editor.getCurrentPageShapesSorted().filter(s => candidates.has(s.id))
+	 * ```
+	 *
+	 * @param bounds - The bounds to search within.
+	 * @returns Unordered set of shape IDs within the given bounds.
+	 *
+	 * @internal
+	 */
+	getShapeIdsInsideBounds(bounds: Box): Set<TLShapeId> {
+		return this._spatialIndex.getShapeIdsInsideBounds(bounds)
+	}
+
 	/**
 	 * Test whether a point (in the current page space) will will a shape. This method takes into account masks,
 	 * such as when a shape is the child of a frame and is partially clipped by the frame.