@excalidraw/excalidraw 0.18.0-c65b684e9 → 0.18.0-c6f8ef9

package/dist/dev/data/{image-G3ZXYWE6.js → image-IWGLHPIX.js}

@@ -2,7 +2,7 @@ import {
   decodePngMetadata,
   encodePngMetadata,
   getTEXtChunk
-} from "../chunk-65CT75SH.js";
+} from "../chunk-CRKRRBMD.js";
 import "../chunk-CP5DND7P.js";
 import "../chunk-XDFCUUT6.js";
 export {
@@ -10,4 +10,4 @@ export {
   encodePngMetadata,
   getTEXtChunk
 };
-//# sourceMappingURL=image-G3ZXYWE6.js.map
+//# sourceMappingURL=image-IWGLHPIX.js.map

package/dist/dev/index.js

@@ -60,6 +60,7 @@ import {
   resizeImageFile,
   restore,
   restoreAppState,
+  restoreElement,
   restoreElements,
   restoreLibraryItems,
   saveAsJSON,
@@ -68,7 +69,7 @@ import {
   serializeLibraryAsJSON,
   strokeEllipseWithRotation,
   strokeRectWithRotation
-} from "./chunk-65CT75SH.js";
+} from "./chunk-CRKRRBMD.js";
 import {
   define_import_meta_env_default
 } from "./chunk-CP5DND7P.js";
@@ -203,7 +204,7 @@ import {
   updateBoundElements as updateBoundElements3,
   getSuggestedBindingsForArrows,
   LinearElementEditor as LinearElementEditor12,
-  newElementWith as newElementWith10,
+  newElementWith as newElementWith11,
   newFrameElement as newFrameElement3,
   newFreeDrawElement,
   newEmbeddableElement,
@@ -318,7 +319,8 @@ import {
   CaptureUpdateAction as CaptureUpdateAction37,
   hitElementBoundingBox as hitElementBoundingBox2,
   isLineElement as isLineElement7,
-  isSimpleArrow
+  isSimpleArrow,
+  StoreDelta as StoreDelta2
 } from "@excalidraw/element";
 
 // actions/actionDeleteSelected.tsx
@@ -7804,7 +7806,11 @@ import {
   bindOrUnbindLinearElement,
   isBindingEnabled
 } from "@excalidraw/element/binding";
-import { isValidPolygon, LinearElementEditor as LinearElementEditor5 } from "@excalidraw/element";
+import {
+  isValidPolygon,
+  LinearElementEditor as LinearElementEditor5,
+  newElementWith as newElementWith4
+} from "@excalidraw/element";
 import {
   isBindingElement,
   isFreeDrawElement,
@@ -7849,7 +7855,14 @@ var actionFinalize = register({
       if (linearElementEditor !== appState.selectedLinearElement) {
         let newElements2 = elements;
         if (element2 && isInvisiblySmallElement(element2)) {
-          newElements2 = newElements2.filter((el) => el.id !== element2.id);
+          newElements2 = newElements2.map((el) => {
+            if (el.id === element2.id) {
+              return newElementWith4(el, {
+                isDeleted: true
+              });
+            }
+            return el;
+          });
         }
         return {
           elements: newElements2,
@@ -7882,7 +7895,12 @@ var actionFinalize = register({
           });
         }
         return {
-          elements: element2.points.length < 2 || isInvisiblySmallElement(element2) ? elements.filter((el) => el.id !== element2.id) : void 0,
+          elements: element2.points.length < 2 || isInvisiblySmallElement(element2) ? elements.map((el) => {
+            if (el.id === element2.id) {
+              return newElementWith4(el, { isDeleted: true });
+            }
+            return el;
+          }) : void 0,
           appState: {
             ...appState,
             cursorButton: "up",
@@ -7924,7 +7942,12 @@ var actionFinalize = register({
         }
       }
       if (element && isInvisiblySmallElement(element)) {
-        newElements = newElements.filter((el) => el.id !== element.id);
+        newElements = newElements.map((el) => {
+          if (el.id === element?.id) {
+            return newElementWith4(el, { isDeleted: true });
+          }
+          return el;
+        });
       }
       if (isLinearElement3(element) || isFreeDrawElement(element)) {
         const isLoop = isPathALoop(element.points, appState.zoom.value);
@@ -8936,7 +8959,7 @@ var exportCanvas = async (type, elements, appState, files, {
     let blob = canvasToBlob(tempCanvas);
     if (appState.exportEmbedScene) {
       blob = blob.then(
-        (blob2) => import("./data/image-G3ZXYWE6.js").then(
+        (blob2) => import("./data/image-IWGLHPIX.js").then(
           ({ encodePngMetadata: encodePngMetadata2 }) => encodePngMetadata2({
             blob: blob2,
             metadata: serializeAsJSON(elements, appState, files, "local")
@@ -9277,7 +9300,7 @@ import {
   KEYS as KEYS16,
   getLineHeight as getLineHeight2
 } from "@excalidraw/common";
-import { newElementWith as newElementWith4 } from "@excalidraw/element";
+import { newElementWith as newElementWith5 } from "@excalidraw/element";
 import {
   hasBoundTextElement,
   canApplyRoundnessTypeToElement,
@@ -9348,7 +9371,7 @@ var actionPasteStyles = register({
           if (!elementStylesToCopyFrom) {
             return element;
           }
-          let newElement6 = newElementWith4(element, {
+          let newElement6 = newElementWith5(element, {
             backgroundColor: elementStylesToCopyFrom?.backgroundColor,
             strokeWidth: elementStylesToCopyFrom?.strokeWidth,
             strokeColor: elementStylesToCopyFrom?.strokeColor,
@@ -9364,7 +9387,7 @@ var actionPasteStyles = register({
           if (isTextElement3(newElement6)) {
             const fontSize = elementStylesToCopyFrom.fontSize || DEFAULT_FONT_SIZE3;
             const fontFamily = elementStylesToCopyFrom.fontFamily || DEFAULT_FONT_FAMILY3;
-            newElement6 = newElementWith4(newElement6, {
+            newElement6 = newElementWith5(newElement6, {
               fontSize,
               fontFamily,
               textAlign: elementStylesToCopyFrom.textAlign || DEFAULT_TEXT_ALIGN,
@@ -9379,13 +9402,13 @@ var actionPasteStyles = register({
             redrawTextBoundingBox2(newElement6, container, app.scene);
           }
           if (newElement6.type === "arrow" && isArrowElement2(elementStylesToCopyFrom)) {
-            newElement6 = newElementWith4(newElement6, {
+            newElement6 = newElementWith5(newElement6, {
               startArrowhead: elementStylesToCopyFrom.startArrowhead,
               endArrowhead: elementStylesToCopyFrom.endArrowhead
             });
           }
           if (isFrameLikeElement4(element)) {
-            newElement6 = newElementWith4(newElement6, {
+            newElement6 = newElementWith5(newElement6, {
               roundness: null,
               backgroundColor: "transparent"
             });
@@ -9479,7 +9502,7 @@ var actionShortcuts = register({
 
 // actions/actionGroup.tsx
 import { getNonDeletedElements as getNonDeletedElements9 } from "@excalidraw/element";
-import { newElementWith as newElementWith5 } from "@excalidraw/element";
+import { newElementWith as newElementWith6 } from "@excalidraw/element";
 import { isBoundToContainer as isBoundToContainer3 } from "@excalidraw/element";
 import {
   frameAndChildrenSelectedTogether,
@@ -9583,7 +9606,7 @@ var actionGroup = register({
       if (!selectElementIds.get(element.id)) {
         return element;
       }
-      return newElementWith5(element, {
+      return newElementWith6(element, {
         groupIds: addToGroup(
           element.groupIds,
           newGroupId,
@@ -9660,7 +9683,7 @@ var actionUngroup = register({
       if (nextGroupIds.length === element.groupIds.length) {
         return element;
       }
-      return newElementWith5(element, {
+      return newElementWith6(element, {
         groupIds: nextGroupIds
       });
     });
@@ -10459,7 +10482,7 @@ import {
   isBindingEnabled as isBindingEnabled2
 } from "@excalidraw/element";
 import { getCommonBoundingBox } from "@excalidraw/element";
-import { newElementWith as newElementWith6 } from "@excalidraw/element";
+import { newElementWith as newElementWith7 } from "@excalidraw/element";
 import { deepCopyElement as deepCopyElement3 } from "@excalidraw/element";
 import { resizeMultipleElements } from "@excalidraw/element";
 import {
@@ -10545,7 +10568,7 @@ var flipElements = (selectedElements, elementsMap, appState, flipDirection, app)
   )) {
     return selectedElements.map((element) => {
       const _element = element;
-      return newElementWith6(_element, {
+      return newElementWith7(_element, {
         startArrowhead: _element.endArrowhead,
         endArrowhead: _element.startArrowhead
       });
@@ -11616,7 +11639,7 @@ var actionLink = register({
 import { KEYS as KEYS29, arrayToMap as arrayToMap11, randomId as randomId4 } from "@excalidraw/common";
 import {
   elementsAreInSameGroup,
-  newElementWith as newElementWith7,
+  newElementWith as newElementWith8,
   selectGroupsFromGivenElements
 } from "@excalidraw/element";
 import { CaptureUpdateAction as CaptureUpdateAction25 } from "@excalidraw/element";
@@ -11677,7 +11700,7 @@ var actionToggleElementLock = register({
           (groupId) => !appState.lockedMultiSelections[groupId]
         );
       }
-      return newElementWith7(element, {
+      return newElementWith8(element, {
         locked: nextLockState,
         // do not recreate the array unncessarily
         groupIds: nextGroupIds.length !== element.groupIds.length ? nextGroupIds : element.groupIds
@@ -11726,7 +11749,7 @@ var actionUnlockAllElements = register({
         const nextGroupIds = element.groupIds.filter(
           (gid) => !appState.lockedMultiSelections[gid]
         );
-        return newElementWith7(element, {
+        return newElementWith8(element, {
           locked: false,
           groupIds: (
             // do not recreate the array unncessarily
@@ -12842,7 +12865,8 @@ var exportToCanvas2 = ({
   const { elements: restoredElements, appState: restoredAppState } = restore(
     { elements, appState },
     null,
-    null
+    null,
+    { deleteInvisibleElements: true }
   );
   const { exportBackground, viewBackgroundColor } = restoredAppState;
   return exportToCanvas(
@@ -12936,7 +12960,8 @@ var exportToSvg2 = async ({
   const { elements: restoredElements, appState: restoredAppState } = restore(
     { elements, appState },
     null,
-    null
+    null,
+    { deleteInvisibleElements: true }
   );
   const exportAppState = {
     ...restoredAppState,
@@ -18225,7 +18250,7 @@ var generateElbowArrowShape = (points, radius) => {
 };
 
 // ../element/src/mutateElement.ts
-var newElementWith8 = (element, updates, force = false) => {
+var newElementWith9 = (element, updates, force = false) => {
   let didChange = false;
   for (const key in updates) {
     const value = updates[key];
@@ -18354,7 +18379,7 @@ var actionTogglePolygon = register({
         if (!targetElementsMap.has(element.id) || !isLineElement4(element)) {
           return element;
         }
-        return newElementWith8(element, {
+        return newElementWith9(element, {
           backgroundColor: nextPolygonState ? element.backgroundColor : "transparent",
           ...toggleLinePolygonState3(element, nextPolygonState)
         });
@@ -18946,7 +18971,7 @@ var createRedoAction = (history) => ({
 
 // actions/actionTextAutoResize.ts
 import { getFontString as getFontString6 } from "@excalidraw/common";
-import { newElementWith as newElementWith9 } from "@excalidraw/element";
+import { newElementWith as newElementWith10 } from "@excalidraw/element";
 import { measureText as measureText4 } from "@excalidraw/element";
 import { isTextElement as isTextElement9 } from "@excalidraw/element";
 import { CaptureUpdateAction as CaptureUpdateAction34 } from "@excalidraw/element";
@@ -18970,7 +18995,7 @@ var actionTextAutoResize = register({
             getFontString6(element),
             element.lineHeight
           );
-          return newElementWith9(element, {
+          return newElementWith10(element, {
             autoResize: true,
             width: metrics.width,
             height: metrics.height,
@@ -31600,7 +31625,7 @@ var App = class _App extends React43.Component {
             this.updateScene({
               elements: this.scene.getElementsIncludingDeleted().map((el) => {
                 if (this.state.selectedElementIds[el.id]) {
-                  return newElementWith10(el, {
+                  return newElementWith11(el, {
                     [shouldUpdateStrokeColor ? "strokeColor" : "backgroundColor"]: color
                   });
                 }
@@ -31764,7 +31789,10 @@ var App = class _App extends React43.Component {
           }
         };
       }
-      const scene = restore(initialData, null, null, { repairBindings: true });
+      const scene = restore(initialData, null, null, {
+        repairBindings: true,
+        deleteInvisibleElements: true
+      });
       scene.appState = {
         ...scene.appState,
         theme: this.props.theme || scene.appState.theme,
@@ -32084,7 +32112,9 @@ var App = class _App extends React43.Component {
       }
     ));
     __publicField(this, "addElementsFromPasteOrLibrary", (opts) => {
-      const elements = restoreElements(opts.elements, null, void 0);
+      const elements = restoreElements(opts.elements, null, {
+        deleteInvisibleElements: true
+      });
       const [minX, minY, maxX, maxY] = getCommonBounds12(elements);
       const elementsCenterX = distance2(minX, maxX) / 2;
       const elementsCenterY = distance2(minY, maxY) / 2;
@@ -32100,7 +32130,7 @@ var App = class _App extends React43.Component {
       const { duplicatedElements } = duplicateElements3({
         type: "everything",
         elements: elements.map((element) => {
-          return newElementWith10(element, {
+          return newElementWith11(element, {
             x: element.x + gridX - minX,
             y: element.y + gridY - minY
           });
@@ -32447,6 +32477,19 @@ var App = class _App extends React43.Component {
         }
       }
     ));
+    __publicField(this, "applyDeltas", (deltas, options) => {
+      const aggregatedDelta = StoreDelta2.squash(...deltas);
+      const nextAppState = { ...this.state };
+      const nextElements = new Map(
+        this.scene.getElementsMapIncludingDeleted()
+      );
+      return StoreDelta2.applyTo(
+        aggregatedDelta,
+        nextElements,
+        nextAppState,
+        options
+      );
+    });
     __publicField(this, "mutateElement", (element, updates, informMutation = true) => {
       return this.scene.mutateElement(element, updates, {
         informMutation,
@@ -33468,7 +33511,7 @@ var App = class _App extends React43.Component {
     __publicField(this, "getTopLayerFrameAtSceneCoords", (sceneCoords) => {
       const elementsMap = this.scene.getNonDeletedElementsMap();
       const frames = this.scene.getNonDeletedFramesLikes().filter(
-        (frame) => isCursorInFrame(sceneCoords, frame, elementsMap)
+        (frame) => !frame.locked && isCursorInFrame(sceneCoords, frame, elementsMap)
       );
       return frames.length ? frames[frames.length - 1] : null;
     });
@@ -34867,7 +34910,7 @@ var App = class _App extends React43.Component {
       const elements = this.scene.getElementsIncludingDeleted().map((ele) => {
         if (this.elementsPendingErasure.has(ele.id) || ele.frameId && this.elementsPendingErasure.has(ele.frameId) || isBoundToContainer8(ele) && this.elementsPendingErasure.has(ele.containerId)) {
           didChange = true;
-          return newElementWith10(ele, { isDeleted: true });
+          return newElementWith11(ele, { isDeleted: true });
         }
         return ele;
       });
@@ -34976,7 +35019,7 @@ var App = class _App extends React43.Component {
      */
     __publicField(this, "getLatestInitializedImageElement", (imagePlaceholder, fileId) => {
       const latestImageElement = this.scene.getElement(imagePlaceholder.id) ?? imagePlaceholder;
-      return newElementWith10(
+      return newElementWith11(
         latestImageElement,
         {
           fileId
@@ -35095,9 +35138,9 @@ var App = class _App extends React43.Component {
       if (erroredFiles.size) {
         this.store.scheduleAction(CaptureUpdateAction37.NEVER);
         this.scene.replaceAllElements(
-          elements.map((element) => {
+          this.scene.getElementsIncludingDeleted().map((element) => {
             if (isInitializedImageElement3(element) && erroredFiles.has(element.fileId)) {
-              return newElementWith10(element, {
+              return newElementWith11(element, {
                 status: "error"
               });
             }
@@ -35841,6 +35884,7 @@ var App = class _App extends React43.Component {
     if (excalidrawAPI) {
       const api = {
         updateScene: this.updateScene,
+        applyDeltas: this.applyDeltas,
         mutateElement: this.mutateElement,
         updateLibrary: this.library.updateLibrary,
         addFiles: this.addFiles,
@@ -37134,7 +37178,7 @@ var App = class _App extends React43.Component {
         // Not sure why we include deleted elements as well hence using deleted elements map
         ...this.scene.getElementsIncludingDeleted().map((_element) => {
           if (_element.id === element.id && isTextElement19(_element)) {
-            return newElementWith10(_element, {
+            return newElementWith11(_element, {
               originalText: nextOriginalText,
               isDeleted: isDeleted ?? _element.isDeleted,
               // returns (wrapped) text and new dimensions
@@ -37174,13 +37218,7 @@ var App = class _App extends React43.Component {
       }),
       onSubmit: withBatchedUpdates(({ viaKeyboard, nextOriginalText }) => {
         const isDeleted = !nextOriginalText.trim();
-        if (isDeleted && !isExistingElement) {
-          this.scene.replaceAllElements(
-            this.scene.getElementsIncludingDeleted().filter((x) => x.id !== element.id)
-          );
-        } else {
-          updateElement(nextOriginalText, isDeleted);
-        }
+        updateElement(nextOriginalText, isDeleted);
         if (!isDeleted && viaKeyboard) {
           const elementIdToSelect = element.containerId ? element.containerId : element.id;
           flushSync3(() => {
@@ -37200,7 +37238,9 @@ var App = class _App extends React43.Component {
             element
           ]);
         }
-        this.store.scheduleCapture();
+        if (!isDeleted || isExistingElement) {
+          this.store.scheduleCapture();
+        }
         flushSync3(() => {
           this.setState({
             newElement: null,
@@ -37950,7 +37990,7 @@ var App = class _App extends React43.Component {
               if (idsOfElementsToDuplicate.has(el.id)) {
                 const origEl = pointerDownState.originalElements.get(el.id);
                 if (origEl) {
-                  return newElementWith10(el, {
+                  return newElementWith11(el, {
                     x: origEl.x,
                     y: origEl.y
                   });
@@ -39326,8 +39366,7 @@ import {
 } from "@excalidraw/element";
 var shouldDiscardRemoteElement = (localAppState, local, remote) => {
   if (local && // local element is being edited
-  (local.id === localAppState.editingTextElement?.id || local.id === localAppState.resizingElement?.id || local.id === localAppState.newElement?.id || // TODO: Is this still valid? As newElement is selection element, which is never part of the elements array
-  // local element is newer
+  (local.id === localAppState.editingTextElement?.id || local.id === localAppState.resizingElement?.id || local.id === localAppState.newElement?.id || // local element is newer
   local.version > remote.version || // resolve conflicting edits deterministically by taking the one with
   // the lowest versionNonce
   local.version === remote.version && local.versionNonce < remote.versionNonce)) {
@@ -39402,7 +39441,7 @@ import {
 } from "@excalidraw/common";
 import {
   mutateElement as mutateElement2,
-  newElementWith as newElementWith11,
+  newElementWith as newElementWith12,
   bumpVersion
 } from "@excalidraw/element";
 import { CaptureUpdateAction as CaptureUpdateAction38 } from "@excalidraw/element";
@@ -39653,12 +39692,13 @@ export {
   loadSceneOrLibraryFromBlob,
   mergeLibraryItems,
   mutateElement2 as mutateElement,
-  newElementWith11 as newElementWith,
+  newElementWith12 as newElementWith,
   normalizeLink4 as normalizeLink,
   parseLibraryTokensFromUrl,
   reconcileElements,
   restore,
   restoreAppState,
+  restoreElement,
   restoreElements,
   restoreLibraryItems,
   sceneCoordsToViewportCoords2 as sceneCoordsToViewportCoords,