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/localStorage.ts

@@ -0,0 +1,52 @@
+import { ExcalidrawElement } from "../element/types";
+import { AppState } from "../types";
+import { clearAppStateForLocalStorage } from "../appState";
+import { restore } from "./restore";
+
+const LOCAL_STORAGE_KEY = "excalidraw";
+const LOCAL_STORAGE_KEY_STATE = "excalidraw-state";
+
+export function saveToLocalStorage(
+  elements: readonly ExcalidrawElement[],
+  appState: AppState,
+) {
+  localStorage.setItem(
+    LOCAL_STORAGE_KEY,
+    JSON.stringify(
+      elements.map(
+        ({ shape, canvas, ...element }: ExcalidrawElement) => element,
+      ),
+    ),
+  );
+  localStorage.setItem(
+    LOCAL_STORAGE_KEY_STATE,
+    JSON.stringify(clearAppStateForLocalStorage(appState)),
+  );
+}
+
+export function restoreFromLocalStorage() {
+  const savedElements = localStorage.getItem(LOCAL_STORAGE_KEY);
+  const savedState = localStorage.getItem(LOCAL_STORAGE_KEY_STATE);
+
+  let elements = [];
+  if (savedElements) {
+    try {
+      elements = JSON.parse(savedElements).map(
+        ({ shape, ...element }: ExcalidrawElement) => element,
+      );
+    } catch {
+      // Do nothing because elements array is already empty
+    }
+  }
+
+  let appState = null;
+  if (savedState) {
+    try {
+      appState = JSON.parse(savedState) as AppState;
+    } catch {
+      // Do nothing because appState is already null
+    }
+  }
+
+  return restore(elements, appState);
+}