@excalidraw/excalidraw 0.18.0-6fc8502 → 0.18.0-a5d6939

package/dist/dev/index.js

@@ -89,6 +89,7 @@ import {
   STATS_PANELS,
   STROKE_WIDTH,
   SVGStringToFile,
+  SVG_DOCUMENT_PREAMBLE,
   SVG_NS,
   Scene_default,
   ShapeCache,
@@ -171,7 +172,6 @@ import {
   findLastIndex,
   fixBindingsAfterDeletion,
   fixDuplicatedBindingsAfterDuplication,
-  fixReversedBindings,
   focusNearestParent,
   frameAndChildrenSelectedTogether,
   generateIdFromFile,
@@ -248,6 +248,7 @@ import {
   getSelectedGroupIdForElement,
   getSelectedGroupIds,
   getSelectionBoxShape,
+  getSelectionStateForElements,
   getShortcutKey,
   getSizeFromPoints,
   getSuggestedBindingsForArrows,
@@ -433,6 +434,7 @@ import {
   shouldMaintainAspectRatio,
   shouldResizeFromCenter,
   shouldRotateWithDiscreteAngle,
+  shouldTestInside,
   supportsResizeObserver,
   suppportsHorizontalAlign,
   syncInvalidIndices,
@@ -460,10 +462,10 @@ import {
   viewportCoordsToSceneCoords,
   wrapEvent,
   wrapText
-} from "./chunk-KYBDXI6F.js";
+} from "./chunk-GBJ7S76A.js";
 import {
   define_import_meta_env_default
-} from "./chunk-H7XJ5UVD.js";
+} from "./chunk-GIMGG4AT.js";
 import {
   en_default
 } from "./chunk-X3RYHLJU.js";
@@ -573,8 +575,8 @@ var normalizeElementOrder = (elements) => {
 };
 
 // ../element/src/duplicate.ts
-var duplicateElement = (editingGroupId, groupIdMapForOperation, element, overrides, randomizeSeed) => {
-  let copy = deepCopyElement(element);
+var duplicateElement = (editingGroupId, groupIdMapForOperation, element, randomizeSeed) => {
+  const copy = deepCopyElement(element);
   if (isTestEnv()) {
     __test__defineOrigId(copy, element.id);
   }
@@ -594,9 +596,6 @@ var duplicateElement = (editingGroupId, groupIdMapForOperation, element, overrid
       return groupIdMapForOperation.get(groupId);
     }
   );
-  if (overrides) {
-    copy = Object.assign(copy, overrides);
-  }
   return copy;
 };
 var duplicateElements = (opts) => {
@@ -605,13 +604,13 @@ var duplicateElements = (opts) => {
     editingGroupId: null,
     selectedGroupIds: {}
   };
-  const reverseOrder = opts.type === "in-place" ? opts.reverseOrder : false;
   const processedIds = /* @__PURE__ */ new Map();
   const groupIdMap = /* @__PURE__ */ new Map();
-  const newElements = [];
-  const oldElements = [];
-  const oldIdToDuplicatedId = /* @__PURE__ */ new Map();
-  const duplicatedElementsMap = /* @__PURE__ */ new Map();
+  const duplicatedElements = [];
+  const origElements = [];
+  const origIdToDuplicateId = /* @__PURE__ */ new Map();
+  const duplicateIdToOrigElement = /* @__PURE__ */ new Map();
+  const duplicateElementsMap = /* @__PURE__ */ new Map();
   const elementsMap = arrayToMap(elements);
   const _idsOfElementsToDuplicate = opts.type === "in-place" ? opts.idsOfElementsToDuplicate : new Map(elements.map((el) => [el.id, el]));
   if (opts.type === "in-place") {
@@ -620,7 +619,7 @@ var duplicateElements = (opts) => {
     }
   }
   elements = normalizeElementOrder(elements);
-  const elementsWithClones = elements.slice();
+  const elementsWithDuplicates = elements.slice();
   const copyElements = (element) => {
     const elements2 = castArray(element);
     const _newElements = elements2.reduce(
@@ -633,14 +632,14 @@ var duplicateElements = (opts) => {
           appState.editingGroupId,
           groupIdMap,
           element2,
-          opts.overrides?.(element2),
           opts.randomizeSeed
         );
         processedIds.set(newElement2.id, true);
-        duplicatedElementsMap.set(newElement2.id, newElement2);
-        oldIdToDuplicatedId.set(element2.id, newElement2.id);
-        oldElements.push(element2);
-        newElements.push(newElement2);
+        duplicateElementsMap.set(newElement2.id, newElement2);
+        origIdToDuplicateId.set(element2.id, newElement2.id);
+        duplicateIdToOrigElement.set(newElement2.id, element2);
+        origElements.push(element2);
+        duplicatedElements.push(newElement2);
         acc.push(newElement2);
         return acc;
       },
@@ -652,19 +651,11 @@ var duplicateElements = (opts) => {
     if (!elements2) {
       return;
     }
-    if (reverseOrder && index < 1) {
-      elementsWithClones.unshift(...castArray(elements2));
-      return;
-    }
-    if (!reverseOrder && index > elementsWithClones.length - 1) {
-      elementsWithClones.push(...castArray(elements2));
+    if (index > elementsWithDuplicates.length - 1) {
+      elementsWithDuplicates.push(...castArray(elements2));
       return;
     }
-    elementsWithClones.splice(
-      index + (reverseOrder ? 0 : 1),
-      0,
-      ...castArray(elements2)
-    );
+    elementsWithDuplicates.splice(index + 1, 0, ...castArray(elements2));
   };
   const frameIdsToDuplicate = new Set(
     elements.filter(
@@ -683,9 +674,7 @@ var duplicateElements = (opts) => {
       const groupElements = getElementsInGroup(elements, groupId).flatMap(
         (element2) => isFrameLikeElement(element2) ? [...getFrameChildren(elements, element2.id), element2] : [element2]
       );
-      const targetIndex = reverseOrder ? elementsWithClones.findIndex((el) => {
-        return el.groupIds?.includes(groupId);
-      }) : findLastIndex(elementsWithClones, (el) => {
+      const targetIndex = findLastIndex(elementsWithDuplicates, (el) => {
         return el.groupIds?.includes(groupId);
       });
       insertBeforeOrAfterIndex(targetIndex, copyElements(groupElements));
@@ -697,7 +686,7 @@ var duplicateElements = (opts) => {
     if (isFrameLikeElement(element)) {
       const frameId = element.id;
       const frameChildren = getFrameChildren(elements, frameId);
-      const targetIndex = findLastIndex(elementsWithClones, (el) => {
+      const targetIndex = findLastIndex(elementsWithDuplicates, (el) => {
         return el.frameId === frameId || el.id === frameId;
       });
       insertBeforeOrAfterIndex(
@@ -708,12 +697,12 @@ var duplicateElements = (opts) => {
     }
     if (hasBoundTextElement(element)) {
       const boundTextElement = getBoundTextElement(element, elementsMap);
-      const targetIndex = findLastIndex(elementsWithClones, (el) => {
+      const targetIndex = findLastIndex(elementsWithDuplicates, (el) => {
         return el.id === element.id || "containerId" in el && el.containerId === element.id;
       });
       if (boundTextElement) {
         insertBeforeOrAfterIndex(
-          targetIndex + (reverseOrder ? -1 : 0),
+          targetIndex,
           copyElements([element, boundTextElement])
         );
       } else {
@@ -723,7 +712,7 @@ var duplicateElements = (opts) => {
     }
     if (isBoundToContainer(element)) {
       const container = getContainerElement(element, elementsMap);
-      const targetIndex = findLastIndex(elementsWithClones, (el) => {
+      const targetIndex = findLastIndex(elementsWithDuplicates, (el) => {
         return el.id === element.id || el.id === container?.id;
       });
       if (container) {
@@ -737,30 +726,40 @@ var duplicateElements = (opts) => {
       continue;
     }
     insertBeforeOrAfterIndex(
-      findLastIndex(elementsWithClones, (el) => el.id === element.id),
+      findLastIndex(elementsWithDuplicates, (el) => el.id === element.id),
       copyElements(element)
     );
   }
   fixDuplicatedBindingsAfterDuplication(
-    newElements,
-    oldIdToDuplicatedId,
-    duplicatedElementsMap
-  );
-  if (reverseOrder) {
-    fixReversedBindings(
-      _idsOfElementsToDuplicate,
-      elementsWithClones,
-      oldIdToDuplicatedId
-    );
-  }
+    duplicatedElements,
+    origIdToDuplicateId,
+    duplicateElementsMap
+  );
   bindElementsToFramesAfterDuplication(
-    elementsWithClones,
-    oldElements,
-    oldIdToDuplicatedId
+    elementsWithDuplicates,
+    origElements,
+    origIdToDuplicateId
   );
+  if (opts.overrides) {
+    for (const duplicateElement2 of duplicatedElements) {
+      const origElement = duplicateIdToOrigElement.get(duplicateElement2.id);
+      if (origElement) {
+        Object.assign(
+          duplicateElement2,
+          opts.overrides({
+            duplicateElement: duplicateElement2,
+            origElement,
+            origIdToDuplicateId
+          })
+        );
+      }
+    }
+  }
   return {
-    newElements,
-    elementsWithClones
+    duplicatedElements,
+    duplicateElementsMap,
+    elementsWithDuplicates,
+    origIdToDuplicateId
   };
 };
 var _deepCopyElement = (val, depth = 0) => {
@@ -7447,7 +7446,7 @@ var actionDuplicateSelection = register({
         return false;
       }
     }
-    let { newElements: duplicatedElements, elementsWithClones: nextElements } = duplicateElements({
+    let { duplicatedElements, elementsWithDuplicates } = duplicateElements({
       type: "in-place",
       elements,
       idsOfElementsToDuplicate: arrayToMap(
@@ -7458,38 +7457,35 @@ var actionDuplicateSelection = register({
       ),
       appState,
       randomizeSeed: true,
-      overrides: (element) => ({
-        x: element.x + DEFAULT_GRID_SIZE / 2,
-        y: element.y + DEFAULT_GRID_SIZE / 2
-      }),
-      reverseOrder: false
+      overrides: ({ origElement, origIdToDuplicateId }) => {
+        const duplicateFrameId = origElement.frameId && origIdToDuplicateId.get(origElement.frameId);
+        return {
+          x: origElement.x + DEFAULT_GRID_SIZE / 2,
+          y: origElement.y + DEFAULT_GRID_SIZE / 2,
+          frameId: duplicateFrameId ?? origElement.frameId
+        };
+      }
     });
-    if (app.props.onDuplicate && nextElements) {
-      const mappedElements = app.props.onDuplicate(nextElements, elements);
+    if (app.props.onDuplicate && elementsWithDuplicates) {
+      const mappedElements = app.props.onDuplicate(
+        elementsWithDuplicates,
+        elements
+      );
       if (mappedElements) {
-        nextElements = mappedElements;
+        elementsWithDuplicates = mappedElements;
       }
     }
     return {
-      elements: syncMovedIndices(nextElements, arrayToMap(duplicatedElements)),
+      elements: syncMovedIndices(
+        elementsWithDuplicates,
+        arrayToMap(duplicatedElements)
+      ),
       appState: {
         ...appState,
-        ...updateLinearElementEditors(duplicatedElements),
-        ...selectGroupsForSelectedElements(
-          {
-            editingGroupId: appState.editingGroupId,
-            selectedElementIds: excludeElementsInFramesFromSelection(
-              duplicatedElements
-            ).reduce((acc, element) => {
-              if (!isBoundToContainer(element)) {
-                acc[element.id] = true;
-              }
-              return acc;
-            }, {})
-          },
-          getNonDeletedElements(nextElements),
-          appState,
-          null
+        ...getSelectionStateForElements(
+          duplicatedElements,
+          getNonDeletedElements(elementsWithDuplicates),
+          appState
         )
       },
       captureUpdate: CaptureUpdateAction.IMMEDIATELY
@@ -7510,24 +7506,6 @@ var actionDuplicateSelection = register({
     }
   )
 });
-var updateLinearElementEditors = (clonedElements) => {
-  const linears = clonedElements.filter(isLinearElement);
-  if (linears.length === 1) {
-    const linear = linears[0];
-    const boundElements = linear.boundElements?.map((def) => def.id) ?? [];
-    const onlySingleLinearSelected = clonedElements.every(
-      (el) => el.id === linear.id || boundElements.includes(el.id)
-    );
-    if (onlySingleLinearSelected) {
-      return {
-        selectedLinearElement: new LinearElementEditor(linear)
-      };
-    }
-  }
-  return {
-    selectedLinearElement: null
-  };
-};
 
 // actions/actionProperties.tsx
 import { useEffect as useEffect13, useMemo as useMemo4, useRef as useRef11, useState as useState6 } from "react";
@@ -12772,7 +12750,9 @@ var exportCanvas = async (type, elements, appState, files, {
     if (type === "svg") {
       return fileSave(
         svgPromise.then((svg) => {
-          return new Blob([svg.outerHTML], { type: MIME_TYPES.svg });
+          return new Blob([SVG_DOCUMENT_PREAMBLE + svg.outerHTML], {
+            type: MIME_TYPES.svg
+          });
         }),
         {
           description: "Export to SVG",
@@ -12802,7 +12782,7 @@ var exportCanvas = async (type, elements, appState, files, {
     let blob = canvasToBlob(tempCanvas);
     if (appState.exportEmbedScene) {
       blob = blob.then(
-        (blob2) => import("./data/image-NKFINVKH.js").then(
+        (blob2) => import("./data/image-JN3Y4CVN.js").then(
           ({ encodePngMetadata: encodePngMetadata2 }) => encodePngMetadata2({
             blob: blob2,
             metadata: serializeAsJSON(elements, appState, files, "local")
@@ -14892,7 +14872,8 @@ var actionBindText = register({
       containerId: container.id,
       verticalAlign: VERTICAL_ALIGN.MIDDLE,
       textAlign: TEXT_ALIGN.CENTER,
-      autoResize: true
+      autoResize: true,
+      angle: isArrowElement(container) ? 0 : container?.angle ?? 0
     });
     mutateElement(container, {
       boundElements: (container.boundElements || []).concat({
@@ -18142,7 +18123,7 @@ function LibraryMenuItems({
             type: "everything",
             elements: item.elements,
             randomizeSeed: true
-          }).newElements
+          }).duplicatedElements
         };
       });
     },
@@ -24341,6 +24322,161 @@ var LassoTrail = class extends AnimatedTrail {
   }
 };
 
+// eraser/index.ts
+var POINTS_ON_TRAIL = 2;
+var EraserTrail = class extends AnimatedTrail {
+  constructor(animationFrameHandler, app) {
+    super(animationFrameHandler, app, {
+      streamline: 0.2,
+      size: 5,
+      keepHead: true,
+      sizeMapping: (c) => {
+        const DECAY_TIME = 200;
+        const DECAY_LENGTH = 10;
+        const t2 = Math.max(
+          0,
+          1 - (performance.now() - c.pressure) / DECAY_TIME
+        );
+        const l = (DECAY_LENGTH - Math.min(DECAY_LENGTH, c.totalLength - c.currentIndex)) / DECAY_LENGTH;
+        return Math.min(easeOut(l), easeOut(t2));
+      },
+      fill: () => app.state.theme === THEME.LIGHT ? "rgba(0, 0, 0, 0.2)" : "rgba(255, 255, 255, 0.2)"
+    });
+    __publicField(this, "elementsToErase", /* @__PURE__ */ new Set());
+    __publicField(this, "groupsToErase", /* @__PURE__ */ new Set());
+    __publicField(this, "segmentsCache", /* @__PURE__ */ new Map());
+    __publicField(this, "geometricShapesCache", /* @__PURE__ */ new Map());
+  }
+  startPath(x, y) {
+    this.endPath();
+    super.startPath(x, y);
+    this.elementsToErase.clear();
+  }
+  addPointToPath(x, y, restore2 = false) {
+    super.addPointToPath(x, y);
+    const elementsToEraser = this.updateElementsToBeErased(restore2);
+    return elementsToEraser;
+  }
+  updateElementsToBeErased(restoreToErase) {
+    let eraserPath = super.getCurrentTrail()?.originalPoints?.map((p) => pointFrom(p[0], p[1])) || [];
+    eraserPath = eraserPath?.slice(eraserPath.length - POINTS_ON_TRAIL);
+    const candidateElements = this.app.visibleElements.filter(
+      (el) => !el.locked
+    );
+    const candidateElementsMap = arrayToMap(candidateElements);
+    const pathSegments = eraserPath.reduce((acc, point, index) => {
+      if (index === 0) {
+        return acc;
+      }
+      acc.push(lineSegment(eraserPath[index - 1], point));
+      return acc;
+    }, []);
+    if (pathSegments.length === 0) {
+      return [];
+    }
+    for (const element of candidateElements) {
+      if (restoreToErase && this.elementsToErase.has(element.id)) {
+        const intersects = eraserTest(
+          pathSegments,
+          element,
+          this.segmentsCache,
+          this.geometricShapesCache,
+          candidateElementsMap,
+          this.app
+        );
+        if (intersects) {
+          const shallowestGroupId = element.groupIds.at(-1);
+          if (this.groupsToErase.has(shallowestGroupId)) {
+            const elementsInGroup = getElementsInGroup(
+              this.app.scene.getNonDeletedElementsMap(),
+              shallowestGroupId
+            );
+            for (const elementInGroup of elementsInGroup) {
+              this.elementsToErase.delete(elementInGroup.id);
+            }
+            this.groupsToErase.delete(shallowestGroupId);
+          }
+          if (isBoundToContainer(element)) {
+            this.elementsToErase.delete(element.containerId);
+          }
+          if (hasBoundTextElement(element)) {
+            const boundText = getBoundTextElementId(element);
+            if (boundText) {
+              this.elementsToErase.delete(boundText);
+            }
+          }
+          this.elementsToErase.delete(element.id);
+        }
+      } else if (!restoreToErase && !this.elementsToErase.has(element.id)) {
+        const intersects = eraserTest(
+          pathSegments,
+          element,
+          this.segmentsCache,
+          this.geometricShapesCache,
+          candidateElementsMap,
+          this.app
+        );
+        if (intersects) {
+          const shallowestGroupId = element.groupIds.at(-1);
+          if (!this.groupsToErase.has(shallowestGroupId)) {
+            const elementsInGroup = getElementsInGroup(
+              this.app.scene.getNonDeletedElementsMap(),
+              shallowestGroupId
+            );
+            for (const elementInGroup of elementsInGroup) {
+              this.elementsToErase.add(elementInGroup.id);
+            }
+            this.groupsToErase.add(shallowestGroupId);
+          }
+          if (hasBoundTextElement(element)) {
+            const boundText = getBoundTextElementId(element);
+            if (boundText) {
+              this.elementsToErase.add(boundText);
+            }
+          }
+          if (isBoundToContainer(element)) {
+            this.elementsToErase.add(element.containerId);
+          }
+          this.elementsToErase.add(element.id);
+        }
+      }
+    }
+    return Array.from(this.elementsToErase);
+  }
+  endPath() {
+    super.endPath();
+    super.clearTrails();
+    this.elementsToErase.clear();
+    this.groupsToErase.clear();
+    this.segmentsCache.clear();
+  }
+};
+var eraserTest = (pathSegments, element, elementsSegments, shapesCache, elementsMap, app) => {
+  let shape = shapesCache.get(element.id);
+  if (!shape) {
+    shape = getElementShape(element, elementsMap);
+    shapesCache.set(element.id, shape);
+  }
+  const lastPoint = pathSegments[pathSegments.length - 1][1];
+  if (shouldTestInside(element) && isPointInShape(lastPoint, shape)) {
+    return true;
+  }
+  let elementSegments = elementsSegments.get(element.id);
+  if (!elementSegments) {
+    elementSegments = getElementLineSegments(element, elementsMap);
+    elementsSegments.set(element.id, elementSegments);
+  }
+  return pathSegments.some(
+    (pathSegment) => elementSegments?.some(
+      (elementSegment) => lineSegmentIntersectionPoints(
+        pathSegment,
+        elementSegment,
+        app.getElementHitThreshold()
+      ) !== null
+    )
+  );
+};
+
 // components/BraveMeasureTextError.tsx
 import { jsx as jsx77, jsxs as jsxs42 } from "react/jsx-runtime";
 var BraveMeasureTextError = () => {
@@ -32040,19 +32176,7 @@ var App = class _App extends React43.Component {
     __publicField(this, "lastViewportPosition", { x: 0, y: 0 });
     __publicField(this, "animationFrameHandler", new AnimationFrameHandler());
     __publicField(this, "laserTrails", new LaserTrails(this.animationFrameHandler, this));
-    __publicField(this, "eraserTrail", new AnimatedTrail(this.animationFrameHandler, this, {
-      streamline: 0.2,
-      size: 5,
-      keepHead: true,
-      sizeMapping: (c) => {
-        const DECAY_TIME = 200;
-        const DECAY_LENGTH = 10;
-        const t2 = Math.max(0, 1 - (performance.now() - c.pressure) / DECAY_TIME);
-        const l = (DECAY_LENGTH - Math.min(DECAY_LENGTH, c.totalLength - c.currentIndex)) / DECAY_LENGTH;
-        return Math.min(easeOut(l), easeOut(t2));
-      },
-      fill: () => this.state.theme === THEME.LIGHT ? "rgba(0, 0, 0, 0.2)" : "rgba(255, 255, 255, 0.2)"
-    }));
+    __publicField(this, "eraserTrail", new EraserTrail(this.animationFrameHandler, this));
     __publicField(this, "lassoTrail", new LassoTrail(this.animationFrameHandler, this));
     __publicField(this, "onChangeEmitter", new Emitter());
     __publicField(this, "onPointerDownEmitter", new Emitter());
@@ -32891,7 +33015,7 @@ var App = class _App extends React43.Component {
       const dx = x - elementsCenterX;
       const dy = y - elementsCenterY;
       const [gridX, gridY] = getGridPoint(dx, dy, this.getEffectiveGridSize());
-      const { newElements } = duplicateElements({
+      const { duplicatedElements } = duplicateElements({
         type: "everything",
         elements: elements.map((element) => {
           return newElementWith(element, {
@@ -32902,17 +33026,17 @@ var App = class _App extends React43.Component {
         randomizeSeed: !opts.retainSeed
       });
       const prevElements = this.scene.getElementsIncludingDeleted();
-      let nextElements = [...prevElements, ...newElements];
+      let nextElements = [...prevElements, ...duplicatedElements];
       const mappedNewSceneElements = this.props.onDuplicate?.(
         nextElements,
         prevElements
       );
       nextElements = mappedNewSceneElements || nextElements;
-      syncMovedIndices(nextElements, arrayToMap(newElements));
+      syncMovedIndices(nextElements, arrayToMap(duplicatedElements));
       const topLayerFrame = this.getTopLayerFrameAtSceneCoords({ x, y });
       if (topLayerFrame) {
         const eligibleElements = filterElementsEligibleAsFrameChildren(
-          newElements,
+          duplicatedElements,
           topLayerFrame
         );
         addElementsToFrame(
@@ -32923,7 +33047,7 @@ var App = class _App extends React43.Component {
         );
       }
       this.scene.replaceAllElements(nextElements);
-      newElements.forEach((newElement2) => {
+      duplicatedElements.forEach((newElement2) => {
         if (isTextElement(newElement2) && isBoundToContainer(newElement2)) {
           const container = getContainerElement(
             newElement2,
@@ -32937,7 +33061,7 @@ var App = class _App extends React43.Component {
         }
       });
       if (isSafari) {
-        Fonts.loadElementsFonts(newElements).then((fontFaces) => {
+        Fonts.loadElementsFonts(duplicatedElements).then((fontFaces) => {
           this.fonts.onLoaded(fontFaces);
         });
       }
@@ -32945,7 +33069,7 @@ var App = class _App extends React43.Component {
         this.addMissingFiles(opts.files);
       }
       this.store.shouldCaptureIncrement();
-      const nextElementsToSelect = excludeElementsInFramesFromSelection(newElements);
+      const nextElementsToSelect = excludeElementsInFramesFromSelection(duplicatedElements);
       this.setState(
         {
           ...this.state,
@@ -32981,7 +33105,7 @@ var App = class _App extends React43.Component {
       );
       this.setActiveTool({ type: "selection" });
       if (opts.fitToContent) {
-        this.scrollToContent(newElements, {
+        this.scrollToContent(duplicatedElements, {
           fitToContent: true,
           canvasOffsets: this.getEditorUIOffsets()
         });
@@ -33965,7 +34089,7 @@ var App = class _App extends React43.Component {
         x: sceneX,
         y: sceneY
       });
-      const element = existingTextElement ? existingTextElement : newTextElement({
+      const element = existingTextElement || newTextElement({
         x: parentCenterPosition ? parentCenterPosition.elementCenterX : sceneX,
         y: parentCenterPosition ? parentCenterPosition.elementCenterY : sceneY,
         strokeColor: this.state.currentItemStrokeColor,
@@ -33983,7 +34107,7 @@ var App = class _App extends React43.Component {
         containerId: shouldBindToContainer ? container?.id : void 0,
         groupIds: container?.groupIds ?? [],
         lineHeight,
-        angle: container?.angle ?? 0,
+        angle: container ? isArrowElement(container) ? 0 : container.angle : 0,
         frameId: topLayerFrame ? topLayerFrame.id : null
       });
       if (!existingTextElement && shouldBindToContainer && container) {
@@ -34601,80 +34725,14 @@ var App = class _App extends React43.Component {
         }));
       }
     });
-    __publicField(this, "handleEraser", (event, pointerDownState, scenePointer) => {
-      this.eraserTrail.addPointToPath(scenePointer.x, scenePointer.y);
-      let didChange = false;
-      const processedGroups = /* @__PURE__ */ new Set();
-      const nonDeletedElements = this.scene.getNonDeletedElements();
-      const processElements = (elements) => {
-        for (const element of elements) {
-          if (element.locked) {
-            return;
-          }
-          if (event.altKey) {
-            if (this.elementsPendingErasure.delete(element.id)) {
-              didChange = true;
-            }
-          } else if (!this.elementsPendingErasure.has(element.id)) {
-            didChange = true;
-            this.elementsPendingErasure.add(element.id);
-          }
-          if (didChange && element.groupIds?.length) {
-            const shallowestGroupId = element.groupIds.at(-1);
-            if (!processedGroups.has(shallowestGroupId)) {
-              processedGroups.add(shallowestGroupId);
-              const elems = getElementsInGroup(
-                nonDeletedElements,
-                shallowestGroupId
-              );
-              for (const elem of elems) {
-                if (event.altKey) {
-                  this.elementsPendingErasure.delete(elem.id);
-                } else {
-                  this.elementsPendingErasure.add(elem.id);
-                }
-              }
-            }
-          }
-        }
-      };
-      const distance2 = pointDistance(
-        pointFrom(pointerDownState.lastCoords.x, pointerDownState.lastCoords.y),
-        pointFrom(scenePointer.x, scenePointer.y)
+    __publicField(this, "handleEraser", (event, scenePointer) => {
+      const elementsToErase = this.eraserTrail.addPointToPath(
+        scenePointer.x,
+        scenePointer.y,
+        event.altKey
       );
-      const threshold = this.getElementHitThreshold();
-      const p = { ...pointerDownState.lastCoords };
-      let samplingInterval = 0;
-      while (samplingInterval <= distance2) {
-        const hitElements = this.getElementsAtPosition(p.x, p.y);
-        processElements(hitElements);
-        if (samplingInterval === distance2) {
-          break;
-        }
-        samplingInterval = Math.min(samplingInterval + threshold, distance2);
-        const distanceRatio = samplingInterval / distance2;
-        const nextX = (1 - distanceRatio) * p.x + distanceRatio * scenePointer.x;
-        const nextY = (1 - distanceRatio) * p.y + distanceRatio * scenePointer.y;
-        p.x = nextX;
-        p.y = nextY;
-      }
-      pointerDownState.lastCoords.x = scenePointer.x;
-      pointerDownState.lastCoords.y = scenePointer.y;
-      if (didChange) {
-        for (const element of this.scene.getNonDeletedElements()) {
-          if (isBoundToContainer(element) && (this.elementsPendingErasure.has(element.id) || this.elementsPendingErasure.has(element.containerId))) {
-            if (event.altKey) {
-              this.elementsPendingErasure.delete(element.id);
-              this.elementsPendingErasure.delete(element.containerId);
-            } else {
-              this.elementsPendingErasure.add(element.id);
-              this.elementsPendingErasure.add(element.containerId);
-            }
-          }
-        }
-        this.elementsPendingErasure = new Set(this.elementsPendingErasure);
-        this.triggerRender();
-      }
+      this.elementsPendingErasure = new Set(elementsToErase);
+      this.triggerRender();
     });
     // set touch moving for mobile context menu
     __publicField(this, "handleTouchMove", (event) => {
@@ -37225,8 +37283,8 @@ var App = class _App extends React43.Component {
                           {
                             trails: [
                               this.laserTrails,
-                              this.eraserTrail,
-                              this.lassoTrail
+                              this.lassoTrail,
+                              this.eraserTrail
                             ]
                           }
                         ),
@@ -38378,7 +38436,8 @@ var App = class _App extends React43.Component {
       },
       drag: {
         hasOccurred: false,
-        offset: null
+        offset: null,
+        origin: { ...origin }
       },
       eventListeners: {
         onMove: null,
@@ -38557,7 +38616,7 @@ var App = class _App extends React43.Component {
         return;
       }
       if (isEraserActive(this.state)) {
-        this.handleEraser(event, pointerDownState, pointerCoords);
+        this.handleEraser(event, pointerCoords);
         return;
       }
       if (this.state.activeTool.type === "laser") {
@@ -38678,8 +38737,8 @@ var App = class _App extends React43.Component {
         pointerDownState.drag.hasOccurred = true;
         if (selectedElements.length > 0 && !pointerDownState.withCmdOrCtrl && !this.state.editingTextElement && this.state.activeEmbeddable?.state !== "active") {
           const dragOffset = {
-            x: pointerCoords.x - pointerDownState.origin.x,
-            y: pointerCoords.y - pointerDownState.origin.y
+            x: pointerCoords.x - pointerDownState.drag.origin.x,
+            y: pointerCoords.y - pointerDownState.drag.origin.y
           };
           const originalElements = [
             ...pointerDownState.originalElements.values()
@@ -38818,46 +38877,90 @@ var App = class _App extends React43.Component {
             const idsOfElementsToDuplicate = new Map(
               selectedElements2.map((el) => [el.id, el])
             );
-            const { newElements: clonedElements, elementsWithClones } = duplicateElements({
+            const {
+              duplicatedElements,
+              duplicateElementsMap,
+              elementsWithDuplicates,
+              origIdToDuplicateId
+            } = duplicateElements({
               type: "in-place",
               elements,
               appState: this.state,
               randomizeSeed: true,
               idsOfElementsToDuplicate,
-              overrides: (el) => {
+              overrides: ({ duplicateElement: duplicateElement2, origElement }) => {
+                return {
+                  // reset to the original element's frameId (unless we've
+                  // duplicated alongside a frame in which case we need to
+                  // keep the duplicate frame's id) so that the element
+                  // frame membership is refreshed on pointerup
+                  // NOTE this is a hacky solution and should be done
+                  // differently
+                  frameId: duplicateElement2.frameId ?? origElement.frameId,
+                  seed: randomInteger()
+                };
+              }
+            });
+            duplicatedElements.forEach((element) => {
+              pointerDownState.originalElements.set(
+                element.id,
+                deepCopyElement(element)
+              );
+            });
+            const mappedClonedElements = elementsWithDuplicates.map((el) => {
+              if (idsOfElementsToDuplicate.has(el.id)) {
                 const origEl = pointerDownState.originalElements.get(el.id);
                 if (origEl) {
-                  return {
+                  return newElementWith(el, {
                     x: origEl.x,
-                    y: origEl.y,
-                    seed: origEl.seed
-                  };
+                    y: origEl.y
+                  });
                 }
-                return {};
-              },
-              reverseOrder: true
-            });
-            clonedElements.forEach((element) => {
-              pointerDownState.originalElements.set(element.id, element);
+              }
+              return el;
             });
             const mappedNewSceneElements = this.props.onDuplicate?.(
-              elementsWithClones,
+              mappedClonedElements,
               elements
             );
-            const nextSceneElements = syncMovedIndices(
-              mappedNewSceneElements || elementsWithClones,
-              arrayToMap(clonedElements)
-            ).map((el) => {
-              if (idsOfElementsToDuplicate.has(el.id)) {
-                return newElementWith(el, {
-                  seed: randomInteger()
-                });
+            const elementsWithIndices = syncMovedIndices(
+              mappedNewSceneElements || mappedClonedElements,
+              arrayToMap(duplicatedElements)
+            );
+            flushSync2(() => {
+              if (pointerDownState.hit.element) {
+                const cloneId = origIdToDuplicateId.get(
+                  pointerDownState.hit.element.id
+                );
+                const clonedElement = cloneId && duplicateElementsMap.get(cloneId);
+                pointerDownState.hit.element = clonedElement || null;
               }
-              return el;
+              pointerDownState.hit.allHitElements = pointerDownState.hit.allHitElements.reduce(
+                (acc, origHitElement) => {
+                  const cloneId = origIdToDuplicateId.get(origHitElement.id);
+                  const clonedElement = cloneId && duplicateElementsMap.get(cloneId);
+                  if (clonedElement) {
+                    acc.push(clonedElement);
+                  }
+                  return acc;
+                },
+                []
+              );
+              pointerDownState.drag.origin = viewportCoordsToSceneCoords(
+                event,
+                this.state
+              );
+              this.setState((prevState) => ({
+                ...getSelectionStateForElements(
+                  duplicatedElements,
+                  this.scene.getNonDeletedElements(),
+                  prevState
+                )
+              }));
+              this.scene.replaceAllElements(elementsWithIndices);
+              this.maybeCacheVisibleGaps(event, selectedElements2, true);
+              this.maybeCacheReferenceSnapPoints(event, selectedElements2, true);
             });
-            this.scene.replaceAllElements(nextSceneElements);
-            this.maybeCacheVisibleGaps(event, selectedElements2, true);
-            this.maybeCacheReferenceSnapPoints(event, selectedElements2, true);
           }
           return;
         }