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 & {