Pin inline fit and reset comparison rounds after adoption

.github/workflows/ci.yml

@@ -34,3 +34,5 @@ jobs:
           PY
       - name: Check exclusive routing behavior
         run: node --experimental-default-type=module tests/test_exclusive_routes.mjs
+      - name: Check comparison result history
+        run: node --experimental-default-type=module tests/test_compare_history.mjs

CHANGELOG.md

@@ -1,5 +1,30 @@
 # Changelog
 
+## 0.5.10
+
+- Add a pin toggle beside Fit in Inline Mask: keep the image fitted, route plain wheel to the workflow, retain Ctrl+wheel brush sizing and save the toggle with the workflow.
+- Shorten the inline load button to Upload (上传).
+- Bound inline preview bitmap allocation to source detail and an 8 Mi-pixel budget; cache the source/mask composite during cursor movement. Full-resolution mask data remains unchanged.
+- Successful adoption resets comparison history to the accepted image as 1/1. The next generation starts a fresh result list; failed adoption preserves history.
+
+## 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.
+- Remove duplicate preview entries when reloading older saved comparison histories.
+
+## 0.5.7
+
+- Accumulate comparison results across runs, select the newest result and preserve each result's matching original, including after workflow reload.
+- Keep comparison images permanently fitted and centered in the canvas; remove independent wheel zoom and middle/Space image panning.
+- Route wheel events over the full comparison node, including the picture, to ComfyUI workflow navigation.
+- Preserve hover comparison, the full-result view on pointer leave, batch selection and adoption with mask/history retention.
+
 ## 0.5.6
 
 - Follow KJNodes Get/Set routes and reroutes when deciding which exclusive input is enabled, including the setter's and real source node's bypass/mute states.

README.md

@@ -86,7 +86,7 @@ When the mask touches an image edge, masked-area mode uses aspect-preserving fil
 | Image / mask / overlay | Preview toggles only; they do not change the output |
 
 Brush pressure and soft brushes are supported; the mouse uses a fixed pressure.
-Inline Mask keeps only the image editing area and small **Load image** / **Fit** buttons in the corner, and adjusts the canvas height to the image ratio after loading to reduce empty margins.
+Inline Mask keeps the image editing area and small **Upload** / **Fit** / pin buttons in the corner, and adjusts the canvas height to the image ratio after loading to reduce empty margins.
 The brush, eraser, rectangle, lasso, pan, four brush sliders, undo/redo, mask actions, view toggles, fit and the embed option all live in the connected **WebUI Inpaint** node and drive that same inline canvas.
 You upload the image once; every stroke then updates the mask in the browser and is stored as PNG data in the workflow and in the executed parameters, so there is no saving and reloading of files per stroke.
 Wheel events over the picture zoom it; over the toolbar, buttons, sliders or the parameter panel they follow ComfyUI's canvas navigation settings.
@@ -95,6 +95,8 @@ Very large images still use browser memory, and PNG encoding time depends on res
 
 ## Painting tools and inpainting parameters
 
+The Inline Mask header has **Upload**, **Fit** and a pin toggle (**Keep** / **保持**). Enable the pin to keep the picture fitted and centered: plain wheel navigates the workflow, Ctrl+wheel still adjusts the brush, and image panning is disabled. Disable the pin to resume image zoom and pan. The pin state is saved with the workflow. Display buffers are bounded during workflow zoom; the saved mask retains its original resolution.
+
 Once Inline Mask is connected to the `image` input of **WebUI Inpaint**, the original painting controls appear in that inpaint node, and the parameter panel below drives the node's real sampling parameters.
 Width and height each get their own row with both a slider and a number field; denoise is a slider too, and **Use source size** fills in the source dimensions, rounded to the nearest multiple of 8 the sampler requires.
 Mask mode, fill, sampling area, sampler, scheduler, steps, CFG and seed are shown directly; mask processing, batch and Refiner switching live under **Mask, batch and advanced settings**.
@@ -104,11 +106,13 @@ Parameters driven by an external link disable the matching panel control; a modu
 ## Comparison and chained inpainting
 
 Add an **Image Compare** node and connect Inline Mask's `image` to `original` and the final full-size generated `image` to `result`, then run.
