Reduce comparison redraw cost at large workflow zoom

CHANGELOG.md

@@ -1,5 +1,11 @@
 # Changelog
 
+## 0.5.9
+
+- Bound comparison bitmap resolution to source detail, 8192 pixels per edge and a 16 Mi-pixel allocation budget, avoiding quadratic bitmap growth at large workflow zoom.
+- Redraw only the strip swept by the comparison divider during pointer movement; redraw fully after image, size or hover changes.
+- Draw the divider as a separate overlay so it remains one screen pixel wide even when magnifying the workflow.
+
 ## 0.5.8
 
 - Count each comparison preview file once, even when cached execution notifications replay it; keep the selected result on replay.

ROLLBACK.md

@@ -1,10 +1,11 @@
 # Git versions and rollback
 
-The current local version is **v0.5.8**. Both the installed plugin and the source repository retain local commits and tags. This update is also pushed to the GitHub main branch.
+The current local version is **v0.5.9**. Both the installed plugin and the source repository retain local commits and tags. This update is also pushed to the GitHub main branch.
 
 | Tag | Contents |
 |---|---|
-| `v0.5.8` | Deduplicate replayed comparison previews and repair duplicate saved history |
+| `v0.5.9` | Bound comparison bitmap allocations and redraw only the swept divider strip |
+| `v0.5.8` / `local-before-v0.5.9` | Deduplicate replayed comparison previews and repair duplicate saved history |
 | `v0.5.7` / `local-before-v0.5.8` | Fixed comparison images; wheel navigates the workflow; retain result history across runs |
 | `v0.5.6` / `local-before-v0.5.7` | Exclusive selector follows Get/Set and virtual routes correctly |
 | `v0.5.5` / `local-before-v0.5.6` | Bind canvas/panel widths to node geometry and retain vertical resizing |
@@ -20,13 +21,13 @@ To undo only this update, run in the plugin folder:
 
 ```powershell
 git status --short
-git switch --detach local-before-v0.5.8
+git switch --detach local-before-v0.5.9
 ```
 
 Return to this version with:
 
 ```powershell
-git switch --detach v0.5.8
+git switch --detach v0.5.9
 ```
 
 Restart ComfyUI and hard-refresh the browser (`Ctrl+F5`) after switching versions.

VERIFICATION.md

@@ -50,6 +50,7 @@ Environment: Windows, local ComfyUI 0.19.3, ComfyUI frontend 1.42.11, PyTorch 2.
 - 0.5.7: actual browser wheel events over a real queued comparison image change workflow navigation while the comparison transform stays fitted and centered. Verified on frontends 1.42.11 and 1.52.7 in classic nodes and Nodes 2.0, with left-result/right-original pixels, hover/leave behavior, batch selection, adoption preserving mask/history, workflow reload, rejected mismatched adoption and ordinary-upload mask reset.
 - 0.5.7: three real queued two-image batches accumulate 2, 4 and 6 results and select the newest result. After adoption, old results retain their old original and new results use the adopted original; all six results survive workflow reload in both frontend versions/renderers. Dependency-free tests additionally cover legacy batch mapping, empty outputs and immutable appending.
 - 0.5.8: real single-image queues on frontend 1.52.7 in classic nodes and Nodes 2.0 show 1/1 then 2/2. Replaying the same execution output twice does not increase the count or reset a manually selected result. Reloading a workflow containing duplicate preview references removes duplicates. Unit checks distinguish filenames, subfolders and file types.
+- 0.5.9: on frontend 1.52.7 in classic nodes and Nodes 2.0, a 1024x1536 comparison was measured at workflow zoom 1x, 2x and 4x. At 4x, 24 synchronous paints with readback dropped from 483 to 36 ms (classic) and 453 to 35 ms (Nodes 2.0). These are isolated browser measurements, not end-to-end workflow FPS guarantees. The divider measured one screen pixel at every zoom. Dirty-strip redraws matched full-redraw pixels exactly across forward/reverse/unchanged divider movements and edge positions; pointer exit hides the divider.
 
 The sampling path was also checked for noise-schedule continuity against the real `common_ksampler`/`KSampler` functions in the local ComfyUI; an actual checkpoint has not been loaded to test GPU image quality or every model family, so CPU/interface tests must not be treated as model-quality verification.
 

pyproject.toml

@@ -1,6 +1,6 @@
 [project]
 name = "adachi-inpaint-workbench"
-version = "0.5.8"
+version = "0.5.9"
 description = "Inline mask painting and WebUI-style inpainting nodes for ComfyUI"
 requires-python = ">=3.10"
 license = { file = "LICENSE" }

web/compare.js

