@excalidraw/element 0.18.0-6d75c4b34 → 0.18.0-b16b6f8fd

package/dist/dev/index.js

@@ -3825,9 +3825,6 @@ var getTextWidth = (text, font) => {
   return width;
 };
 var getTextHeight = (text, fontSize, lineHeight) => {
-  if (text.trim() === "") {
-    return 0;
-  }
   const lineCount = splitIntoLines(text).length;
   return getLineHeightInPx(fontSize, lineHeight) * lineCount;
 };
@@ -8130,7 +8127,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);
@@ -8161,6 +8159,7 @@ var LinearElementEditor = class _LinearElementEditor {
     this.segmentMidPointHoveredCoords = null;
     this.elbowed = isElbowArrow(element) && element.elbowed;
     this.customLineAngle = null;
+    this.isEditing = isEditing;
   }
   // ---------------------------------------------------------------------------
   // static methods
@@ -8178,11 +8177,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;
@@ -8204,8 +8203,8 @@ var LinearElementEditor = class _LinearElementEditor {
       return true;
     });
     setState({
-      editingLinearElement: {
-        ...editingLinearElement,
+      selectedLinearElement: {
+        ...selectedLinearElement,
         selectedPointsIndices: nextSelectedPoints.length ? nextSelectedPoints : null
       }
     });
@@ -8359,7 +8358,6 @@ var LinearElementEditor = class _LinearElementEditor {
       };
       return {
         ...app.state,
-        editingLinearElement: app.state.editingLinearElement ? newLinearElementEditor : null,
         selectedLinearElement: newLinearElementEditor,
         suggestedBindings
       };
@@ -8443,7 +8441,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(
@@ -8493,7 +8491,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;
@@ -8633,7 +8631,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: [
@@ -8743,14 +8741,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];
@@ -8758,10 +8756,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) {
@@ -8781,8 +8779,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()
       );
     }
@@ -8803,7 +8801,7 @@ var LinearElementEditor = class _LinearElementEditor {
       _LinearElementEditor.addPoints(element, app.scene, [newPoint]);
     }
     return {
-      ...appState.editingLinearElement,
+      ...appState.selectedLinearElement,
       lastUncommittedPoint: element.points[element.points.length - 1]
     };
   }
@@ -8909,11 +8907,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,
@@ -8960,14 +8958,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);
     });
@@ -9076,7 +9074,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;
@@ -9829,6 +9827,55 @@ var getNewGroupIdsForDuplication = (groupIds, editingGroupId, mapper) => {
   }
   return copy;
 };
+var getSelectedElementsByGroup = (selectedElements, elementsMap, appState) => {
+  const selectedGroupIds = getSelectedGroupIds(appState);
+  const unboundElements = selectedElements.filter(
+    (element) => !isBoundToContainer(element)
+  );
+  const groups = /* @__PURE__ */ new Map();
+  const elements = /* @__PURE__ */ new Map();
+  const addToElementsMap = (element) => {
+    const currentElementMembers = elements.get(element.id) || [];
+    const boundTextElement = getBoundTextElement(element, elementsMap);
+    if (boundTextElement) {
+      currentElementMembers.push(boundTextElement);
+    }
+    elements.set(element.id, [...currentElementMembers, element]);
+  };
+  const addToGroupsMap = (element, groupId) => {
+    const currentGroupMembers = groups.get(groupId) || [];
+    const boundTextElement = getBoundTextElement(element, elementsMap);
+    if (boundTextElement) {
+      currentGroupMembers.push(boundTextElement);
+    }
+    groups.set(groupId, [...currentGroupMembers, element]);
+  };
+  const handleSingleSelectedGroupCase = (element, selectedGroupId) => {
+    const indexOfSelectedGroupId = element.groupIds.indexOf(selectedGroupId, 0);
+    const nestedGroupCount = element.groupIds.slice(
+      0,
+      indexOfSelectedGroupId
+    ).length;
+    return nestedGroupCount > 0 ? addToGroupsMap(element, element.groupIds[indexOfSelectedGroupId - 1]) : addToElementsMap(element);
+  };
+  const isAllInSameGroup = selectedElements.every(
+    (element) => isSelectedViaGroup(appState, element)
+  );
+  unboundElements.forEach((element) => {
+    const selectedGroupId = getSelectedGroupIdForElement(
+      element,
+      appState.selectedGroupIds
+    );
+    if (!selectedGroupId) {
+      addToElementsMap(element);
+    } else if (selectedGroupIds.length === 1 && isAllInSameGroup) {
+      handleSingleSelectedGroupCase(element, selectedGroupId);
+    } else {
+      addToGroupsMap(element, selectedGroupId);
+    }
+  });
+  return Array.from(groups.values()).concat(Array.from(elements.values()));
+};
 
 // src/selection.ts
 var excludeElementsInFramesFromSelection = (selectedElements) => {
@@ -10516,6 +10563,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;
   }