-With the pointer over the picture, the thin divider shows the generated result on the left and the original on the right; leaving the picture hides the divider and shows the full result, and the plain wheel zooms. Batch selection, dimensions and the fit button sit below the picture.
-When you are happy, click **Adopt this result**: the plugin uploads the selected result as the new source image and writes it back into the upstream inline editor while preserving the painted mask, current undo/redo history and viewport. Use **Clear** when you want to start a new mask; a normal **Load image** upload still starts a fresh mask.
+With the pointer over the picture, the thin divider shows the generated result on the left and the original on the right; leaving the picture hides the divider and shows the full result, and the image always remains fitted and centered in its canvas. Scrolling over the comparison image navigates the ComfyUI workflow background using the current navigation settings; comparison images do not zoom or pan independently. Batch selection, dimensions and the fit button sit below the picture.
+When you are happy, click **Adopt this result**: the plugin uploads the selected result as the new source image and writes it back into the upstream inline editor while preserving the painted mask, current undo/redo history and viewport. Use **Clear** when you want to start a new mask; a normal **Upload** still starts a fresh mask.
 To preserve mask coordinates, an adopted result must match the source dimensions; a mismatched result is rejected without changing the current source or mask. The mask remains embedded in saved workflow data; command-level undo history is retained during adoption in the current session.
 If the original is routed through intermediate IMAGE nodes the plugin walks upstream to find the inline editor; when several candidates exist you can pick one explicitly under **Adopt into**.
 Adoption only happens when you click the button and never starts the next generation automatically; the `image` output still passes the whole result batch, so you can feed a Save Image node.
+The result list accumulates images across runs and selects the newest result automatically. Each result keeps its original from that run. Successful adoption clears the old list and displays the accepted image as 1/1; the next generation starts a fresh list using the new source. Failed adoption leaves the old list intact. Saving the workflow also saves preview references, selection and the pending new-round state.
+
 Comparison previews live in ComfyUI's temp directory and may need a re-run after cleanup or restart; an adopted source image is stored in `input/adachi-inpaint/` and does not depend on temp previews.
 
 ## Group bypass presets
@@ -210,7 +214,7 @@ python -m unittest discover -s tests -v
 想用中文界面时，把 ComfyUI 的语言切成中文即可，插件会自动跟随：
 在 ComfyUI 设置里找到 **Locale / 语言**（设置项 `Comfy.Locale`）选择 `zh`，然后刷新浏览器（`Ctrl+F5`）。
 节点名称、分类、输入输出名与提示由 `locales/zh/` 提供，通过 ComfyUI 的 `/i18n` 机制加载；
-画布按钮与参数面板由 `web/i18n.js` 读取同一个语言设置翻译，因此「宽度」「高度」「载入原图」等也会一起变回中文。
+画布按钮与参数面板由 `web/i18n.js` 读取同一个语言设置翻译，因此「宽度」「高度」「上传」等也会一起变回中文。
 英文用户看到的一直是英文（英文是内置默认值）；某个词条若没有对应翻译，会自动回退为英文。
 两套语言共用同一个节点类 ID 和参数键名，所以已保存的工作流不受语言切换影响。
 

ROLLBACK.md

@@ -1,10 +1,14 @@
 # Git versions and rollback
 
-The current local version is **v0.5.6**. Both the installed plugin and the source repository retain local commits and tags. No GitHub push is part of this update.
+The current local version is **v0.5.10**. 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.6` | Exclusive selector follows Get/Set and virtual routes correctly |
+| `v0.5.10` | Pin inline fit, bound/cache inline previews, Upload label and restart comparison rounds after adoption |
+| `v0.5.9` / `local-before-v0.5.10` | 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 |
 | `v0.5.4` / `local-before-v0.5.5` | Isolate Fit clicks and refresh editor assets on upgrade |
 | `v0.5.3` / `local-before-v0.5.4` | Fit beside Load image in the inline mask, plus the 5D VAE fix |
@@ -18,13 +22,13 @@ To undo only this update, run in the plugin folder:
 
 ```powershell
 git status --short
-git switch --detach local-before-v0.5.6
+git switch --detach local-before-v0.5.10
 ```
 
 Return to this version with:
 
 ```powershell
