@tldraw/editor 4.5.0-canary.ea6778d1533e → 4.5.0-next.a4da812dd479

package/dist-cjs/index.d.ts

@@ -20,6 +20,7 @@ import { MigrationSequence } from '@tldraw/store';
 import { NamedExoticComponent } from 'react';
 import { Node as Node_2 } from '@tiptap/pm/model';
 import { PerformanceTracker } from '@tldraw/utils';
+import { PointerEvent as PointerEvent_2 } from 'react';
 import { PointerEventHandler } from 'react';
 import * as React_2 from 'react';
 import { default as React_3 } from 'react';
@@ -63,7 +64,6 @@ import { TLImageAsset } from '@tldraw/tlschema';
 import { TLInstance } from '@tldraw/tlschema';
 import { TLInstancePageState } from '@tldraw/tlschema';
 import { TLInstancePresence } from '@tldraw/tlschema';
-import { TLOpacityType } from '@tldraw/tlschema';
 import { TLPage } from '@tldraw/tlschema';
 import { TLPageId } from '@tldraw/tlschema';
 import { TLParentId } from '@tldraw/tlschema';
@@ -439,13 +439,13 @@ export declare class BoundsSnaps {
     private getSnappablePoints;
     private getSnappableGapNodes;
     private getVisibleGaps;
-    snapTranslateShapes({ lockedAxis, initialSelectionPageBounds, initialSelectionSnapPoints, dragDelta, }: {
+    snapTranslateShapes({ lockedAxis, initialSelectionPageBounds, initialSelectionSnapPoints, dragDelta }: {
         dragDelta: Vec;
         initialSelectionPageBounds: Box;
         initialSelectionSnapPoints: BoundsSnapPoint[];
         lockedAxis: 'x' | 'y' | null;
     }): SnapData;
-    snapResizeShapes({ initialSelectionPageBounds, dragDelta, handle: originalHandle, isAspectRatioLocked, isResizingFromCenter, }: {
+    snapResizeShapes({ initialSelectionPageBounds, dragDelta, handle: originalHandle, isAspectRatioLocked, isResizingFromCenter }: {
         dragDelta: Vec;
         handle: SelectionCorner | SelectionEdge;
         initialSelectionPageBounds: Box;
@@ -679,7 +679,7 @@ export declare const coreShapes: readonly [typeof GroupShapeUtil];
 export declare function counterClockwiseAngleDist(a0: number, a1: number): number;
 
 /** @public */
-export declare function createDebugValue<T>(name: string, { defaults, shouldStoreForSession, }: {
+export declare function createDebugValue<T>(name: string, { defaults, shouldStoreForSession }: {
     defaults: DebugFlagDefaults<T>;
     shouldStoreForSession?: boolean;
 }): DebugFlag<T>;
@@ -729,8 +729,8 @@ export declare function createTLStore({ initialData, defaultName, id, assets, on
 
 /** @public */
 export declare function createTLUser(opts?: {
-    setUserPreferences?: (userPreferences: TLUserPreferences) => void;
-    userPreferences?: Signal<TLUserPreferences>;
+    setUserPreferences?: ((userPreferences: TLUserPreferences) => void) | undefined;
+    userPreferences?: Signal<TLUserPreferences, unknown> | undefined;
 }): TLUser;
 
 /** @public */
@@ -814,7 +814,7 @@ export declare const DefaultBrush: ({ brush, color, opacity, className }: TLBrus
 export declare function DefaultCanvas({ className }: TLCanvasComponentProps): JSX.Element;
 
 /** @public @react */
-export declare function DefaultCollaboratorHint({ className, zoom, point, color, viewport, opacity, }: TLCollaboratorHintProps): JSX.Element;
+export declare function DefaultCollaboratorHint({ className, zoom, point, color, viewport, opacity }: TLCollaboratorHintProps): JSX.Element;
 
 /** @public @react */
 export declare const DefaultCursor: NamedExoticComponent<TLCursorProps>;
@@ -1022,7 +1022,7 @@ export declare class EdgeScrollManager {
 /** @public */
 export declare class Editor extends EventEmitter<TLEventMap> {
     readonly id: string;
-    constructor({ store, user, shapeUtils, bindingUtils, tools, getContainer, cameraOptions, initialState, autoFocus, inferDarkMode, options: _options, textOptions: _textOptions, getShapeVisibility, fontAssetUrls, }: TLEditorOptions);
+    constructor({ store, user, shapeUtils, bindingUtils, tools, getContainer, cameraOptions, initialState, autoFocus, inferDarkMode, options: _options, textOptions: _textOptions, getShapeVisibility, fontAssetUrls }: TLEditorOptions);
     private readonly _getShapeVisibility?;
     private getIsShapeHiddenCache;
     isShapeHidden(shapeOrId: TLShape | TLShapeId): boolean;
@@ -1095,8 +1095,8 @@ export declare class Editor extends EventEmitter<TLEventMap> {
     readonly timers: {
         dispose: () => void;
         requestAnimationFrame: (callback: FrameRequestCallback) => number;
-        setInterval: (handler: TimerHandler, timeout?: number, ...args: any[]) => number;
-        setTimeout: (handler: TimerHandler, timeout?: number, ...args: any[]) => number;
+        setInterval: (handler: TimerHandler, timeout?: number | undefined, ...args: any[]) => number;
+        setTimeout: (handler: TimerHandler, timeout?: number | undefined, ...args: any[]) => number;
     };
     /**
      * A manager for the user and their preferences.
@@ -1487,14 +1487,14 @@ export declare class Editor extends EventEmitter<TLEventMap> {
      * @public
      */
     getPageStates(): TLInstancePageState[];
-    /* Excluded from this release type: _getPageStatesQuery */
+    private _getPageStatesQuery;
     /**
      * The current page state.
      *
      * @public
      */
     getCurrentPageState(): TLInstancePageState;
-    /* Excluded from this release type: _getCurrentPageStateId */
+    private _getCurrentPageStateId;
     /**
      * Update this instance's page state.
      *
@@ -1887,7 +1887,7 @@ export declare class Editor extends EventEmitter<TLEventMap> {
      *
      *  @public */
     getTextOptions(): TLTextOptions;
-    /* Excluded from this release type: _unsafe_getCameraId */
+    private _unsafe_getCameraId;
     /**
      * The current camera.
      *
@@ -2137,10 +2137,10 @@ export declare class Editor extends EventEmitter<TLEventMap> {
      */
     slideCamera(opts?: {
         direction: VecLike;
-        force?: boolean;
-        friction?: number;
+        force?: boolean | undefined;
+        friction?: number | undefined;
         speed: number;
-        speedThreshold?: number;
+        speedThreshold?: number | undefined;
     }): this;
     /**
      * Animate the camera to a user's cursor position. This also briefly show the user's cursor if it's not currently visible.
@@ -2448,7 +2448,7 @@ export declare class Editor extends EventEmitter<TLEventMap> {
      * @public
      */
     renamePage(page: TLPage | TLPageId, name: string): this;
-    /* Excluded from this release type: _getAllAssetsQuery */
+    private _getAllAssetsQuery;
     /**
      * Get all assets in the editor.
      *
@@ -2537,7 +2537,7 @@ export declare class Editor extends EventEmitter<TLEventMap> {
      * @public
      */
     getShapeGeometry<T extends Geometry2d>(shape: TLShape | TLShapeId, opts?: TLGeometryOpts): T;
-    /* Excluded from this release type: _getShapeHandlesCache */
+    private _getShapeHandlesCache;
     /**
      * Get the handles (if any) for a shape.
      *
@@ -2567,7 +2567,7 @@ export declare class Editor extends EventEmitter<TLEventMap> {
      * @public
      */
     getShapeLocalTransform(shape: TLShape | TLShapeId): Mat;
-    /* Excluded from this release type: _getShapePageTransformCache */
+    private _getShapePageTransformCache;
     /**
      * Get the local transform of a shape's parent as a matrix model.
      *
@@ -2595,7 +2595,7 @@ export declare class Editor extends EventEmitter<TLEventMap> {
      * @public
      */
     getShapePageTransform(shape: TLShape | TLShapeId): Mat;
-    /* Excluded from this release type: _getShapePageBoundsCache */
+    private _getShapePageBoundsCache;
     /**
      * Get the bounds of a shape in the current page space.
      *
@@ -2610,7 +2610,7 @@ export declare class Editor extends EventEmitter<TLEventMap> {
      * @public
      */
     getShapePageBounds(shape: TLShape | TLShapeId): Box | undefined;
-    /* Excluded from this release type: _getShapeClipPathCache */
+    private _getShapeClipPathCache;
     /**
      * Get the clip path for a shape.
      *
@@ -2627,7 +2627,7 @@ export declare class Editor extends EventEmitter<TLEventMap> {
      * @public
      */
     getShapeClipPath(shape: TLShape | TLShapeId): string | undefined;
-    /* Excluded from this release type: _getShapeMaskCache */
+    private _getShapeMaskCache;
     /**
      * Get the mask (in the current page space) for a shape.
      *
@@ -2659,7 +2659,7 @@ export declare class Editor extends EventEmitter<TLEventMap> {
      * @public
      */
     getShapeMaskedPageBounds(shape: TLShape | TLShapeId): Box | undefined;
-    /* Excluded from this release type: _getShapeMaskedPageBoundsCache */
+    private _getShapeMaskedPageBoundsCache;
     /**
      * Get the ancestors of a shape.
      *
@@ -2769,8 +2769,8 @@ export declare class Editor extends EventEmitter<TLEventMap> {
      * @public
      */
     getShapesAtPoint(point: VecLike, opts?: {
-        hitInside?: boolean;
-        margin?: number;
+        hitInside?: boolean | undefined;
+        margin?: number | undefined;
     }): TLShape[];
     /**
      * Get shape IDs within the given bounds.
@@ -2806,8 +2806,8 @@ export declare class Editor extends EventEmitter<TLEventMap> {
      * @public
      */
     isPointInShape(shape: TLShape | TLShapeId, point: VecLike, opts?: {
-        hitInside?: boolean;
-        margin?: number;
+        hitInside?: boolean | undefined;
+        margin?: number | undefined;
     }): boolean;
     /**
      * Convert a point in the current page space to a point in the local space of a shape. For example, if a
@@ -3081,7 +3081,7 @@ export declare class Editor extends EventEmitter<TLEventMap> {
      * Delete a binding by its ID. If the binding doesn't exist, it's ignored.
      */
     deleteBinding(binding: TLBinding | TLBindingId, opts?: Parameters<this['deleteBindings']>[1]): this;
-    canBindShapes({ fromShape, toShape, binding, }: {
+    canBindShapes({ fromShape, toShape, binding }: {
         binding: {
             type: TLBinding['type'];
         } | TLBinding | TLBinding['type'];
@@ -3530,7 +3530,7 @@ export declare class Editor extends EventEmitter<TLEventMap> {
     deleteShape(id: TLShapeId): this;
     deleteShape(shape: TLShape): this;
     /* Excluded from this release type: _extractSharedStyles */
-    /* Excluded from this release type: _getSelectionSharedStyles */
+    private _getSelectionSharedStyles;
     /**
      * Get the style for the next shape.
      *
@@ -3719,7 +3719,7 @@ export declare class Editor extends EventEmitter<TLEventMap> {
      * @param opts - Options for handling external content, including force flag to bypass readonly checks.
      */
     putExternalContent<E>(info: TLExternalContent<E>, opts?: {
-        force?: boolean;
+        force?: boolean | undefined;
     }): Promise<void>;
     /**
      * Handle replacing external content.
@@ -3728,7 +3728,7 @@ export declare class Editor extends EventEmitter<TLEventMap> {
      * @param opts - Options for handling external content, including force flag to bypass readonly checks.
      */
     replaceExternalContent<E>(info: TLExternalContent<E>, opts?: {
-        force?: boolean;
+        force?: boolean | undefined;
     }): Promise<void>;
     /**
      * Get content that can be exported for the given shape ids.
@@ -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;
 }
 
@@ -4535,7 +4540,7 @@ export declare class HandleSnaps {
     private iterateSnapOutlines;
     private getHandleSnapPosition;
     private getHandleSnapData;
-    snapHandle({ currentShapeId, handle, }: {
+    snapHandle({ currentShapeId, handle }: {
         currentShapeId: TLShapeId;
         handle: TLHandle;
     }): null | SnapData;
@@ -7771,7 +7776,7 @@ export declare const tlmenus: {
      *
      * @public
      */
-    clearOpenMenus(contextId?: string): void;
+    clearOpenMenus(contextId?: string | undefined): void;
     /**
      * Delete an open menu.
      *
@@ -7794,7 +7799,7 @@ export declare const tlmenus: {
      *
      * @public
      */
-    getOpenMenus(contextId?: string): string[];
+    getOpenMenus(contextId?: string | undefined): string[];
     /**
      * Get whether a menu is open for a given context.
      *
@@ -7808,7 +7813,7 @@ export declare const tlmenus: {
      *
      * @public
      */
-    isMenuOpen(id: string, contextId?: string): boolean;
+    isMenuOpen(id: string, contextId?: string | undefined): boolean;
     /**
      * Get whether any menus are open for a given context.
      *
@@ -7846,7 +7851,7 @@ export declare const tlmenus: {
      *
      * @public
      */
-    hideOpenMenus(contextId?: string): void;
+    hideOpenMenus(contextId?: string | undefined): void;
     /**
      * Show all hidden menus.
      *
@@ -7860,7 +7865,7 @@ export declare const tlmenus: {
      *
      * @public
      */
-    showOpenMenus(contextId?: string): void;
+    showOpenMenus(contextId?: string | undefined): void;
     forContext(contextId: string): {
         addOpenMenu: (id: string) => void;
         clearOpenMenus: () => void;
@@ -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;
 }
@@ -8578,7 +8584,7 @@ export declare const userTypeValidator: T.Validator<TLUserPreferences>;
 /** @public */
 export declare function useSelectionEvents(handle: TLSelectionHandle): {
     onPointerDown: PointerEventHandler<Element>;
-    onPointerMove: (e: React.PointerEvent) => void;
+    onPointerMove: (e: PointerEvent_2<Element>) => void;
     onPointerUp: PointerEventHandler<Element>;
 };
 

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.ea6778d1533e",
+  "4.5.0-next.a4da812dd479",
   "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;
   }