Deprecate mutateElement in the codebase

packages/element/src/binding.ts

@@ -48,7 +48,7 @@ import {
   type Heading,
 } from "./heading";
 import { LinearElementEditor } from "./linearElementEditor";
-import { mutateElementWith, mutateElement } from "./mutateElement";
+import { mutateElementWith } from "./mutateElement";
 import { getBoundTextElement, handleBindTextResize } from "./textElement";
 import {
   isArrowElement,
@@ -848,7 +848,7 @@ export const updateBoundElements = (
 
     const boundText = getBoundTextElement(element, elementsMap);
     if (boundText && !boundText.isDeleted) {
-      handleBindTextResize(element, elementsMap, false);
+      handleBindTextResize(element, scene, false);
     }
   });
 };
@@ -1499,7 +1499,7 @@ const fixReversedBindingsForBindables = (
         (el) => el.id === newArrowId,
       )! as ExcalidrawArrowElement;
 
-      mutateElement(newArrow, {
+      mutateElementWith(newArrow, originalElements, {
         startBinding:
           oldArrow.startBinding?.elementId === binding.id
             ? {
@@ -1515,7 +1515,7 @@ const fixReversedBindingsForBindables = (
               }
             : newArrow.endBinding,
       });
-      mutateElement(duplicate, {
+      mutateElementWith(duplicate, originalElements, {
         boundElements: [
           ...(duplicate.boundElements ?? []).filter(
             (el) => el.id !== binding.id && el.id !== newArrowId,
@@ -1529,7 +1529,7 @@ const fixReversedBindingsForBindables = (
     } else {
       // Linked arrow is outside the selection,
       // so we move the binding to the duplicate
-      mutateElement(oldArrow, {
+      mutateElementWith(oldArrow, originalElements, {
         startBinding:
           oldArrow.startBinding?.elementId === original.id
             ? {
@@ -1545,7 +1545,7 @@ const fixReversedBindingsForBindables = (
               }
             : oldArrow.endBinding,
       });
-      mutateElement(duplicate, {
+      mutateElementWith(duplicate, originalElements, {
         boundElements: [
           ...(duplicate.boundElements ?? []),
           {
@@ -1554,7 +1554,7 @@ const fixReversedBindingsForBindables = (
           },
         ],
       });
-      mutateElement(original, {
+      mutateElementWith(original, originalElements, {
         boundElements:
           original.boundElements?.filter((_, i) => i !== idx) ?? null,
       });
@@ -1580,13 +1580,13 @@ const fixReversedBindingsForArrows = (
       const newBindable = elementsWithClones.find(
         (el) => el.id === newBindableId,
       ) as ExcalidrawBindableElement;
-      mutateElement(duplicate, {
+      mutateElementWith(duplicate, originalElements, {
         [bindingProp]: {
           ...original[bindingProp],
           elementId: newBindableId,
         },
       });
-      mutateElement(newBindable, {
+      mutateElementWith(newBindable, originalElements, {
         boundElements: [
           ...(newBindable.boundElements ?? []).filter(
             (el) => el.id !== original.id && el.id !== duplicate.id,
@@ -1603,13 +1603,13 @@ const fixReversedBindingsForArrows = (
         (el) => el.id === oldBindableId,
       );
       if (originalBindable) {
-        mutateElement(duplicate, {
+        mutateElementWith(duplicate, originalElements, {
           [bindingProp]: original[bindingProp],
         });
-        mutateElement(original, {
+        mutateElementWith(original, originalElements, {
           [bindingProp]: null,
         });
-        mutateElement(originalBindable, {
+        mutateElementWith(originalBindable, originalElements, {
           boundElements: [
             ...(originalBindable.boundElements?.filter(
               (el) => el.id !== original.id,
@@ -1671,8 +1671,12 @@ export const fixBindingsAfterDeletion = (
   const elements = arrayToMap(sceneElements);
 
   for (const element of deletedElements) {
-    BoundElement.unbindAffected(elements, element, mutateElement);
-    BindableElement.unbindAffected(elements, element, mutateElement);
+    BoundElement.unbindAffected(elements, element, (element, updates) =>
+      mutateElementWith(element, elements, updates),
+    );
+    BindableElement.unbindAffected(elements, element, (element, updates) =>
+      mutateElementWith(element, elements, updates),
+    );
   }
 };
 

packages/element/src/flowchart.ts

@@ -19,7 +19,7 @@ import {
   type Heading,
 } from "./heading";
 import { LinearElementEditor } from "./linearElementEditor";
-import { mutateElement } from "./mutateElement";
+import { mutateElementWith } from "./mutateElement";
 import { newArrowElement, newElement } from "./newElement";
 import { aabbForElement } from "./shapes";
 import { elementsAreInFrameBounds, elementOverlapsWithFrame } from "./frame";
@@ -678,7 +678,7 @@ export class FlowChartCreator {
         )
       ) {
         this.pendingNodes = this.pendingNodes.map((node) =>
-          mutateElement(node, {
+          mutateElementWith(node, elementsMap, {
             frameId: startNode.frameId,
           }),
         );

packages/element/src/linearElementEditor.ts

@@ -47,7 +47,7 @@ import {
 } from "./bounds";
 
 import { headingIsHorizontal, vectorToHeading } from "./heading";
-import { mutateElementWith, mutateElement } from "./mutateElement";
+import { mutateElementWith } from "./mutateElement";
 import { getBoundTextElement, handleBindTextResize } from "./textElement";
 import {
   isBindingElement,
@@ -356,7 +356,7 @@ export class LinearElementEditor {
 
       const boundTextElement = getBoundTextElement(element, elementsMap);
       if (boundTextElement) {
-        handleBindTextResize(element, elementsMap, false);
+        handleBindTextResize(element, scene, false);
       }
 
       // suggest bindings for first and last point if selected
@@ -1571,7 +1571,7 @@ export class LinearElementEditor {
       elementsMap,
     );
     if (points.length < 2) {
-      mutateElement(boundTextElement, { isDeleted: true });
+      mutateElementWith(boundTextElement, elementsMap, { isDeleted: true });
     }
     let x = 0;
     let y = 0;

packages/element/src/resizeElements.ts

@@ -962,8 +962,6 @@ export const resizeSingleElement = (
       informMutation: shouldInformMutation,
     });
 
-    const elementsMap = scene.getNonDeletedElementsMap();
-
     updateBoundElements(latestElement, scene, {
       // TODO: confirm with MARK if this actually makes sense
       newSize: { width: nextWidth, height: nextHeight },
@@ -976,7 +974,7 @@ export const resizeSingleElement = (
     }
     handleBindTextResize(
       latestElement,
-      elementsMap,
+      scene,
       handleDirection,
       shouldMaintainAspectRatio,
     );
@@ -1536,7 +1534,7 @@ export const resizeMultipleElements = (
           fontSize: boundTextFontSize,
           angle: isLinearElement(element) ? undefined : angle,
         });
-        handleBindTextResize(element, elementsMap, handleDirection, true);
+        handleBindTextResize(element, scene, handleDirection, true);
       }
     }
 

packages/element/src/sizeHelpers.ts

@@ -6,7 +6,6 @@ import {
 import type { AppState, Offsets, Zoom } from "@excalidraw/excalidraw/types";
 
 import { getCommonBounds, getElementBounds } from "./bounds";
-import { mutateElement } from "./mutateElement";
 import { isFreeDrawElement, isLinearElement } from "./typeChecks";
 
 import type { ElementsMap, ExcalidrawElement } from "./types";
@@ -170,41 +169,6 @@ export const getLockedLinearCursorAlignSize = (
   return { width, height };
 };
 
-export const resizePerfectLineForNWHandler = (
-  element: ExcalidrawElement,
-  x: number,
-  y: number,
-) => {
-  const anchorX = element.x + element.width;
-  const anchorY = element.y + element.height;
-  const distanceToAnchorX = x - anchorX;
-  const distanceToAnchorY = y - anchorY;
-  if (Math.abs(distanceToAnchorX) < Math.abs(distanceToAnchorY) / 2) {
-    mutateElement(element, {
-      x: anchorX,
-      width: 0,
-      y,
-      height: -distanceToAnchorY,
-    });
-  } else if (Math.abs(distanceToAnchorY) < Math.abs(element.width) / 2) {
-    mutateElement(element, {
-      y: anchorY,
-      height: 0,
-    });
-  } else {
-    const nextHeight =
-      Math.sign(distanceToAnchorY) *
-      Math.sign(distanceToAnchorX) *
-      element.width;
-    mutateElement(element, {
-      x,
-      y: anchorY - nextHeight,
-      width: -distanceToAnchorX,
-      height: nextHeight,
-    });
-  }
-};
-
 export const getNormalizedDimensions = (
   element: Pick<ExcalidrawElement, "width" | "height" | "x" | "y">,
 ): {

packages/element/src/textElement.ts

@@ -18,7 +18,6 @@ import {
 } from "./containerCache";
 import { LinearElementEditor } from "./linearElementEditor";
 
-import { mutateElement } from "./mutateElement";
 import { measureText } from "./textMeasurements";
 import { wrapText } from "./textWrapping";
 import {
@@ -126,10 +125,11 @@ export const redrawTextBoundingBox = (
 
 export const handleBindTextResize = (
   container: NonDeletedExcalidrawElement,
-  elementsMap: ElementsMap,
+  scene: Scene,
   transformHandleType: MaybeTransformHandleType,
   shouldMaintainAspectRatio = false,
 ) => {
+  const elementsMap = scene.getNonDeletedElementsMap();
   const boundTextElementId = getBoundTextElementId(container);
   if (!boundTextElementId) {
     return;
@@ -182,20 +182,20 @@ export const handleBindTextResize = (
           transformHandleType === "n")
           ? container.y - diff
           : container.y;
-      mutateElement(container, {
+      scene.mutate(container, {
         height: containerHeight,
         y: updatedY,
       });
     }
 
-    mutateElement(textElement, {
+    scene.mutate(textElement, {
       text,
       width: nextWidth,
       height: nextHeight,
     });
 
     if (!isArrowElement(container)) {
-      mutateElement(
+      scene.mutate(
         textElement,
         computeBoundTextPosition(container, textElement, elementsMap),
       );

packages/element/tests/duplicate.test.tsx

@@ -25,7 +25,6 @@ import {
 
 import type { LocalPoint } from "@excalidraw/math";
 
-import { mutateElement } from "../src/mutateElement";
 import { duplicateElement, duplicateElements } from "../src/duplicate";
 
 import type { ExcalidrawLinearElement } from "../src/types";
@@ -63,7 +62,7 @@ describe("duplicating single elements", () => {
     // @ts-ignore
     element.__proto__ = { hello: "world" };
 
-    mutateElement(element, {
+    h.app.scene.mutate(element, {
       points: [pointFrom<LocalPoint>(1, 2), pointFrom<LocalPoint>(3, 4)],
     });
 

packages/element/tests/elbowArrow.test.tsx

@@ -1,6 +1,6 @@
 import { ARROW_TYPE } from "@excalidraw/common";
 import { pointFrom } from "@excalidraw/math";
-import { Excalidraw, mutateElement } from "@excalidraw/excalidraw";
+import { Excalidraw } from "@excalidraw/excalidraw";
 
 import { actionSelectAll } from "@excalidraw/excalidraw/actions";
 import { actionDuplicateSelection } from "@excalidraw/excalidraw/actions/actionDuplicateSelection";
@@ -143,7 +143,7 @@ describe("elbow arrow routing", () => {
       elbowed: true,
     }) as ExcalidrawElbowArrowElement;
     scene.insertElement(arrow);
-    mutateElement(arrow, {
+    h.app.scene.mutate(arrow, {
       points: [
         pointFrom<LocalPoint>(-45 - arrow.x, -100.1 - arrow.y),
         pointFrom<LocalPoint>(45 - arrow.x, 99.9 - arrow.y),
@@ -195,7 +195,7 @@ describe("elbow arrow routing", () => {
     expect(arrow.startBinding).not.toBe(null);
     expect(arrow.endBinding).not.toBe(null);
 
-    mutateElement(arrow, {
+    h.app.scene.mutate(arrow, {
       points: [pointFrom<LocalPoint>(0, 0), pointFrom<LocalPoint>(90, 200)],
     });
 

packages/element/tests/sortElements.test.ts

@@ -1,10 +1,10 @@
 import { API } from "@excalidraw/excalidraw/tests/helpers/api";
 
-import { mutateElement } from "../src/mutateElement";
 import { normalizeElementOrder } from "../src/sortElements";
 
 import type { ExcalidrawElement } from "../src/types";
 
+const { h } = window;
 const assertOrder = (
   elements: readonly ExcalidrawElement[],
   expectedOrder: string[],
@@ -35,7 +35,7 @@ describe("normalizeElementsOrder", () => {
       boundElements: [],
     });
 
-    mutateElement(container, {
+    h.app.scene.mutate(container, {
       boundElements: [{ type: "text", id: boundText.id }],
     });
 
@@ -352,7 +352,7 @@ describe("normalizeElementsOrder", () => {
       containerId: container.id,
     });
 
-    mutateElement(container, {
+    h.app.scene.mutate(container, {
       boundElements: [
         { type: "text", id: boundText.id },
         { type: "text", id: "xxx" },
@@ -387,7 +387,7 @@ describe("normalizeElementsOrder", () => {
           boundElements: [],
           groupIds: ["C", "A"],
         });
-        mutateElement(container, {
+        h.app.scene.mutate(container, {
           boundElements: [{ type: "text", id: boundText.id }],
         });