-git switch --detach v0.5.6
+git switch --detach v0.5.10
 ```
 
 Restart ComfyUI and hard-refresh the browser (`Ctrl+F5`) after switching versions.

VERIFICATION.md

@@ -47,6 +47,13 @@ Environment: Windows, local ComfyUI 0.19.3, ComfyUI frontend 1.42.11, PyTorch 2.
 - 0.5.6: actual local KJNodes Set/Get frontend definitions were loaded only into isolated QA browsers (no KJ code is bundled). Across frontend 1.42.11/1.52.7 and classic/Nodes 2.0, 32 real CPU queue cases verify ignored setters, swapped states, ignored/muted real sources, ignored Get, explicit both/neither errors, and switching after workflow reload. Output image pixels match the selected branch; generating prompts does not change editable connections.
 - 0.5.6: dependency-free routing tests cover Get/Set, reroutes, current virtual-output APIs, mute/bypass, missing setters/inputs and cycles. All 29 backend CPU tests continue to pass.
 
+- 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.
+- 0.5.10: frontends 1.42.11 and 1.52.7, both classic nodes and Nodes 2.0, verify the Upload label and pin icon beside Fit, pin persistence across workflow reload, plain wheel navigating the workflow, Ctrl+wheel brush sizing while pinned, and restored image wheel zoom after unpinning. At 4x graph zoom the display allocation remains bounded, the original mask dimensions remain 320x200, and 20 cursor-only redraws never recomposite the mask overlay. All 15 standalone editor regression groups pass, including real painting, Alt/right-button erase, undo/redo, shapes, pressure, serialization and zoom/pan coordinate mapping.
+- 0.5.10: actual adoption reduces the comparison list to 1/1, preserves mask PNG and undo/redo identities, and saves the pending new-round state. Reloading before generating retains that state; the next two-image batches start at 2/2 and then accumulate to 4/4. Rejected adoption leaves history unchanged. These checks pass in both frontend versions/renderers.
+
 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.
 
 References used during implementation:

pyproject.toml

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

tests/test_compare_history.mjs

@@ -0,0 +1,23 @@
+import assert from "node:assert/strict";
+import { appendComparison } from "../web/compare_history.js";
+
+const first = {originals: ["source-a"], results: ["result-a"]};
+const second = appendComparison(first, {originals: ["source-b"], results: ["result-b", "result-c"]});
+assert.deepEqual(second, {originals: ["source-a", "source-b", "source-b"], results: ["result-a", "result-b", "result-c"]});
+assert.deepEqual(first, {originals: ["source-a"], results: ["result-a"]}, "Do not mutate saved history");
+const legacy = {originals: ["a", "b"], results: [1, 2, 3, 4]};
+assert.deepEqual(appendComparison(legacy, {originals: ["c"], results: [5]}), {
+    originals: ["a", "a", "b", "b", "c"], results: [1, 2, 3, 4, 5],
+});
+assert.deepEqual(appendComparison(undefined, first), first);
+assert.deepEqual(appendComparison(first, {}), first);
+assert.deepEqual(appendComparison({}, {results: ["orphan"]}), {originals: [], results: []});
+assert.deepEqual(appendComparison(JSON.parse(JSON.stringify(second)), first).results, ["result-a", "result-b", "result-c"], "Cached execution replay must not count twice");
+const preview = {filename: "preview_001.png", subfolder: "", type: "temp"};
+const one = {originals: ["source-a"], results: [preview]};
+assert.equal(appendComparison(one, {originals: ["source-a"], results: [{...preview}]}).results.length, 1);
+assert.equal(appendComparison(one, {originals: ["source-a"], results: [{...preview, filename: "preview_002.png"}]}).results.length, 2);
+assert.equal(appendComparison(one, {originals: ["source-a"], results: [{...preview, subfolder: "other"}]}).results.length, 2);
+assert.equal(appendComparison(one, {originals: ["source-a"], results: [{...preview, type: "output"}]}).results.length, 2);
+assert.deepEqual(appendComparison({originals: ["source-a", "source-a"], results: [preview, {...preview}]}), one, "Repair duplicates already saved in workflows");
+console.log("Comparison history checks passed");

web/compare.js

@@ -1,5 +1,4 @@
 /* Original hover-comparison UI, MIT licensed. */
-import { registerImageWheel } from "./wheel_gestures.js";
 import { T } from "./i18n.js";
 const element = (tag, className, text) => {
     const node = document.createElement(tag);
@@ -19,7 +18,7 @@ export class ImageCompareView {
         this.options = options;
         this.root = element("div", "dd-inpaint dd-comparer");
         this.originals = []; this.results = []; this.index = 0;
-        this.zoom = 1; this.pan = { x: 0, y: 0 }; this.split = .5;
+        this.split = .5;
         this.version = 0; this.ready = false;
         this.dimensionsLabel = element("span", "dd-dimensions");
         const toolbar = element("div", "dd-row dd-compare-toolbar");
@@ -29,14 +28,17 @@ export class ImageCompareView {
         toolbar.append(this.resultSelect, this.dimensionsLabel);
         const spacer = element("span", "dd-spacer"); toolbar.append(spacer);
         const fit = element("button", "", T("Fit")); fit.type = "button";
-        fit.onclick = () => { this.zoom = 1; this.pan = { x: 0, y: 0 }; this.schedule(); }; toolbar.append(fit);
+        fit.onclick = event => { event.preventDefault(); event.stopPropagation(); this.schedule(); }; toolbar.append(fit);
         this.stage = element("div", "dd-stage dd-compare-stage");
         this.canvas = document.createElement("canvas"); this.canvas.tabIndex = 0;
         this.canvas.setAttribute("aria-label", T("Result left, original right; hover to compare"));
         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")));
@@ -46,34 +48,22 @@ export class ImageCompareView {
         adoption.append(this.targetSelect);
         this.adoptButton = element("button", "dd-primary", T("Adopt this result")); this.adoptButton.type = "button";
         this.adoptButton.onclick = () => this.adopt(); adoption.append(this.adoptButton);
-        this.message = element("div", "dd-status", T("Move to compare · wheel to zoom · middle-drag to pan"));
+        this.message = element("div", "dd-status", T("Result left, original right; hover to compare"));
         this.message.hidden = true; this.message.setAttribute("role", "alert");
         this.root.append(this.stage, toolbar, adoption, this.message);
         this.canvas.addEventListener("pointermove", event => this.move(event));
         this.canvas.addEventListener("pointerdown", event => {
-            if (!this.ready) return;
+            if (!this.ready || event.button !== 0) return;
             event.preventDefault(); event.stopPropagation(); this.canvas.focus({ preventScroll: true });
-            if (event.button === 1 || this.space) {
-                this.drag = { id: event.pointerId, x: event.clientX, y: event.clientY, pan: { ...this.pan } };
-                this.canvas.setPointerCapture(event.pointerId);
-            } else this.move(event);
+            this.move(event);
         });
-        const finish = event => {
-            if (!this.drag || this.drag.id !== event.pointerId) return;
-            const id = this.drag.id; this.drag = null;
-            if (this.canvas.hasPointerCapture(id)) this.canvas.releasePointerCapture(id);
-        };
-        for (const name of ["pointerup", "pointercancel", "lostpointercapture"]) this.canvas.addEventListener(name, finish);
-        this.stopWheelCapture = registerImageWheel(this.canvas, () => this.ready, event => this.wheel(event), options.onGraphWheel);
+        this.canvas.addEventListener("wheel", event => this.wheel(event), { passive: false });
         this.canvas.addEventListener("keydown", event => {
-            if (event.code === "Space") { event.preventDefault(); event.stopPropagation(); this.space = true; }
-            else if (["ArrowLeft", "ArrowRight"].includes(event.key)) {
+            if (["ArrowLeft", "ArrowRight"].includes(event.key)) {
                 event.preventDefault(); event.stopPropagation();
                 this.split = Math.max(0, Math.min(1, this.split + (event.key === "ArrowRight" ? .02 : -.02))); this.schedule();
             }
         });
-        this.canvas.addEventListener("keyup", event => { if (event.code === "Space") this.space = false; });
-        this.canvas.addEventListener("blur", () => { this.space = false; });
         this.observer = new ResizeObserver(() => this.schedule()); this.observer.observe(this.stage);
         this.refreshTargets(); this.updateButton();
     }
@@ -140,36 +130,21 @@ export class ImageCompareView {
 
     transform() {
         const rect = this.canvas.getBoundingClientRect();
-        if (this.viewport?.width && this.viewport?.height && rect.width && rect.height) {
-            this.pan.x *= rect.width / this.viewport.width;
-            this.pan.y *= rect.height / this.viewport.height;
-        }
-        this.viewport = { width: rect.width, height: rect.height };
-        const scale = this.before ? Math.min(rect.width / this.before.width, rect.height / this.before.height) * this.zoom : 1;
-        return { width: rect.width, height: rect.height, scale, x: (rect.width - (this.before?.width || 0) * scale) / 2 + this.pan.x, y: (rect.height - (this.before?.height || 0) * scale) / 2 + this.pan.y };
+        const scale = this.before ? Math.min(rect.width / this.before.width, rect.height / this.before.height) : 1;
+        return { width: rect.width, height: rect.height, scale, x: (rect.width - (this.before?.width || 0) * scale) / 2, y: (rect.height - (this.before?.height || 0) * scale) / 2 };
     }
 
     position(event) { const rect = this.canvas.getBoundingClientRect(), t = this.transform(); return { x: (event.clientX - rect.left - t.x) / t.scale, y: (event.clientY - rect.top - t.y) / t.scale }; }
 
     wheel(event) {
-        if (!this.ready) return;
         event.preventDefault(); event.stopPropagation();
-        const before = this.position(event), rect = this.canvas.getBoundingClientRect();
-        this.zoom = Math.max(.1, Math.min(32, this.zoom * Math.exp(-event.deltaY * .0015)));
-        const t = this.transform();
-        this.pan.x += event.clientX - rect.left - (t.x + before.x * t.scale);
-        this.pan.y += event.clientY - rect.top - (t.y + before.y * t.scale);
-        this.schedule();
+        this.options.onGraphWheel?.(event);
     }
 
     move(event) {
         if (!this.ready) return;
         this.hovered = true;
-        if (this.drag) {
-            event.preventDefault(); event.stopPropagation();
-            this.pan.x = this.drag.pan.x + event.clientX - this.drag.x;
-            this.pan.y = this.drag.pan.y + event.clientY - this.drag.y;
-        } else this.split = Math.max(0, Math.min(1, this.position(event).x / this.before.width));
+        this.split = Math.max(0, Math.min(1, this.position(event).x / this.before.width));
         this.schedule();
     }
 
@@ -178,26 +153,47 @@ 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() {
         this.destroyed = true; ++this.version; cancelAnimationFrame(this.frame); this.observer.disconnect();
-        this.stopWheelCapture();
         this.before = this.after = null; this.canvas.width = this.canvas.height = 0; this.root.remove();
     }
 }

web/compare_history.js

@@ -0,0 +1,26 @@
+// Store one matching original per result, including batches from older workflows.
+export function appendComparison(previous, incoming) {
+    const pairs = data => {
+        const originals = Array.isArray(data?.originals) ? data.originals : [];
+        const results = Array.isArray(data?.results) ? data.results : [];
+        if (!originals.length || !results.length) return { originals: [], results: [] };
+        const repetitions = results.length / originals.length;
+        return {
+            originals: results.map((_, index) => originals[Math.min(originals.length - 1, Math.floor(index / repetitions))]),
+            results,
+        };
+    };
+    const before = pairs(previous), next = pairs(incoming);
+    const history = { originals: [], results: [] }, seen = new Set();
+    for (const data of [before, next]) data.results.forEach((result, index) => {
+        // Cached execution notifications can replay the same preview. Its file
+        // identity is stable, while a genuinely new generation gets a new file.
+        const key = typeof result === "object" && result !== null
+            ? JSON.stringify([result.type || "temp", result.subfolder || "", result.filename])
+            : JSON.stringify(result);
+        if (seen.has(key)) return;
+        seen.add(key);
+        history.originals.push(data.originals[index]); history.results.push(result);
+    });
+    return history;
+}

web/compare_node.js

@@ -1,6 +1,7 @@
 import { app } from "../../scripts/app.js";
 import { api } from "../../scripts/api.js";
-import { ImageCompareView } from "./compare.js";
+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";
 import { bindWidgetToNodeWidth } from "./widget_layout.js?v=0.5.5";
@@ -48,10 +49,18 @@ app.registerExtension({
                     const blob = await response.blob();
                     if (blob.size > 64 * 1024 * 1024) throw new Error(T("Result image exceeds 64 MiB; downscale it first"));
                     await target.adachiUseResult(new File([blob], `adachi-result-${Date.now()}.png`, { type: "image/png" }));
+                    // Adoption starts a new round. Keep the accepted image visible
+                    // as 1/1, then replace it with the next round's first outputs.
+                    const data = { originals: [image], results: [image] };
+                    node.properties.adachi_compare = data;
+                    node.properties.adachi_result_index = 0;
+                    node.properties.adachi_compare_new_round = true;
+                    await compare.setData(data, 0);
+                    app.graph?.change?.();
                 },
             });
             node.adachiCompare = compare;
-            const stopWheelRouting = routeWheelOutsideImage(compare.root, compare.canvas, () => compare.ready);
+            const stopWheelRouting = routeWheelOutsideImage(compare.root, null, () => false);
             const widget = node.addDOMWidget("adachi_compare", "adachi_compare_view", compare.root, {
                 serialize: false, hideOnZoom: false, getMinHeight: () => 420, getMaxHeight: () => 4096,
             });
@@ -60,15 +69,27 @@ app.registerExtension({
             const executed = node.onExecuted;
             node.onExecuted = function (output) {
                 const result = executed?.apply(this, arguments);
-                const data = { originals: output?.adachi_originals || [], results: output?.adachi_results || [] };
+                if (!output?.adachi_originals?.length || !output?.adachi_results?.length) return result;
+                const previous = node.properties.adachi_compare_new_round
+                    ? appendComparison() : appendComparison(node.properties.adachi_compare);
+                const data = appendComparison(previous, {
+                    originals: output.adachi_originals, results: output.adachi_results,
+                });
                 node.properties.adachi_compare = data;
-                compare.setData(data, node.properties.adachi_result_index || 0);
+                node.properties.adachi_compare_new_round = false;
+                node.properties.adachi_result_index = data.results.length > previous.results.length
+                    ? data.results.length - 1 : Math.max(0, Math.min(data.results.length - 1, node.properties.adachi_result_index || 0));
+                compare.setData(data, node.properties.adachi_result_index);
                 return result;
             };
             const configured = node.onConfigure;
             node.onConfigure = function () {
                 const result = configured?.apply(this, arguments);
-                if (node.properties.adachi_compare) compare.setData(node.properties.adachi_compare, node.properties.adachi_result_index || 0);
+                if (node.properties.adachi_compare) {
+                    node.properties.adachi_compare = appendComparison(node.properties.adachi_compare);
+                    node.properties.adachi_result_index = Math.max(0, Math.min(node.properties.adachi_compare.results.length - 1, node.properties.adachi_result_index || 0));
+                    compare.setData(node.properties.adachi_compare, node.properties.adachi_result_index);
+                }
                 return result;
             };
             const removed = node.onRemoved;

web/editor.js

@@ -24,6 +24,8 @@ export class InlineMaskEditor {
         this.mask = makeCanvas();
         this.baseMask = makeCanvas();
         this.overlay = makeCanvas();
+        this.scene = makeCanvas();
+        this.maskRevision = 0;
         this.tool = "brush";
         this.view = "overlay";
         this.brushSize = 64;
@@ -92,7 +94,7 @@ export class InlineMaskEditor {
         head.append(this.sizeLabel);
         this.root.append(head);
         const files = el("div", "dd-row dd-files");
-        this.loadButton = this.button(files, T("Load image"), T("Upload an image, or drop / paste one"), () => this.imageInput.click(), "dd-primary");
+        this.loadButton = this.button(files, T("Upload"), T("Upload an image, or drop / paste one"), () => this.imageInput.click(), "dd-primary");
         this.filename = el("span", "dd-filename", T("Drop an image onto the canvas"));
         files.append(this.filename);
         this.root.append(files);
@@ -171,6 +173,8 @@ export class InlineMaskEditor {
         this.zoomLabel = el("span", "dd-zoom", "100%");
         footer.append(this.zoomLabel);
         this.fitButton = this.button(footer, T("Fit"), T("Fit the image to the canvas"), () => this.fit());
+        this.keepButton = this.button(footer, "", T("Keep"), event => { event.stopPropagation(); this.setKeepFit(!this.keepFit); });
+        this.keepButton.innerHTML = '<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="m16 3 5 5-4 1-4 4 1 4-3 3-3-6-6-3 3-3 4 1 4-4zM8 16l-6 6"/></svg>';
         // The inline button must not select/bring forward the ComfyUI node:
         // newer frontends can remeasure its DOM widget on that bubbling click.
         const fitAction = this.fitButton.onclick;
@@ -194,6 +198,7 @@ export class InlineMaskEditor {
             head.remove();
             this.controls.append(info, tools, settings, actions, footer, embedRow);
             this.loadButton.after(this.fitButton);
+            this.fitButton.after(this.keepButton);
             // These are the original live controls; the sampler mounts this
             // same DOM tree so brush state and callbacks are preserved.
         }
@@ -315,6 +320,8 @@ export class InlineMaskEditor {
     }
 
     updateButtons() {
+        this.keepButton?.classList.toggle("dd-active", !!this.keepFit);
+        this.keepButton?.setAttribute("aria-pressed", String(!!this.keepFit));
         this.stage?.classList.toggle("dd-erasing", !!(this.altErase || this.tool === "erase" || this.stroke?.type === "erase"));
         for (const [name, button] of Object.entries(this.toolButtons || {})) {
             const active = name === (this.altErase ? "erase" : this.tool);
@@ -331,6 +338,7 @@ export class InlineMaskEditor {
 
     dimensions() {
         const r = this.canvas.getBoundingClientRect();
+        if (this.keepFit) { this.zoom = 1; this.pan = { x: 0, y: 0 }; }
         if (this.viewport?.width && this.viewport?.height && r.width && r.height) {
             this.pan.x *= r.width / this.viewport.width;
             this.pan.y *= r.height / this.viewport.height;
@@ -348,6 +356,7 @@ export class InlineMaskEditor {
 
     pointerDown(event) {
         if (!this.ready || this.pointerId != null) return;
+        if (this.keepFit && (this.space || (!event.altKey && this.tool === "pan") || event.button === 1)) return;
         event.preventDefault(); event.stopPropagation(); this.root.focus({ preventScroll: true });
         this.altErase = !!event.altKey; this.updateButtons();
         this.pointerId = event.pointerId;
@@ -415,6 +424,7 @@ export class InlineMaskEditor {
     }
 
     paintSegment(ctx, command, a, b) {
+        if (ctx.canvas === this.mask) this.maskRevision++;
         ctx.save();
         ctx.globalCompositeOperation = command.type === "erase" ? "destination-out" : "source-over";
         ctx.globalAlpha = command.opacity / 100;
@@ -483,6 +493,7 @@ export class InlineMaskEditor {
     redo() { if (this.future.length && !this.stroke) { this.history.push(this.future.pop()); this.replay(); } }
 
     changed() {
+        this.maskRevision++;
         this.dirty = true;
         this.flush();
         this.schedule();
@@ -525,6 +536,13 @@ export class InlineMaskEditor {
 
     fit() { this.zoom = 1; this.pan = { x: 0, y: 0 }; this.schedule(); }
 
+    setKeepFit(enabled, notify = true) {
+        this.keepFit = !!enabled;
+        if (this.keepFit) this.fit();
+        this.updateButtons(); this.schedule();
+        if (notify) this.options.onKeepFit?.(this.keepFit);
+    }
+
     setBrushSize(value) {
         this.brushSizeInput.value = Math.max(1, Math.min(512, Math.round(value)));
         this.brushSizeInput.dispatchEvent(new Event("input"));
@@ -533,6 +551,7 @@ export class InlineMaskEditor {
     wheel(event) {
         if (!this.ready) return;
         event.preventDefault(); event.stopPropagation();
+        if (this.keepFit && !event.ctrlKey) { this.options.onGraphWheel?.(event); return; }
         if (event.ctrlKey) {
             const delta = event.deltaY * (event.deltaMode === 1 ? 16 : event.deltaMode === 2 ? 100 : 1);
             if (delta) {
@@ -569,24 +588,33 @@ export class InlineMaskEditor {
     render() {
         const rect = this.canvas.getBoundingClientRect();
         if (!rect.width || !rect.height) return;
-        const ratio = Math.min(devicePixelRatio || 1, 2);
-        const w = Math.round(rect.width * ratio), h = Math.round(rect.height * ratio);
-        if (this.canvas.width !== w || this.canvas.height !== h) { this.canvas.width = w; this.canvas.height = h; this.overlay.width = w; this.overlay.height = h; }
-        const ctx = this.canvas.getContext("2d");
-        ctx.setTransform(1, 0, 0, 1, 0, 0); ctx.clearRect(0, 0, w, h);
-        if (!this.ready) return;
         const d = this.dimensions();
-        ctx.setTransform(ratio * d.scale, 0, 0, ratio * d.scale, ratio * d.x, ratio * d.y);
-        if (this.view !== "mask") ctx.drawImage(this.image, 0, 0);
-        else { ctx.fillStyle = "black"; ctx.fillRect(0, 0, this.image.width, this.image.height); }
-        if (this.view !== "image") {
-            const overlay = this.overlay.getContext("2d");
-            overlay.setTransform(1, 0, 0, 1, 0, 0); overlay.clearRect(0, 0, w, h);
-            overlay.setTransform(ratio * d.scale, 0, 0, ratio * d.scale, ratio * d.x, ratio * d.y);
-            overlay.drawImage(this.mask, 0, 0);
-            if (this.view === "overlay") { overlay.globalCompositeOperation = "source-in"; overlay.fillStyle = "#ffad45"; overlay.fillRect(0, 0, this.mask.width, this.mask.height); overlay.globalCompositeOperation = "source-over"; }
-            ctx.setTransform(1, 0, 0, 1, 0, 0); ctx.globalAlpha = this.view === "mask" ? 1 : this.overlayOpacity / 100; ctx.drawImage(this.overlay, 0, 0); ctx.globalAlpha = 1;
+        const ratio = Math.min(devicePixelRatio || 1, 2, this.ready ? 1 / d.scale : 2,
+            8192 / rect.width, 8192 / rect.height, Math.sqrt(8 * 1024 * 1024 / (rect.width * rect.height)));
+        const w = Math.max(1, Math.round(rect.width * ratio)), h = Math.max(1, Math.round(rect.height * ratio));
+        if (this.canvas.width !== w || this.canvas.height !== h) { this.canvas.width = w; this.canvas.height = h; this.overlay.width = w; this.overlay.height = h; }
+        const display = this.canvas.getContext("2d");
+        if (!this.ready) { display.clearRect(0, 0, w, h); this.sceneKey = null; return; }
+        const key = [this.loadVersion, this.maskRevision, w, h, d.scale * ratio, d.x * ratio, d.y * ratio, this.view, this.overlayOpacity].join(":");
+        if (key !== this.sceneKey) {
+            if (this.scene.width !== w || this.scene.height !== h) { this.scene.width = w; this.scene.height = h; }
+            const ctx = this.scene.getContext("2d");
+            ctx.setTransform(1, 0, 0, 1, 0, 0); ctx.clearRect(0, 0, w, h);
+            ctx.setTransform(ratio * d.scale, 0, 0, ratio * d.scale, ratio * d.x, ratio * d.y);
+            if (this.view !== "mask") ctx.drawImage(this.image, 0, 0);
+            else { ctx.fillStyle = "black"; ctx.fillRect(0, 0, this.image.width, this.image.height); }
+            if (this.view !== "image") {
+                const overlay = this.overlay.getContext("2d");
+                overlay.setTransform(1, 0, 0, 1, 0, 0); overlay.clearRect(0, 0, w, h);
+                overlay.setTransform(ratio * d.scale, 0, 0, ratio * d.scale, ratio * d.x, ratio * d.y);
+                overlay.drawImage(this.mask, 0, 0);
+                if (this.view === "overlay") { overlay.globalCompositeOperation = "source-in"; overlay.fillStyle = "#ffad45"; overlay.fillRect(0, 0, this.mask.width, this.mask.height); overlay.globalCompositeOperation = "source-over"; }
+                ctx.setTransform(1, 0, 0, 1, 0, 0); ctx.globalAlpha = this.view === "mask" ? 1 : this.overlayOpacity / 100; ctx.drawImage(this.overlay, 0, 0); ctx.globalAlpha = 1;
+            }
+            this.sceneKey = key;
         }
+        const ctx = display;
+        ctx.setTransform(1, 0, 0, 1, 0, 0); ctx.clearRect(0, 0, w, h); ctx.drawImage(this.scene, 0, 0);
         ctx.setTransform(ratio * d.scale, 0, 0, ratio * d.scale, ratio * d.x, ratio * d.y);
         if (this.stroke && ["rect", "lasso"].includes(this.stroke.type)) {
             ctx.save(); ctx.strokeStyle = "#ffcf85"; ctx.lineWidth = 1.5 / d.scale; ctx.setLineDash([5 / d.scale, 4 / d.scale]);
@@ -613,7 +641,7 @@ export class InlineMaskEditor {
         window.removeEventListener("keydown", this.modifierDown, true);
         window.removeEventListener("keyup", this.modifierUp, true);
         window.removeEventListener("blur", this.modifierUp);
-        for (const canvas of [this.mask, this.baseMask, this.overlay, this.canvas]) canvas.width = canvas.height = 0;
+        for (const canvas of [this.mask, this.baseMask, this.overlay, this.scene, this.canvas]) canvas.width = canvas.height = 0;
         this.history = []; this.future = []; this.image = null; this.controls?.remove(); this.root.remove();
     }
 }

web/i18n.js

@@ -86,6 +86,8 @@ const ZH = {
   "Image": "原图",
   "Mask": "蒙版",
   "Fit": "适应",
+  "Keep": "保持",
+  "Upload": "上传",
   "Fit the image to the canvas": "适应画布",
   "File is too large (max 64 MB)": "图片文件不能超过 64 MB",
   "Loading image…": "正在载入原图…",

web/inline_inpaint.js

@@ -1,6 +1,6 @@
 import { app } from "../../scripts/app.js";
 import { api } from "../../scripts/api.js";
-import { InlineMaskEditor } from "./editor.js?v=0.5.5";
+import { InlineMaskEditor } from "./editor.js?v=0.5.10";
 import { installInpaintWorkbench } from "./inpaint_node.js?v=0.5.5";
 import { bindWidgetToNodeWidth } from "./widget_layout.js?v=0.5.5";
 import { routeWheelOutsideImage } from "./wheel_routing.js";
@@ -87,6 +87,7 @@ app.registerExtension({
                 compact: true,
                 onChange(data) { if (maskWidget && !restoring) maskWidget.value = data; },
                 onDirty() { markChanged(); },
+                onKeepFit(enabled) { node.properties.adachi_keep_fit = enabled; markChanged(); },
                 onImage() { if (!restoring || !node.properties.adachi_compact_ui) fitNodeToImage(); },
                 onGraphWheel: event => app.canvas?.processMouseWheel(event),
                 async onUpload(file, { preserveMask = false } = {}) {
@@ -115,7 +116,7 @@ app.registerExtension({
                     markChanged();
                 },
             });
-            editor.root.dataset.adachiVersion = "0.5.5";
+            editor.root.dataset.adachiVersion = "0.5.10";
             node.adachiEditor = editor;
             const stopWheelRouting = routeWheelOutsideImage(editor.root, editor.canvas, () => editor.ready);
             node.adachiUseResult = async file => {
@@ -192,6 +193,7 @@ app.registerExtension({
             const previousConfigure = node.onConfigure;
             node.onConfigure = function () {
                 const configured = previousConfigure?.apply(this, arguments);
+                editor.setKeepFit(!!node.properties.adachi_keep_fit, false);
                 cancelAnimationFrame(restoreFrame); restoreFrame = requestAnimationFrame(restore);
                 return configured;
             };