@tldraw/editor 3.13.0-canary.eb5f191f61ac → 3.13.0-canary.ee08fd8a3063

package/dist-esm/lib/editor/Editor.mjs

@@ -132,6 +132,7 @@ import { Group2d } from "../primitives/geometry/Group2d.mjs";
 import { intersectPolygonPolygon } from "../primitives/intersect.mjs";
 import { PI, approximately, areAnglesCompatible, clamp, pointInPolygon } from "../primitives/utils.mjs";
 import { SharedStyleMap } from "../utils/SharedStylesMap.mjs";
+import { areShapesContentEqual } from "../utils/areShapesContentEqual.mjs";
 import { dataUrlToFile } from "../utils/assets.mjs";
 import { debugFlags } from "../utils/debug-flags.mjs";
 import {
@@ -457,7 +458,6 @@ class Editor extends (_a = EventEmitter, _getIsShapeHiddenCache_dec = [computed]
     ) : getShapeVisibility;
     this.options = { ...defaultTldrawOptions, ...options };
     this.store = store;
-    this.disposables.add(this.store.dispose.bind(this.store));
     this.history = new HistoryManager({
       store,
       annotateError: (error) => {
@@ -869,6 +869,7 @@ class Editor extends (_a = EventEmitter, _getIsShapeHiddenCache_dec = [computed]
   dispose() {
     this.disposables.forEach((dispose) => dispose());
     this.disposables.clear();
+    this.store.dispose();
     this.isDisposed = true;
   }
   getShapeUtil(arg) {
@@ -1474,9 +1475,23 @@ class Editor extends (_a = EventEmitter, _getIsShapeHiddenCache_dec = [computed]
     this.setSelectedShapes(this._getUnlockedShapeIds(ids));
     return this;
   }
+  /**
+   * Select the next shape in the reading order or in cardinal order.
+   *
+   * @example
+   * ```ts
+   * editor.selectAdjacentShape('next')
+   * ```
+   *
+   * @public
+   */
   selectAdjacentShape(direction) {
-    const readingOrderShapes = this.getCurrentPageShapesInReadingOrder();
     const selectedShapeIds = this.getSelectedShapeIds();
+    const firstParentId = selectedShapeIds[0] ? this.getShape(selectedShapeIds[0])?.parentId : null;
+    const isSelectedWithinContainer = firstParentId && selectedShapeIds.every((shapeId) => this.getShape(shapeId)?.parentId === firstParentId) && !isPageId(firstParentId);
+    const readingOrderShapes = isSelectedWithinContainer ? this._getShapesInReadingOrder(
+      this.getCurrentPageShapes().filter((shape2) => shape2.parentId === firstParentId)
+    ) : this.getCurrentPageShapesInReadingOrder();
     const currentShapeId = selectedShapeIds.length === 1 ? selectedShapeIds[0] : readingOrderShapes.find((shape2) => selectedShapeIds.includes(shape2.id))?.id;
     let adjacentShapeId;
     if (direction === "next" || direction === "prev") {
@@ -1490,18 +1505,15 @@ class Editor extends (_a = EventEmitter, _getIsShapeHiddenCache_dec = [computed]
     }
     const shape = this.getShape(adjacentShapeId);
     if (!shape) return;
-    this.setSelectedShapes([shape.id]);
-    this.zoomToSelectionIfOffscreen(256, {
-      animation: {
-        duration: this.options.animationMediumMs
-      },
-      inset: 0
-    });
+    this._selectShapesAndZoom([shape.id]);
   }
   getCurrentPageShapesInReadingOrder() {
+    const shapes = this.getCurrentPageShapes().filter((shape) => isPageId(shape.parentId));
+    return this._getShapesInReadingOrder(shapes);
+  }
+  _getShapesInReadingOrder(shapes) {
     const SHALLOW_ANGLE = 20;
     const ROW_THRESHOLD = 100;
-    const shapes = this.getCurrentPageShapes();
     const tabbableShapes = shapes.filter((shape) => this.getShapeUtil(shape).canTabTo(shape));
     if (tabbableShapes.length <= 1) return tabbableShapes;
     const shapesWithCenters = tabbableShapes.map((shape) => ({
@@ -1599,6 +1611,31 @@ class Editor extends (_a = EventEmitter, _getIsShapeHiddenCache_dec = [computed]
     });
     return lowestScoringShape.shape.id;
   }
+  selectParentShape() {
+    const selectedShape = this.getOnlySelectedShape();
+    if (!selectedShape) return;
+    const parentShape = this.getShape(selectedShape.parentId);
+    if (!parentShape) return;
+    this._selectShapesAndZoom([parentShape.id]);
+  }
+  selectFirstChildShape() {
+    const selectedShapes = this.getSelectedShapes();
+    if (!selectedShapes.length) return;
+    const selectedShape = selectedShapes[0];
+    const children = this.getSortedChildIdsForParent(selectedShape.id).map((id) => this.getShape(id)).filter((i) => i);
+    const sortedChildren = this._getShapesInReadingOrder(children);
+    if (sortedChildren.length === 0) return;
+    this._selectShapesAndZoom([sortedChildren[0].id]);
+  }
+  _selectShapesAndZoom(ids) {
+    this.setSelectedShapes(ids);
+    this.zoomToSelectionIfOffscreen(256, {
+      animation: {
+        duration: this.options.animationMediumMs
+      },
+      inset: 0
+    });
+  }
   /**
    * Clear the selection.
    *
@@ -1771,13 +1808,21 @@ class Editor extends (_a = EventEmitter, _getIsShapeHiddenCache_dec = [computed]
   setEditingShape(shape) {
     const id = typeof shape === "string" ? shape : shape?.id ?? null;
     this.setRichTextEditor(null);
-    if (id !== this.getEditingShapeId()) {
+    const prevEditingShapeId = this.getEditingShapeId();
+    if (id !== prevEditingShapeId) {
       if (id) {
         const shape2 = this.getShape(id);
         if (shape2 && this.getShapeUtil(shape2).canEdit(shape2)) {
           this.run(
             () => {
               this._updateCurrentPageState({ editingShapeId: id });
+              if (prevEditingShapeId) {
+                const prevEditingShape = this.getShape(prevEditingShapeId);
+                if (prevEditingShape) {
+                  this.getShapeUtil(prevEditingShape).onEditEnd?.(prevEditingShape);
+                }
+              }
+              this.getShapeUtil(shape2).onEditStart?.(shape2);
             },
             { history: "ignore" }
           );
@@ -1788,6 +1833,12 @@ class Editor extends (_a = EventEmitter, _getIsShapeHiddenCache_dec = [computed]
         () => {
           this._updateCurrentPageState({ editingShapeId: null });
           this._currentRichTextEditor.set(null);
+          if (prevEditingShapeId) {
+            const prevEditingShape = this.getShape(prevEditingShapeId);
+            if (prevEditingShape) {
+              this.getShapeUtil(prevEditingShape).onEditEnd?.(prevEditingShape);
+            }
+          }
         },
         { history: "ignore" }
       );
@@ -3473,7 +3524,7 @@ class Editor extends (_a = EventEmitter, _getIsShapeHiddenCache_dec = [computed]
           this.fonts.trackFontsForShape(shape2);
           return this.getShapeUtil(shape2).getGeometry(shape2, opts);
         },
-        { areRecordsEqual: (a, b) => a.props === b.props }
+        { areRecordsEqual: areShapesContentEqual }
       );
     }
     return this._shapeGeometryCaches[context].get(
@@ -3516,9 +3567,15 @@ class Editor extends (_a = EventEmitter, _getIsShapeHiddenCache_dec = [computed]
     );
   }
   _getShapeHandlesCache() {
-    return this.store.createComputedCache("handles", (shape) => {
-      return this.getShapeUtil(shape).getHandles?.(shape);
-    });
+    return this.store.createComputedCache(
+      "handles",
+      (shape) => {
+        return this.getShapeUtil(shape).getHandles?.(shape);
+      },
+      {
+        areRecordsEqual: areShapesContentEqual
+      }
+    );
   }
   /**
    * Get the handles (if any) for a shape.
@@ -4402,9 +4459,15 @@ class Editor extends (_a = EventEmitter, _getIsShapeHiddenCache_dec = [computed]
   }
   _getBindingsIndexCache() {
     const index = bindingsIndex(this);
-    return this.store.createComputedCache("bindingsIndex", (shape) => {
-      return index.get().get(shape.id);
-    });
+    return this.store.createComputedCache(
+      "bindingsIndex",
+      (shape) => {
+        return index.get().get(shape.id);
+      },
+      // we can ignore the shape equality check here because the index is
+      // computed incrementally based on what bindings are in the store
+      { areRecordsEqual: () => true }
+    );
   }
   /**
    * Get a binding from the store by its ID if it exists.
@@ -7479,7 +7542,7 @@ class Editor extends (_a = EventEmitter, _getIsShapeHiddenCache_dec = [computed]
           const { x: cx, y: cy, z: cz } = unsafe__withoutCapture(() => this.getCamera());
           const { x: dx, y: dy, z: dz = 0 } = info.delta;
           let behavior = wheelBehavior;
-          if (inputs.ctrlKey) behavior = wheelBehavior === "pan" ? "zoom" : "pan";
+          if (info.ctrlKey) behavior = wheelBehavior === "pan" ? "zoom" : "pan";
           switch (behavior) {
             case "zoom": {
               const { x, y } = this.inputs.currentScreenPoint;
@@ -7560,12 +7623,10 @@ class Editor extends (_a = EventEmitter, _getIsShapeHiddenCache_dec = [computed]
             const { x: cx, y: cy, z: cz } = unsafe__withoutCapture(() => this.getCamera());
             if (this.inputs.isPanning && this.inputs.isPointing) {
               const { currentScreenPoint, previousScreenPoint } = this.inputs;
-              const { panSpeed } = cameraOptions;
               const offset = Vec.Sub(currentScreenPoint, previousScreenPoint);
-              this.setCamera(
-                new Vec(cx + offset.x * panSpeed / cz, cy + offset.y * panSpeed / cz, cz),
-                { immediate: true }
-              );
+              this.setCamera(new Vec(cx + offset.x / cz, cy + offset.y / cz, cz), {
+                immediate: true
+              });
               this.maybeTrackPerformance("Panning");
               return;
             }