@tldraw/editor 5.2.5 → 5.3.0-canary.00f14de1f81d

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

@@ -273,12 +273,27 @@ class Editor extends import_eventemitter3.default {
     let deletedBindings = /* @__PURE__ */ new Map();
     const deletedShapeIds = /* @__PURE__ */ new Set();
     const invalidParents = /* @__PURE__ */ new Set();
+    const createdShapes = /* @__PURE__ */ new Set();
     let invalidBindingTypes = /* @__PURE__ */ new Set();
     this.disposables.add(
       this.sideEffects.registerOperationCompleteHandler(() => {
+        const deletedIds = deletedShapeIds.size ? new Set(deletedShapeIds) : null;
         deletedShapeIds.clear();
+        if (deletedIds) {
+          const updates = (0, import_utils.compact)(
+            this.getPageStates().map((pageState) => {
+              return cleanupInstancePageState(pageState, deletedIds);
+            })
+          );
+          if (updates.length) {
+            this.store.put(updates);
+          }
+        }
+        const justCreatedShapeIds = new Set(createdShapes);
+        createdShapes.clear();
         for (const parentId of invalidParents) {
           invalidParents.delete(parentId);
+          if (justCreatedShapeIds.has(parentId)) continue;
           const parent = this.getShape(parentId);
           if (!parent) continue;
           const util = this.getShapeUtil(parent);
@@ -308,6 +323,12 @@ class Editor extends import_eventemitter3.default {
     this.disposables.add(
       this.sideEffects.register({
         shape: {
+          afterCreate: (shape) => {
+            createdShapes.add(shape.id);
+            if (shape.parentId && (0, import_tlschema.isShapeId)(shape.parentId)) {
+              invalidParents.add(shape.parentId);
+            }
+          },
           afterChange: (shapeBefore, shapeAfter) => {
             for (const binding of this.getBindingsInvolvingShape(shapeAfter)) {
               invalidBindingTypes.add(binding.type);
@@ -397,15 +418,6 @@ class Editor extends import_eventemitter3.default {
             if (deleteBindingIds.length) {
               this.deleteBindings(deleteBindingIds);
             }
-            const deletedIds = /* @__PURE__ */ new Set([shape.id]);
-            const updates = (0, import_utils.compact)(
-              this.getPageStates().map((pageState) => {
-                return cleanupInstancePageState(pageState, deletedIds);
-              })
-            );
-            if (updates.length) {
-              this.store.put(updates);
-            }
           }
         },
         binding: {
@@ -482,6 +494,9 @@ class Editor extends import_eventemitter3.default {
         },
         instance_page_state: {
           afterChange: (prev, next) => {
+            if (prev?.focusedGroupId !== next?.focusedGroupId) {
+              this.cancelDoubleClick();
+            }
             if (prev?.selectedShapeIds !== next?.selectedShapeIds) {
               const filtered = next.selectedShapeIds.filter((id) => {
                 let parentId = this.getShape(id)?.parentId;
@@ -549,11 +564,17 @@ class Editor extends import_eventemitter3.default {
     this.root.enter(void 0, "initial");
     this.edgeScrollManager = new import_EdgeScrollManager.EdgeScrollManager(this);
     this.focusManager = new import_FocusManager.FocusManager(this, autoFocus);
-    this.disposables.add(this.focusManager.dispose.bind(this.focusManager));
+    this.disposables.add(() => this.focusManager.dispose());
     if (this.getInstanceState().followingUserId) {
       this.stopFollowingUser();
     }
     this.on("tick", this._flushEventsForTick);
+    this.on("mount", () => {
+      this._isMounted.set(true);
+    });
+    this.on("unmount", () => {
+      this._isMounted.set(false);
+    });
     this.timers.requestAnimationFrame(() => {
       this._tickManager.start();
     });
@@ -648,6 +669,10 @@ class Editor extends import_eventemitter3.default {
    * @public
    */
   isDisposed = false;
+  _isMounted = (0, import_state.atom)("isMounted", false);
+  getIsMounted() {
+    return this._isMounted.get();
+  }
   /**
    * A manager for the editor's tick events.
    *
@@ -779,6 +804,9 @@ class Editor extends import_eventemitter3.default {
    * @public
    */
   dispose() {
+    if (this._isMounted.get()) {
+      this.emit("unmount");
+    }
     this.stopCameraAnimation();
     if (this.getInstanceState().followingUserId) {
       this.stopFollowingUser();
@@ -4215,6 +4243,11 @@ class Editor extends import_eventemitter3.default {
     });
     return commonBounds;
   }
+  getHitTestMargin() {
+    const { hitTestMargin, coarseHitTestMargin } = this.options;
+    const margin = this.getInstanceState().isCoarsePointer ? coarseHitTestMargin : hitTestMargin;
+    return margin / this.getZoomLevel();
+  }
   /**
    * Get the top-most selected shape at the given point, ignoring groups.
    *
@@ -4224,7 +4257,21 @@ class Editor extends import_eventemitter3.default {
    */
   getSelectedShapeAtPoint(point) {
     const selectedShapeIds = this.getSelectedShapeIds();
-    return this.getCurrentPageShapesSorted().filter((shape) => shape.type !== "group" && selectedShapeIds.includes(shape.id)).reverse().find((shape) => this.isPointInShape(shape, point, { hitInside: true, margin: 0 }));
+    const margin = this.options.hitTestMargin / this.getZoomLevel();
+    const sortedShapes = this.getCurrentPageShapesSorted();
+    for (let i = sortedShapes.length - 1; i >= 0; i--) {
+      const shape = sortedShapes[i];
+      if (shape.type === "group") continue;
+      if (!selectedShapeIds.includes(shape.id)) continue;
+      if (this.getShapeGeometry(shape).hitTestPoint(
+        this.getPointInShapeSpace(shape, point),
+        margin,
+        true
+      )) {
+        return shape;
+      }
+    }
+    return void 0;
   }
   /**
    * Get the shape at the current point.
@@ -4235,7 +4282,6 @@ class Editor extends import_eventemitter3.default {
    * @returns The shape at the given point, or undefined if there is no shape at the point.
    */
   getShapeAtPoint(point, opts = {}) {
-    const zoomLevel = this.getZoomLevel();
     const viewportPageBounds = this.getViewportPageBounds();
     const {
       filter,
@@ -4250,7 +4296,7 @@ class Editor extends import_eventemitter3.default {
     let inHollowSmallestAreaHit = null;
     let inMarginClosestToEdgeDistance = Infinity;
     let inMarginClosestToEdgeHit = null;
-    const searchMargin = Math.max(innerMargin, outerMargin, this.options.hitTestMargin / zoomLevel);
+    const searchMargin = Math.max(innerMargin, outerMargin, this.getHitTestMargin());
     const candidateIds = this._spatialIndex.getShapeIdsAtPoint(point, searchMargin);
     const shapesToCheck = (opts.renderingOnly ? this.getCurrentPageRenderingShapesSorted() : this.getCurrentPageShapesSorted()).filter((shape) => {
       if (!candidateIds.has(shape.id) && !this.isShapeFrameLike(shape)) return false;
@@ -4341,7 +4387,7 @@ class Editor extends import_eventemitter3.default {
           }
         }
       } else {
-        if (distance < this.options.hitTestMargin / zoomLevel) {
+        if (distance < this.getHitTestMargin()) {
           return shape;
         }
       }
@@ -7994,7 +8040,7 @@ class Editor extends import_eventemitter3.default {
     } else if (!info.ctrlKey && inputs.getCtrlKey() && this._ctrlKeyTimeout === -1) {
       this._ctrlKeyTimeout = this.timers.setTimeout(this._setCtrlKeyTimeout, 150);
     }
-    if (info.metaKey) {
+    if (info.metaKey && info.name !== "key_up") {
       clearTimeout(this._metaKeyTimeout);
       this._metaKeyTimeout = -1;
       inputs.setMetaKey(true);
@@ -8417,6 +8463,9 @@ class Editor extends import_eventemitter3.default {
 __decorateClass([
   import_state.computed
 ], Editor.prototype, "getIsShapeHiddenCache", 1);
+__decorateClass([
+  import_state.computed
+], Editor.prototype, "getIsMounted", 1);
 __decorateClass([
   import_state.computed
 ], Editor.prototype, "canUndo", 1);
@@ -8591,6 +8640,9 @@ __decorateClass([
 __decorateClass([
   import_state.computed
 ], Editor.prototype, "getCurrentPageBounds", 1);
+__decorateClass([
+  import_state.computed
+], Editor.prototype, "getHitTestMargin", 1);
 __decorateClass([
   import_state.computed
 ], Editor.prototype, "getCurrentPageShapes", 1);