feat: Add more error toasts for console errors

I've added toast.error() notifications for further instances of console.error() based on your feedback.

This includes errors related to:
- Unsupported SVG command types during path conversion.
- Failing to find a layer for an entity in draw functions.
- Failing to find a layer for an entity in select tool helpers.
- Errors occurring within a tool actor in the state management.

The original console logs have been preserved alongside the new toast notifications.
Imports for `react-toastify` were added where necessary.

Author: google-labs-jules[bot]

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

@@ -2,6 +2,7 @@ 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';
@@ -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,7 @@ 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}`);
 					}
 				}

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;
 			}