From 92506d62c6de4ce1b6146103ce1a2e954da8dcfc Mon Sep 17 00:00:00 2001 From: Adriano Dal Pastro Date: Wed, 13 May 2026 10:58:41 +0200 Subject: [PATCH] fix(work_plane gui): preserve ROI overlay across RGB live-refresh Setting canvas.width/height clears its bitmap; the live RGB tick was firing the img.load handler every second, wiping the ROI rectangle and breaking the two-click flow (third click was interpreted as restart). - Only mutate canvas size when image resolution actually changes. - Re-paint the overlay after each load so the ROI persists. Co-Authored-By: Claude Opus 4.7 (1M context) --- web/work_plane.js | 11 ++++++++--- 1 file changed, 8 insertions(+), 3 deletions(-) diff --git a/web/work_plane.js b/web/work_plane.js index 00f33f4..a224ccc 100644 --- a/web/work_plane.js +++ b/web/work_plane.js @@ -61,12 +61,17 @@ function startRgbLoop() { } function syncOverlaySize() { - overlay.width = img.naturalWidth || 640; - overlay.height = img.naturalHeight || 480; + // Setting width/height on a canvas wipes its content. Only re-set when + // the image resolution actually changes (rare) so the ROI overlay survives + // each RGB live-refresh tick. + const w = img.naturalWidth || 640; + const h = img.naturalHeight || 480; + if (overlay.width !== w) overlay.width = w; + if (overlay.height !== h) overlay.height = h; overlay.style.width = img.clientWidth + 'px'; overlay.style.height = img.clientHeight + 'px'; } - img.addEventListener('load', syncOverlaySize); + img.addEventListener('load', () => { syncOverlaySize(); drawOverlay(); }); // Two-click ROI: 1st click = corner A, 2nd click = corner B (rectangle // defined). 3rd click starts a new selection.