Preserve the mask when uploading a new source image

Uploading previously reset the mask, history and viewport. It now goes through the
same replaceSource path that adopting a result uses, so only the source pixels
change and the painted mask, undo/redo history and current view survive.

If the new image has a different size the mask cannot be kept, so the upload falls
back to a fresh load and shows a notice instead of failing.

CHANGELOG.md

@@ -1,5 +1,16 @@
 # Changelog
 
+## 0.7.1
+
+- Uploading a new source image now keeps the painted mask, undo/redo history and viewport, the same way adopting a result does; only the source pixels change. A first upload still starts with an empty mask.
+- When the new image has a different size the mask cannot be kept, so the image loads fresh and a notice explains that the mask was reset instead of failing the upload.
+
+## 0.7.0
+
+- Add a download button next to the inline upload button: it saves the current source image as a PNG at its own resolution. It stays disabled until an image is loaded.
+- Change the pin toggle so it freezes the view exactly as it is drawn instead of re-fitting the image: panning and zooming stay available while pinned, and the pinned view survives canvas resizes.
+- Keep routing the plain wheel to the workflow canvas while pinned, as before.
+
 ## 0.6.9
 
 - Place the Clear button directly after the swap width/height control in Crop & Blend; in Mask mode it is the only visible button of that bar and stays at the bottom left of the canvas.

pyproject.toml

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

web/editor.js

