fix: save and load layers from local storage, add toasts lib

Author: bertyhell

package-lock.json

@@ -24,6 +24,7 @@
     "jspdf": "^3.0.1",
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
+    "react-toastify": "^11.0.5",
     "svg-parser": "^2.0.4",
     "svg2pdf.js": "^2.5.0",
     "teenyicons": "^0.4.1",

package.json

@@ -1,10 +1,12 @@
 import './App.css';
+import {ToastContainer} from 'react-toastify';
 import {Toolbar} from './components/Toolbar.tsx';
 
 function App() {
 	return (
 		<div className="overflow-y-scroll h-lvh pb-12 w-80" style={{ scrollbarWidth: 'none' }}>
 			<Toolbar />
+			<ToastContainer position="bottom-right" theme="light" />
 		</div>
 	);
 }

src/App.tsx

@@ -1,7 +1,7 @@
 import type {FC, MouseEvent} from 'react';
 import type {Layer} from '../App.types.ts';
 import {getNewLayer} from '../helpers/get-new-layer.ts';
-import {getEntities, getLayers, getSelectedEntities, setEntities, setSelectedEntityIds,} from '../state.ts';
+import {getActiveLayerId, getEntities, getLayers, getSelectedEntities, setEntities, setSelectedEntityIds,} from '../state.ts';
 import {Button} from './Button';
 import {IconName} from './Icon/Icon.tsx';
 
@@ -45,6 +45,9 @@ export const LayerManager: FC<LayerManagerProps> = ({
 		const entitiesNotOnLayer = getEntities().filter((entity) => entity.layerId !== layerId);
 		setEntities(entitiesNotOnLayer);
 		setLayers(getLayers().filter((layer) => layer.id !== layerId));
+		if (getActiveLayerId() === layerId) {
+			setActiveLayerId(getLayers()[0].id);
+		}
 	};
 
 	const handleShowHideLayer = (evt: MouseEvent, layerId: string): void => {
@@ -71,6 +74,7 @@ export const LayerManager: FC<LayerManagerProps> = ({
 		evt.stopPropagation();
 		const newLayer: Layer = getNewLayer();
 		setLayers([...getLayers(), newLayer]);
+		setActiveLayerId(newLayer.id);
 	};
 
 	return (

src/components/LayerManager.tsx

@@ -239,6 +239,10 @@ export class ArcEntity implements Entity {
             throw new Error('Invalid Entity type in JSON');
         }
 
+        if (!jsonEntity.shapeData) {
+            throw new Error('Invalid JSON entity of type Arc: missing shapeData');
+        }
+
         const center = new Point(
             jsonEntity.shapeData.center.x,
             jsonEntity.shapeData.center.y,

src/entities/ArcEntity.ts

@@ -140,6 +140,9 @@ export class ArrowHeadEntity implements Entity {
 	public static async fromJson(
 		jsonEntity: JsonEntity<ArrowHeadJsonData>
 	): Promise<ArrowHeadEntity> {
+		if (!jsonEntity.shapeData) {
+			throw new Error('Invalid JSON entity of type Arrow: missing shapeData');
+		}
 		const p1 = new Point(jsonEntity.shapeData.p1.x, jsonEntity.shapeData.p1.y);
 		const p2 = new Point(jsonEntity.shapeData.p2.x, jsonEntity.shapeData.p2.y);
 		const p3 = new Point(jsonEntity.shapeData.p3.x, jsonEntity.shapeData.p3.y);

src/entities/ArrowHeadEntity.ts

@@ -205,6 +205,9 @@ export class CircleEntity implements Entity {
 	public static async fromJson(
 		jsonEntity: JsonEntity<CircleJsonData>,
 	): Promise<CircleEntity> {
+		if (!jsonEntity.shapeData) {
+			throw new Error('Invalid JSON entity of type Circle: missing shapeData');
+		}
 		const center = new Point(
 			jsonEntity.shapeData.center.x,
 			jsonEntity.shapeData.center.y,

src/entities/CircleEntity.ts

@@ -221,6 +221,9 @@ export class ImageEntity implements Entity {
 	}
 
 	public static async fromJson(jsonEntity: JsonEntity<ImageJsonData>): Promise<ImageEntity> {
+		if (!jsonEntity.shapeData) {
+			throw new Error('Invalid JSON entity of type Image: missing shapeData');
+		}
 		const rectangle = new Polygon(
 			jsonEntity.shapeData.points.map((point) => new Point(point.x, point.y))
 		);

src/entities/ImageEntity.ts

@@ -186,6 +186,9 @@ export class LineEntity implements Entity {
 	}
 
 	public static async fromJson(jsonEntity: JsonEntity<LineJsonData>): Promise<LineEntity> {
+		if (!jsonEntity.shapeData) {
+			throw new Error('Invalid JSON entity of type Line: missing shapeData');
+		}
 		const startPoint = new Point(
 			jsonEntity.shapeData.startPoint.x,
 			jsonEntity.shapeData.startPoint.y

src/entities/LineEntity.ts

@@ -2,14 +2,14 @@ import {Box, Line, Point, Segment, Vector} from '@flatten-js/core';
 import {minBy, round} from 'es-toolkit';
 import {max, min} from 'es-toolkit/compat';
 import {
-    ARROW_HEAD_LENGTH,
-    ARROW_HEAD_WIDTH,
-    MEASUREMENT_DECIMAL_PLACES,
-    MEASUREMENT_EXTENSION_LENGTH,
-    MEASUREMENT_FONT_SIZE,
-    MEASUREMENT_LABEL_OFFSET,
-    MEASUREMENT_ORIGIN_MARGIN,
-    TO_RADIANS,
+	ARROW_HEAD_LENGTH,
+	ARROW_HEAD_WIDTH,
+	MEASUREMENT_DECIMAL_PLACES,
+	MEASUREMENT_EXTENSION_LENGTH,
+	MEASUREMENT_FONT_SIZE,
+	MEASUREMENT_LABEL_OFFSET,
+	MEASUREMENT_ORIGIN_MARGIN,
+	TO_RADIANS,
 } from '../App.consts';
 import type {Shape, SnapPoint} from '../App.types';
 import type {DrawController} from '../drawControllers/DrawController';
@@ -381,6 +381,9 @@ export class MeasurementEntity implements Entity {
 	public static async fromJson(
 		jsonEntity: JsonEntity<MeasurementJsonData>
 	): Promise<MeasurementEntity> {
+		if (!jsonEntity.shapeData) {
+			throw new Error('Invalid JSON entity of type Measurement: missing shapeData');
+		}
 		const startPoint = new Point(
 			jsonEntity.shapeData.startPoint.x,
 			jsonEntity.shapeData.startPoint.y