Remove invisibly small elements on scene load (#754)

src/scene/data.ts

@@ -11,7 +11,11 @@ import { ExportType } from "./types";
 import { exportToCanvas, exportToSvg } from "./export";
 import nanoid from "nanoid";
 import { fileOpen, fileSave } from "browser-nativefs";
-import { getCommonBounds, normalizeDimensions } from "../element";
+import {
+  getCommonBounds,
+  normalizeDimensions,
+  isInvisiblySmallElement,
+} from "../element";
 
 import { Point } from "roughjs/bin/geometry";
 import { t } from "../i18n";
@@ -334,51 +338,53 @@ function restore(
   savedState: AppState | null,
   opts?: { scrollToContent: boolean },
 ): DataState {
-  const elements = savedElements.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],
-        ];
+  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 {
-        points = element.points;
+        normalizeDimensions(element);
       }
-    } 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,
-    };
-  });
+      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,
+      };
+    });
 
   if (opts?.scrollToContent && savedState) {
     savedState = { ...savedState, ...calculateScrollCenter(elements) };