@@ -35,7 +35,10 @@ export class ImageCompareView {
         this.canvas.oncontextmenu = event => event.preventDefault();
         this.canvas.addEventListener("pointerenter", event => { this.hovered = true; this.move(event); this.schedule(); });
         this.canvas.addEventListener("pointerleave", () => { this.hovered = false; this.schedule(); });
-        this.stage.append(this.canvas);
+        this.divider = element("div");
+        Object.assign(this.divider.style, { position: "absolute", background: "#ffffffb3", pointerEvents: "none" });
+        this.divider.hidden = true;
+        this.stage.append(this.canvas, this.divider);
         this.empty = element("div", "dd-empty", T("Connect an original image and a result, then run the workflow")); this.stage.append(this.empty);
         const adoption = element("div", "dd-row dd-adoption");
         adoption.append(element("span", "dd-compare-label", T("Adopt into")));
@@ -150,21 +153,43 @@ export class ImageCompareView {
     render() {
         const t = this.transform(), ratio = Math.min(devicePixelRatio || 1, 2);
         if (!t.width || !t.height) return;
-        const width = Math.round(t.width * ratio), height = Math.round(t.height * ratio);
+        // Graph zoom changes the screen rect, not the amount of source detail.
+        // Never allocate a huge upscaled bitmap just to magnify existing pixels.
+        const rasterRatio = Math.min(ratio, this.ready ? 1 / t.scale : ratio,
+            8192 / t.width, 8192 / t.height, Math.sqrt(16 * 1024 * 1024 / (t.width * t.height)));
+        const width = Math.max(1, Math.round(t.width * rasterRatio)), height = Math.max(1, Math.round(t.height * rasterRatio));
         if (this.canvas.width !== width || this.canvas.height !== height) { this.canvas.width = width; this.canvas.height = height; }
         const ctx = this.canvas.getContext("2d");
-        ctx.setTransform(1, 0, 0, 1, 0, 0); ctx.clearRect(0, 0, width, height);
-        if (!this.ready) return;
-        ctx.setTransform(t.scale * ratio, 0, 0, t.scale * ratio, t.x * ratio, t.y * ratio);
-        ctx.drawImage(this.after, 0, 0, this.before.width, this.before.height);
-        if (!this.hovered) return;
+        ctx.setTransform(1, 0, 0, 1, 0, 0);
+        this.divider.hidden = !this.ready || !this.hovered;
+        if (!this.ready) { ctx.clearRect(0, 0, width, height); this.lastPaint = null; return; }
         const split = this.split * this.before.width;
+        const lineX = Math.round((t.x + split * t.scale) * rasterRatio) + .5;
+        if (this.hovered) {
+            const screenScale = t.width / this.canvas.clientWidth || 1;
+            Object.assign(this.divider.style, {
+                left: `${(t.x + split * t.scale) / screenScale}px`, top: `${t.y / screenScale}px`,
+                height: `${this.before.height * t.scale / screenScale}px`, width: `${1 / screenScale}px`,
+            });
+        }
+        const key = [this.version, width, height, t.scale * rasterRatio, t.x * rasterRatio, t.y * rasterRatio].join(":");
+        const previous = this.lastPaint;
+        ctx.save();
+        // While hovering, pixels outside the old/new divider positions are
+        // unchanged. Clip the redraw to that strip rather than repainting all.
+        if (previous?.key === key && previous.hovered && this.hovered) {
+            const left = Math.max(0, Math.floor(Math.min(previous.lineX, lineX)) - 2);
+            const right = Math.min(width, Math.ceil(Math.max(previous.lineX, lineX)) + 2);
+            ctx.beginPath(); ctx.rect(left, 0, right - left, height); ctx.clip();
+        }
+        ctx.clearRect(0, 0, width, height);
+        ctx.setTransform(t.scale * rasterRatio, 0, 0, t.scale * rasterRatio, t.x * rasterRatio, t.y * rasterRatio);
+        ctx.drawImage(this.after, 0, 0, this.before.width, this.before.height);
+        this.lastPaint = { key, hovered: this.hovered, lineX };
+        if (!this.hovered) { ctx.restore(); return; }
         ctx.save(); ctx.beginPath(); ctx.rect(split, 0, this.before.width - split, this.before.height); ctx.clip();
         ctx.drawImage(this.before, 0, 0); ctx.restore();
-        ctx.setTransform(1, 0, 0, 1, 0, 0);
-        const lineX = Math.round((t.x + split * t.scale) * ratio) + .5;
-        ctx.beginPath(); ctx.moveTo(lineX, t.y * ratio); ctx.lineTo(lineX, (t.y + this.before.height * t.scale) * ratio);
-        ctx.strokeStyle = "#ffffffb3"; ctx.lineWidth = 1; ctx.stroke();
+        ctx.restore();
     }
 
     destroy() {

web/compare_node.js

@@ -1,6 +1,6 @@
 import { app } from "../../scripts/app.js";
 import { api } from "../../scripts/api.js";
-import { ImageCompareView } from "./compare.js?v=0.5.8";
+import { ImageCompareView } from "./compare.js?v=0.5.9";
 import { appendComparison } from "./compare_history.js?v=0.5.8";
 import { routeWheelOutsideImage } from "./wheel_routing.js";
 import { T } from "./i18n.js";