Add onInteractionEnd callback to Canvas

Introduces an optional onInteractionEnd callback to the Canvas class, which is triggered at the end of user interactions. CanvasView now uses this callback to update output after interactions, improving responsiveness to user actions.

js/Canvas.js

@@ -11,7 +11,7 @@ import {createModuleLogger} from "./utils/LoggerUtils.js";
 const log = createModuleLogger('Canvas');
 
 export class Canvas {
-    constructor(node, widget) {
+    constructor(node, widget, callbacks = {}) {
         this.node = node;
         this.widget = widget;
         this.canvas = document.createElement('canvas');
@@ -22,6 +22,7 @@ export class Canvas {
         this.selectedLayer = null;
         this.selectedLayers = [];
         this.onSelectionChange = null;
+        this.onInteractionEnd = callbacks.onInteractionEnd || null;
         this.lastMousePosition = {x: 0, y: 0};
 
         this.viewport = {

js/CanvasInteractions.js

@@ -172,6 +172,9 @@ export class CanvasInteractions {
         if (interactionEnded) {
             this.canvas.saveState();
             this.canvas.saveStateToDB(true);
+            if (this.canvas.onInteractionEnd) {
+                this.canvas.onInteractionEnd();
+            }
         }
     }
 

js/CanvasView.js

@@ -11,7 +11,9 @@ import {createModuleLogger} from "./utils/LoggerUtils.js";
 const log = createModuleLogger('Canvas_view');
 
 async function createCanvasWidget(node, widget, app) {
-    const canvas = new Canvas(node, widget);
+    const canvas = new Canvas(node, widget, {
+        onInteractionEnd: () => updateOutput()
+    });
     const imageCache = new ImageCache();
 
     const style = document.createElement('style');