@tldraw/editor 4.5.0-canary.a6e749bd3e95 → 4.5.0-canary.b245c8ea38ef

package/dist-cjs/index.d.ts

@@ -4268,6 +4268,11 @@ export declare abstract class Geometry2d {
     private _length?;
     get length(): number;
     getLength(_filters?: Geometry2dFilters): number;
+    /**
+     * Called after a hit test succeeds. Return `true` to reject the hit and allow
+     * shapes behind this one to be selected instead (e.g. transparent image pixels).
+     */
+    ignoreHit(_point: VecLike): boolean;
     abstract getSvgPathData(first: boolean): string;
 }
 
@@ -8426,6 +8431,7 @@ export declare class TransformedGeometry2d extends Geometry2d {
     intersectCircle(center: VecLike, radius: number, filters?: Geometry2dFilters): Vec[];
     intersectPolygon(polygon: VecLike[], filters?: Geometry2dFilters): VecLike[];
     intersectPolyline(polyline: VecLike[], filters?: Geometry2dFilters): VecLike[];
+    ignoreHit(point: VecLike): boolean;
     transform(transform: MatModel, opts?: TransformedGeometry2dOptions): Geometry2d;
     getSvgPathData(): string;
 }

package/dist-cjs/index.js

@@ -369,7 +369,7 @@ var import_LocalIndexedDb = require("./lib/utils/sync/LocalIndexedDb");
 var import_uniq = require("./lib/utils/uniq");
 (0, import_utils.registerTldrawLibraryVersion)(
   "@tldraw/editor",
-  "4.5.0-canary.a6e749bd3e95",
+  "4.5.0-canary.b245c8ea38ef",
   "cjs"
 );
 //# sourceMappingURL=index.js.map

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

