Refactor (#862)

* Initial factoring out of parts of the LayerUI component

2360 → 2224 LOC

* Create a Section component

* Break up src/index.tsx

* Refactor actions to reduce duplication, fix CSS

Also consolidate icons

* Move scene/data.ts to its own directory

* Fix accidental reverts, banish further single-character variables

* ACTIVE_ELEM_COLOR → ACTIVE_ELEMENT_COLOR

* Further refactoring the icons file

* Log all errors

* Pointer Event polyfill to make the tests work

* add test hooks & fix tests

Co-authored-by: dwelle <luzar.david@gmail.com>

src/data/json.ts

@@ -0,0 +1,48 @@
+import { ExcalidrawElement } from "../element/types";
+import { AppState } from "../types";
+import { cleanAppStateForExport } from "../appState";
+
+import { fileOpen, fileSave } from "browser-nativefs";
+import { loadFromBlob } from "./blob";
+
+export function serializeAsJSON(
+  elements: readonly ExcalidrawElement[],
+  appState: AppState,
+): string {
+  return JSON.stringify(
+    {
+      type: "excalidraw",
+      version: 1,
+      source: window.location.origin,
+      elements: elements.map(({ shape, canvas, isSelected, ...el }) => el),
+      appState: cleanAppStateForExport(appState),
+    },
+    null,
+    2,
+  );
+}
+
+export async function saveAsJSON(
+  elements: readonly ExcalidrawElement[],
+  appState: AppState,
+) {
+  const serialized = serializeAsJSON(elements, appState);
+
+  const name = `${appState.name}.excalidraw`;
+  await fileSave(
+    new Blob([serialized], { type: "application/json" }),
+    {
+      fileName: name,
+      description: "Excalidraw file",
+    },
+    (window as any).handle,
+  );
+}
+export async function loadFromJSON() {
+  const blob = await fileOpen({
+    description: "Excalidraw files",
+    extensions: ["json", "excalidraw"],
+    mimeTypes: ["application/json"],
+  });
+  return loadFromBlob(blob);
+}