enable version bumping for collaboration

src/element/mutateElement.ts

@@ -0,0 +1,20 @@
+import {
+  MutableExcalidrawElement,
+  MutableExcalidrawTextElement,
+} from "./types";
+
+export function mutateElement(
+  element: MutableExcalidrawElement,
+  callback: (mutatableElement: MutableExcalidrawElement) => void,
+): void {
+  element.version++;
+  callback(element);
+}
+
+export function mutateTextElement(
+  element: MutableExcalidrawTextElement,
+  callback: (mutatableElement: MutableExcalidrawTextElement) => void,
+): void {
+  element.version++;
+  callback(element);
+}

src/element/newElement.ts

@@ -33,6 +33,7 @@ export function newElement(
     opacity,
     seed: randomSeed(),
     points: [] as Point[],
+    version: 1,
   };
   return element;
 }

src/element/sizeHelpers.ts

@@ -1,5 +1,6 @@
-import { ExcalidrawElement } from "./types";
+import { ExcalidrawElement, MutableExcalidrawElement } from "./types";
 import { invalidateShapeForElement } from "../renderer/renderElement";
+import { mutateElement } from "./mutateElement";
 
 export function isInvisiblySmallElement(element: ExcalidrawElement): boolean {
   if (element.type === "arrow" || element.type === "line") {
@@ -35,7 +36,7 @@ export function getPerfectElementSize(
 }
 
 export function resizePerfectLineForNWHandler(
-  element: ExcalidrawElement,
+  element: MutableExcalidrawElement,
   x: number,
   y: number,
 ) {
@@ -78,13 +79,17 @@ export function normalizeDimensions(
   }
 
   if (element.width < 0) {
-    element.width = Math.abs(element.width);
-    element.x -= element.width;
+    mutateElement(element, element => {
+      element.width = Math.abs(element.width);
+      element.x -= element.width;
+    });
   }
 
   if (element.height < 0) {
-    element.height = Math.abs(element.height);
-    element.y -= element.height;
+    mutateElement(element, element => {
+      element.height = Math.abs(element.height);
+      element.y -= element.height;
+    });
   }
 
   invalidateShapeForElement(element);

src/element/textElement.ts

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

src/element/types.ts

@@ -5,8 +5,10 @@ import { newElement } from "./newElement";
  * no computed data. The list of all ExcalidrawElements should be shareable
  * between peers and contain no state local to the peer.
  */
-export type ExcalidrawElement = ReturnType<typeof newElement>;
-export type ExcalidrawTextElement = ExcalidrawElement & {
+export type ExcalidrawElement = Readonly<ReturnType<typeof newElement>>;
+export type MutableExcalidrawElement = ReturnType<typeof newElement>;
+
+export type MutableExcalidrawTextElement = MutableExcalidrawElement & {
   type: "text";
   font: string;
   text: string;
@@ -15,4 +17,6 @@ export type ExcalidrawTextElement = ExcalidrawElement & {
   baseline: number;
 };
 
+export type ExcalidrawTextElement = Readonly<MutableExcalidrawTextElement>;
+
 export type PointerType = "mouse" | "pen" | "touch";