feat: add element.updated (#4070)

src/data/restore.ts

@@ -26,6 +26,7 @@ import {
 import { getDefaultAppState } from "../appState";
 import { LinearElementEditor } from "../element/linearElementEditor";
 import { bumpVersion } from "../element/mutateElement";
+import { getUpdatedTimestamp } from "../utils";
 
 type RestoredAppState = Omit<
   AppState,
@@ -101,6 +102,7 @@ const restoreElementWithProperties = <
       element.strokeSharpness ??
       (isLinearElementType(element.type) ? "round" : "sharp"),
     boundElementIds: element.boundElementIds ?? [],
+    updated: element.updated ?? getUpdatedTimestamp(),
   };
 
   return {

src/element/mutateElement.ts

@@ -4,6 +4,7 @@ import Scene from "../scene/Scene";
 import { getSizeFromPoints } from "../points";
 import { randomInteger } from "../random";
 import { Point } from "../types";
+import { getUpdatedTimestamp } from "../utils";
 
 type ElementUpdate<TElement extends ExcalidrawElement> = Omit<
   Partial<TElement>,
@@ -92,6 +93,7 @@ export const mutateElement = <TElement extends Mutable<ExcalidrawElement>>(
 
   element.version++;
   element.versionNonce = randomInteger();
+  element.updated = getUpdatedTimestamp();
 
   if (informMutation) {
     Scene.getScene(element)?.informMutation();
@@ -126,13 +128,14 @@ export const newElementWith = <TElement extends ExcalidrawElement>(
   return {
     ...element,
     ...updates,
+    updated: getUpdatedTimestamp(),
     version: element.version + 1,
     versionNonce: randomInteger(),
   };
 };
 
 /**
- * Mutates element and updates `version` & `versionNonce`.
+ * Mutates element, bumping `version`, `versionNonce`, and `updated`.
  *
  * NOTE: does not trigger re-render.
  */
@@ -142,5 +145,6 @@ export const bumpVersion = (
 ) => {
   element.version = (version ?? element.version) + 1;
   element.versionNonce = randomInteger();
+  element.updated = getUpdatedTimestamp();
   return element;
 };

src/element/newElement.ts

@@ -12,7 +12,7 @@ import {
   ExcalidrawFreeDrawElement,
   FontFamilyValues,
 } from "../element/types";
-import { measureText, getFontString } from "../utils";
+import { measureText, getFontString, getUpdatedTimestamp } from "../utils";
 import { randomInteger, randomId } from "../random";
 import { newElementWith } from "./mutateElement";
 import { getNewGroupIdsForDuplication } from "../groups";
@@ -22,7 +22,7 @@ import { adjustXYWithRotation } from "../math";
 import { getResizedElementAbsoluteCoords } from "./bounds";
 
 type ElementConstructorOpts = MarkOptional<
-  Omit<ExcalidrawGenericElement, "id" | "type" | "isDeleted">,
+  Omit<ExcalidrawGenericElement, "id" | "type" | "isDeleted" | "updated">,
   | "width"
   | "height"
   | "angle"
@@ -75,6 +75,7 @@ const _newElementBase = <T extends ExcalidrawElement>(
   versionNonce: rest.versionNonce ?? 0,
   isDeleted: false as false,
   boundElementIds,
+  updated: getUpdatedTimestamp(),
 });
 
 export const newElement = (
@@ -337,6 +338,7 @@ export const duplicateElement = <TElement extends Mutable<ExcalidrawElement>>(
   } else {
     copy.id = randomId();
   }
+  copy.updated = getUpdatedTimestamp();
   copy.seed = randomInteger();
   copy.groupIds = getNewGroupIdsForDuplication(
     copy.groupIds,

src/element/types.ts

@@ -45,6 +45,8 @@ type _ExcalidrawElementBase = Readonly<{
   groupIds: readonly GroupId[];
   /** Ids of (linear) elements that are bound to this element. */
   boundElementIds: readonly ExcalidrawLinearElement["id"][] | null;
+  /** epoch (ms) timestamp of last element update */
+  updated: number;
 }>;
 
 export type ExcalidrawSelectionElement = _ExcalidrawElementBase & {

src/tests/__snapshots__/contextmenu.test.tsx.snap

@@ -99,6 +99,7 @@ Object {
   "strokeStyle": "solid",
   "strokeWidth": 1,
   "type": "rectangle",
+  "updated": 1,
   "version": 2,
   "versionNonce": 449462985,
   "width": 20,
@@ -152,6 +153,7 @@ Object {
           "strokeStyle": "solid",
           "strokeWidth": 1,
           "type": "rectangle",
+          "updated": 1,
           "version": 2,
           "versionNonce": 449462985,
           "width": 20,
@@ -267,6 +269,7 @@ Object {
   "strokeStyle": "solid",
   "strokeWidth": 1,
   "type": "rectangle",
+  "updated": 1,
   "version": 2,
   "versionNonce": 401146281,
   "width": 20,
@@ -293,6 +296,7 @@ Object {
   "strokeStyle": "solid",
   "strokeWidth": 1,
   "type": "rectangle",
+  "updated": 1,
   "version": 3,
   "versionNonce": 2019559783,
   "width": 20,
@@ -346,6 +350,7 @@ Object {
           "strokeStyle": "solid",
           "strokeWidth": 1,
           "type": "rectangle",
+          "updated": 1,
           "version": 2,
           "versionNonce": 449462985,
           "width": 20,
@@ -383,6 +388,7 @@ Object {
           "strokeStyle": "solid",
           "strokeWidth": 1,
           "type": "rectangle",
+          "updated": 1,
           "version": 2,
           "versionNonce": 449462985,
           "width": 20,
@@ -406,6 +412,7 @@ Object {
           "strokeStyle": "solid",
           "strokeWidth": 1,
           "type": "rectangle",
+          "updated": 1,
           "version": 2,
           "versionNonce": 401146281,
           "width": 20,
@@ -443,6 +450,7 @@ Object {
           "strokeStyle": "solid",
           "strokeWidth": 1,
           "type": "rectangle",
+          "updated": 1,
           "version": 2,
           "versionNonce": 401146281,
           "width": 20,
@@ -466,6 +474,7 @@ Object {
           "strokeStyle": "solid",
           "strokeWidth": 1,
           "type": "rectangle",
+          "updated": 1,
           "version": 3,
           "versionNonce": 2019559783,
           "width": 20,
@@ -581,6 +590,7 @@ Object {
   "strokeStyle": "solid",
   "strokeWidth": 1,
   "type": "rectangle",
+  "updated": 1,
   "version": 2,
   "versionNonce": 401146281,
   "width": 20,
@@ -607,6 +617,7 @@ Object {
   "strokeStyle": "solid",
   "strokeWidth": 1,
   "type": "rectangle",
+  "updated": 1,
   "version": 3,
   "versionNonce": 2019559783,
   "width": 20,
@@ -660,6 +671,7 @@ Object {
           "strokeStyle": "solid",
           "strokeWidth": 1,
           "type": "rectangle",
+          "updated": 1,
           "version": 2,
           "versionNonce": 449462985,
           "width": 20,
@@ -697,6 +709,7 @@ Object {
           "strokeStyle": "solid",
           "strokeWidth": 1,
           "type": "rectangle",
+          "updated": 1,
           "version": 2,
           "versionNonce": 449462985,
           "width": 20,
@@ -720,6 +733,7 @@ Object {
           "strokeStyle": "solid",
           "strokeWidth": 1,
           "type": "rectangle",
+          "updated": 1,
           "version": 2,
           "versionNonce": 401146281,
           "width": 20,
@@ -757,6 +771,7 @@ Object {
           "strokeStyle": "solid",
           "strokeWidth": 1,
           "type": "rectangle",
+          "updated": 1,
           "version": 2,
           "versionNonce": 401146281,
           "width": 20,
@@ -780,6 +795,7 @@ Object {
           "strokeStyle": "solid",
           "strokeWidth": 1,
           "type": "rectangle",
+          "updated": 1,
           "version": 3,
           "versionNonce": 2019559783,
           "width": 20,
@@ -895,6 +911,7 @@ Object {
   "strokeStyle": "solid",
   "strokeWidth": 1,
   "type": "rectangle",
+  "updated": 1,
   "version": 2,
   "versionNonce": 453191,
   "width": 20,
@@ -948,6 +965,7 @@ Object {
           "strokeStyle": "solid",
           "strokeWidth": 1,
           "type": "rectangle",
+          "updated": 1,
           "version": 2,
           "versionNonce": 453191,
           "width": 20,
@@ -1061,6 +1079,7 @@ Object {
   "strokeStyle": "solid",
   "strokeWidth": 1,
   "type": "rectangle",
+  "updated": 1,
   "version": 3,
   "versionNonce": 453191,
   "width": 20,
@@ -1114,6 +1133,7 @@ Object {
           "strokeStyle": "solid",
           "strokeWidth": 1,
           "type": "rectangle",
+          "updated": 1,
           "version": 2,
           "versionNonce": 449462985,
           "width": 20,
@@ -1149,6 +1169,7 @@ Object {
           "strokeStyle": "solid",
           "strokeWidth": 1,
           "type": "rectangle",
+          "updated": 1,
           "version": 3,
           "versionNonce": 453191,
           "width": 20,
@@ -1264,6 +1285,7 @@ Object {
   "strokeStyle": "solid",
   "strokeWidth": 1,
   "type": "rectangle",
+  "updated": 1,
   "version": 2,
   "versionNonce": 449462985,
   "width": 20,
@@ -1290,6 +1312,7 @@ Object {
   "strokeStyle": "solid",
   "strokeWidth": 1,
   "type": "rectangle",
+  "updated": 1,
   "version": 2,
   "versionNonce": 449462985,
   "width": 20,
@@ -1343,6 +1366,7 @@ Object {
           "strokeStyle": "solid",
           "strokeWidth": 1,
           "type": "rectangle",
+          "updated": 1,
           "version": 2,
           "versionNonce": 449462985,
           "width": 20,
@@ -1380,6 +1404,7 @@ Object {
           "strokeStyle": "solid",
           "strokeWidth": 1,
           "type": "rectangle",
+          "updated": 1,
           "version": 2,
           "versionNonce": 449462985,
           "width": 20,
@@ -1403,6 +1428,7 @@ Object {
           "strokeStyle": "solid",
           "strokeWidth": 1,
           "type": "rectangle",
+          "updated": 1,
           "version": 2,
           "versionNonce": 449462985,
           "width": 20,
@@ -1526,6 +1552,7 @@ Object {
   "strokeStyle": "solid",
   "strokeWidth": 1,
   "type": "rectangle",
+  "updated": 1,
   "version": 3,
   "versionNonce": 1150084233,
   "width": 20,
@@ -1554,6 +1581,7 @@ Object {
   "strokeStyle": "solid",
   "strokeWidth": 1,
   "type": "rectangle",
+  "updated": 1,
   "version": 3,
   "versionNonce": 1116226695,
   "width": 20,
@@ -1607,6 +1635,7 @@ Object {
           "strokeStyle": "solid",
           "strokeWidth": 1,
           "type": "rectangle",
+          "updated": 1,
           "version": 2,
           "versionNonce": 449462985,
           "width": 20,
@@ -1644,6 +1673,7 @@ Object {
           "strokeStyle": "solid",
           "strokeWidth": 1,
           "type": "rectangle",
+          "updated": 1,
           "version": 2,
           "versionNonce": 449462985,
           "width": 20,
@@ -1667,6 +1697,7 @@ Object {
           "strokeStyle": "solid",
           "strokeWidth": 1,
           "type": "rectangle",
+          "updated": 1,
           "version": 2,
           "versionNonce": 401146281,
           "width": 20,
@@ -1710,6 +1741,7 @@ Object {
           "strokeStyle": "solid",
           "strokeWidth": 1,
           "type": "rectangle",
+          "updated": 1,
           "version": 3,
           "versionNonce": 1150084233,
           "width": 20,
@@ -1735,6 +1767,7 @@ Object {
           "strokeStyle": "solid",
           "strokeWidth": 1,
           "type": "rectangle",
+          "updated": 1,
           "version": 3,
           "versionNonce": 1116226695,
           "width": 20,
@@ -1850,6 +1883,7 @@ Object {
   "strokeStyle": "dotted",
   "strokeWidth": 2,
   "type": "rectangle",
+  "updated": 1,
   "version": 3,
   "versionNonce": 23633383,
   "width": 20,
@@ -1876,6 +1910,7 @@ Object {
   "strokeStyle": "dotted",
   "strokeWidth": 2,
   "type": "rectangle",
+  "updated": 1,
   "version": 9,
   "versionNonce": 1505387817,
   "width": 20,
@@ -1929,6 +1964,7 @@ Object {
           "strokeStyle": "solid",
           "strokeWidth": 1,
           "type": "rectangle",
+          "updated": 1,
           "version": 2,
           "versionNonce": 449462985,
           "width": 20,
@@ -1966,6 +2002,7 @@ Object {
           "strokeStyle": "solid",
           "strokeWidth": 1,
           "type": "rectangle",
+          "updated": 1,
           "version": 2,
           "versionNonce": 449462985,
           "width": 20,
@@ -1989,6 +2026,7 @@ Object {
           "strokeStyle": "solid",
           "strokeWidth": 1,
           "type": "rectangle",
+          "updated": 1,
           "version": 2,
           "versionNonce": 401146281,
           "width": 20,
@@ -2026,6 +2064,7 @@ Object {
           "strokeStyle": "solid",
           "strokeWidth": 1,
           "type": "rectangle",
+          "updated": 1,
           "version": 2,
           "versionNonce": 449462985,
           "width": 20,
@@ -2049,6 +2088,7 @@ Object {
           "strokeStyle": "solid",
           "strokeWidth": 1,
           "type": "rectangle",
+          "updated": 1,
           "version": 3,
           "versionNonce": 2019559783,
           "width": 20,
@@ -2086,6 +2126,7 @@ Object {
           "strokeStyle": "solid",
           "strokeWidth": 1,
           "type": "rectangle",
+          "updated": 1,
           "version": 2,
           "versionNonce": 449462985,
           "width": 20,
@@ -2109,6 +2150,7 @@ Object {
           "strokeStyle": "solid",
           "strokeWidth": 1,
           "type": "rectangle",
+          "updated": 1,
           "version": 4,
           "versionNonce": 1150084233,
           "width": 20,
@@ -2146,6 +2188,7 @@ Object {
           "strokeStyle": "solid",
           "strokeWidth": 1,
           "type": "rectangle",
+          "updated": 1,
           "version": 2,
           "versionNonce": 449462985,
           "width": 20,
@@ -2169,6 +2212,7 @@ Object {
           "strokeStyle": "solid",
           "strokeWidth": 1,
           "type": "rectangle",
+          "updated": 1,
           "version": 5,
           "versionNonce": 1116226695,
           "width": 20,
@@ -2206,6 +2250,7 @@ Object {
           "strokeStyle": "solid",
           "strokeWidth": 1,
           "type": "rectangle",
+          "updated": 1,
           "version": 2,
           "versionNonce": 449462985,
           "width": 20,
@@ -2229,6 +2274,7 @@ Object {
           "strokeStyle": "solid",
           "strokeWidth": 2,
           "type": "rectangle",
+          "updated": 1,
           "version": 6,
           "versionNonce": 1014066025,
           "width": 20,
@@ -2266,6 +2312,7 @@ Object {
           "strokeStyle": "solid",
           "strokeWidth": 1,
           "type": "rectangle",
+          "updated": 1,
           "version": 2,
           "versionNonce": 449462985,
           "width": 20,
@@ -2289,6 +2336,7 @@ Object {
           "strokeStyle": "dotted",
           "strokeWidth": 2,
           "type": "rectangle",
+          "updated": 1,
           "version": 7,
           "versionNonce": 238820263,
           "width": 20,
@@ -2326,6 +2374,7 @@ Object {
           "strokeStyle": "solid",
           "strokeWidth": 1,
           "type": "rectangle",
+          "updated": 1,
           "version": 2,
           "versionNonce": 449462985,
           "width": 20,
@@ -2349,6 +2398,7 @@ Object {
           "strokeStyle": "dotted",
           "strokeWidth": 2,
           "type": "rectangle",
+          "updated": 1,
           "version": 8,
           "versionNonce": 1604849351,
           "width": 20,
@@ -2386,6 +2436,7 @@ Object {
           "strokeStyle": "solid",
           "strokeWidth": 1,
           "type": "rectangle",
+          "updated": 1,
           "version": 2,
           "versionNonce": 449462985,
           "width": 20,
@@ -2409,6 +2460,7 @@ Object {
           "strokeStyle": "dotted",
           "strokeWidth": 2,
           "type": "rectangle",
+          "updated": 1,
           "version": 9,
           "versionNonce": 1505387817,
           "width": 20,
@@ -2446,6 +2498,7 @@ Object {
           "strokeStyle": "dotted",
           "strokeWidth": 2,
           "type": "rectangle",
+          "updated": 1,
           "version": 3,
           "versionNonce": 23633383,
           "width": 20,
@@ -2469,6 +2522,7 @@ Object {
           "strokeStyle": "dotted",
           "strokeWidth": 2,
           "type": "rectangle",
+          "updated": 1,
           "version": 9,
           "versionNonce": 1505387817,
           "width": 20,
@@ -2584,6 +2638,7 @@ Object {
   "strokeStyle": "solid",
   "strokeWidth": 1,
   "type": "rectangle",
+  "updated": 1,
   "version": 3,
   "versionNonce": 2019559783,
   "width": 20,
@@ -2610,6 +2665,7 @@ Object {
   "strokeStyle": "solid",
   "strokeWidth": 1,
   "type": "rectangle",
+  "updated": 1,
   "version": 2,
   "versionNonce": 449462985,
   "width": 20,
@@ -2663,6 +2719,7 @@ Object {
           "strokeStyle": "solid",
           "strokeWidth": 1,
           "type": "rectangle",
+          "updated": 1,
           "version": 2,
           "versionNonce": 449462985,
           "width": 20,
@@ -2700,6 +2757,7 @@ Object {
           "strokeStyle": "solid",
           "strokeWidth": 1,
           "type": "rectangle",
+          "updated": 1,
           "version": 2,
           "versionNonce": 449462985,
           "width": 20,
@@ -2723,6 +2781,7 @@ Object {
           "strokeStyle": "solid",
           "strokeWidth": 1,
           "type": "rectangle",
+          "updated": 1,
           "version": 2,
           "versionNonce": 401146281,
           "width": 20,
@@ -2760,6 +2819,7 @@ Object {
           "strokeStyle": "solid",
           "strokeWidth": 1,
           "type": "rectangle",
+          "updated": 1,
           "version": 3,
           "versionNonce": 2019559783,
           "width": 20,
@@ -2783,6 +2843,7 @@ Object {
           "strokeStyle": "solid",
           "strokeWidth": 1,
           "type": "rectangle",
+          "updated": 1,
           "version": 2,
           "versionNonce": 449462985,
           "width": 20,
@@ -2898,6 +2959,7 @@ Object {
   "strokeStyle": "solid",
   "strokeWidth": 1,
   "type": "rectangle",
+  "updated": 1,
   "version": 3,
   "versionNonce": 2019559783,
   "width": 20,
@@ -2924,6 +2986,7 @@ Object {
   "strokeStyle": "solid",
   "strokeWidth": 1,
   "type": "rectangle",
+  "updated": 1,
   "version": 2,
   "versionNonce": 449462985,
   "width": 20,
@@ -2977,6 +3040,7 @@ Object {
           "strokeStyle": "solid",
           "strokeWidth": 1,
           "type": "rectangle",
+          "updated": 1,
           "version": 2,
           "versionNonce": 449462985,
           "width": 20,
@@ -3014,6 +3078,7 @@ Object {
           "strokeStyle": "solid",
           "strokeWidth": 1,
           "type": "rectangle",
+          "updated": 1,
           "version": 2,
           "versionNonce": 449462985,
           "width": 20,
@@ -3037,6 +3102,7 @@ Object {
           "strokeStyle": "solid",
           "strokeWidth": 1,
           "type": "rectangle",
+          "updated": 1,
           "version": 2,
           "versionNonce": 401146281,
           "width": 20,
@@ -3074,6 +3140,7 @@ Object {
           "strokeStyle": "solid",
           "strokeWidth": 1,
           "type": "rectangle",
+          "updated": 1,
           "version": 3,
           "versionNonce": 2019559783,
           "width": 20,
@@ -3097,6 +3164,7 @@ Object {
           "strokeStyle": "solid",
           "strokeWidth": 1,
           "type": "rectangle",
+          "updated": 1,
           "version": 2,
           "versionNonce": 449462985,
           "width": 20,
@@ -3216,6 +3284,7 @@ Object {
   "strokeStyle": "solid",
   "strokeWidth": 1,
   "type": "rectangle",
+  "updated": 1,
   "version": 4,
   "versionNonce": 238820263,
   "width": 20,
@@ -3242,6 +3311,7 @@ Object {
   "strokeStyle": "solid",
   "strokeWidth": 1,
   "type": "rectangle",
+  "updated": 1,
   "version": 4,
   "versionNonce": 400692809,
   "width": 20,
@@ -3295,6 +3365,7 @@ Object {
           "strokeStyle": "solid",
           "strokeWidth": 1,
           "type": "rectangle",
+          "updated": 1,
           "version": 2,
           "versionNonce": 453191,
           "width": 20,
@@ -3332,6 +3403,7 @@ Object {
           "strokeStyle": "solid",
           "strokeWidth": 1,
           "type": "rectangle",
+          "updated": 1,
           "version": 2,
           "versionNonce": 453191,
           "width": 20,
@@ -3355,6 +3427,7 @@ Object {
           "strokeStyle": "solid",
           "strokeWidth": 1,
           "type": "rectangle",
+          "updated": 1,
           "version": 2,
           "versionNonce": 2019559783,
           "width": 20,
@@ -3398,6 +3471,7 @@ Object {
           "strokeStyle": "solid",
           "strokeWidth": 1,
           "type": "rectangle",
+          "updated": 1,
           "version": 3,
           "versionNonce": 1116226695,
           "width": 20,
@@ -3423,6 +3497,7 @@ Object {
           "strokeStyle": "solid",
           "strokeWidth": 1,
           "type": "rectangle",
+          "updated": 1,
           "version": 3,
           "versionNonce": 1014066025,
           "width": 20,
@@ -3462,6 +3537,7 @@ Object {
           "strokeStyle": "solid",
           "strokeWidth": 1,
           "type": "rectangle",
+          "updated": 1,
           "version": 4,
           "versionNonce": 238820263,
           "width": 20,
@@ -3485,6 +3561,7 @@ Object {
           "strokeStyle": "solid",
           "strokeWidth": 1,
           "type": "rectangle",
+          "updated": 1,
           "version": 4,
           "versionNonce": 400692809,
           "width": 20,
@@ -3606,6 +3683,7 @@ Object {
   "strokeStyle": "solid",
   "strokeWidth": 1,
   "type": "rectangle",
+  "updated": 1,
   "version": 2,
   "versionNonce": 449462985,
   "width": 10,
@@ -3632,6 +3710,7 @@ Object {
   "strokeStyle": "solid",
   "strokeWidth": 1,
   "type": "rectangle",
+  "updated": 1,
   "version": 2,
   "versionNonce": 401146281,
   "width": 10,
@@ -3685,6 +3764,7 @@ Object {
           "strokeStyle": "solid",
           "strokeWidth": 1,
           "type": "rectangle",
+          "updated": 1,
           "version": 2,
           "versionNonce": 449462985,
           "width": 10,
@@ -3722,6 +3802,7 @@ Object {
           "strokeStyle": "solid",
           "strokeWidth": 1,
           "type": "rectangle",
+          "updated": 1,
           "version": 2,
           "versionNonce": 449462985,
           "width": 10,
@@ -3745,6 +3826,7 @@ Object {
           "strokeStyle": "solid",
           "strokeWidth": 1,
           "type": "rectangle",
+          "updated": 1,
           "version": 2,
           "versionNonce": 401146281,
           "width": 10,
@@ -3870,6 +3952,7 @@ Object {
   "strokeStyle": "solid",
   "strokeWidth": 1,
   "type": "rectangle",
+  "updated": 1,
   "version": 3,
   "versionNonce": 1014066025,
   "width": 10,
@@ -3898,6 +3981,7 @@ Object {
   "strokeStyle": "solid",
   "strokeWidth": 1,
   "type": "rectangle",
+  "updated": 1,
   "version": 3,
   "versionNonce": 238820263,
   "width": 10,
@@ -3951,6 +4035,7 @@ Object {
           "strokeStyle": "solid",
           "strokeWidth": 1,
           "type": "rectangle",
+          "updated": 1,
           "version": 2,
           "versionNonce": 453191,
           "width": 10,
@@ -3988,6 +4073,7 @@ Object {
           "strokeStyle": "solid",
           "strokeWidth": 1,
           "type": "rectangle",
+          "updated": 1,
           "version": 2,
           "versionNonce": 453191,
           "width": 10,
@@ -4011,6 +4097,7 @@ Object {
           "strokeStyle": "solid",
           "strokeWidth": 1,
           "type": "rectangle",
+          "updated": 1,
           "version": 2,
           "versionNonce": 2019559783,
           "width": 10,
@@ -4055,6 +4142,7 @@ Object {
           "strokeStyle": "solid",
           "strokeWidth": 1,
           "type": "rectangle",
+          "updated": 1,
           "version": 3,
           "versionNonce": 1014066025,
           "width": 10,
@@ -4080,6 +4168,7 @@ Object {
           "strokeStyle": "solid",
           "strokeWidth": 1,
           "type": "rectangle",
+          "updated": 1,
           "version": 3,
           "versionNonce": 238820263,
           "width": 10,
@@ -4379,6 +4468,7 @@ Object {
   "strokeStyle": "solid",
   "strokeWidth": 1,
   "type": "rectangle",
+  "updated": 1,
   "version": 2,
   "versionNonce": 449462985,
   "width": 20,
@@ -4405,6 +4495,7 @@ Object {
   "strokeStyle": "solid",
   "strokeWidth": 1,
   "type": "rectangle",
+  "updated": 1,
   "version": 1,
   "versionNonce": 0,
   "width": 200,
@@ -4431,6 +4522,7 @@ Object {
   "strokeStyle": "solid",
   "strokeWidth": 1,
   "type": "rectangle",
+  "updated": 1,
   "version": 1,
   "versionNonce": 0,
   "width": 200,
@@ -4484,6 +4576,7 @@ Object {
           "strokeStyle": "solid",
           "strokeWidth": 1,
           "type": "rectangle",
+          "updated": 1,
           "version": 2,
           "versionNonce": 449462985,
           "width": 20,

src/tests/__snapshots__/dragCreate.test.tsx.snap

@@ -35,6 +35,7 @@ Object {
   "strokeStyle": "solid",
   "strokeWidth": 1,
   "type": "arrow",
+  "updated": 1,
   "version": 3,
   "versionNonce": 449462985,
   "width": 30,
@@ -63,6 +64,7 @@ Object {
   "strokeStyle": "solid",
   "strokeWidth": 1,
   "type": "diamond",
+  "updated": 1,
   "version": 2,
   "versionNonce": 1278240551,
   "width": 30,
@@ -91,6 +93,7 @@ Object {
   "strokeStyle": "solid",
   "strokeWidth": 1,
   "type": "ellipse",
+  "updated": 1,
   "version": 2,
   "versionNonce": 1278240551,
   "width": 30,
@@ -132,6 +135,7 @@ Object {
   "strokeStyle": "solid",
   "strokeWidth": 1,
   "type": "line",
+  "updated": 1,
   "version": 3,
   "versionNonce": 449462985,
   "width": 30,
@@ -160,6 +164,7 @@ Object {
   "strokeStyle": "solid",
   "strokeWidth": 1,
   "type": "rectangle",
+  "updated": 1,
   "version": 2,
   "versionNonce": 1278240551,
   "width": 30,

src/tests/__snapshots__/move.test.tsx.snap

@@ -18,6 +18,7 @@ Object {
   "strokeStyle": "solid",
   "strokeWidth": 1,
   "type": "rectangle",
+  "updated": 1,
   "version": 4,
   "versionNonce": 2019559783,
   "width": 30,
@@ -44,6 +45,7 @@ Object {
   "strokeStyle": "solid",
   "strokeWidth": 1,
   "type": "rectangle",
+  "updated": 1,
   "version": 4,
   "versionNonce": 1150084233,
   "width": 30,
@@ -70,6 +72,7 @@ Object {
   "strokeStyle": "solid",
   "strokeWidth": 1,
   "type": "rectangle",
+  "updated": 1,
   "version": 3,
   "versionNonce": 453191,
   "width": 30,
@@ -98,6 +101,7 @@ Object {
   "strokeStyle": "solid",
   "strokeWidth": 1,
   "type": "rectangle",
+  "updated": 1,
   "version": 3,
   "versionNonce": 1014066025,
   "width": 100,
@@ -126,6 +130,7 @@ Object {
   "strokeStyle": "solid",
   "strokeWidth": 1,
   "type": "rectangle",
+  "updated": 1,
   "version": 6,
   "versionNonce": 1723083209,
   "width": 300,
@@ -175,6 +180,7 @@ Object {
   "strokeStyle": "solid",
   "strokeWidth": 1,
   "type": "line",
+  "updated": 1,
   "version": 11,
   "versionNonce": 1006504105,
   "width": 81,

src/tests/__snapshots__/multiPointCreate.test.tsx.snap

@@ -40,6 +40,7 @@ Object {
   "strokeStyle": "solid",
   "strokeWidth": 1,
   "type": "arrow",
+  "updated": 1,
   "version": 7,
   "versionNonce": 1150084233,
   "width": 70,
@@ -88,6 +89,7 @@ Object {
   "strokeStyle": "solid",
   "strokeWidth": 1,
   "type": "line",
+  "updated": 1,
   "version": 7,
   "versionNonce": 1150084233,
   "width": 70,

src/tests/__snapshots__/selection.test.tsx.snap

@@ -33,6 +33,7 @@ Object {
   "strokeStyle": "solid",
   "strokeWidth": 1,
   "type": "arrow",
+  "updated": 1,
   "version": 3,
   "versionNonce": 449462985,
   "width": 30,
@@ -74,6 +75,7 @@ Object {
   "strokeStyle": "solid",
   "strokeWidth": 1,
   "type": "line",
+  "updated": 1,
   "version": 3,
   "versionNonce": 449462985,
   "width": 30,
@@ -100,6 +102,7 @@ Object {
   "strokeStyle": "solid",
   "strokeWidth": 1,
   "type": "diamond",
+  "updated": 1,
   "version": 2,
   "versionNonce": 1278240551,
   "width": 30,
@@ -126,6 +129,7 @@ Object {
   "strokeStyle": "solid",
   "strokeWidth": 1,
   "type": "ellipse",
+  "updated": 1,
   "version": 2,
   "versionNonce": 1278240551,
   "width": 30,
@@ -152,6 +156,7 @@ Object {
   "strokeStyle": "solid",
   "strokeWidth": 1,
   "type": "rectangle",
+  "updated": 1,
   "version": 2,
   "versionNonce": 1278240551,
   "width": 30,

src/tests/data/__snapshots__/restore.test.ts.snap

@@ -33,6 +33,7 @@ Object {
   "strokeStyle": "solid",
   "strokeWidth": 1,
   "type": "arrow",
+  "updated": 1,
   "version": 1,
   "versionNonce": 0,
   "width": 0,
@@ -63,6 +64,7 @@ Object {
   "strokeStyle": "dashed",
   "strokeWidth": 2,
   "type": "rectangle",
+  "updated": 1,
   "version": 1,
   "versionNonce": 0,
   "width": 100,
@@ -93,6 +95,7 @@ Object {
   "strokeStyle": "dashed",
   "strokeWidth": 2,
   "type": "ellipse",
+  "updated": 1,
   "version": 1,
   "versionNonce": 0,
   "width": 100,
@@ -123,6 +126,7 @@ Object {
   "strokeStyle": "dashed",
   "strokeWidth": 2,
   "type": "diamond",
+  "updated": 1,
   "version": 1,
   "versionNonce": 0,
   "width": 100,
@@ -153,6 +157,7 @@ Object {
   "strokeStyle": "solid",
   "strokeWidth": 1,
   "type": "freedraw",
+  "updated": 1,
   "version": 1,
   "versionNonce": 0,
   "width": 0,
@@ -194,6 +199,7 @@ Object {
   "strokeStyle": "solid",
   "strokeWidth": 1,
   "type": "line",
+  "updated": 1,
   "version": 1,
   "versionNonce": 0,
   "width": 0,
@@ -235,6 +241,7 @@ Object {
   "strokeStyle": "solid",
   "strokeWidth": 1,
   "type": "line",
+  "updated": 1,
   "version": 1,
   "versionNonce": 0,
   "width": 0,
@@ -266,6 +273,7 @@ Object {
   "text": "text",
   "textAlign": "center",
   "type": "text",
+  "updated": 1,
   "version": 1,
   "versionNonce": 0,
   "verticalAlign": "middle",
@@ -298,6 +306,7 @@ Object {
   "text": "",
   "textAlign": "left",
   "type": "text",
+  "updated": 1,
   "version": 1,
   "versionNonce": 0,
   "verticalAlign": "top",

src/tests/fixtures/elementFixture.ts

@@ -21,6 +21,7 @@ const elementBase: Omit<ExcalidrawElement, "type"> = {
   versionNonce: 1188004276,
   isDeleted: false,
   boundElementIds: null,
+  updated: 1,
 };
 
 export const rectangleFixture: ExcalidrawElement = {

src/tests/scene/__snapshots__/export.test.ts.snap

@@ -74,7 +74,7 @@ exports[`exportToSvg with default arguments 1`] = `
 exports[`exportToSvg with exportEmbedScene 1`] = `
 "
   <!-- svg-source:excalidraw -->
-  <!-- payload-type:application/vnd.excalidraw+json --><!-- payload-version:2 --><!-- payload-start -->eyJ2ZXJzaW9uIjoiMSIsImVuY29kaW5nIjoiYnN0cmluZyIsImNvbXByZXNzZWQiOnRydWUsImVuY29kZWQiOiJ4nO1SQW7CMFx1MDAxMLzzisi9XCKRpIFQbrRUVaWqPXBAatWDiTexhbGD7Vx1MDAwMFx1MDAxMeLvtVx1MDAxZEjaqP1BfbC045nd9e6cXHUwMDA2QYBMXVx1MDAwMppcdTAwMDVcYo5cdTAwMTnmjCh8QEOH70FpJoV9in2sZaUyz6TGlLPRiEsroFKbhlx1MDAwZlx1MDAxY7YgjLaMXHUwMDBmXHUwMDFiXHUwMDA3wcnf9oVcdTAwMTGn2q/U7m2eb5gg8S7bpi+L+dO7l3rS0XKSKGnj2lx1MDAxNb5N2/jAiKFcdTAwMTaLwrDFKLCCmlx1MDAxZYhFwV2bXHUwMDFkoo2SXHUwMDFieJBcXCrXyE3oT1d6jbNNoWQlSMeJxlx1MDAxOK/zjpMzzpem5s1cdTAwMDBwRitcdTAwMDWoV2F1bbGHtzot7YA7lS1ZUFx1MDAwMVr/0MhcdTAwMTJnzNS9X7n+ymfip/vZz0+xKi95kHbBt85cdTAwMDCIT5VEk3F6XHUwMDE3TtuXbr9RXHUwMDFj9tFXKfyuo2g6XHLDJE4nLYPphV218WlzzDV0c3QjfGxs0LQqKs7b56vRXGLDWylcYvL4efjvlX+v/OlcdTAwMTXgnJVcdTAwMWEuXrG3/1x1MDAwZsJluTTYOErjXHUwMDFjtGdwuP9lN7k/Tu+d5nZcdTAwMDOu2uk8OH9cdTAwMDFcZrNI1SJ9<!-- payload-end -->
+  <!-- payload-type:application/vnd.excalidraw+json --><!-- payload-version:2 --><!-- payload-start -->eyJ2ZXJzaW9uIjoiMSIsImVuY29kaW5nIjoiYnN0cmluZyIsImNvbXByZXNzZWQiOnRydWUsImVuY29kZWQiOiJ4nO1SsW7CMFx1MDAxMN35ishdkUjSQChcdTAwMWItVVWpalx1MDAwN1x1MDAwNqRWXHUwMDFkTHxJLIxtbFx1MDAwN4hcdTAwMTD/XtuBpI26dK9cdTAwMDdL9/ze3fnunVx1MDAwNkGATC1cdTAwMDHNXHUwMDAyXHUwMDA0x1xmM0pcdTAwMTQ+oKHD96A0XHUwMDE13D7FPtaiUplnlsbI2WjEhFx1MDAxNZRCm4ZcdTAwMGZcZrbAjbaMXHUwMDBmXHUwMDFiXHUwMDA3wcnf9oVcdTAwMTKn2q/U7m2ebygn8S7bpi+L+dO7l3rS0XKSKGnj2lx1MDAxNb5N2/hAiSktXHUwMDE2hWGLlUCL0vRAzFx1MDAwYuba7Fx1MDAxMG2U2MCDYEK5Rm5Cf7rSa5xtXG4lKk46TjTGeJ13nJwytjQ1a1x1MDAwNoCzslKAelx1MDAxNVbXXHUwMDE2e3ir08JcdTAwMGW4U9mSRclB61x1MDAxZlx1MDAxYSFxRk3d+5XrTz5cdTAwMTM/3c9+/lx1MDAxMit5yYO0XHUwMDBivnVcdTAwMDZAfKokmozTu3DavnT7jeKwj75cbu53XHUwMDFkRdNpXHUwMDE4JnE6aVx1MDAxOVQv7KqNT5tjpqGbo1x1MDAxYuFjY4OmVV4x1j5XkuBG1n32aj5C8VZwgjx+XHUwMDFl/vvn3z9/8lx1MDAwZjBGpYaLf+zt/4iwlEtjRZbSuFx07SlcdTAwMWPuf9lX7o/Te/e5fYHr4HRcdTAwMWWcv1x1MDAwMKlcdFItIn0=<!-- payload-end -->
   <defs>
     <style>
       @font-face {

src/utils.ts

@@ -470,3 +470,6 @@ export const bytesToHexString = (bytes: Uint8Array) => {
     .map((byte) => `0${byte.toString(16)}`.slice(-2))
     .join("");
 };
+
+export const getUpdatedTimestamp = () =>
+  process.env.NODE_ENV === "test" ? 1 : Date.now();