@tldraw/editor 5.3.0-canary.fceaae5e9feb → 5.3.0-next.299378752aaf

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

@@ -306,12 +306,27 @@ class Editor extends EventEmitter {
     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 = 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);
@@ -341,6 +356,12 @@ class Editor extends EventEmitter {
     this.disposables.add(
       this.sideEffects.register({
         shape: {
+          afterCreate: (shape) => {
+            createdShapes.add(shape.id);
+            if (shape.parentId && isShapeId(shape.parentId)) {
+              invalidParents.add(shape.parentId);
+            }
+          },
           afterChange: (shapeBefore, shapeAfter) => {
             for (const binding of this.getBindingsInvolvingShape(shapeAfter)) {
               invalidBindingTypes.add(binding.type);
@@ -430,15 +451,6 @@ class Editor extends EventEmitter {
             if (deleteBindingIds.length) {
               this.deleteBindings(deleteBindingIds);
             }
-            const deletedIds = /* @__PURE__ */ new Set([shape.id]);
-            const updates = compact(
-              this.getPageStates().map((pageState) => {
-                return cleanupInstancePageState(pageState, deletedIds);
-              })
-            );
-            if (updates.length) {
-              this.store.put(updates);
-            }
           }
         },
         binding: {
@@ -515,6 +527,9 @@ class Editor extends EventEmitter {
         },
         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;
@@ -587,6 +602,12 @@ class Editor extends EventEmitter {
       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();
     });
@@ -681,6 +702,10 @@ class Editor extends EventEmitter {
    * @public
    */
   isDisposed = false;
+  _isMounted = atom("isMounted", false);
+  getIsMounted() {
+    return this._isMounted.get();
+  }
   /**
    * A manager for the editor's tick events.
    *
@@ -812,6 +837,9 @@ class Editor extends EventEmitter {
    * @public
    */
   dispose() {
+    if (this._isMounted.get()) {
+      this.emit("unmount");
+    }
     this.stopCameraAnimation();
     if (this.getInstanceState().followingUserId) {
       this.stopFollowingUser();
@@ -4248,6 +4276,11 @@ class Editor extends EventEmitter {
     });
     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.
    *
@@ -4257,7 +4290,21 @@ class Editor extends EventEmitter {
    */
   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.
@@ -4268,7 +4315,6 @@ class Editor extends EventEmitter {
    * @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,
@@ -4283,7 +4329,7 @@ class Editor extends EventEmitter {
     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;
@@ -4374,7 +4420,7 @@ class Editor extends EventEmitter {
           }
         }
       } else {
-        if (distance < this.options.hitTestMargin / zoomLevel) {
+        if (distance < this.getHitTestMargin()) {
           return shape;
         }
       }
@@ -8450,6 +8496,9 @@ class Editor extends EventEmitter {
 __decorateClass([
   computed
 ], Editor.prototype, "getIsShapeHiddenCache", 1);
+__decorateClass([
+  computed
+], Editor.prototype, "getIsMounted", 1);
 __decorateClass([
   computed
 ], Editor.prototype, "canUndo", 1);
@@ -8624,6 +8673,9 @@ __decorateClass([
 __decorateClass([
   computed
 ], Editor.prototype, "getCurrentPageBounds", 1);
+__decorateClass([
+  computed
+], Editor.prototype, "getHitTestMargin", 1);
 __decorateClass([
   computed
 ], Editor.prototype, "getCurrentPageShapes", 1);