Refactor canvas state change handling and layer removal

Replaces the onInteractionEnd callback with onStateChange for more consistent state change notifications. Adds a removeSelectedLayers method to Canvas for cleaner layer removal logic. Updates UI event handlers to use the new methods and callbacks, and ensures state is saved after relevant operations. Cleans up redundant updateOutput calls and streamlines output update logic.

js/Canvas.js

@@ -22,7 +22,7 @@ export class Canvas {
         this.selectedLayer = null;
         this.selectedLayers = [];
         this.onSelectionChange = null;
-        this.onInteractionEnd = callbacks.onInteractionEnd || null;
+        this.onStateChange = callbacks.onStateChange || null;
         this.lastMousePosition = {x: 0, y: 0};
 
         this.viewport = {
@@ -78,19 +78,28 @@ export class Canvas {
         this.render();
     }
 
+    _notifyStateChange() {
+        if (this.onStateChange) {
+            this.onStateChange();
+        }
+    }
+
     saveState(replaceLast = false) {
         this.canvasState.saveState(replaceLast);
         this.incrementOperationCount();
+        this._notifyStateChange();
     }
 
     undo() {
         this.canvasState.undo();
         this.incrementOperationCount();
+        this._notifyStateChange();
     }
 
     redo() {
         this.canvasState.redo();
         this.incrementOperationCount();
+        this._notifyStateChange();
     }
 
     updateSelectionAfterHistory() {
@@ -210,6 +219,16 @@ export class Canvas {
         }
     }
 
+    removeSelectedLayers() {
+        if (this.selectedLayers.length > 0) {
+            this.saveState();
+            this.layers = this.layers.filter(l => !this.selectedLayers.includes(l));
+            this.updateSelection([]);
+            this.render();
+            this.saveState();
+        }
+    }
+
     getMouseWorldCoordinates(e) {
         const rect = this.canvas.getBoundingClientRect();