@@ -3990,6 +3990,9 @@ class Editor extends (_a = import_eventemitter3.default, _getIsShapeHiddenCache_
       if (geometry.isClosed) {
         if (distance <= outerMargin || hitInside && distance <= 0 && distance > -innerMargin) {
           if (geometry.isFilled || isGroup && geometry.children[0].isFilled) {
+            if (geometry.ignoreHit(pointInShapeSpace)) {
+              continue;
+            }
             return inMarginClosestToEdgeHit || shape;
           } else {
             if (this.getShapePageBounds(shape).contains(viewportPageBounds)) continue;
@@ -6725,38 +6728,10 @@ class Editor extends (_a = import_eventemitter3.default, _getIsShapeHiddenCache_
     const bindingIdMap = new Map(
       preserveIds ? bindings.map((binding) => [binding.id, binding.id]) : bindings.map((binding) => [binding.id, (0, import_tlschema.createBindingId)()])
     );
-    let pasteParentId = this.getCurrentPageId();
-    let lowestDepth = Infinity;
-    let lowestAncestors = [];
-    for (const shape of this.getSelectedShapes()) {
-      if (lowestDepth === 0) break;
-      const isFrame = this.isShapeOfType(shape, "frame");
-      const ancestors = this.getShapeAncestors(shape);
-      if (isFrame) ancestors.push(shape);
-      const depth = isFrame ? ancestors.length + 1 : ancestors.length;
-      if (depth < lowestDepth) {
-        lowestDepth = depth;
-        lowestAncestors = ancestors;
-        pasteParentId = isFrame ? shape.id : shape.parentId;
-      } else if (depth === lowestDepth) {
-        if (lowestAncestors.length !== ancestors.length) {
-          throw Error(`Ancestors: ${lowestAncestors.length} !== ${ancestors.length}`);
-        }
-        if (lowestAncestors.length === 0) {
-          pasteParentId = currentPageId;
-          break;
-        } else {
-          pasteParentId = currentPageId;
-          for (let i = 0; i < lowestAncestors.length; i++) {
-            if (ancestors[i] !== lowestAncestors[i]) break;
-            pasteParentId = ancestors[i].id;
-          }
-        }
-      }
-    }
+    let pasteParentId = currentPageId;
+    const shapesById = new Map(shapes.map((s) => [s.id, s]));
+    const rootShapesFromContent = (0, import_utils.compact)(rootShapeIds.map((id) => shapesById.get(id)));
     if (point) {
-      const shapesById = new Map(shapes.map((shape) => [shape.id, shape]));
-      const rootShapesFromContent = (0, import_utils.compact)(rootShapeIds.map((id) => shapesById.get(id)));
       if (rootShapesFromContent.length > 0) {
         const targetParent = this.getShapeAtPoint(point, {
           hitInside: true,
@@ -6764,38 +6739,55 @@ class Editor extends (_a = import_eventemitter3.default, _getIsShapeHiddenCache_
           hitLocked: true,
           filter: (shape) => {
             const util = this.getShapeUtil(shape);
-            if (!util.canReceiveNewChildrenOfType) return false;
             return rootShapesFromContent.every(
-              (rootShape) => util.canReceiveNewChildrenOfType(shape, rootShape.type)
+              (rootShape) => util.canReceiveNewChildrenOfType?.(shape, rootShape.type)
             );
           }
         });
-        pasteParentId = targetParent ? targetParent.id : currentPageId;
-      }
-    }
-    let isDuplicating = false;
-    if (!(0, import_tlschema.isPageId)(pasteParentId)) {
-      const parent = this.getShape(pasteParentId);
-      if (parent) {
-        if (!this.getViewportPageBounds().includes(this.getShapePageBounds(parent))) {
-          pasteParentId = currentPageId;
-        } else {
-          if (rootShapeIds.length === 1) {
-            const rootShape = shapes.find((s) => s.id === rootShapeIds[0]);
-            if (this.isShapeOfType(parent, "frame") && this.isShapeOfType(rootShape, "frame") && rootShape.props.w === parent?.props.w && rootShape.props.h === parent?.props.h) {
-              isDuplicating = true;
+        pasteParentId = targetParent?.id ?? currentPageId;
+      }
+    } else if (!preservePosition) {
+      const selectedShapes = this.getSelectedShapes();
+      let selectedParent = null;
+      const canAcceptAll = (candidate) => {
+        const util = this.getShapeUtil(candidate);
+        return rootShapesFromContent.every(
+          (rs) => util.canReceiveNewChildrenOfType?.(candidate, rs.type)
+        );
+      };
+      for (const shape of selectedShapes) {
+        const candidate = canAcceptAll(shape) ? shape : this.findShapeAncestor(shape, canAcceptAll) ?? ((0, import_tlschema.isShapeId)(shape.parentId) ? this.getShape(shape.parentId) : null);
+        if (!candidate) {
+          selectedParent = null;
+          break;
+        }
+        if (!selectedParent) {
+          selectedParent = candidate;
+        } else if (selectedParent.id !== candidate.id) {
+          const spAncestors = this.getShapeAncestors(selectedParent);
+          if (canAcceptAll(selectedParent)) spAncestors.push(selectedParent);
+          const acceptingAncestors = spAncestors.filter(canAcceptAll);
+          const candidateAncestorIds = /* @__PURE__ */ new Set([
+            candidate.id,
+            ...this.getShapeAncestors(candidate).map((a) => a.id)
+          ]);
+          let common = null;
+          for (let i = acceptingAncestors.length - 1; i >= 0; i--) {
+            if (candidateAncestorIds.has(acceptingAncestors[i].id)) {
+              common = acceptingAncestors[i];
+              break;
             }
           }
+          selectedParent = common;
+          if (!selectedParent) break;
         }
-      } else {
-        pasteParentId = currentPageId;
       }
-    }
-    if (!isDuplicating) {
-      isDuplicating = shapeIdMap.has(pasteParentId);
-    }
-    if (isDuplicating) {
-      pasteParentId = this.getShape(pasteParentId).parentId;
+      if (selectedParent && shapeIdMap.has(selectedParent.id)) {
+        selectedParent = null;
+      }
+      if (selectedParent) {
+        pasteParentId = selectedParent.id;
+      }
     }
     let index = this.getHighestIndexForParent(pasteParentId);
     const rootShapes = [];
@@ -6859,22 +6851,17 @@ class Editor extends (_a = import_eventemitter3.default, _getIsShapeHiddenCache_
       })
     );
     this.run(() => {
-      if (assetsToCreate.length > 0) {
-        this.createAssets(assetsToCreate);
-      }
+      if (assetsToCreate.length > 0) this.createAssets(assetsToCreate);
       this.createShapes(newShapes);
       this.createBindings(newBindings);
-      if (select) {
-        this.select(...rootShapes.map((s) => s.id));
-      }
+      if (select) this.select(...rootShapes.map((s) => s.id));
       if (pasteParentId !== currentPageId) {
         this.reparentShapes(
           rootShapes.map((s) => s.id),
           pasteParentId
         );
       }
-      const newCreatedShapes = newShapes.map((s) => this.getShape(s.id));
-      const bounds = import_Box.Box.Common(newCreatedShapes.map((s) => this.getShapePageBounds(s)));
+      const rootBounds = import_Box.Box.Common((0, import_utils.compact)(rootShapes.map((s) => this.getShapePageBounds(s.id))));
       if (point === void 0) {
         if (!(0, import_tlschema.isPageId)(pasteParentId)) {
           const shape = this.getShape(pasteParentId);
@@ -6882,40 +6869,44 @@ class Editor extends (_a = import_eventemitter3.default, _getIsShapeHiddenCache_
             this.getShapePageTransform(shape),
             this.getShapeGeometry(shape).bounds.center
           );
+        } else if (preservePosition) {
+          point = rootBounds.center;
         } else {
           const viewportPageBounds = this.getViewportPageBounds();
-          if (preservePosition || viewportPageBounds.includes(import_Box.Box.From(bounds))) {
-            point = bounds.center;
-          } else {
-            point = viewportPageBounds.center;
-          }
-        }
-      }
-      if (rootShapes.length === 1) {
-        const onlyRoot = rootShapes[0];
-        if (this.isShapeOfType(onlyRoot, "frame")) {
-          while (this.getShapesAtPoint(point).some(
-            (shape) => this.isShapeOfType(shape, "frame") && shape.props.w === onlyRoot.props.w && shape.props.h === onlyRoot.props.h
-          )) {
-            point.x += bounds.w + 16;
-          }
+          const anyOverlap = rootShapes.some((s) => {
+            const b = this.getShapePageBounds(s.id);
+            return b && viewportPageBounds.collides(b);
+          });
+          point = anyOverlap ? rootBounds.center : viewportPageBounds.center;
         }
       }
       const pageCenter = import_Box.Box.Common(
         (0, import_utils.compact)(rootShapes.map(({ id }) => this.getShapePageBounds(id)))
       ).center;
       const offset = import_Vec.Vec.Sub(point, pageCenter);
-      this.updateShapes(
-        rootShapes.map(({ id }) => {
-          const s = this.getShape(id);
-          const localRotation = this.getShapeParentTransform(id).decompose().rotation;
-          const localDelta = import_Vec.Vec.Rot(offset, -localRotation);
-          return { id: s.id, type: s.type, x: s.x + localDelta.x, y: s.y + localDelta.y };
-        })
-      );
+      if (offset.x !== 0 || offset.y !== 0) {
+        this.updateShapes(
+          rootShapes.map(({ id }) => {
+            const s = this.getShape(id);
+            const localRotation = this.getShapeParentTransform(id).decompose().rotation;
+            const localDelta = import_Vec.Vec.Rot(offset, -localRotation);
+            return { id: s.id, type: s.type, x: s.x + localDelta.x, y: s.y + localDelta.y };
+          })
+        );
+      }
       if ((0, import_tlschema.isPageId)(pasteParentId)) {
         const currentRootShapes = (0, import_utils.compact)(rootShapes.map((s) => this.getShape(s.id)));
-        const { reparenting } = (0, import_reparenting.getDroppedShapesToNewParents)(this, currentRootShapes);
+        const { reparenting } = (0, import_reparenting.getDroppedShapesToNewParents)(
+          this,
+          currentRootShapes,
+          (shape, parent) => {
+            if (shapeIdMap.has(parent.id)) return false;
+            const shapeBounds = this.getShapePageBounds(shape);
+            const parentBounds = this.getShapePageBounds(parent);
+            if (!shapeBounds || !parentBounds) return false;
+            return parentBounds.containsPoint(shapeBounds.center);
+          }
+        );
         reparenting.forEach((childrenToReparent, newParentId) => {
           if (childrenToReparent.length === 0) return;
           this.reparentShapes(
@@ -6924,6 +6915,17 @@ class Editor extends (_a = import_eventemitter3.default, _getIsShapeHiddenCache_
           );
         });
       }
+      const newShapeIdSet = new Set(newShapes.map((s) => s.id));
+      const shapesToKickout = rootShapes.map((s) => s.id).filter((id) => {
+        const shape = this.getShape(id);
+        if (!shape) return false;
+        if ((0, import_tlschema.isPageId)(shape.parentId)) return false;
+        const children = this.getSortedChildIdsForParent(id);
+        return !children.some((childId) => newShapeIdSet.has(childId));
+      });
+      if (shapesToKickout.length > 0) {
+        (0, import_reparenting.kickoutOccludedShapes)(this, shapesToKickout);
+      }
     });
     return this;
   }