fix: smooth out schema-version edges

excalidraw-app/App.tsx

@@ -53,6 +53,11 @@ import {
   restoreAppState,
   restoreElements,
 } from "@excalidraw/excalidraw/data/restore";
+import {
+  migrateElementsBySchema,
+  resolveSchemaVersion,
+  SCHEMA_VERSIONS,
+} from "@excalidraw/excalidraw/data/schema";
 import { newElementWith } from "@excalidraw/element";
 import { isInitializedImageElement } from "@excalidraw/element";
 import clsx from "clsx";
@@ -236,10 +241,20 @@ const initializeScene = async (opts: {
   > & {
     scrollToContent?: boolean;
   } = {
-    elements: restoreElements(localDataState?.elements, null, {
-      repairBindings: true,
-      deleteInvisibleElements: true,
-    }),
+    elements: restoreElements(
+      migrateElementsBySchema(
+        localDataState?.elements,
+        resolveSchemaVersion(
+          localDataState?.schemaVersion,
+          SCHEMA_VERSIONS.initial,
+        ),
+      ),
+      null,
+      {
+        repairBindings: true,
+        deleteInvisibleElements: true,
+      },
+    ),
     appState: restoreAppState(localDataState?.appState, null),
   };
 
@@ -262,11 +277,21 @@ const initializeScene = async (opts: {
 
         scene = {
           elements: bumpElementVersions(
-            restoreElements(imported.elements, null, {
-              repairBindings: true,
-              deleteInvisibleElements: true,
-            }),
-            localDataState?.elements,
+            restoreElements(
+              migrateElementsBySchema(
+                imported.elements,
+                resolveSchemaVersion(
+                  imported.schemaVersion,
+                  SCHEMA_VERSIONS.initial,
+                ),
+              ),
+              null,
+              {
+                repairBindings: true,
+                deleteInvisibleElements: true,
+              },
+            ),
+            scene.elements,
           ),
           appState: restoreAppState(
             imported.appState,
@@ -549,9 +574,20 @@ const ExcalidrawWrapper = () => {
         if (isBrowserStorageStateNewer(STORAGE_KEYS.VERSION_DATA_STATE)) {
           const localDataState = importFromLocalStorage();
           const username = importUsernameFromLocalStorage();
+          const migratedElements = migrateElementsBySchema(
+            localDataState?.elements,
+            resolveSchemaVersion(
+              localDataState?.schemaVersion,
+              SCHEMA_VERSIONS.initial,
+            ),
+          );
           setLangCode(getPreferredLanguage());
           excalidrawAPI.updateScene({
-            ...localDataState,
+            elements: restoreElements(migratedElements, null, {
+              repairBindings: true,
+              deleteInvisibleElements: true,
+            }),
+            appState: restoreAppState(localDataState?.appState, null),
             captureUpdate: CaptureUpdateAction.NEVER,
           });
           LibraryIndexedDBAdapter.load().then((data) => {

excalidraw-app/app_constants.ts

@@ -39,6 +39,7 @@ export const ROOM_ID_BYTES = 10;
 export const STORAGE_KEYS = {
   LOCAL_STORAGE_ELEMENTS: "excalidraw",
   LOCAL_STORAGE_APP_STATE: "excalidraw-state",
+  LOCAL_STORAGE_SCHEMA_VERSION: "excalidraw-schema-version",
   LOCAL_STORAGE_COLLAB: "excalidraw-collab",
   LOCAL_STORAGE_THEME: "excalidraw-theme",
   LOCAL_STORAGE_DEBUG: "excalidraw-debug",

excalidraw-app/data/LocalData.ts

@@ -28,6 +28,7 @@ import {
 
 import { appJotaiStore, atom } from "excalidraw-app/app-jotai";
 import { getNonDeletedElements } from "@excalidraw/element";
+import { SCHEMA_VERSIONS } from "@excalidraw/excalidraw/data/schema";
 
 import type { LibraryPersistedData } from "@excalidraw/excalidraw/data/library";
 import type { ImportedDataState } from "@excalidraw/excalidraw/data/types";
@@ -94,6 +95,10 @@ const saveDataStateToLocalStorage = (
       STORAGE_KEYS.LOCAL_STORAGE_APP_STATE,
       JSON.stringify(_appState),
     );
+    localStorage.setItem(
+      STORAGE_KEYS.LOCAL_STORAGE_SCHEMA_VERSION,
+      `${SCHEMA_VERSIONS.latest}`,
+    );
     updateBrowserStateVersion(STORAGE_KEYS.VERSION_DATA_STATE);
     if (localStorageQuotaExceeded) {
       appJotaiStore.set(localStorageQuotaExceededAtom, false);

excalidraw-app/data/index.ts

@@ -196,6 +196,7 @@ const legacy_decodeFromBackend = async ({
   return {
     elements: data.elements || null,
     appState: data.appState || null,
+    schemaVersion: data.schemaVersion,
   };
 };
 
@@ -226,6 +227,7 @@ export const importFromBackend = async (
       return {
         elements: data.elements || null,
         appState: data.appState || null,
+        schemaVersion: data.schemaVersion,
       };
     } catch (error: any) {
       console.warn(

excalidraw-app/data/localStorage.ts

@@ -2,6 +2,10 @@ import {
   clearAppStateForLocalStorage,
   getDefaultAppState,
 } from "@excalidraw/excalidraw/appState";
+import {
+  resolveSchemaVersion,
+  SCHEMA_VERSIONS,
+} from "@excalidraw/excalidraw/data/schema";
 
 import type { ExcalidrawElement } from "@excalidraw/element/types";
 import type { AppState } from "@excalidraw/excalidraw/types";
@@ -37,10 +41,14 @@ export const importUsernameFromLocalStorage = (): string | null => {
 export const importFromLocalStorage = () => {
   let savedElements = null;
   let savedState = null;
+  let savedSchemaVersion = null;
 
   try {
     savedElements = localStorage.getItem(STORAGE_KEYS.LOCAL_STORAGE_ELEMENTS);
     savedState = localStorage.getItem(STORAGE_KEYS.LOCAL_STORAGE_APP_STATE);
+    savedSchemaVersion = localStorage.getItem(
+      STORAGE_KEYS.LOCAL_STORAGE_SCHEMA_VERSION,
+    );
   } catch (error: any) {
     // Unable to access localStorage
     console.error(error);
@@ -70,7 +78,12 @@ export const importFromLocalStorage = () => {
       // Do nothing because appState is already null
     }
   }
-  return { elements, appState };
+  const schemaVersion = resolveSchemaVersion(
+    Number(savedSchemaVersion),
+    SCHEMA_VERSIONS.initial,
+  );
+
+  return { elements, appState, schemaVersion };
 };
 
 export const getElementsStorageSize = () => {