@excalidraw/excalidraw 0.17.1-c0b80a0 → 0.17.1-c329470

package/dist/excalidraw/actions/actionDuplicateSelection.js

@@ -5,18 +5,17 @@ import { duplicateElement, getNonDeletedElements } from "../element";
 import { isSomeElementSelected } from "../scene";
 import { ToolButton } from "../components/ToolButton";
 import { t } from "../i18n";
-import { arrayToMap, getShortcutKey } from "../utils";
+import { arrayToMap, castArray, findLastIndex, getShortcutKey, invariant, } from "../utils";
 import { LinearElementEditor } from "../element/linearElementEditor";
 import { selectGroupsForSelectedElements, getSelectedGroupForElement, getElementsInGroup, } from "../groups";
 import { fixBindingsAfterDuplication } from "../element/binding";
 import { DEFAULT_GRID_SIZE } from "../constants";
-import { bindTextToShapeAfterDuplication, getBoundTextElement, } from "../element/textElement";
-import { isBoundToContainer, isFrameLikeElement } from "../element/typeChecks";
+import { bindTextToShapeAfterDuplication, getBoundTextElement, getContainerElement, } from "../element/textElement";
+import { hasBoundTextElement, isBoundToContainer, isFrameLikeElement, } from "../element/typeChecks";
 import { normalizeElementOrder } from "../element/sortElements";
 import { DuplicateIcon } from "../components/icons";
 import { bindElementsToFramesAfterDuplication, getFrameChildren, } from "../frame";
 import { excludeElementsInFramesFromSelection, getSelectedElements, } from "../scene/selection";
