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

@@ -0,0 +1,75 @@
+import { Point } from "roughjs/bin/geometry";
+
+import { ExcalidrawElement } from "../element/types";
+import { AppState } from "../types";
+import { DataState } from "./types";
+import { isInvisiblySmallElement, normalizeDimensions } from "../element";
+import nanoid from "nanoid";
+import { calculateScrollCenter } from "../scene";
+
+export function restore(
+  savedElements: readonly ExcalidrawElement[],
+  savedState: AppState | null,
+  opts?: { scrollToContent: boolean },
+): DataState {
+  const elements = savedElements
+    .filter(el => !isInvisiblySmallElement(el))
+    .map(element => {
+      let points: Point[] = [];
+      if (element.type === "arrow") {
+        if (Array.isArray(element.points)) {
+          // if point array is empty, add one point to the arrow
+          // this is used as fail safe to convert incoming data to a valid
+          // arrow. In the new arrow, width and height are not being usde
+          points = element.points.length > 0 ? element.points : [[0, 0]];
+        } else {
+          // convert old arrow type to a new one
+          // old arrow spec used width and height
+          // to determine the endpoints
+          points = [
+            [0, 0],
+            [element.width, element.height],
+          ];
+        }
+      } else if (element.type === "line") {
+        // old spec, pre-arrows
+        // old spec, post-arrows
+        if (!Array.isArray(element.points) || element.points.length === 0) {
+          points = [
+            [0, 0],
+            [element.width, element.height],
+          ];
+        } else {
+          points = element.points;
+        }
+      } else {
+        normalizeDimensions(element);
+      }
+
+      return {
+        ...element,
+        id: element.id || nanoid(),
+        fillStyle: element.fillStyle || "hachure",
+        strokeWidth: element.strokeWidth || 1,
+        roughness: element.roughness || 1,
+        opacity:
+          element.opacity === null || element.opacity === undefined
+            ? 100
+            : element.opacity,
+        points,
+        shape: null,
+        canvas: null,
+        canvasOffsetX: element.canvasOffsetX || 0,
+        canvasOffsetY: element.canvasOffsetY || 0,
+      };
+    });
+
+  if (opts?.scrollToContent && savedState) {
+    savedState = { ...savedState, ...calculateScrollCenter(elements) };
+  }
+
+  return {
+    elements: elements,
+    appState: savedState,
+  };
+}