@excalidraw/element 0.18.0-1b287a8ba → 0.18.0-3085f4a

package/dist/dev/index.js

@@ -5338,6 +5338,11 @@ var handleSegmentRelease = (arrow, fixedSegments, elementsMap) => {
     null,
     null
   );
+  if (!restoredPoints || restoredPoints.length < 2) {
+    throw new Error(
+      "Property 'points' is required in the update returned by normalizeArrowElementUpdate()"
+    );
+  }
   const nextPoints = [];
   if (prevSegment) {
     for (let i = 0; i < prevSegment.index; i++) {
@@ -5583,8 +5588,13 @@ var handleEndpointDrag = (arrow, updatedPoints, fixedSegments, startHeading, end
     newPoints.push(globalUpdatedPoints[newPoints.length + offset]);
   }
   {
-    const secondPoint = globalUpdatedPoints[startIsSpecial ? 2 : 1];
-    const thirdPoint = globalUpdatedPoints[startIsSpecial ? 3 : 2];
+    const secondPoint = globalUpdatedPoints.at(startIsSpecial ? 2 : 1);
+    const thirdPoint = globalUpdatedPoints.at(startIsSpecial ? 3 : 2);
+    if (!secondPoint || !thirdPoint) {
+      throw new Error(
+        `Second and third points must exist when handling endpoint drag (${startIsSpecial})`
+      );
+    }
     const startIsHorizontal = headingIsHorizontal(startHeading);
     const secondIsHorizontal = headingIsHorizontal(
       vectorToHeading(vectorFromPoint5(secondPoint, thirdPoint))
@@ -5630,8 +5640,17 @@ var handleEndpointDrag = (arrow, updatedPoints, fixedSegments, startHeading, end
     newPoints.unshift(startGlobalPoint);
   }
   {
-    const secondToLastPoint = globalUpdatedPoints[globalUpdatedPoints.length - (endIsSpecial ? 3 : 2)];
-    const thirdToLastPoint = globalUpdatedPoints[globalUpdatedPoints.length - (endIsSpecial ? 4 : 3)];
+    const secondToLastPoint = globalUpdatedPoints.at(
+      globalUpdatedPoints.length - (endIsSpecial ? 3 : 2)
+    );
+    const thirdToLastPoint = globalUpdatedPoints.at(
+      globalUpdatedPoints.length - (endIsSpecial ? 4 : 3)
+    );
+    if (!secondToLastPoint || !thirdToLastPoint) {
+      throw new Error(
+        `Second and third to last points must exist when handling endpoint drag (${endIsSpecial})`
+      );
+    }
     const endIsHorizontal = headingIsHorizontal(endHeading);
     const secondIsHorizontal = headingForPointIsHorizontal(
       thirdToLastPoint,
@@ -8127,7 +8146,8 @@ var LinearElementEditor = class _LinearElementEditor {
   segmentMidPointHoveredCoords;
   elbowed;
   customLineAngle;
-  constructor(element, elementsMap) {
+  isEditing;
+  constructor(element, elementsMap, isEditing = false) {
     this.elementId = element.id;
     if (!pointsEqual6(element.points[0], pointFrom8(0, 0))) {
       console.error("Linear element is not normalized", Error().stack);
@@ -8158,6 +8178,7 @@ var LinearElementEditor = class _LinearElementEditor {
     this.segmentMidPointHoveredCoords = null;
     this.elbowed = isElbowArrow(element) && element.elbowed;
     this.customLineAngle = null;
+    this.isEditing = isEditing;
   }
   // ---------------------------------------------------------------------------
   // static methods
@@ -8175,11 +8196,11 @@ var LinearElementEditor = class _LinearElementEditor {
     return null;
   }
   static handleBoxSelection(event, appState, setState, elementsMap) {
-    if (!appState.editingLinearElement || !appState.selectionElement) {
+    if (!appState.selectedLinearElement?.isEditing || !appState.selectionElement) {
       return false;
     }
-    const { editingLinearElement } = appState;
-    const { selectedPointsIndices, elementId } = editingLinearElement;
+    const { selectedLinearElement } = appState;
+    const { selectedPointsIndices, elementId } = selectedLinearElement;
     const element = _LinearElementEditor.getElement(elementId, elementsMap);
     if (!element) {
       return false;
@@ -8201,8 +8222,8 @@ var LinearElementEditor = class _LinearElementEditor {
       return true;
     });
     setState({
-      editingLinearElement: {
-        ...editingLinearElement,
+      selectedLinearElement: {
+        ...selectedLinearElement,
         selectedPointsIndices: nextSelectedPoints.length ? nextSelectedPoints : null
       }
     });
@@ -8356,7 +8377,6 @@ var LinearElementEditor = class _LinearElementEditor {
       };
       return {
         ...app.state,
-        editingLinearElement: app.state.editingLinearElement ? newLinearElementEditor : null,
         selectedLinearElement: newLinearElementEditor,
         suggestedBindings
       };
@@ -8440,7 +8460,7 @@ var LinearElementEditor = class _LinearElementEditor {
   }
   static getEditorMidPoints = (element, elementsMap, appState) => {
     const boundText = getBoundTextElement(element, elementsMap);
-    if (!isElbowArrow(element) && !appState.editingLinearElement && element.points.length > 2 && !boundText) {
+    if (!isElbowArrow(element) && !appState.selectedLinearElement?.isEditing && element.points.length > 2 && !boundText) {
       return [];
     }
     const points = _LinearElementEditor.getPointsGlobalCoordinates(
@@ -8490,7 +8510,7 @@ var LinearElementEditor = class _LinearElementEditor {
       element,
       elementsMap
     );
-    if (points.length >= 3 && !appState.editingLinearElement && !isElbowArrow(element)) {
+    if (points.length >= 3 && !appState.selectedLinearElement?.isEditing && !isElbowArrow(element)) {
       return null;
     }
     const threshold = (_LinearElementEditor.POINT_HANDLE_SIZE + 1) / appState.zoom.value;
@@ -8630,7 +8650,7 @@ var LinearElementEditor = class _LinearElementEditor {
         segmentMidpoint,
         elementsMap
       );
-    } else if (event.altKey && appState.editingLinearElement) {
+    } else if (event.altKey && appState.selectedLinearElement?.isEditing) {
       if (linearElementEditor.lastUncommittedPoint == null) {
         scene.mutateElement(element, {
           points: [
@@ -8740,14 +8760,14 @@ var LinearElementEditor = class _LinearElementEditor {
   }
   static handlePointerMove(event, scenePointerX, scenePointerY, app) {
     const appState = app.state;
-    if (!appState.editingLinearElement) {
+    if (!appState.selectedLinearElement?.isEditing) {
       return null;
     }
-    const { elementId, lastUncommittedPoint } = appState.editingLinearElement;
+    const { elementId, lastUncommittedPoint } = appState.selectedLinearElement;
     const elementsMap = app.scene.getNonDeletedElementsMap();
     const element = _LinearElementEditor.getElement(elementId, elementsMap);
     if (!element) {
-      return appState.editingLinearElement;
+      return appState.selectedLinearElement;
     }
     const { points } = element;
     const lastPoint = points[points.length - 1];
@@ -8755,10 +8775,10 @@ var LinearElementEditor = class _LinearElementEditor {
       if (lastPoint === lastUncommittedPoint) {
         _LinearElementEditor.deletePoints(element, app, [points.length - 1]);
       }
-      return {
-        ...appState.editingLinearElement,
+      return appState.selectedLinearElement?.lastUncommittedPoint ? {
+        ...appState.selectedLinearElement,
         lastUncommittedPoint: null
-      };
+      } : appState.selectedLinearElement;
     }
     let newPoint;
     if (shouldRotateWithDiscreteAngle(event) && points.length >= 2) {
@@ -8778,8 +8798,8 @@ var LinearElementEditor = class _LinearElementEditor {
       newPoint = _LinearElementEditor.createPointAt(
         element,
         elementsMap,
-        scenePointerX - appState.editingLinearElement.pointerOffset.x,
-        scenePointerY - appState.editingLinearElement.pointerOffset.y,
+        scenePointerX - appState.selectedLinearElement.pointerOffset.x,
+        scenePointerY - appState.selectedLinearElement.pointerOffset.y,
         event[KEYS2.CTRL_OR_CMD] || isElbowArrow(element) ? null : app.getEffectiveGridSize()
       );
     }
@@ -8800,7 +8820,7 @@ var LinearElementEditor = class _LinearElementEditor {
       _LinearElementEditor.addPoints(element, app.scene, [newPoint]);
     }
     return {
-      ...appState.editingLinearElement,
+      ...appState.selectedLinearElement,
       lastUncommittedPoint: element.points[element.points.length - 1]
     };
   }
@@ -8906,11 +8926,11 @@ var LinearElementEditor = class _LinearElementEditor {
   // ---------------------------------------------------------------------------
   static duplicateSelectedPoints(appState, scene) {
     invariant6(
-      appState.editingLinearElement,
+      appState.selectedLinearElement?.isEditing,
       "Not currently editing a linear element"
     );
     const elementsMap = scene.getNonDeletedElementsMap();
-    const { selectedPointsIndices, elementId } = appState.editingLinearElement;
+    const { selectedPointsIndices, elementId } = appState.selectedLinearElement;
     const element = _LinearElementEditor.getElement(elementId, elementsMap);
     invariant6(
       element,
@@ -8957,14 +8977,14 @@ var LinearElementEditor = class _LinearElementEditor {
     }
     return {
       ...appState,
-      editingLinearElement: {
-        ...appState.editingLinearElement,
+      selectedLinearElement: {
+        ...appState.selectedLinearElement,
         selectedPointsIndices: nextSelectedIndices
       }
     };
   }
   static deletePoints(element, app, pointIndices) {
-    const isUncommittedPoint = app.state.editingLinearElement?.lastUncommittedPoint === element.points[element.points.length - 1];
+    const isUncommittedPoint = app.state.selectedLinearElement?.isEditing && app.state.selectedLinearElement?.lastUncommittedPoint === element.points[element.points.length - 1];
     const nextPoints = element.points.filter((_, idx) => {
       return !pointIndices.includes(idx);
     });
@@ -9073,7 +9093,7 @@ var LinearElementEditor = class _LinearElementEditor {
       pointFrom8(origin.x, origin.y),
       pointFrom8(pointerCoords.x, pointerCoords.y)
     );
-    if (!appState.editingLinearElement && dist < DRAGGING_THRESHOLD / appState.zoom.value) {
+    if (!appState.selectedLinearElement?.isEditing && dist < DRAGGING_THRESHOLD / appState.zoom.value) {
       return false;
     }
     return true;
@@ -10562,6 +10582,11 @@ var getCanvasPadding = (element) => {
       return element.strokeWidth * 12;
     case "text":
       return element.fontSize / 2;
+    case "arrow":
+      if (element.endArrowhead || element.endArrowhead) {
+        return 40;
+      }
+      return 20;
     default:
       return 20;
   }
@@ -13231,8 +13256,9 @@ var Store = class {
   constructor(app) {
     this.app = app;
   }
-  // internally used by history
+  // for internal use by history
   onDurableIncrementEmitter = new Emitter();
+  // for public use as part of onIncrement API
   onStoreIncrementEmitter = new Emitter();
   scheduledMacroActions = /* @__PURE__ */ new Set();
   scheduledMicroActions = [];
@@ -13488,7 +13514,7 @@ var EphemeralIncrement = class extends StoreIncrement {
     this.change = change;
   }
 };
-var StoreDelta = class {
+var StoreDelta = class _StoreDelta {
   constructor(id, elements, appState) {
     this.id = id;
     this.elements = elements;
@@ -13526,10 +13552,23 @@ var StoreDelta = class {
    */
   static load({
     id,
-    elements: { added, removed, updated }
+    elements: { added, removed, updated },
+    appState: { delta: appStateDelta }
   }) {
     const elements = ElementsDelta.create(added, removed, updated);
-    return new this(id, elements, AppStateDelta.empty());
+    const appState = AppStateDelta.create(appStateDelta);
+    return new this(id, elements, appState);
+  }
+  /**
+   * Squash the passed deltas into the aggregated delta instance.
+   */
+  static squash(...deltas) {
+    const aggregatedDelta = _StoreDelta.empty();
+    for (const delta of deltas) {
+      aggregatedDelta.elements.squash(delta.elements);
+      aggregatedDelta.appState.squash(delta.appState);
+    }
+    return aggregatedDelta;
   }
   /**
    * Inverse store delta, creates new instance of `StoreDelta`.
@@ -13540,9 +13579,7 @@ var StoreDelta = class {
   /**
    * Apply the delta to the passed elements and appState, does not modify the snapshot.
    */
-  static applyTo(delta, elements, appState, options = {
-    excludedProperties: /* @__PURE__ */ new Set()
-  }) {
+  static applyTo(delta, elements, appState, options) {
     const [nextElements, elementsContainVisibleChange] = delta.elements.applyTo(
       elements,
       StoreSnapshot.empty().elements,
@@ -13568,6 +13605,9 @@ var StoreDelta = class {
       }
     );
   }
+  static empty() {
+    return _StoreDelta.create(ElementsDelta.empty(), AppStateDelta.empty());
+  }
   isEmpty() {
     return this.elements.isEmpty() && this.appState.isEmpty();
   }
@@ -13808,8 +13848,7 @@ var getDefaultObservedAppState = () => {
     viewBackgroundColor: COLOR_PALETTE2.white,
     selectedElementIds: {},
     selectedGroupIds: {},
-    editingLinearElementId: null,
-    selectedLinearElementId: null,
+    selectedLinearElement: null,
     croppingElementId: null,
     activeLockedId: null,
     lockedMultiSelections: {}
@@ -13825,10 +13864,10 @@ var getObservedAppState = (appState) => {
     croppingElementId: appState.croppingElementId,
     activeLockedId: appState.activeLockedId,
     lockedMultiSelections: appState.lockedMultiSelections,
-    editingLinearElementId: appState.editingLinearElement?.elementId ?? // prefer app state, as it's likely newer
-    appState.editingLinearElementId ?? // fallback to observed app state, as it's likely older coming from a previous snapshot
-    null,
-    selectedLinearElementId: appState.selectedLinearElement?.elementId ?? appState.selectedLinearElementId ?? null
+    selectedLinearElement: appState.selectedLinearElement ? {
+      elementId: appState.selectedLinearElement.elementId,
+      isEditing: !!appState.selectedLinearElement.isEditing
+    } : null
   };
   Reflect.defineProperty(observedAppState, hiddenObservedAppStateProp, {
     value: true,
@@ -14392,9 +14431,9 @@ var Scene = class {
   getFramesIncludingDeleted() {
     return this.frames;
   }
-  constructor(elements = null) {
+  constructor(elements = null, options) {
     if (elements) {
-      this.replaceAllElements(elements);
+      this.replaceAllElements(elements, options);
     }
   }
   getSelectedElements(opts) {
@@ -14459,10 +14498,12 @@ var Scene = class {
     }
     return didChange;
   }
-  replaceAllElements(nextElements) {
+  replaceAllElements(nextElements, options) {
     const _nextElements = toArray(nextElements);
     const nextFrameLikes = [];
-    validateIndicesThrottled(_nextElements);
+    if (!options?.skipValidation) {
+      validateIndicesThrottled(_nextElements);
+    }
     this.elements = syncInvalidIndices2(_nextElements);
     this.elementsMap.clear();
     this.elements.forEach((element) => {
@@ -14632,10 +14673,19 @@ var Delta = class _Delta {
   static isEmpty(delta) {
     return !Object.keys(delta.deleted).length && !Object.keys(delta.inserted).length;
   }
+  /**
+   * Merges two deltas into a new one.
+   */
+  static merge(delta1, delta2, delta3 = _Delta.empty()) {
+    return _Delta.create(
+      { ...delta1.deleted, ...delta2.deleted, ...delta3.deleted },
+      { ...delta1.inserted, ...delta2.inserted, ...delta3.inserted }
+    );
+  }
   /**
    * Merges deleted and inserted object partials.
    */
-  static mergeObjects(prev, added, removed) {
+  static mergeObjects(prev, added, removed = {}) {
     const cloned = { ...prev };
     for (const key of Object.keys(removed)) {
       delete cloned[key];
@@ -14856,6 +14906,9 @@ var AppStateDelta = class _AppStateDelta {
   constructor(delta) {
     this.delta = delta;
   }
+  static create(delta) {
+    return new _AppStateDelta(delta);
+  }
   static calculate(prevAppState, nextAppState) {
     const delta = Delta.calculate(
       prevAppState,
@@ -14877,50 +14930,98 @@ var AppStateDelta = class _AppStateDelta {
     const inversedDelta = Delta.create(this.delta.inserted, this.delta.deleted);
     return new _AppStateDelta(inversedDelta);
   }
+  squash(delta) {
+    if (delta.isEmpty()) {
+      return this;
+    }
+    const mergedDeletedSelectedElementIds = Delta.mergeObjects(
+      this.delta.deleted.selectedElementIds ?? {},
+      delta.delta.deleted.selectedElementIds ?? {}
+    );
+    const mergedInsertedSelectedElementIds = Delta.mergeObjects(
+      this.delta.inserted.selectedElementIds ?? {},
+      delta.delta.inserted.selectedElementIds ?? {}
+    );
+    const mergedDeletedSelectedGroupIds = Delta.mergeObjects(
+      this.delta.deleted.selectedGroupIds ?? {},
+      delta.delta.deleted.selectedGroupIds ?? {}
+    );
+    const mergedInsertedSelectedGroupIds = Delta.mergeObjects(
+      this.delta.inserted.selectedGroupIds ?? {},
+      delta.delta.inserted.selectedGroupIds ?? {}
+    );
+    const mergedDeletedLockedMultiSelections = Delta.mergeObjects(
+      this.delta.deleted.lockedMultiSelections ?? {},
+      delta.delta.deleted.lockedMultiSelections ?? {}
+    );
+    const mergedInsertedLockedMultiSelections = Delta.mergeObjects(
+      this.delta.inserted.lockedMultiSelections ?? {},
+      delta.delta.inserted.lockedMultiSelections ?? {}
+    );
+    const mergedInserted = {};
+    const mergedDeleted = {};
+    if (Object.keys(mergedDeletedSelectedElementIds).length || Object.keys(mergedInsertedSelectedElementIds).length) {
+      mergedDeleted.selectedElementIds = mergedDeletedSelectedElementIds;
+      mergedInserted.selectedElementIds = mergedInsertedSelectedElementIds;
+    }
+    if (Object.keys(mergedDeletedSelectedGroupIds).length || Object.keys(mergedInsertedSelectedGroupIds).length) {
+      mergedDeleted.selectedGroupIds = mergedDeletedSelectedGroupIds;
+      mergedInserted.selectedGroupIds = mergedInsertedSelectedGroupIds;
+    }
+    if (Object.keys(mergedDeletedLockedMultiSelections).length || Object.keys(mergedInsertedLockedMultiSelections).length) {
+      mergedDeleted.lockedMultiSelections = mergedDeletedLockedMultiSelections;
+      mergedInserted.lockedMultiSelections = mergedInsertedLockedMultiSelections;
+    }
+    this.delta = Delta.merge(
+      this.delta,
+      delta.delta,
+      Delta.create(mergedDeleted, mergedInserted)
+    );
+    return this;
+  }
   applyTo(appState, nextElements) {
     try {
       const {
-        selectedElementIds: removedSelectedElementIds = {},
-        selectedGroupIds: removedSelectedGroupIds = {}
+        selectedElementIds: deletedSelectedElementIds = {},
+        selectedGroupIds: deletedSelectedGroupIds = {},
+        lockedMultiSelections: deletedLockedMultiSelections = {}
       } = this.delta.deleted;
       const {
-        selectedElementIds: addedSelectedElementIds = {},
-        selectedGroupIds: addedSelectedGroupIds = {},
-        selectedLinearElementId,
-        editingLinearElementId,
+        selectedElementIds: insertedSelectedElementIds = {},
+        selectedGroupIds: insertedSelectedGroupIds = {},
+        lockedMultiSelections: insertedLockedMultiSelections = {},
+        selectedLinearElement: insertedSelectedLinearElement,
         ...directlyApplicablePartial
       } = this.delta.inserted;
       const mergedSelectedElementIds = Delta.mergeObjects(
         appState.selectedElementIds,
-        addedSelectedElementIds,
-        removedSelectedElementIds
+        insertedSelectedElementIds,
+        deletedSelectedElementIds
       );
       const mergedSelectedGroupIds = Delta.mergeObjects(
         appState.selectedGroupIds,
-        addedSelectedGroupIds,
-        removedSelectedGroupIds
+        insertedSelectedGroupIds,
+        deletedSelectedGroupIds
       );
-      const selectedLinearElement = selectedLinearElementId && nextElements.has(selectedLinearElementId) ? new LinearElementEditor(
-        nextElements.get(
-          selectedLinearElementId
-        ),
-        nextElements
-      ) : null;
-      const editingLinearElement = editingLinearElementId && nextElements.has(editingLinearElementId) ? new LinearElementEditor(
+      const mergedLockedMultiSelections = Delta.mergeObjects(
+        appState.lockedMultiSelections,
+        insertedLockedMultiSelections,
+        deletedLockedMultiSelections
+      );
+      const selectedLinearElement = insertedSelectedLinearElement && nextElements.has(insertedSelectedLinearElement.elementId) ? new LinearElementEditor(
         nextElements.get(
-          editingLinearElementId
+          insertedSelectedLinearElement.elementId
         ),
-        nextElements
+        nextElements,
+        insertedSelectedLinearElement.isEditing
       ) : null;
       const nextAppState = {
         ...appState,
         ...directlyApplicablePartial,
         selectedElementIds: mergedSelectedElementIds,
         selectedGroupIds: mergedSelectedGroupIds,
-        selectedLinearElement: typeof selectedLinearElementId !== "undefined" ? selectedLinearElement : appState.selectedLinearElement,
-        // otherwise assign what we had before
-        editingLinearElement: typeof editingLinearElementId !== "undefined" ? editingLinearElement : appState.editingLinearElement
-        // otherwise assign what we had before
+        lockedMultiSelections: mergedLockedMultiSelections,
+        selectedLinearElement: typeof insertedSelectedLinearElement !== "undefined" ? selectedLinearElement : appState.selectedLinearElement
       };
       const constainsVisibleChanges = this.filterInvisibleChanges(
         appState,
@@ -15010,57 +15111,44 @@ var AppStateDelta = class _AppStateDelta {
               nextAppState[key] = null;
             }
             break;
-          case "selectedLinearElementId":
-          case "editingLinearElementId":
-            const appStateKey = _AppStateDelta.convertToAppStateKey(key);
-            const linearElement = nextAppState[appStateKey];
-            if (!linearElement) {
+          case "selectedLinearElement":
+            const nextLinearElement = nextAppState[key];
+            if (!nextLinearElement) {
               visibleDifferenceFlag.value = true;
             } else {
-              const element = nextElements.get(linearElement.elementId);
+              const element = nextElements.get(nextLinearElement.elementId);
               if (element && !element.isDeleted) {
                 visibleDifferenceFlag.value = true;
               } else {
-                nextAppState[appStateKey] = null;
+                nextAppState[key] = null;
               }
             }
             break;
-          case "lockedMultiSelections": {
+          case "lockedMultiSelections":
             const prevLockedUnits = prevAppState[key] || {};
             const nextLockedUnits = nextAppState[key] || {};
             if (!isShallowEqual2(prevLockedUnits, nextLockedUnits)) {
               visibleDifferenceFlag.value = true;
             }
             break;
-          }
-          case "activeLockedId": {
+          case "activeLockedId":
             const prevHitLockedId = prevAppState[key] || null;
             const nextHitLockedId = nextAppState[key] || null;
             if (prevHitLockedId !== nextHitLockedId) {
               visibleDifferenceFlag.value = true;
             }
             break;
-          }
-          default: {
+          default:
             assertNever4(
               key,
               `Unknown ObservedElementsAppState's key "${key}"`,
               true
             );
-          }
         }
       }
     }
     return visibleDifferenceFlag.value;
   }
-  static convertToAppStateKey(key) {
-    switch (key) {
-      case "selectedLinearElementId":
-        return "selectedLinearElement";
-      case "editingLinearElementId":
-        return "editingLinearElement";
-    }
-  }
   static filterSelectedElements(selectedElementIds, elements, visibleDifferenceFlag) {
     const ids = Object.keys(selectedElementIds);
     if (!ids.length) {
@@ -15099,8 +15187,7 @@ var AppStateDelta = class _AppStateDelta {
       editingGroupId,
       selectedGroupIds,
       selectedElementIds,
-      editingLinearElementId,
-      selectedLinearElementId,
+      selectedLinearElement,
       croppingElementId,
       lockedMultiSelections,
       activeLockedId,
@@ -15137,12 +15224,6 @@ var AppStateDelta = class _AppStateDelta {
         "lockedMultiSelections",
         (prevValue) => prevValue ?? {}
       );
-      Delta.diffObjects(
-        deleted,
-        inserted,
-        "activeLockedId",
-        (prevValue) => prevValue ?? null
-      );
     } catch (e) {
       console.error(`Couldn't postprocess appstate change deltas.`);
       if (isTestEnv8() || isDevEnv7()) {
@@ -15221,13 +15302,17 @@ var ElementsDelta = class _ElementsDelta {
   static satisfiesCommmonInvariants = ({
     deleted,
     inserted
-  }) => !!(deleted.version && inserted.version && // versions are required integers
-  Number.isInteger(deleted.version) && Number.isInteger(inserted.version) && // versions should be positive, zero included
+  }) => !!// versions are required integers
+  (Number.isInteger(deleted.version) && Number.isInteger(inserted.version) && // versions should be positive, zero included
   deleted.version >= 0 && inserted.version >= 0 && // versions should never be the same
   deleted.version !== inserted.version);
+  static satisfiesUniqueInvariants = (elementsDelta, id) => {
+    const { added, removed, updated } = elementsDelta;
+    return [added[id], removed[id], updated[id]].filter(Boolean).length === 1;
+  };
   static validate(elementsDelta, type, satifiesSpecialInvariants) {
     for (const [id, delta] of Object.entries(elementsDelta[type])) {
-      if (!this.satisfiesCommmonInvariants(delta) || !satifiesSpecialInvariants(delta)) {
+      if (!this.satisfiesCommmonInvariants(delta) || !this.satisfiesUniqueInvariants(elementsDelta, id) || !satifiesSpecialInvariants(delta)) {
         console.error(
           `Broken invariant for "${type}" delta, element "${id}", delta:`,
           delta
@@ -15254,7 +15339,7 @@ var ElementsDelta = class _ElementsDelta {
     for (const prevElement of prevElements.values()) {
       const nextElement = nextElements.get(prevElement.id);
       if (!nextElement) {
-        const deleted = { ...prevElement, isDeleted: false };
+        const deleted = { ...prevElement };
         const inserted = {
           isDeleted: true,
           version: prevElement.version + 1,
@@ -15265,7 +15350,11 @@ var ElementsDelta = class _ElementsDelta {
           inserted,
           _ElementsDelta.stripIrrelevantProps
         );
-        removed[prevElement.id] = delta;
+        if (!prevElement.isDeleted) {
+          removed[prevElement.id] = delta;
+        } else {
+          updated[prevElement.id] = delta;
+        }
       }
     }
     for (const nextElement of nextElements.values()) {
@@ -15277,15 +15366,18 @@ var ElementsDelta = class _ElementsDelta {
           versionNonce: randomInteger4()
         };
         const inserted = {
-          ...nextElement,
-          isDeleted: false
+          ...nextElement
         };
         const delta = Delta.create(
           deleted,
           inserted,
           _ElementsDelta.stripIrrelevantProps
         );
-        added[nextElement.id] = delta;
+        if (!nextElement.isDeleted) {
+          added[nextElement.id] = delta;
+        } else {
+          updated[nextElement.id] = delta;
+        }
         continue;
       }
       if (prevElement.versionNonce !== nextElement.versionNonce) {
@@ -15306,9 +15398,7 @@ var ElementsDelta = class _ElementsDelta {
           }
           continue;
         }
-        if (!Delta.isEmpty(delta)) {
-          updated[nextElement.id] = delta;
-        }
+        updated[nextElement.id] = delta;
       }
     }
     return _ElementsDelta.create(added, removed, updated);
@@ -15319,8 +15409,8 @@ var ElementsDelta = class _ElementsDelta {
   inverse() {
     const inverseInternal = (deltas) => {
       const inversedDeltas = {};
-      for (const [id, delta] of Object.entries(deltas)) {
-        inversedDeltas[id] = Delta.create(delta.inserted, delta.deleted);
+      for (const [id, { inserted, deleted }] of Object.entries(deltas)) {
+        inversedDeltas[id] = Delta.create({ ...inserted }, { ...deleted });
       }
       return inversedDeltas;
     };
@@ -15398,26 +15488,30 @@ var ElementsDelta = class _ElementsDelta {
       // redistribute the deltas as `isDeleted` could have been updated
     });
   }
-  applyTo(elements, snapshot = StoreSnapshot.empty().elements, options = {
-    excludedProperties: /* @__PURE__ */ new Set()
-  }) {
+  applyTo(elements, snapshot = StoreSnapshot.empty().elements, options) {
     let nextElements = new Map(elements);
     let changedElements;
     const flags = {
       containsVisibleDifference: false,
-      containsZindexDifference: false
+      containsZindexDifference: false,
+      applyDirection: void 0
     };
     try {
       const applyDeltas = _ElementsDelta.createApplier(
+        elements,
         nextElements,
         snapshot,
-        options,
-        flags
+        flags,
+        options
       );
       const addedElements = applyDeltas(this.added);
       const removedElements = applyDeltas(this.removed);
       const updatedElements = applyDeltas(this.updated);
-      const affectedElements = this.resolveConflicts(elements, nextElements);
+      const affectedElements = this.resolveConflicts(
+        elements,
+        nextElements,
+        flags.applyDirection
+      );
       changedElements = new Map([
         ...addedElements,
         ...removedElements,
@@ -15437,9 +15531,7 @@ var ElementsDelta = class _ElementsDelta {
         changedElements,
         flags
       );
-      const tempScene = new Scene(nextElements);
-      _ElementsDelta.redrawTextBoundingBoxes(tempScene, changedElements);
-      _ElementsDelta.redrawBoundArrows(tempScene, changedElements);
+      _ElementsDelta.redrawElements(nextElements, changedElements);
     } catch (e) {
       console.error(
         `Couldn't mutate elements after applying elements change`,
@@ -15452,7 +15544,82 @@ var ElementsDelta = class _ElementsDelta {
       return [nextElements, flags.containsVisibleDifference];
     }
   }
-  static createApplier = (nextElements, snapshot, options, flags) => (deltas) => {
+  squash(delta) {
+    if (delta.isEmpty()) {
+      return this;
+    }
+    const { added, removed, updated } = delta;
+    const mergeBoundElements = (prevDelta, nextDelta) => {
+      const mergedDeletedBoundElements = Delta.mergeArrays(
+        prevDelta.deleted.boundElements ?? [],
+        nextDelta.deleted.boundElements ?? [],
+        void 0,
+        (x) => x.id
+      ) ?? [];
+      const mergedInsertedBoundElements = Delta.mergeArrays(
+        prevDelta.inserted.boundElements ?? [],
+        nextDelta.inserted.boundElements ?? [],
+        void 0,
+        (x) => x.id
+      ) ?? [];
+      if (!mergedDeletedBoundElements.length && !mergedInsertedBoundElements.length) {
+        return;
+      }
+      return Delta.create(
+        {
+          boundElements: mergedDeletedBoundElements
+        },
+        {
+          boundElements: mergedInsertedBoundElements
+        }
+      );
+    };
+    for (const [id, nextDelta] of Object.entries(added)) {
+      const prevDelta = this.added[id] ?? this.removed[id] ?? this.updated[id];
+      if (!prevDelta) {
+        this.added[id] = nextDelta;
+      } else {
+        const mergedDelta = mergeBoundElements(prevDelta, nextDelta);
+        delete this.removed[id];
+        delete this.updated[id];
+        this.added[id] = Delta.merge(prevDelta, nextDelta, mergedDelta);
+      }
+    }
+    for (const [id, nextDelta] of Object.entries(removed)) {
+      const prevDelta = this.added[id] ?? this.removed[id] ?? this.updated[id];
+      if (!prevDelta) {
+        this.removed[id] = nextDelta;
+      } else {
+        const mergedDelta = mergeBoundElements(prevDelta, nextDelta);
+        delete this.added[id];
+        delete this.updated[id];
+        this.removed[id] = Delta.merge(prevDelta, nextDelta, mergedDelta);
+      }
+    }
+    for (const [id, nextDelta] of Object.entries(updated)) {
+      const prevDelta = this.added[id] ?? this.removed[id] ?? this.updated[id];
+      if (!prevDelta) {
+        this.updated[id] = nextDelta;
+      } else {
+        const mergedDelta = mergeBoundElements(prevDelta, nextDelta);
+        const updatedDelta = Delta.merge(prevDelta, nextDelta, mergedDelta);
+        if (prevDelta === this.added[id]) {
+          this.added[id] = updatedDelta;
+        } else if (prevDelta === this.removed[id]) {
+          this.removed[id] = updatedDelta;
+        } else {
+          this.updated[id] = updatedDelta;
+        }
+      }
+    }
+    if (isTestEnv8() || isDevEnv7()) {
+      _ElementsDelta.validate(this, "added", _ElementsDelta.satisfiesAddition);
+      _ElementsDelta.validate(this, "removed", _ElementsDelta.satisfiesRemoval);
+      _ElementsDelta.validate(this, "updated", _ElementsDelta.satisfiesUpdate);
+    }
+    return this;
+  }
+  static createApplier = (prevElements, nextElements, snapshot, flags, options) => (deltas) => {
     const getElement = _ElementsDelta.createGetter(
       nextElements,
       snapshot,
@@ -15461,14 +15628,20 @@ var ElementsDelta = class _ElementsDelta {
     return Object.entries(deltas).reduce((acc, [id, delta]) => {
       const element = getElement(id, delta.inserted);
       if (element) {
-        const newElement2 = _ElementsDelta.applyDelta(
+        const nextElement = _ElementsDelta.applyDelta(
           element,
           delta,
-          options,
-          flags
+          flags,
+          options
         );
-        nextElements.set(newElement2.id, newElement2);
-        acc.set(newElement2.id, newElement2);
+        nextElements.set(nextElement.id, nextElement);
+        acc.set(nextElement.id, nextElement);
+        if (!flags.applyDirection) {
+          const prevElement = prevElements.get(id);
+          if (prevElement) {
+            flags.applyDirection = prevElement.version > nextElement.version ? "backward" : "forward";
+          }
+        }
       }
       return acc;
     }, /* @__PURE__ */ new Map());
@@ -15493,13 +15666,13 @@ var ElementsDelta = class _ElementsDelta {
     }
     return element;
   };
-  static applyDelta(element, delta, options, flags) {
+  static applyDelta(element, delta, flags, options) {
     const directlyApplicablePartial = {};
     for (const key of Object.keys(delta.inserted)) {
       if (key === "boundElements") {
         continue;
       }
-      if (options.excludedProperties.has(key)) {
+      if (options?.excludedProperties?.has(key)) {
         continue;
       }
       const value = delta.inserted[key];
@@ -15527,7 +15700,7 @@ var ElementsDelta = class _ElementsDelta {
     if (!flags.containsZindexDifference) {
       flags.containsZindexDifference = delta.deleted.index !== delta.inserted.index;
     }
-    return newElementWith(element, directlyApplicablePartial);
+    return newElementWith(element, directlyApplicablePartial, true);
   }
   /**
    * Check for visible changes regardless of whether they were removed, added or updated.
@@ -15552,25 +15725,32 @@ var ElementsDelta = class _ElementsDelta {
    *
    * @returns all elements affected by the conflict resolution
    */
-  resolveConflicts(prevElements, nextElements) {
+  resolveConflicts(prevElements, nextElements, applyDirection = "forward") {
     const nextAffectedElements = /* @__PURE__ */ new Map();
     const updater = (element, updates) => {
       const nextElement = nextElements.get(element.id);
       if (!nextElement) {
         return;
       }
+      const prevElement = prevElements.get(element.id);
+      const nextVersion = applyDirection === "forward" ? nextElement.version + 1 : nextElement.version - 1;
+      const elementUpdates = updates;
       let affectedElement;
-      if (prevElements.get(element.id) === nextElement) {
+      if (prevElement === nextElement) {
         affectedElement = newElementWith(
           nextElement,
-          updates
+          {
+            ...elementUpdates,
+            version: nextVersion
+          },
+          true
         );
       } else {
-        affectedElement = mutateElement(
-          nextElement,
-          nextElements,
-          updates
-        );
+        affectedElement = mutateElement(nextElement, nextElements, {
+          ...elementUpdates,
+          // don't modify the version further, if it's already different
+          version: prevElement?.version !== nextElement.version ? nextElement.version : nextVersion
+        });
       }
       nextAffectedElements.set(affectedElement.id, affectedElement);
       nextElements.set(affectedElement.id, affectedElement);
@@ -15595,19 +15775,10 @@ var ElementsDelta = class _ElementsDelta {
     const prevAffectedElements = new Map(
       Array.from(prevElements).filter(([id]) => nextAffectedElements.has(id))
     );
-    const { added, removed, updated } = _ElementsDelta.calculate(
-      prevAffectedElements,
-      nextAffectedElements
+    this.squash(
+      // technically we could do better here if perf. would become an issue
+      _ElementsDelta.calculate(prevAffectedElements, nextAffectedElements)
     );
-    for (const [id, delta] of Object.entries(added)) {
-      this.added[id] = delta;
-    }
-    for (const [id, delta] of Object.entries(removed)) {
-      this.removed[id] = delta;
-    }
-    for (const [id, delta] of Object.entries(updated)) {
-      this.updated[id] = delta;
-    }
     return nextAffectedElements;
   }
   /**
@@ -15642,6 +15813,20 @@ var ElementsDelta = class _ElementsDelta {
     );
     BindableElement.rebindAffected(nextElements, nextElement(), updater);
   }
+  static redrawElements(nextElements, changedElements) {
+    try {
+      const tempScene = new Scene(nextElements, { skipValidation: true });
+      _ElementsDelta.redrawTextBoundingBoxes(tempScene, changedElements);
+      _ElementsDelta.redrawBoundArrows(tempScene, changedElements);
+    } catch (e) {
+      console.error(`Couldn't redraw elements`, e);
+      if (isTestEnv8() || isDevEnv7()) {
+        throw e;
+      }
+    } finally {
+      return nextElements;
+    }
+  }
   static redrawTextBoundingBoxes(scene, changed) {
     const elements = scene.getNonDeletedElementsMap();
     const boxesToRedraw = /* @__PURE__ */ new Map();
@@ -18453,7 +18638,7 @@ var getTransformHandles = (element, zoom, elementsMap, pointerType = "mouse", om
   );
 };
 var shouldShowBoundingBox = (elements, appState) => {
-  if (appState.editingLinearElement) {
+  if (appState.selectedLinearElement?.isEditing) {
     return false;
   }
   if (elements.length > 1) {