@@ -12745,11 +12797,11 @@ var getNormalizedDimensions = (element) => {
 
 // src/align.ts
 init_define_import_meta_env();
-var alignElements = (selectedElements, alignment, scene) => {
-  const elementsMap = scene.getNonDeletedElementsMap();
-  const groups = getMaximumGroups(
+var alignElements = (selectedElements, alignment, scene, appState) => {
+  const groups = getSelectedElementsByGroup(
     selectedElements,
-    elementsMap
+    scene.getNonDeletedElementsMap(),
+    appState
   );
   const selectionBoundingBox = getCommonBoundingBox(selectedElements);
   return groups.flatMap((group) => {
@@ -12797,6 +12849,7 @@ import {
   arrayToMap as arrayToMap10,
   arrayToObject,
   assertNever as assertNever4,
+  invariant as invariant8,
   isDevEnv as isDevEnv7,
   isShallowEqual as isShallowEqual2,
   isTestEnv as isTestEnv8,
@@ -13185,8 +13238,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 = [];
@@ -13762,8 +13816,8 @@ var getDefaultObservedAppState = () => {
     viewBackgroundColor: COLOR_PALETTE2.white,
     selectedElementIds: {},
     selectedGroupIds: {},
-    editingLinearElementId: null,
     selectedLinearElementId: null,
+    selectedLinearElementIsEditing: null,
     croppingElementId: null,
     activeLockedId: null,
     lockedMultiSelections: {}
@@ -13779,10 +13833,8 @@ 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
+    selectedLinearElementId: appState.selectedLinearElement?.elementId ?? appState.selectedLinearElementId ?? null,
+    selectedLinearElementIsEditing: appState.selectedLinearElement?.isEditing ?? appState.selectedLinearElementIsEditing ?? null
   };
   Reflect.defineProperty(observedAppState, hiddenObservedAppStateProp, {
     value: true,
@@ -14841,7 +14893,7 @@ var AppStateDelta = class _AppStateDelta {
         selectedElementIds: addedSelectedElementIds = {},
         selectedGroupIds: addedSelectedGroupIds = {},
         selectedLinearElementId,
-        editingLinearElementId,
+        selectedLinearElementIsEditing,
         ...directlyApplicablePartial
       } = this.delta.inserted;
       const mergedSelectedElementIds = Delta.mergeObjects(
@@ -14854,27 +14906,39 @@ var AppStateDelta = class _AppStateDelta {
         addedSelectedGroupIds,
         removedSelectedGroupIds
       );
-      const selectedLinearElement = selectedLinearElementId && nextElements.has(selectedLinearElementId) ? new LinearElementEditor(
-        nextElements.get(
-          selectedLinearElementId
-        ),
-        nextElements
-      ) : null;
-      const editingLinearElement = editingLinearElementId && nextElements.has(editingLinearElementId) ? new LinearElementEditor(
-        nextElements.get(
-          editingLinearElementId
-        ),
-        nextElements
-      ) : null;
+      let selectedLinearElement = appState.selectedLinearElement;
+      if (selectedLinearElementId === null) {
+        selectedLinearElement = null;
+      } else if (selectedLinearElementId && nextElements.has(selectedLinearElementId)) {
+        selectedLinearElement = new LinearElementEditor(
+          nextElements.get(
+            selectedLinearElementId
+          ),
+          nextElements,
+          selectedLinearElementIsEditing === true
+          // Can be unknown which is defaulted to false
+        );
+      }
+      if (
+        // Value being 'null' is equivaluent to unknown in this case because it only gets set
+        // to null when 'selectedLinearElementId' is set to null
+        selectedLinearElementIsEditing != null
+      ) {
+        invariant8(
+          selectedLinearElement,
+          `selectedLinearElement is null when selectedLinearElementIsEditing is set to ${selectedLinearElementIsEditing}`
+        );
+        selectedLinearElement = {
+          ...selectedLinearElement,
+          isEditing: selectedLinearElementIsEditing
+        };
+      }
       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
+        selectedLinearElement
       };
       const constainsVisibleChanges = this.filterInvisibleChanges(
         appState,
@@ -14964,8 +15028,7 @@ var AppStateDelta = class _AppStateDelta {
               nextAppState[key] = null;
             }
             break;
-          case "selectedLinearElementId":
-          case "editingLinearElementId":
+          case "selectedLinearElementId": {
             const appStateKey = _AppStateDelta.convertToAppStateKey(key);
             const linearElement = nextAppState[appStateKey];
             if (!linearElement) {
@@ -14979,6 +15042,15 @@ var AppStateDelta = class _AppStateDelta {
               }
             }
             break;
+          }
+          case "selectedLinearElementIsEditing": {
+            const prevIsEditing = prevAppState.selectedLinearElement?.isEditing ?? false;
+            const nextIsEditing = nextAppState.selectedLinearElement?.isEditing ?? false;
+            if (prevIsEditing !== nextIsEditing) {
+              visibleDifferenceFlag.value = true;
+            }
+            break;
+          }
           case "lockedMultiSelections": {
             const prevLockedUnits = prevAppState[key] || {};
             const nextLockedUnits = nextAppState[key] || {};
@@ -15011,8 +15083,6 @@ var AppStateDelta = class _AppStateDelta {
     switch (key) {
       case "selectedLinearElementId":
         return "selectedLinearElement";
-      case "editingLinearElementId":
-        return "editingLinearElement";
     }
   }
   static filterSelectedElements(selectedElementIds, elements, visibleDifferenceFlag) {
@@ -15053,8 +15123,8 @@ var AppStateDelta = class _AppStateDelta {
       editingGroupId,
       selectedGroupIds,
       selectedElementIds,
-      editingLinearElementId,
       selectedLinearElementId,
+      selectedLinearElementIsEditing,
       croppingElementId,
       lockedMultiSelections,
       activeLockedId,
@@ -15273,8 +15343,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;
     };
@@ -15554,13 +15624,25 @@ var ElementsDelta = class _ElementsDelta {
       nextAffectedElements
     );
     for (const [id, delta] of Object.entries(added)) {
-      this.added[id] = delta;
+      this.added[id] = {
+        // merge with the existing delta, if exists
+        ...this.added[id],
+        ...delta
+      };
     }
     for (const [id, delta] of Object.entries(removed)) {
-      this.removed[id] = delta;
+      this.removed[id] = {
+        // merge with the existing delta, if exists
+        ...this.removed[id],
+        ...delta
+      };
     }
     for (const [id, delta] of Object.entries(updated)) {
-      this.updated[id] = delta;
+      this.updated[id] = {
+        // merge with the existing delta, if exists
+        ...this.updated[id],
+        ...delta
+      };
     }
     return nextAffectedElements;
   }
@@ -15688,10 +15770,14 @@ var ElementsDelta = class _ElementsDelta {
 
 // src/distribute.ts
 init_define_import_meta_env();
-var distributeElements = (selectedElements, elementsMap, distribution) => {
+var distributeElements = (selectedElements, elementsMap, distribution, appState) => {
   const [start, mid, end, extent] = distribution.axis === "x" ? ["minX", "midX", "maxX", "width"] : ["minY", "midY", "maxY", "height"];
   const bounds = getCommonBoundingBox(selectedElements);
-  const groups = getMaximumGroups(selectedElements, elementsMap).map((group) => [group, getCommonBoundingBox(group)]).sort((a2, b2) => a2[1][mid] - b2[1][mid]);
+  const groups = getSelectedElementsByGroup(
+    selectedElements,
+    elementsMap,
+    appState
+  ).map((group) => [group, getCommonBoundingBox(group)]).sort((a2, b2) => a2[1][mid] - b2[1][mid]);
   let span = 0;
   for (const group of groups) {
     span += group[1][extent];
@@ -16683,7 +16769,7 @@ var embeddableURLValidator = (url, validateEmbeddable) => {
 
 // src/flowchart.ts
 init_define_import_meta_env();
-import { KEYS as KEYS3, invariant as invariant8, toBrandedType as toBrandedType2 } from "@excalidraw/common";
+import { KEYS as KEYS3, invariant as invariant9, toBrandedType as toBrandedType2 } from "@excalidraw/common";
 import { pointFrom as pointFrom13 } from "@excalidraw/math";
 var VERTICAL_OFFSET = 100;
 var HORIZONTAL_OFFSET = 100;
@@ -16713,7 +16799,7 @@ var getNodeRelatives = (type, node, elementsMap, direction) => {
         if (!relative) {
           return acc;
         }
-        invariant8(
+        invariant9(
           isBindableElement(relative),
           "not an ExcalidrawBindableElement"
         );
@@ -16829,7 +16915,7 @@ var addNewNode = (element, appState, direction, scene) => {
     fillStyle: element.fillStyle,
     strokeStyle: element.strokeStyle
   });
-  invariant8(
+  invariant9(
     isFlowchartNodeElement(nextNode),
     "not an ExcalidrawFlowchartNodeElement"
   );
@@ -16887,7 +16973,7 @@ var addNewNodes = (startNode, appState, direction, scene, numberOfNodes) => {
       fillStyle: startNode.fillStyle,
       strokeStyle: startNode.strokeStyle
     });
-    invariant8(
+    invariant9(
       isFlowchartNodeElement(nextNode),
       "not an ExcalidrawFlowchartNodeElement"
     );
@@ -17113,7 +17199,7 @@ var FlowChartCreator = class {
     }
     if (startNode.frameId) {
       const frame = elementsMap.get(startNode.frameId);
-      invariant8(
+      invariant9(
         frame && isFrameElement(frame),
         "not an ExcalidrawFrameElement"
       );
@@ -18403,7 +18489,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) {
@@ -19151,6 +19237,7 @@ export {
   getRootElements,
   getSceneVersion,
   getSelectedElements,
+  getSelectedElementsByGroup,
   getSelectedGroupForElement,
   getSelectedGroupIdForElement,
   getSelectedGroupIds,