remove closures from mutateElement, get rid of the element spreading (#902)

src/element/mutateElement.ts

@@ -1,26 +1,42 @@
-import {
-  MutableExcalidrawElement,
-  MutableExcalidrawTextElement,
-} from "./types";
+import { ExcalidrawElement, ExcalidrawTextElement } from "./types";
+
+type ElementUpdate<TElement extends ExcalidrawElement> = Omit<
+  Partial<TElement>,
+  "id" | "seed"
+>;
 
 // This function tracks updates of text elements for the purposes for collaboration.
 // The version is used to compare updates when more than one user is working in
 // the same drawing.
 export function mutateElement(
-  element: MutableExcalidrawElement,
-  callback: (mutatableElement: MutableExcalidrawElement) => void,
-): void {
-  element.version++;
-  callback(element);
+  element: ExcalidrawElement,
+  updates: ElementUpdate<ExcalidrawElement>,
+) {
+  Object.assign(element, updates);
+  (element as any).version++;
+}
+
+export function newElementWith(
+  element: ExcalidrawElement,
+  updates: ElementUpdate<ExcalidrawElement>,
+): ExcalidrawElement {
+  return { ...element, ...updates, version: element.version + 1 };
 }
 
 // This function tracks updates of text elements for the purposes for collaboration.
 // The version is used to compare updates when more than one user is working in
 // the same document.
 export function mutateTextElement(
-  element: MutableExcalidrawTextElement,
-  callback: (mutatableElement: MutableExcalidrawTextElement) => void,
+  element: ExcalidrawTextElement,
+  updates: ElementUpdate<ExcalidrawTextElement>,
 ): void {
-  element.version++;
-  callback(element);
+  Object.assign(element, updates);
+  (element as any).version++;
+}
+
+export function newTextElementWith(
+  element: ExcalidrawTextElement,
+  updates: ElementUpdate<ExcalidrawTextElement>,
+): ExcalidrawTextElement {
+  return { ...element, ...updates, version: element.version + 1 };
 }

src/element/sizeHelpers.ts

@@ -1,4 +1,4 @@
-import { ExcalidrawElement, MutableExcalidrawElement } from "./types";
+import { ExcalidrawElement } from "./types";
 import { invalidateShapeForElement } from "../renderer/renderElement";
 import { mutateElement } from "./mutateElement";
 
@@ -36,7 +36,7 @@ export function getPerfectElementSize(
 }
 
 export function resizePerfectLineForNWHandler(
-  element: MutableExcalidrawElement,
+  element: ExcalidrawElement,
   x: number,
   y: number,
 ) {
@@ -45,21 +45,28 @@ export function resizePerfectLineForNWHandler(
   const distanceToAnchorX = x - anchorX;
   const distanceToAnchorY = y - anchorY;
   if (Math.abs(distanceToAnchorX) < Math.abs(distanceToAnchorY) / 2) {
-    element.x = anchorX;
-    element.width = 0;
-    element.y = y;
-    element.height = -distanceToAnchorY;
+    mutateElement(element, {
+      x: anchorX,
+      width: 0,
+      y,
+      height: -distanceToAnchorY,
+    });
   } else if (Math.abs(distanceToAnchorY) < Math.abs(element.width) / 2) {
-    element.y = anchorY;
-    element.height = 0;
+    mutateElement(element, {
+      y: anchorY,
+      height: 0,
+    });
   } else {
-    element.x = x;
-    element.width = -distanceToAnchorX;
-    element.height =
+    const nextHeight =
       Math.sign(distanceToAnchorY) *
       Math.sign(distanceToAnchorX) *
       element.width;
-    element.y = anchorY - element.height;
+    mutateElement(element, {
+      x,
+      y: anchorY - nextHeight,
+      width: -distanceToAnchorX,
+      height: nextHeight,
+    });
   }
 }
 
@@ -79,16 +86,18 @@ export function normalizeDimensions(
   }
 
   if (element.width < 0) {
-    mutateElement(element, element => {
-      element.width = Math.abs(element.width);
-      element.x -= element.width;
+    const nextWidth = Math.abs(element.width);
+    mutateElement(element, {
+      width: nextWidth,
+      x: element.x - nextWidth,
     });
   }
 
   if (element.height < 0) {
-    mutateElement(element, element => {
-      element.height = Math.abs(element.height);
-      element.y -= element.height;
+    const nextHeight = Math.abs(element.height);
+    mutateElement(element, {
+      height: nextHeight,
+      y: element.y - nextHeight,
     });
   }
 

src/element/textElement.ts

@@ -1,11 +1,12 @@
 import { measureText } from "../utils";
-import { MutableExcalidrawTextElement } from "./types";
+import { ExcalidrawTextElement } from "./types";
+import { mutateTextElement } from "./mutateElement";
 
-export const redrawTextBoundingBox = (
-  element: MutableExcalidrawTextElement,
-) => {
+export const redrawTextBoundingBox = (element: ExcalidrawTextElement) => {
   const metrics = measureText(element.text, element.font);
-  element.width = metrics.width;
-  element.height = metrics.height;
-  element.baseline = metrics.baseline;
+  mutateTextElement(element, {
+    width: metrics.width,
+    height: metrics.height,
+    baseline: metrics.baseline,
+  });
 };

src/element/types.ts

@@ -6,17 +6,15 @@ import { newElement } from "./newElement";
  * between peers and contain no state local to the peer.
  */
 export type ExcalidrawElement = Readonly<ReturnType<typeof newElement>>;
-export type MutableExcalidrawElement = ReturnType<typeof newElement>;
 
-export type MutableExcalidrawTextElement = MutableExcalidrawElement & {
-  type: "text";
-  font: string;
-  text: string;
-  // for backward compatibility
-  actualBoundingBoxAscent?: number;
-  baseline: number;
-};
-
-export type ExcalidrawTextElement = Readonly<MutableExcalidrawTextElement>;
+export type ExcalidrawTextElement = ExcalidrawElement &
+  Readonly<{
+    type: "text";
+    font: string;
+    text: string;
+    // for backward compatibility
+    actualBoundingBoxAscent?: number;
+    baseline: number;
+  }>;
 
 export type PointerType = "mouse" | "pen" | "touch";