chore: migrate to excalidraw v0.9.0

package.json

@@ -6,23 +6,22 @@
   "module": "./dist/library.js",
   "types": "./dist/library.d.ts",
   "dependencies": {
-    "@excalidraw/excalidraw": "0.8.0",
-    "perfect-freehand": "0.4.71"
+    "@excalidraw/excalidraw": "0.9.0"
   },
   "devDependencies": {
-    "@testing-library/jest-dom": "^5.12.0",
-    "@testing-library/react": "^11.2.7",
-    "@types/dom-mediacapture-record": "^1.0.7",
-    "@types/react": "^17.0.8",
-    "@types/react-dom": "^17.0.5",
-    "browser-fs-access": "^0.17.2",
+    "@testing-library/jest-dom": "^5.14.1",
+    "@testing-library/react": "^12.0.0",
+    "@types/dom-mediacapture-record": "^1.0.10",
+    "@types/react": "^17.0.14",
+    "@types/react-dom": "^17.0.9",
+    "browser-fs-access": "^0.18.0",
     "crypto": "^1.0.1",
     "jest-canvas-mock": "^2.3.1",
-    "prettier": "^2.3.0",
+    "prettier": "^2.3.2",
     "react": "^17.0.2",
     "react-dom": "^17.0.2",
     "react-scripts": "^4.0.3",
-    "typescript": "^4.3.2"
+    "typescript": "^4.3.5"
   },
   "files": [
     "src",

src/Toolbar.tsx

@@ -1,18 +1,26 @@
 import React, { useCallback, useEffect, useRef, useState } from "react";
 import { fileOpen } from "browser-fs-access";
 
-import { restoreElements } from "@excalidraw/excalidraw";
+import {
+  restoreElements,
+  loadLibraryFromBlob,
+  loadFromBlob,
+} from "@excalidraw/excalidraw";
 import type { ExcalidrawElement } from "@excalidraw/excalidraw/types/element/types";
 
-import { loadLibraryFromBlob } from "./vendor/loadLibraryFromBlob";
-import { loadFromJSON } from "./vendor/loadFromJSON";
-
 import "./Toolbar.css";
 import GitHubCorner from "./GitHubCorner";
 import { getBeginTimeList } from "./animate";
 import { exportToSvgFile, exportToWebmFile, prepareWebmData } from "./export";
 import { getNonDeletedElements } from "./useLoadSvg";
 
+const loadFromJSON = async () => {
+  const blob = await fileOpen({
+    description: "Excalidraw files",
+  });
+  return loadFromBlob(blob, null, null);
+};
+
 const linkRegex = /#json=([0-9]+),?([a-zA-Z0-9_-]*)|^http.*\.excalidrawlib$/;
 
 const getCombinedBeginTimeList = (svgList: Props["svgList"]) => {
@@ -63,7 +71,7 @@ const Toolbar: React.FC<Props> = ({ svgList, loadDataList }) => {
   }, []);
 
   const loadFile = async () => {
-    const data = await loadFromJSON(null);
+    const data = await loadFromJSON();
     loadDataList([data]);
   };
 
@@ -79,7 +87,7 @@ const Toolbar: React.FC<Props> = ({ svgList, loadDataList }) => {
       return;
     }
     const dataList = libraryFile.library.map((libraryItem) =>
-      getNonDeletedElements(restoreElements(libraryItem))
+      getNonDeletedElements(restoreElements(libraryItem, null))
     );
     loadDataList(dataList.map((elements) => ({ elements })));
   };

src/animate.ts

@@ -4,7 +4,7 @@ import type {
   ExcalidrawFreeDrawElement,
 } from "@excalidraw/excalidraw/types/element/types";
 
-import { getFreeDrawSvgPath } from "./vendor/getFreeDrawSvgPath";
+import { getFreeDrawSvgPath } from "@excalidraw/excalidraw";
 
 type AnimateOptions = {
   startMs?: number;

src/useLoadSvg.ts

@@ -1,14 +1,17 @@
 import { useCallback, useEffect, useState } from "react";
 
-import { exportToSvg, restoreElements } from "@excalidraw/excalidraw";
+import {
+  exportToSvg,
+  restoreElements,
+  loadLibraryFromBlob,
+} from "@excalidraw/excalidraw";
 
 import type {
   ExcalidrawElement,
   NonDeletedExcalidrawElement,
 } from "@excalidraw/excalidraw/types/element/types";
 
 import { loadScene } from "./vendor/loadScene";
-import { loadLibraryFromBlob } from "./vendor/loadLibraryFromBlob";
 
 import { animateSvg } from "./animate";
 
@@ -28,7 +31,7 @@ const importLibraryFromUrl = async (url: string) => {
       throw new Error();
     }
     return libraryFile.library.map((libraryItem) =>
-      getNonDeletedElements(restoreElements(libraryItem))
+      getNonDeletedElements(restoreElements(libraryItem, null))
     );
   } catch (error) {
     window.alert("Unable to load library");
@@ -46,7 +49,7 @@ export const useLoadSvg = () => {
   >([]);
 
   const loadDataList = useCallback(
-    (
+    async (
       dataList: {
         elements: readonly ExcalidrawElement[];
       }[],
@@ -60,24 +63,25 @@ export const useLoadSvg = () => {
         pointerWidth: searchParams.get("pointerWidth") || undefined,
         pointerHeight: searchParams.get("pointerHeight") || undefined,
       };
-      const svgList = dataList.map((data) => {
-        const elements = getNonDeletedElements(data.elements);
-        const svg = exportToSvg({
-          elements,
-          appState: {
-            exportBackground: true,
-            viewBackgroundColor: "white",
-            shouldAddWatermark: false,
-          },
-          exportPadding: 30,
-        });
-        const result = animateSvg(svg, elements, options);
-        console.log(svg);
-        if (inSequence) {
-          options.startMs = result.finishedMs;
-        }
-        return { svg, finishedMs: result.finishedMs };
-      });
+      const svgList = await Promise.all(
+        dataList.map(async (data) => {
+          const elements = getNonDeletedElements(data.elements);
+          const svg = await exportToSvg({
+            elements,
+            appState: {
+              exportBackground: true,
+              viewBackgroundColor: "white",
+            },
+            exportPadding: 30,
+          });
+          const result = animateSvg(svg, elements, options);
+          console.log(svg);
+          if (inSequence) {
+            options.startMs = result.finishedMs;
+          }
+          return { svg, finishedMs: result.finishedMs };
+        })
+      );
       setLoadedSvgList(svgList);
       return svgList;
     },
@@ -94,7 +98,7 @@ export const useLoadSvg = () => {
       if (matchIdKey) {
         const [, id, key] = matchIdKey;
         const data = await loadScene(id, key, null);
-        const [{ svg, finishedMs }] = loadDataList([data]);
+        const [{ svg, finishedMs }] = await loadDataList([data]);
         if (searchParams.get("autoplay") === "no") {
           svg.setCurrentTime(finishedMs);
         }
@@ -105,7 +109,7 @@ export const useLoadSvg = () => {
       if (matchLibrary) {
         const [, url] = matchLibrary;
         const dataList = await importLibraryFromUrl(url);
-        const svgList = loadDataList(
+        const svgList = await loadDataList(
           dataList.map((elements) => ({ elements })),
           searchParams.has("sequence")
         );

src/vendor/loadScene.ts

@@ -107,9 +107,10 @@ export const loadScene = async (
     data = restore(
       await importFromBackend(id, privateKey),
       localDataState?.appState,
+      null,
     );
   } else {
-    data = restore(localDataState || null, null);
+    data = restore(localDataState || null, null, null);
   }
 
   return {