-import { syncMovedIndices } from "../fractionalIndex";
 import { StoreAction } from "../store";
 export const actionDuplicateSelection = register({
     name: "duplicateSelection",
@@ -39,8 +38,15 @@ export const actionDuplicateSelection = register({
                 return false;
             }
         }
+        const nextState = duplicateElements(elements, appState);
+        if (app.props.onDuplicate && nextState.elements) {
+            const mappedElements = app.props.onDuplicate(nextState.elements, elements);
+            if (mappedElements) {
+                nextState.elements = mappedElements;
+            }
+        }
         return {
-            ...duplicateElements(elements, appState),
+            ...nextState,
             storeAction: StoreAction.CAPTURE,
         };
     },
@@ -49,25 +55,35 @@ export const actionDuplicateSelection = register({
 });
 const duplicateElements = (elements, appState) => {
     // ---------------------------------------------------------------------------
-    // step (1)
-    const sortedElements = normalizeElementOrder(elements);
     const groupIdMap = new Map();
     const newElements = [];
     const oldElements = [];
     const oldIdToDuplicatedId = new Map();
     const duplicatedElementsMap = new Map();
+    const elementsMap = arrayToMap(elements);
     const duplicateAndOffsetElement = (element) => {
-        const newElement = duplicateElement(appState.editingGroupId, groupIdMap, element, {
-            x: element.x + DEFAULT_GRID_SIZE / 2,
-            y: element.y + DEFAULT_GRID_SIZE / 2,
-        });
-        duplicatedElementsMap.set(newElement.id, newElement);
-        oldIdToDuplicatedId.set(element.id, newElement.id);
-        oldElements.push(element);
-        newElements.push(newElement);
-        return newElement;
+        const elements = castArray(element);
+        const _newElements = elements.reduce((acc, element) => {
+            if (processedIds.has(element.id)) {
+                return acc;
+            }
+            processedIds.set(element.id, true);
+            const newElement = duplicateElement(appState.editingGroupId, groupIdMap, element, {
+                x: element.x + DEFAULT_GRID_SIZE / 2,
+                y: element.y + DEFAULT_GRID_SIZE / 2,
+            });
+            processedIds.set(newElement.id, true);
+            duplicatedElementsMap.set(newElement.id, newElement);
+            oldIdToDuplicatedId.set(element.id, newElement.id);
+            oldElements.push(element);
+            newElements.push(newElement);
+            acc.push(newElement);
+            return acc;
+        }, []);
+        return (Array.isArray(element) ? _newElements : _newElements[0] || null);
     };
-    const idsOfElementsToDuplicate = arrayToMap(getSelectedElements(sortedElements, appState, {
+    elements = normalizeElementOrder(elements);
+    const idsOfElementsToDuplicate = arrayToMap(getSelectedElements(elements, appState, {
         includeBoundTextElement: true,
         includeElementsInFrames: true,
     }));
@@ -82,97 +98,91 @@ const duplicateElements = (elements, appState) => {
     // For convenience we mark even the newly created ones even though we don't
     // loop over them.
     const processedIds = new Map();
-    const markAsProcessed = (elements) => {
-        for (const element of elements) {
-            processedIds.set(element.id, true);
+    const elementsWithClones = elements.slice();
+    const insertAfterIndex = (index, elements) => {
+        invariant(index !== -1, "targetIndex === -1 ");
+        if (!Array.isArray(elements) && !elements) {
+            return;
         }
-        return elements;
+        elementsWithClones.splice(index + 1, 0, ...castArray(elements));
     };
-    const elementsWithClones = [];
-    let index = -1;
-    while (++index < sortedElements.length) {
-        const element = sortedElements[index];
-        if (processedIds.get(element.id)) {
+    const frameIdsToDuplicate = new Set(elements
+        .filter((el) => idsOfElementsToDuplicate.has(el.id) && isFrameLikeElement(el))
+        .map((el) => el.id));
+    for (const element of elements) {
+        if (processedIds.has(element.id)) {
             continue;
         }
-        const boundTextElement = getBoundTextElement(element, arrayToMap(elements));
-        const isElementAFrameLike = isFrameLikeElement(element);
-        if (idsOfElementsToDuplicate.get(element.id)) {
-            // if a group or a container/bound-text or frame, duplicate atomically
-            if (element.groupIds.length || boundTextElement || isElementAFrameLike) {
-                const groupId = getSelectedGroupForElement(appState, element);
-                if (groupId) {
-                    // TODO:
-                    // remove `.flatMap...`
-                    // if the elements in a frame are grouped when the frame is grouped
-                    const groupElements = getElementsInGroup(sortedElements, groupId).flatMap((element) => isFrameLikeElement(element)
-                        ? [...getFrameChildren(elements, element.id), element]
-                        : [element]);
-                    elementsWithClones.push(...markAsProcessed([
-                        ...groupElements,
-                        ...groupElements.map((element) => duplicateAndOffsetElement(element)),
-                    ]));
-                    continue;
-                }
-                if (boundTextElement) {
-                    elementsWithClones.push(...markAsProcessed([
-                        element,
-                        boundTextElement,
-                        duplicateAndOffsetElement(element),
-                        duplicateAndOffsetElement(boundTextElement),
-                    ]));
-                    continue;
-                }
-                if (isElementAFrameLike) {
-                    const elementsInFrame = getFrameChildren(sortedElements, element.id);
-                    elementsWithClones.push(...markAsProcessed([
-                        ...elementsInFrame,
-                        element,
-                        ...elementsInFrame.map((e) => duplicateAndOffsetElement(e)),
-                        duplicateAndOffsetElement(element),
-                    ]));
-                    continue;
-                }
+        if (!idsOfElementsToDuplicate.has(element.id)) {
+            continue;
+        }
+        // groups
+        // -------------------------------------------------------------------------
+        const groupId = getSelectedGroupForElement(appState, element);
+        if (groupId) {
+            const groupElements = getElementsInGroup(elements, groupId).flatMap((element) => isFrameLikeElement(element)
+                ? [...getFrameChildren(elements, element.id), element]
+                : [element]);
+            const targetIndex = findLastIndex(elementsWithClones, (el) => {
+                return el.groupIds?.includes(groupId);
+            });
+            insertAfterIndex(targetIndex, duplicateAndOffsetElement(groupElements));
+            continue;
+        }
+        // frame duplication
+        // -------------------------------------------------------------------------
+        if (element.frameId && frameIdsToDuplicate.has(element.frameId)) {
+            continue;
+        }
+        if (isFrameLikeElement(element)) {
+            const frameId = element.id;
+            const frameChildren = getFrameChildren(elements, frameId);
+            const targetIndex = findLastIndex(elementsWithClones, (el) => {
+                return el.frameId === frameId || el.id === frameId;
+            });
+            insertAfterIndex(targetIndex, duplicateAndOffsetElement([...frameChildren, element]));
+            continue;
+        }
+        // text container
+        // -------------------------------------------------------------------------
+        if (hasBoundTextElement(element)) {
+            const boundTextElement = getBoundTextElement(element, elementsMap);
+            const targetIndex = findLastIndex(elementsWithClones, (el) => {
+                return (el.id === element.id ||
+                    ("containerId" in el && el.containerId === element.id));
+            });
+            if (boundTextElement) {
+                insertAfterIndex(targetIndex, duplicateAndOffsetElement([element, boundTextElement]));
             }
-            // since elements in frames have a lower z-index than the frame itself,
-            // they will be looped first and if their frames are selected as well,
-            // they will have been copied along with the frame atomically in the
-            // above branch, so we must skip those elements here
-            //
-            // now, for elements do not belong any frames or elements whose frames
-            // are selected (or elements that are left out from the above
-            // steps for whatever reason) we (should at least) duplicate them here
-            if (!element.frameId || !idsOfElementsToDuplicate.has(element.frameId)) {
-                elementsWithClones.push(...markAsProcessed([element, duplicateAndOffsetElement(element)]));
+            else {
+                insertAfterIndex(targetIndex, duplicateAndOffsetElement(element));
             }
+            continue;
         }
-        else {
-            elementsWithClones.push(...markAsProcessed([element]));
-        }
-    }
-    // step (2)
-    // second pass to remove duplicates. We loop from the end as it's likelier
-    // that the last elements are in the correct order (contiguous or otherwise).
-    // Thus we need to reverse as the last step (3).
-    const finalElementsReversed = [];
-    const finalElementIds = new Map();
-    index = elementsWithClones.length;
-    while (--index >= 0) {
-        const element = elementsWithClones[index];
-        if (!finalElementIds.get(element.id)) {
-            finalElementIds.set(element.id, true);
-            finalElementsReversed.push(element);
+        if (isBoundToContainer(element)) {
+            const container = getContainerElement(element, elementsMap);
+            const targetIndex = findLastIndex(elementsWithClones, (el) => {
+                return el.id === element.id || el.id === container?.id;
+            });
+            if (container) {
+                insertAfterIndex(targetIndex, duplicateAndOffsetElement([container, element]));
+            }
+            else {
+                insertAfterIndex(targetIndex, duplicateAndOffsetElement(element));
+            }
+            continue;
         }
+        // default duplication (regular elements)
+        // -------------------------------------------------------------------------
+        insertAfterIndex(findLastIndex(elementsWithClones, (el) => el.id === element.id), duplicateAndOffsetElement(element));
     }
-    // step (3)
-    const finalElements = syncMovedIndices(finalElementsReversed.reverse(), arrayToMap(newElements));
     // ---------------------------------------------------------------------------
     bindTextToShapeAfterDuplication(elementsWithClones, oldElements, oldIdToDuplicatedId);
     fixBindingsAfterDuplication(elementsWithClones, oldElements, oldIdToDuplicatedId);
-    bindElementsToFramesAfterDuplication(finalElements, oldElements, oldIdToDuplicatedId);
+    bindElementsToFramesAfterDuplication(elementsWithClones, oldElements, oldIdToDuplicatedId);
     const nextElementsToSelect = excludeElementsInFramesFromSelection(newElements);
     return {
-        elements: finalElements,
+        elements: elementsWithClones,
         appState: {
             ...appState,
             ...selectGroupsForSelectedElements({
@@ -183,7 +193,7 @@ const duplicateElements = (elements, appState) => {
                     }
                     return acc;
                 }, {}),
-            }, getNonDeletedElements(finalElements), appState, null),
+            }, getNonDeletedElements(elementsWithClones), appState, null),
         },
     };
 };

package/dist/excalidraw/actions/actionFlip.js

@@ -4,14 +4,14 @@ import { getNonDeletedElements } from "../element";
 import { resizeMultipleElements } from "../element/resizeElements";
 import { arrayToMap } from "../utils";
 import { CODES, KEYS } from "../keys";
-import { getCommonBoundingBox } from "../element/bounds";
 import { bindOrUnbindLinearElements, isBindingEnabled, } from "../element/binding";
 import { updateFrameMembershipOfSelectedElements } from "../frame";
 import { flipHorizontal, flipVertical } from "../components/icons";
 import { StoreAction } from "../store";
 import { isArrowElement, isElbowArrow, isLinearElement, } from "../element/typeChecks";
-import { mutateElbowArrow } from "../element/routing";
 import { mutateElement, newElementWith } from "../element/mutateElement";
+import { deepCopyElement } from "../element/newElement";
+import { getCommonBoundingBox } from "../element/bounds";
 export const actionFlipHorizontal = register({
     name: "flipHorizontal",
     label: "labels.flipHorizontal",
@@ -59,9 +59,17 @@ const flipElements = (selectedElements, elementsMap, appState, flipDirection, ap
             });
         });
     }
-    const { minX, minY, maxX, maxY, midX, midY } = getCommonBoundingBox(selectedElements);
-    resizeMultipleElements(elementsMap, selectedElements, elementsMap, "nw", true, true, flipDirection === "horizontal" ? maxX : minX, flipDirection === "horizontal" ? minY : maxY);
-    bindOrUnbindLinearElements(selectedElements.filter(isLinearElement), elementsMap, app.scene.getNonDeletedElements(), app.scene, isBindingEnabled(appState), []);
+    const { midX, midY } = getCommonBoundingBox(selectedElements);
+    resizeMultipleElements(selectedElements, elementsMap, "nw", app.scene, new Map(Array.from(elementsMap.values()).map((element) => [
+        element.id,
+        deepCopyElement(element),
+    ])), {
+        flipByX: flipDirection === "horizontal",
+        flipByY: flipDirection === "vertical",
+        shouldResizeFromCenter: true,
+        shouldMaintainAspectRatio: true,
+    });
+    bindOrUnbindLinearElements(selectedElements.filter(isLinearElement), elementsMap, app.scene.getNonDeletedElements(), app.scene, isBindingEnabled(appState), [], appState.zoom);
     // ---------------------------------------------------------------------------
     // flipping arrow elements (and potentially other) makes the selection group
     // "move" across the canvas because of how arrows can bump against the "wall"
@@ -76,8 +84,9 @@ const flipElements = (selectedElements, elementsMap, appState, flipDirection, ap
         x: element.x + diffX,
         y: element.y + diffY,
     }));
-    elbowArrows.forEach((element) => mutateElbowArrow(element, elementsMap, element.points, undefined, undefined, {
-        informMutation: false,
+    elbowArrows.forEach((element) => mutateElement(element, {
+        x: element.x + diffX,
+        y: element.y + diffY,
     }));
     // ---------------------------------------------------------------------------
     return selectedElements;