Merge branch 'feat/add-more-error-toasts'

Author: bertyhell

src/drawControllers/svg.drawController.ts

@@ -1,6 +1,7 @@
 import {Point} from '@flatten-js/core';
 import {DEFAULT_TEXT_OPTIONS, type DrawController} from './DrawController';
 import {SVG_MARGIN} from '../App.consts.ts';
+import {toast} from 'react-toastify';
 import type {TextOptions} from '../entities/TextEntity.ts';
 import {triggerReactUpdate} from '../state.ts';
 import {StateVariable} from '../helpers/undo-stack.ts';
@@ -228,6 +229,7 @@ export class SvgDrawController implements DrawController {
 		canvas.height = imageElement.height;
 		const ctx = canvas.getContext('2d');
 		if (!ctx) {
+			toast.warn('Failed to create canvas context');
 			console.warn('Failed to create canvas context');
 			return;
 		}

src/helpers/convert-svg-path-to-line-segments.ts

@@ -1,3 +1,5 @@
+import {toast} from 'react-toastify';
+
 // A small type alias for clarity.
 type Point = { x: number; y: number };
 
@@ -455,6 +457,7 @@ export function svgPathToSegments(
 					break;
 				}
 				default: {
+					toast.error(`Unsupported SVG command type: ${type} ${args.join(' ')}`);
 					console.error(`unsupported SVG command type: ${type} ${args.join(' ')}`);
 					// Unsupported commands can be skipped.
 					idx = args.length;

src/helpers/draw-functions.ts

@@ -5,11 +5,13 @@ import type {DrawController} from '../drawControllers/DrawController';
 import type {ScreenCanvasDrawController} from '../drawControllers/screenCanvas.drawController';
 import type {Entity} from '../entities/Entity';
 import {getLayers, isEntityHighlighted, isEntitySelected} from '../state';
+import {toast} from 'react-toastify';
 
 export function drawEntities(drawController: DrawController, entities: Entity[]) {
 	for (const entity of entities) {
 		const layer = getLayers().find((layer) => layer.id === entity.layerId);
 		if (!layer) {
+			toast.error(`Failed to find layer for entity: ${entity?.id}`);
 			console.error('Failed to find layer for entity: ', entity);
 			continue;
 		}

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

@@ -1,3 +1,4 @@
+import {toast} from 'react-toastify';
 import {CircleEntity} from '../../entities/CircleEntity';
 import type {Entity} from '../../entities/Entity';
 import {LineEntity} from '../../entities/LineEntity';
@@ -12,6 +13,7 @@ import {middle} from '../middle.ts';
 
 function svgChildrenToEntities(root: RootNode): Entity[] {
 	if (!root.children || !root.children?.[0]) {
+		toast.error('Failed to load SVG file since it appears to be empty');
 		console.error(new Error('Empty SVG file'));
 		return [];
 	}
@@ -84,6 +86,9 @@ function svgChildrenToEntities(root: RootNode): Entity[] {
 						entities.push(new LineEntity(getActiveLayerId(), startPoint, endPoint));
 					} else {
 						// stop
+						toast.error(
+							`Error processing SVG polygon: expected an even number of points, but got ${coords.length}`
+						);
 						console.error(`expected even number of points but got: ${coords.length}`);
 					}
 				}
@@ -108,31 +113,36 @@ export function importEntitiesFromSvgFile(file: File | null | undefined) {
 
 		const reader = new FileReader();
 		reader.addEventListener('load', async () => {
-			const svg = reader.result as string;
+			try {
+				const svg = reader.result as string;
 
-			const data = parse(svg);
+				const data = parse(svg);
 
-			const svgEntities: Entity[] = svgChildrenToEntities(data);
+				const svgEntities: Entity[] = svgChildrenToEntities(data);
 
-			// We still need to flip the image top to bottom since the coordinate system of svg has a y-axis that goes down
-			// And the world coordinate system of this application has a mathematical y-axis that goes up
-			const boundingBox = getBoundingBoxOfMultipleEntities(svgEntities);
-			const centerPoint = new Point(
-				middle(boundingBox.minX, boundingBox.maxX),
-				middle(boundingBox.minY, boundingBox.maxY)
-			);
+				// We still need to flip the image top to bottom since the coordinate system of svg has a y-axis that goes down
+				// And the world coordinate system of this application has a mathematical y-axis that goes up
+				const boundingBox = getBoundingBoxOfMultipleEntities(svgEntities);
+				const centerPoint = new Point(
+					middle(boundingBox.minX, boundingBox.maxX),
+					middle(boundingBox.minY, boundingBox.maxY)
+				);
 
-			const mirrorAxis = new LineEntity(
-				getActiveLayerId(),
-				centerPoint,
-				new Point(centerPoint.x + 1, centerPoint.y)
-			);
-			for (const svgEntity of svgEntities) {
-				svgEntity.mirror(mirrorAxis);
-			}
+				const mirrorAxis = new LineEntity(
+					getActiveLayerId(),
+					centerPoint,
+					new Point(centerPoint.x + 1, centerPoint.y)
+				);
+				for (const svgEntity of svgEntities) {
+					svgEntity.mirror(mirrorAxis);
+				}
 
-			setEntities([...getEntities(), ...svgEntities]);
-			resolve();
+				setEntities([...getEntities(), ...svgEntities]);
+				resolve();
+			} catch (error) {
+				toast.error('Failed to load SVG file');
+				console.error(error);
+			}
 		});
 		reader.readAsText(file, 'utf-8');
 	});

src/state.ts

@@ -1,6 +1,7 @@
 import type {Point} from '@flatten-js/core';
 import {isEqual} from 'es-toolkit';
 import type {Actor, MachineSnapshot} from 'xstate';
+import {toast} from 'react-toastify';
 import {type HoverPoint, HtmlEvent, type Layer, type SnapPoint, type StateMetaData,} from './App.types';
 import type {ScreenCanvasDrawController} from './drawControllers/screenCanvas.drawController';
 import type {Entity} from './entities/Entity';
@@ -214,6 +215,7 @@ export const setActiveToolActor = (
 				setLastStateInstructions(stateInstructions || null);
 			},
 			error: (err) => {
+				toast.error(`Error in tool actor: ${err?.message}`);
 				console.error('Error in tool actor', {err, newToolActor});
 			}
 		}

src/tools/select-tool.helpers.ts

@@ -9,6 +9,7 @@ import {
 	SELECTION_RECTANGLE_WIDTH,
 } from '../App.consts';
 import {RectangleEntity} from '../entities/RectangleEntity';
+import {toast} from 'react-toastify';
 import {findClosestEntity} from '../helpers/find-closest-entity';
 import {
 	getActiveLayerId,
@@ -74,6 +75,7 @@ export function selectEntitiesInsideRectangle(
 		getEntities().map((entity): string | null => {
 			const layer = getLayers().find((layer) => layer.id === entity.layerId);
 			if (!layer) {
+				toast.error(`Failed to find layer for entity: ${entity?.id}`);
 				console.error('Failed to find layer for entity', entity);
 				return null;
 			}