feat: add layers to save to / load from local storage

Author: bertyhell

src/App.types.ts

@@ -3,47 +3,52 @@ import type {Arc, Circle, Point, Polygon, Segment} from '@flatten-js/core';
 export type Shape = Polygon | Segment | Point | Circle | Arc;
 
 export enum SnapPointType {
-  AngleGuide = 'AngleGuide',
-  LineEndPoint = 'LineEndPoint',
-  Intersection = 'Intersection',
-  CircleCenter = 'CircleCenter',
-  CircleCardinal = 'CircleCardinal',
-  CircleTangent = 'CircleTangent',
-  LineMidPoint = 'LineMidPoint',
-  Point = 'Point',
+	AngleGuide = 'AngleGuide',
+	LineEndPoint = 'LineEndPoint',
+	Intersection = 'Intersection',
+	CircleCenter = 'CircleCenter',
+	CircleCardinal = 'CircleCardinal',
+	CircleTangent = 'CircleTangent',
+	LineMidPoint = 'LineMidPoint',
+	Point = 'Point',
 }
 
 export interface SnapPoint {
-  point: Point;
-  type: SnapPointType;
+	point: Point;
+	type: SnapPointType;
 }
 
 export type SnapPointConfig = Record<SnapPointType, boolean>;
 
 export interface HoverPoint {
-  snapPoint: SnapPoint;
-  milliSecondsHovered: number;
+	snapPoint: SnapPoint;
+	milliSecondsHovered: number;
 }
 
 export enum MouseButton {
-  Left = 0, // Main button pressed, usually the left button or the un-initialized state
-  Middle = 1, // Auxiliary button pressed, usually the wheel button or the middle button (if present)
-  Right = 2, // Secondary button pressed, usually the right button
-  Back = 3, // Fourth button, typically the Browser Back button
-  Forward = 4, // Fifth button, typically the Browser Forward button
+	Left = 0, // Main button pressed, usually the left button or the un-initialized state
+	Middle = 1, // Auxiliary button pressed, usually the wheel button or the middle button (if present)
+	Right = 2, // Secondary button pressed, usually the right button
+	Back = 3, // Fourth button, typically the Browser Back button
+	Forward = 4, // Fifth button, typically the Browser Forward button
 }
 
 export enum HtmlEvent {
-  UPDATE_STATE = 'UPDATE_STATE',
+	UPDATE_STATE = 'UPDATE_STATE',
 }
 
 export interface StateMetaData {
-  instructions: string;
+	instructions: string;
 }
 
 export interface Layer {
-  id: string;
-  name: string;
-  isVisible: boolean;
-  isLocked: boolean;
+	id: string;
+	name: string;
+	isVisible: boolean;
+	isLocked: boolean;
+}
+
+export enum LOCAL_STORAGE_KEY {
+	DRAWING = 'OPEN_WEB_CAD__DRAWING',
+	DROPDOWN = 'OPEN_WEB_CAD__DROPDOWN',
 }

src/components/DropdownButton.tsx

@@ -1,7 +1,7 @@
 import type {CSSProperties, FC, ReactNode} from 'react';
 import useLocalStorageState from 'use-local-storage-state';
-import {LOCAL_STORAGE_KEY} from '../helpers/import-export-handlers/export-entities-to-local-storage.ts';
-import {keyboardHandler} from "../helpers/keyboard-handler.ts";
+import {LOCAL_STORAGE_KEY} from '../App.types.ts';
+import {keyboardHandler} from '../helpers/keyboard-handler.ts';
 import {Button} from './Button.tsx';
 import {Icon, IconName} from './Icon/Icon.tsx';
 

src/components/LayerManager.tsx

@@ -1,5 +1,6 @@
 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 {Button} from './Button';
 import {IconName} from './Icon/Icon.tsx';