@@ -95,6 +95,7 @@ export class InlineMaskEditor {
         this.root.append(head);
         const files = el("div", "dd-row dd-files");
         this.loadButton = this.button(files, "↑", T("Upload an image, or drop / paste one"), () => this.imageInput.click(), "dd-primary");
+        this.downloadButton = this.button(files, "↓", T("Download the source image"), () => this.downloadSource(), "dd-primary");
         this.filename = el("span", "dd-filename", T("Drop an image onto the canvas"));
         files.append(this.filename);
         this.root.append(files);
@@ -174,7 +175,7 @@ export class InlineMaskEditor {
         this.zoomLabel = el("span", "dd-zoom", "100%");
         footer.append(this.zoomLabel);
         this.fitButton = this.button(footer, "⛶", 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 = this.button(footer, "", T("Pin the current view"), 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.
@@ -201,6 +202,7 @@ export class InlineMaskEditor {
             actions.addEventListener("keydown", event => this.keydown(event));
             this.loadButton.after(this.fitButton);
             this.fitButton.after(this.keepButton);
+            this.loadButton.after(this.downloadButton);
             // These are the original live controls; the sampler mounts this
             // same DOM tree so brush state and callbacks are preserved.
         }
@@ -225,14 +227,20 @@ export class InlineMaskEditor {
     status(message, error = false) {
         this.message.textContent = message;
         this.message.classList.toggle("dd-error", error);
-        this.message.hidden = !error;
+        // Errors and deliberate notices stay visible; transient progress lines hide.
+        this.message.hidden = !message || (!error && !this.notice);
+        this.notice = false;
     }
 
+    notice(message) { this.notice = true; this.status(message); }
+
     async upload(file) {
         if (file.size > 64 * 1024 * 1024) { this.status(T("File is too large (max 64 MB)"), true); return; }
         try {
             this.status(T("Loading image…"));
-            await this.options.onUpload?.(file);
+            // Keep the painted mask when a new source replaces the current one,
+            // the same way adopting a result does. A first upload starts empty.
+            await this.options.onUpload?.(file, { preserveMask: !!this.image });
         } catch (error) { this.status(error.message, true); }
     }
 
@@ -285,10 +293,10 @@ export class InlineMaskEditor {
     async replaceSource(url, name = "") {
         const version = ++this.loadVersion;
         const image = await loadImage(url);
-        if (version !== this.loadVersion || this.destroyed) return;
-        if (image.width !== this.mask.width || image.height !== this.mask.height) {
-            throw new Error(T("The result size must match the source image to preserve the mask"));
-        }
+        if (version !== this.loadVersion || this.destroyed) return false;
+        // A different size cannot keep the painted mask; report it so the caller
+        // can fall back to a fresh load instead of failing the upload.
+        if (image.width !== this.mask.width || image.height !== this.mask.height) return false;
         // Replacing only the source preserves mask pixels, the base snapshot,
         // command history, redo history, active strokes and the current view.
         this.flush();
@@ -296,6 +304,7 @@ export class InlineMaskEditor {
         this.filename.textContent = name || T("Embedded image");
         this.filename.title = this.filename.textContent;
         this.updateButtons(); this.schedule();
+        return true;
     }
 
     importMask(ctx, image) {
@@ -325,6 +334,7 @@ export class InlineMaskEditor {
     updateButtons() {
         this.keepButton?.classList.toggle("dd-active", !!this.keepFit);
         this.keepButton?.setAttribute("aria-pressed", String(!!this.keepFit));
+        if (this.downloadButton) this.downloadButton.disabled = !this.image;
         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);
@@ -341,7 +351,6 @@ 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;
@@ -360,7 +369,6 @@ export class InlineMaskEditor {
     pointerDown(event) {
         if (event.button === 2) { event.preventDefault(); event.stopPropagation(); return; }
         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;
@@ -556,11 +564,25 @@ export class InlineMaskEditor {
         const link = el("a"); link.download = "adachi-mask.png"; link.href = this.flush(); link.click();
     }
 
+    downloadSource() {
+        if (!this.image) return;
+        const out = makeCanvas();
+        out.width = this.image.naturalWidth || this.image.width;
+        out.height = this.image.naturalHeight || this.image.height;
+        out.getContext("2d").drawImage(this.image, 0, 0);
+        const label = String(this.filename.textContent || "").split(/[\\/]/).pop().replace(/\.[^.]+$/, "");
+        const link = el("a");
+        link.download = `${label || "adachi-source"}.png`;
+        link.href = out.toDataURL("image/png");
+        link.click();
+        out.width = out.height = 0;
+    }
+
     fit() { this.zoom = 1; this.pan = { x: 0, y: 0 }; this.schedule(); }
 
     setKeepFit(enabled, notify = true) {
+        // Pin freezes the view exactly as drawn; it must not re-fit the image.
         this.keepFit = !!enabled;
-        if (this.keepFit) this.fit();
         this.updateButtons(); this.schedule();
         if (notify) this.options.onKeepFit?.(this.keepFit);
     }

web/i18n.js

@@ -111,6 +111,8 @@ const ZH = {
   "Mask": "蒙版",
   "Fit": "适应",
   "Keep": "保持",
+  "Pin the current view": "固定当前视图",
+  "Download the source image": "下载原图",
   "Upload": "上传",
   "Fit the image to the canvas": "适应画布",
   "File is too large (max 64 MB)": "图片文件不能超过 64 MB",
@@ -122,8 +124,8 @@ const ZH = {
   // inline_inpaint.js
   "The inline mask node was removed": "内联蒙版节点已移除",
   "Adopted the result as the new source image; the mask and undo history were preserved": "已采用重绘结果作为新原图，蒙版与撤销记录已保留",
-  "The result size must match the source image to preserve the mask": "为保留蒙版，重绘结果尺寸必须与原图一致",
-  "Wait for the source image to finish loading before adopting a result": "请等待原图加载完成后再采用结果",
+  "The new image has a different size, so the mask was reset": "新图尺寸与原图不同，蒙版已重置",
+  "Wait for the current image to finish loading": "请等待当前图片加载完成",
   "Drag to resize canvas height": "上下拖动调整画布高度",
   "Resize canvas height": "调整画布高度",
   "Upload failed": "上传失败",

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.6.7";
+import { InlineMaskEditor } from "./editor.js?v=0.7.1";
 import { installInpaintWorkbench } from "./inpaint_node.js?v=0.6.1";
 import { bindWidgetToNodeWidth } from "./widget_layout.js?v=0.5.5";
 import { routeWheelOutsideImage } from "./wheel_routing.js";
@@ -132,7 +132,7 @@ app.registerExtension({
                 onImage() { if (!restoring || !node.properties.adachi_compact_ui) fitNodeToImage(); },
                 onGraphWheel: event => app.canvas?.processMouseWheel(event),
                 async onUpload(file, { preserveMask = false, preserveCrop = false } = {}) {
-                    if (preserveMask && editor.image && !editor.ready) throw new Error(T("Wait for the source image to finish loading before adopting a result"));
+                    if (preserveMask && editor.image && !editor.ready) throw new Error(T("Wait for the current image to finish loading"));
                     const version = ++uploadVersion;
                     const body = new FormData();
                     body.append("image", file, file.name);
@@ -145,14 +145,16 @@ app.registerExtension({
                     const name = uploaded.subfolder ? `${uploaded.subfolder}/${uploaded.name}` : uploaded.name;
                     restoring = false;
                     crop?.activate("mask");
-                    if (preserveMask && editor.ready) await editor.replaceSource(imageUrl(name), file.name);
+                    let kept = false;
+                    if (preserveMask && editor.ready) kept = await editor.replaceSource(imageUrl(name), file.name);
                     else await editor.setImage(imageUrl(name), "", file.name);
                     if (version !== uploadVersion || editor.destroyed) return;
                     imageWidget.value = name;
-                    maskWidget.value = preserveMask ? editor.flush() : "";
+                    maskWidget.value = kept ? editor.flush() : "";
                     sourceWidget.value = editor.embed.checked ? editor.sourceData() : "";
                     if (!preserveCrop) crop?.reset();
                     await beforeModeChange();
+                    if (preserveMask && !kept) editor.notice(T("The new image has a different size, so the mask was reset"));
                     markChanged();
                 },
                 onEmbed(enabled) {