fix: add error for empty svg file

Author: bertyhell

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

@@ -1,8 +1,8 @@
+import {toast} from 'react-toastify';
 import {CircleEntity} from '../../entities/CircleEntity';
 import type {Entity} from '../../entities/Entity';
 import {LineEntity} from '../../entities/LineEntity';
 import {RectangleEntity} from '../../entities/RectangleEntity';
-import {toast} from 'react-toastify';
 import {getActiveLayerId, getEntities, setEntities} from '../../state';
 
 import {Point} from '@flatten-js/core';
@@ -86,7 +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}`);
+						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}`);
 					}
 				}
@@ -111,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');
 	});