@@ -68,12 +69,7 @@ export const LayerManager: FC<LayerManagerProps> = ({
 
 	const handleCreateNewLayer = (evt: MouseEvent): void => {
 		evt.stopPropagation();
-		const newLayer: Layer = {
-			id: crypto.randomUUID(),
-			isLocked: false,
-			isVisible: true,
-			name: `New layer ${getLayers().length}${1}`,
-		};
+		const newLayer: Layer = getNewLayer();
 		setLayers([...getLayers(), newLayer]);
 	};
 

src/helpers/get-new-layer.ts

@@ -0,0 +1,11 @@
+import type {Layer} from '../App.types.ts';
+import {getLayers} from '../state.ts';
+
+export function getNewLayer(): Layer {
+	return {
+		id: crypto.randomUUID(),
+		isLocked: false,
+		isVisible: true,
+		name: `New layer ${getLayers().length}${1}`,
+	};
+}

src/helpers/import-export-handlers/export-entities-to-json.ts

@@ -1,25 +1,33 @@
-import {saveAs} from 'file-saver';
 import {compact} from 'es-toolkit';
-import {getEntities} from '../../state';
-import type {JsonEntity} from '../../entities/Entity';
+import {saveAs} from 'file-saver';
+import type {Layer} from '../../App.types.ts';
+import type {Entity, JsonEntity} from '../../entities/Entity';
+import {getEntities, getLayers} from '../../state';
 
 export async function exportEntitiesToJsonFile() {
-  const json = await exportEntitiesToJsonString();
+	const json = await exportEntitiesAndLayersToJsonString();
 
-  const blob = new Blob([json], { type: 'text/json;charset=utf-8' });
-  saveAs(blob, 'open-web-cad--drawing.json');
+	const blob = new Blob([json], { type: 'text/json;charset=utf-8' });
+	saveAs(blob, 'open-web-cad--drawing.json');
 }
 
-export async function exportEntitiesToJsonString() {
-    const entities = getEntities();
+export async function exportEntitiesAndLayersToJsonString() {
+	const entities = getEntities();
+
+	const jsonEntities = entities.map((entity) => entity.toJson());
+	const jsonDrawingFile: JsonDrawingFileSerialized = {
+		entities: compact(await Promise.all(jsonEntities)), // TODO use a mapLimit to avoid overloading the event loop
+		layers: getLayers(),
+	};
+	return JSON.stringify(jsonDrawingFile, null, 2);
+}
 
-    const jsonEntities = entities.map(entity => entity.toJson());
-    const jsonDrawingFile: JsonDrawingFile = {
-        entities: compact(await Promise.all(jsonEntities)), // TODO use a mapLimit to avoid overloading the event loop
-    };
-  return JSON.stringify(jsonDrawingFile, null, 2);
+export interface JsonDrawingFileSerialized {
+	entities: JsonEntity[];
+	layers: Layer[];
 }
 
-export interface JsonDrawingFile {
-  entities: JsonEntity[];
+export interface JsonDrawingFileDeserialized {
+	entities: Entity[];
+	layers: Layer[];
 }

src/helpers/import-export-handlers/export-entities-to-local-storage.ts

@@ -1,12 +1,8 @@
-import {exportEntitiesToJsonString} from "./export-entities-to-json.ts";
-
-export enum LOCAL_STORAGE_KEY {
-    DRAWING = 'OPEN_WEB_CAD__DRAWING',
-    DROPDOWN = 'OPEN_WEB_CAD__DROPDOWN',
-};
+import {LOCAL_STORAGE_KEY} from '../../App.types.ts';
+import {exportEntitiesAndLayersToJsonString} from './export-entities-to-json.ts';
 
 export async function exportEntitiesToLocalStorage() {
-  const json = await exportEntitiesToJsonString();
+	const json = await exportEntitiesAndLayersToJsonString();
 
-  localStorage.setItem(LOCAL_STORAGE_KEY.DRAWING, json);
+	localStorage.setItem(LOCAL_STORAGE_KEY.DRAWING, json);
 }

src/helpers/import-export-handlers/import-entities-from-json.ts

@@ -1,12 +1,12 @@
-import type {JsonDrawingFile} from './export-entities-to-json';
 import {compact} from 'es-toolkit';
-import {type Entity, EntityName, type JsonEntity} from '../../entities/Entity';
 import {ArcEntity, type ArcJsonData} from '../../entities/ArcEntity';
 import {CircleEntity, type CircleJsonData} from '../../entities/CircleEntity';
+import {type Entity, EntityName, type JsonEntity} from '../../entities/Entity';
 import {LineEntity, type LineJsonData} from '../../entities/LineEntity';
 import {PointEntity, type PointJsonData} from '../../entities/PointEntity';
-import {RectangleEntity, type RectangleJsonData,} from '../../entities/RectangleEntity';
-import {setEntities} from '../../state';
+import {RectangleEntity, type RectangleJsonData} from '../../entities/RectangleEntity';
+import {setEntities, setLayers} from '../../state';
+import type {JsonDrawingFileDeserialized, JsonDrawingFileSerialized} from './export-entities-to-json';
 
 /**
  * Open a file selection dialog to select *.json files
@@ -21,16 +21,19 @@ export function importEntitiesFromJsonFile(file: File | null | undefined) {
 		const reader = new FileReader();
 		reader.addEventListener('load', async () => {
 			const json = reader.result as string;
-			const entities = await getEntitiesFromJsonString(json);
-			setEntities(entities);
+			const file = await getEntitiesAndLayersFromJsonString(json);
+			setEntities(file.entities);
+			setLayers(file.layers);
 			resolve();
 		});
 		reader.readAsText(file, 'utf-8');
 	});
 }
 
-export async function getEntitiesFromJsonString(json: string): Promise<Entity[]> {
-	const data = JSON.parse(json) as JsonDrawingFile;
+export async function getEntitiesAndLayersFromJsonString(
+	json: string
+): Promise<JsonDrawingFileDeserialized> {
+	const data = JSON.parse(json) as JsonDrawingFileSerialized;
 
 	if (!data.entities) {
 		throw new Error('Invalid JSON file');
@@ -57,5 +60,9 @@ export async function getEntitiesFromJsonString(json: string): Promise<Entity[]>
 		})
 	);
 
-	return compact(await Promise.all(entityPromises));
+	const entities = compact(await Promise.all(entityPromises));
+	return {
+		entities,
+		layers: data.layers,
+	};
 }

src/helpers/import-export-handlers/import-entities-from-local-storage.ts

@@ -1,20 +1,24 @@
-import {getEntitiesFromJsonString} from "./import-entities-from-json.ts";
-import {setEntities} from "../../state.ts";
-import type {Entity} from "../../entities/Entity.ts";
+import {LOCAL_STORAGE_KEY} from '../../App.types.ts';
+import {setEntities, setLayers} from '../../state.ts';
+import {getNewLayer} from '../get-new-layer.ts';
+import {getEntitiesAndLayersFromJsonString} from './import-entities-from-json.ts';
+import type {JsonDrawingFileDeserialized} from "./export-entities-to-json.ts";
 
-export enum LOCAL_STORAGE_KEY {
-	DRAWING = 'OPEN_WEB_CAD__DRAWING',
-};
-
-export async function importEntitiesFromLocalStorage(): Promise<void> {
-	const entities = await getEntitiesFromLocalStorage();
-	setEntities(entities);
+export async function importEntitiesAndLayersFromLocalStorage(): Promise<void> {
+	const file = await getEntitiesAndLayersFromLocalStorage();
+	setEntities(file.entities);
+	setLayers(file.layers);
 }
 
-export async function getEntitiesFromLocalStorage(): Promise<Entity[]> {
+export async function getEntitiesAndLayersFromLocalStorage(): Promise<JsonDrawingFileDeserialized> {
 	const json = localStorage.getItem(LOCAL_STORAGE_KEY.DRAWING);
 	if (!json) {
-		return [];
+		return {
+			entities: [],
+			layers: [getNewLayer()],
+		};
 	}
-	return (await getEntitiesFromJsonString(json)) || [];
+
+	const file = (await getEntitiesAndLayersFromJsonString(json)) || [];
+	return file;
 }

src/main.tsx

@@ -7,7 +7,9 @@ import App from './App.tsx';
 import {ScreenCanvasDrawController} from './drawControllers/screenCanvas.drawController';
 import {draw} from './helpers/draw';
 import {findClosestEntity} from './helpers/find-closest-entity';
-import {getEntitiesFromLocalStorage,} from "./helpers/import-export-handlers/import-entities-from-local-storage.ts";
+import {getNewLayer} from './helpers/get-new-layer.ts';
+import type {JsonDrawingFileDeserialized} from './helpers/import-export-handlers/export-entities-to-json.ts';
+import {getEntitiesAndLayersFromLocalStorage} from './helpers/import-export-handlers/import-entities-from-local-storage.ts';
 import {trackHoveredSnapPoint} from './helpers/track-hovered-snap-points';
 import {InputController} from './inputController/input-controller.ts';
 import {
@@ -25,6 +27,7 @@ import {
 	setHoveredSnapPoints,
 	setInputController,
 	setLastDrawTimestamp,
+	setLayers,
 	setScreenCanvasDrawController,
 } from './state';
 import {Tool} from './tools';
@@ -112,8 +115,13 @@ function initApplication() {
 		setEntities([], true); // Creates the first undo entry
 
 		// Load the last drawing from local storage
-		getEntitiesFromLocalStorage().then((entities) => {
-			setEntities(entities, true);
+		getEntitiesAndLayersFromLocalStorage().then((file: JsonDrawingFileDeserialized) => {
+			setEntities(file.entities, true);
+			let layers = file.layers;
+			if (layers.length === 0) {
+				layers = [getNewLayer()];
+			}
+			setLayers(layers);
 		});
 		const screenCanvasDrawController = new ScreenCanvasDrawController(context);
 		setScreenCanvasDrawController(screenCanvasDrawController);