From f76f047fa60477909c475f72f5ac9b0cab902023 Mon Sep 17 00:00:00 2001
From: Dariusz L <dl122@wp.pl>
Date: Sat, 28 Jun 2025 01:35:18 +0200
Subject: [PATCH] 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             | 3 ++-
 js/CanvasInteractions.js | 3 +++
 js/CanvasView.js         | 4 +++-
 3 files changed, 8 insertions(+), 2 deletions(-)

diff --git a/js/Canvas.js b/js/Canvas.js
index 729c3f3..6c346f1 100644
--- a/js/Canvas.js
+++ b/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 = {
diff --git a/js/CanvasInteractions.js b/js/CanvasInteractions.js
index 6132964..e730ac8 100644
--- a/js/CanvasInteractions.js
+++ b/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();
+            }
         }
     }
 
diff --git a/js/CanvasView.js b/js/CanvasView.js
index 8b3ea8c..3358786 100644
--- a/js/CanvasView.js
+++ b/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');