fix: restore elements and app state in updateScene

src/components/App.tsx

@@ -72,7 +72,12 @@ import {
 import { loadFromBlob } from "../data";
 import { isValidLibrary } from "../data/json";
 import Library from "../data/library";
-import { restore, restoreElements, restoreLibraryItems } from "../data/restore";
+import {
+  restore,
+  restoreAppState,
+  restoreElements,
+  restoreLibraryItems,
+} from "../data/restore";
 import {
   dragNewElement,
   dragSelectedElements,
@@ -1590,11 +1595,13 @@ class App extends React.Component<AppProps, AppState> {
       }
 
       if (sceneData.appState) {
-        this.setState(sceneData.appState);
+        this.setState(restoreAppState(sceneData.appState, null));
       }
 
       if (sceneData.elements) {
-        this.scene.replaceAllElements(sceneData.elements);
+        this.scene.replaceAllElements(
+          restoreElements(sceneData.elements, null),
+        );
       }
 
       if (sceneData.collaborators) {

src/packages/excalidraw/example/App.js

@@ -79,6 +79,67 @@ export default function App() {
           seed: 1968410350,
           groupIds: [],
         },
+        {
+          id: "Ioiq-J6pE6vMftvReHcq7",
+          type: "rectangle",
+          x: 530.01171875,
+          y: 120.31640625,
+          width: 158.34375,
+          height: 175.52734375,
+          angle: 0,
+          strokeColor: "#000000",
+          backgroundColor: "#e64980",
+          fillStyle: "solid",
+          strokeWidth: 1,
+          strokeStyle: "solid",
+          roughness: 1,
+          opacity: 100,
+          groupIds: [],
+          strokeSharpness: "sharp",
+          seed: 1752793487,
+          version: 243,
+          versionNonce: 1367252367,
+          isDeleted: false,
+          boundElementIds: ["QEIIo0aX3LIkipph5r9Vc"],
+          updated: 1642057965561,
+        },
+        {
+          id: "QEIIo0aX3LIkipph5r9Vc",
+          type: "arrow",
+          x: 300.73046875,
+          y: 200.47265625,
+          width: 231.7578125,
+          height: 9.823413575122089,
+          angle: 0,
+          strokeColor: "#000000",
+          backgroundColor: "#e64980",
+          fillStyle: "solid",
+          strokeWidth: 1,
+          strokeStyle: "solid",
+          roughness: 1,
+          opacity: 100,
+          groupIds: [],
+          strokeSharpness: "round",
+          seed: 1335966913,
+          version: 180,
+          versionNonce: 24053473,
+          isDeleted: false,
+          boundElementIds: null,
+          updated: 1642057965562,
+          points: [
+            [0, 0],
+            [231.7578125, -9.823413575122089],
+          ],
+          lastCommittedPoint: null,
+          startBinding: null,
+          endBinding: {
+            elementId: "Ioiq-J6pE6vMftvReHcq7",
+            focus: 0.012598149333175906,
+            gap: 8.5234375,
+          },
+          startArrowhead: null,
+          endArrowhead: "arrow",
+        },
       ],
       appState: {
         viewBackgroundColor: "#edf2ff",

src/packages/excalidraw/example/initialData.js

@@ -2,45 +2,149 @@ export default {
   elements: [
     {
       type: "rectangle",
-      version: 141,
+      version: 75,
-      versionNonce: 361174001,
+      versionNonce: 812169490,
       isDeleted: false,
-      id: "oDVXy8D6rom3H1-LLH2-f",
+      id: "6sVDp9mCGQTomD9Cg5w1b",
-      fillStyle: "hachure",
+      fillStyle: "solid",
       strokeWidth: 1,
       strokeStyle: "solid",
       roughness: 1,
       opacity: 100,
       angle: 0,
-      x: 100.50390625,
+      x: 211.04296875,
-      y: 93.67578125,
+      y: -575.68359375,
       strokeColor: "#000000",
-      backgroundColor: "transparent",
+      backgroundColor: "#e64980",
-      width: 186.47265625,
+      width: 163,
-      height: 141.9765625,
+      height: 185,
-      seed: 1968410350,
+      seed: 1640006454,
       groupIds: [],
+      strokeSharpness: "sharp",
+      boundElements: [
+        {
+          type: "text",
+          id: "MB9CSH621UIKH8MEgOhaM",
+        },
+      ],
+      updated: 1642057378650,
     },
     {
-      id: "-xMIs_0jIFqvpx-R9UnaG",
+      type: "text",
-      type: "ellipse",
+      version: 81,
-      x: 300.5703125,
+      versionNonce: 2146024018,
-      y: 190.69140625,
+      isDeleted: false,
-      width: 198.21875,
+      id: "MB9CSH621UIKH8MEgOhaM",
-      height: 129.51171875,
+      fillStyle: "solid",
+      strokeWidth: 1,
+      strokeStyle: "solid",
+      roughness: 1,
+      opacity: 100,
       angle: 0,
+      x: 216.04296875,
+      y: -520.68359375,
       strokeColor: "#000000",
-      backgroundColor: "transparent",
+      backgroundColor: "#e64980",
-      fillStyle: "hachure",
+      width: 153,
+      height: 75,
+      seed: 802336758,
+      groupIds: [],
+      strokeSharpness: "sharp",
+      boundElements: [],
+      updated: 1642057383302,
+      fontSize: 20,
+      fontFamily: 1,
+      text: "Hello World!!!\n\nSticky notes:)",
+      baseline: 68,
+      textAlign: "center",
+      verticalAlign: "middle",
+      containerId: "6sVDp9mCGQTomD9Cg5w1b",
+      originalText: "Hello World!!!\n\nSticky notes:)",
+    },
+    {
+      type: "diamond",
+      version: 49,
+      versionNonce: 2072814570,
+      isDeleted: false,
+      id: "lpW0Dxf_d5ZH4KencU57Q",
+      fillStyle: "solid",
       strokeWidth: 1,
       strokeStyle: "solid",
       roughness: 1,
       opacity: 100,
+      angle: 0,
+      x: 439.9140625,
+      y: -667.89453125,
+      strokeColor: "#000000",
+      backgroundColor: "#15aabf",
+      width: 172.76953125,
+      height: 194.109375,
+      seed: 1339998698,
       groupIds: [],
-      seed: 957947807,
+      strokeSharpness: "sharp",
-      version: 47,
+      boundElements: [],
-      versionNonce: 1128618623,
+      updated: 1639729533735,
+    },
+    {
+      id: "Ioiq-J6pE6vMftvReHcq7",
+      type: "rectangle",
+      x: 643.01171875,
+      y: -500.31640625,
+      width: 158.34375,
+      height: 175.52734375,
+      angle: 0,
+      strokeColor: "#000000",
+      backgroundColor: "#e64980",
+      fillStyle: "solid",
+      strokeWidth: 1,
+      strokeStyle: "solid",
+      roughness: 1,
+      opacity: 100,
+      groupIds: [],
+      strokeSharpness: "sharp",
+      seed: 1752793487,
+      version: 243,
+      versionNonce: 1367252367,
+      isDeleted: false,
+      boundElementIds: ["QEIIo0aX3LIkipph5r9Vc"],
+      updated: 1642057965561,
+    },
+    {
+      id: "QEIIo0aX3LIkipph5r9Vc",
+      type: "arrow",
+      x: 402.73046875,
+      y: -400.47265625,
+      width: 231.7578125,
+      height: 9.823413575122089,
+      angle: 0,
+      strokeColor: "#000000",
+      backgroundColor: "#e64980",
+      fillStyle: "solid",
+      strokeWidth: 1,
+      strokeStyle: "solid",
+      roughness: 1,
+      opacity: 100,
+      groupIds: [],
+      strokeSharpness: "round",
+      seed: 1335966913,
+      version: 180,
+      versionNonce: 24053473,
       isDeleted: false,
+      boundElementIds: null,
+      updated: 1642057965562,
+      points: [
+        [0, 0],
+        [231.7578125, -9.823413575122089],
+      ],
+      lastCommittedPoint: null,
+      startBinding: null,
+      endBinding: {
+        elementId: "Ioiq-J6pE6vMftvReHcq7",
+        focus: 0.012598149333175906,
+        gap: 8.5234375,
+      },
+      startArrowhead: null,
+      endArrowhead: "arrow",
     },
   ],
   appState: { viewBackgroundColor: "#AFEEEE", currentItemFontFamily: 1 },