@tldraw/editor 3.13.0-canary.52e2314962c1 → 3.13.0-canary.62d76a25592d

package/dist-cjs/lib/editor/Editor.js

@@ -100,6 +100,7 @@ var import_Group2d = require("../primitives/geometry/Group2d");
 var import_intersect = require("../primitives/intersect");
 var import_utils2 = require("../primitives/utils");
 var import_SharedStylesMap = require("../utils/SharedStylesMap");
+var import_areShapesContentEqual = require("../utils/areShapesContentEqual");
 var import_assets = require("../utils/assets");
 var import_debug_flags = require("../utils/debug-flags");
 var import_deepLinks = require("../utils/deepLinks");
@@ -423,7 +424,6 @@ class Editor extends (_a = import_eventemitter3.default, _getIsShapeHiddenCache_
     ) : getShapeVisibility;
     this.options = { ...import_options.defaultTldrawOptions, ...options };
     this.store = store;
-    this.disposables.add(this.store.dispose.bind(this.store));
     this.history = new import_HistoryManager.HistoryManager({
       store,
       annotateError: (error) => {
@@ -835,6 +835,7 @@ class Editor extends (_a = import_eventemitter3.default, _getIsShapeHiddenCache_
   dispose() {
     this.disposables.forEach((dispose) => dispose());
     this.disposables.clear();
+    this.store.dispose();
     this.isDisposed = true;
   }
   getShapeUtil(arg) {
@@ -1347,8 +1348,7 @@ class Editor extends (_a = import_eventemitter3.default, _getIsShapeHiddenCache_
     return this.getCurrentPageState().selectedShapeIds;
   }
   getSelectedShapes() {
-    const { selectedShapeIds } = this.getCurrentPageState();
-    return (0, import_utils.compact)(selectedShapeIds.map((id) => this.store.get(id)));
+    return (0, import_utils.compact)(this.getSelectedShapeIds().map((id) => this.store.get(id)));
   }
   /**
    * Select one or more shapes.
@@ -1738,13 +1738,21 @@ class Editor extends (_a = import_eventemitter3.default, _getIsShapeHiddenCache_
   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" }
           );
@@ -1755,6 +1763,12 @@ class Editor extends (_a = import_eventemitter3.default, _getIsShapeHiddenCache_
         () => {
           this._updateCurrentPageState({ editingShapeId: null });
           this._currentRichTextEditor.set(null);
+          if (prevEditingShapeId) {
+            const prevEditingShape = this.getShape(prevEditingShapeId);
+            if (prevEditingShape) {
+              this.getShapeUtil(prevEditingShape).onEditEnd?.(prevEditingShape);
+            }
+          }
         },
         { history: "ignore" }
       );
@@ -1950,12 +1964,22 @@ class Editor extends (_a = import_eventemitter3.default, _getIsShapeHiddenCache_
     }
     return baseCamera;
   }
+  _getFollowingPresence(targetUserId) {
+    const visited = [this.user.getId()];
+    const collaborators = this.getCollaborators();
+    let leaderPresence = null;
+    while (targetUserId && !visited.includes(targetUserId)) {
+      leaderPresence = collaborators.find((c) => c.userId === targetUserId) ?? null;
+      targetUserId = leaderPresence?.followingUserId ?? null;
+      if (leaderPresence) {
+        visited.push(leaderPresence.userId);
+      }
+    }
+    return leaderPresence;
+  }
   getViewportPageBoundsForFollowing() {
-    const followingUserId = this.getInstanceState().followingUserId;
-    if (!followingUserId) return null;
-    const leaderPresence = this.getCollaborators().find((c) => c.userId === followingUserId);
-    if (!leaderPresence) return null;
-    if (!leaderPresence.camera || !leaderPresence.screenBounds) return null;
+    const leaderPresence = this._getFollowingPresence(this.getInstanceState().followingUserId);
+    if (!leaderPresence?.camera || !leaderPresence?.screenBounds) return null;
     const { w: lw, h: lh } = leaderPresence.screenBounds;
     const { x: lx, y: ly, z: lz } = leaderPresence.camera;
     const theirViewport = new import_Box.Box(-lx, -ly, lw / lz, lh / lz);
@@ -2862,34 +2886,30 @@ class Editor extends (_a = import_eventemitter3.default, _getIsShapeHiddenCache_
    */
   startFollowingUser(userId) {
     this.stopFollowingUser();
-    const leaderPresences = this._getCollaboratorsQuery().get().filter((p) => p.userId === userId);
-    if (!leaderPresences.length) {
-      console.warn("User not found");
-      return this;
-    }
     const thisUserId = this.user.getId();
     if (!thisUserId) {
       console.warn("You should set the userId for the current instance before following a user");
     }
-    if (leaderPresences.some((p) => p.followingUserId === thisUserId)) {
+    const leaderPresence = this._getFollowingPresence(userId);
+    if (!leaderPresence) {
       return this;
     }
     const latestLeaderPresence = (0, import_state.computed)("latestLeaderPresence", () => {
-      return this.getCollaborators().find((p) => p.userId === userId);
+      return this._getFollowingPresence(userId);
     });
     (0, import_state.transact)(() => {
       this.updateInstanceState({ followingUserId: userId }, { history: "ignore" });
       const dispose = (0, import_state.react)("update current page", () => {
-        const leaderPresence = latestLeaderPresence.get();
-        if (!leaderPresence) {
+        const leaderPresence2 = latestLeaderPresence.get();
+        if (!leaderPresence2) {
           this.stopFollowingUser();
           return;
         }
-        if (leaderPresence.currentPageId !== this.getCurrentPageId() && this.getPage(leaderPresence.currentPageId)) {
+        if (leaderPresence2.currentPageId !== this.getCurrentPageId() && this.getPage(leaderPresence2.currentPageId)) {
           this.run(
             () => {
               this.store.put([
-                { ...this.getInstanceState(), currentPageId: leaderPresence.currentPageId }
+                { ...this.getInstanceState(), currentPageId: leaderPresence2.currentPageId }
               ]);
               this._isLockedOnFollowingUser.set(true);
             },
@@ -2904,8 +2924,8 @@ class Editor extends (_a = import_eventemitter3.default, _getIsShapeHiddenCache_
         this.off("stop-following", cancel);
       };
       const moveTowardsUser = () => {
-        const leaderPresence = latestLeaderPresence.get();
-        if (!leaderPresence) {
+        const leaderPresence2 = latestLeaderPresence.get();
+        if (!leaderPresence2) {
           this.stopFollowingUser();
           return;
         }
@@ -3434,7 +3454,7 @@ class Editor extends (_a = import_eventemitter3.default, _getIsShapeHiddenCache_
           this.fonts.trackFontsForShape(shape2);
           return this.getShapeUtil(shape2).getGeometry(shape2, opts);
         },
-        { areRecordsEqual: (a, b) => a.props === b.props }
+        { areRecordsEqual: import_areShapesContentEqual.areShapesContentEqual }
       );
     }
     return this._shapeGeometryCaches[context].get(
@@ -3477,9 +3497,15 @@ class Editor extends (_a = import_eventemitter3.default, _getIsShapeHiddenCache_
     );
   }
   _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: import_areShapesContentEqual.areShapesContentEqual
+      }
+    );
   }
   /**
    * Get the handles (if any) for a shape.
@@ -4363,9 +4389,15 @@ class Editor extends (_a = import_eventemitter3.default, _getIsShapeHiddenCache_
   }
   _getBindingsIndexCache() {
     const index = (0, import_bindingsIndex.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.
@@ -7440,7 +7472,7 @@ class Editor extends (_a = import_eventemitter3.default, _getIsShapeHiddenCache_
           const { x: cx, y: cy, z: cz } = (0, import_state.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;
@@ -7521,12 +7553,10 @@ class Editor extends (_a = import_eventemitter3.default, _getIsShapeHiddenCache_
             const { x: cx, y: cy, z: cz } = (0, import_state.unsafe__withoutCapture)(() => this.getCamera());
             if (this.inputs.isPanning && this.inputs.isPointing) {
               const { currentScreenPoint, previousScreenPoint } = this.inputs;
-              const { panSpeed } = cameraOptions;
               const offset = import_Vec.Vec.Sub(currentScreenPoint, previousScreenPoint);
-              this.setCamera(
-                new import_Vec.Vec(cx + offset.x * panSpeed / cz, cy + offset.y * panSpeed / cz, cz),
-                { immediate: true }
-              );
+              this.setCamera(new import_Vec.Vec(cx + offset.x / cz, cy + offset.y / cz, cz), {
+                immediate: true
+              });
               this.maybeTrackPerformance("Panning");
               return;
             }