Add inline inpaint controls and refine comparison and wheel behavior

README.md

@@ -22,7 +22,7 @@ powershell -ExecutionPolicy Bypass -File .\install.ps1 -ComfyUIPath "D:\ComfyUI_
 
 1. 将 `examples/01-inline-inpaint.json` 拖入 ComfyUI，选择自己的 checkpoint 喵。
 2. 在 **内联蒙版 / Inline Mask** 节点载入、拖放或粘贴图片，直接在画布上涂抹需要重绘的部分喵。
-3. 修改正负提示词，在 **WebUI 局部重绘 / WebUI Inpaint** 中选择 `area`、采样分辨率、采样器与重绘幅度，然后运行喵。
+3. 修改正负提示词，在 **内联蒙版** 图片下方选择重绘范围、采样分辨率、采样器与重绘幅度，然后运行喵。
 4. `image` 输出回贴后的完整原图，`crop` 输出实际采样画布，`mask` 输出该采样画布对应的蒙版喵。
 
 **白色蒙版重绘，黑色保护；画布中橙色代表绘制区域** 喵。
@@ -62,12 +62,22 @@ powershell -ExecutionPolicy Bypass -File .\install.ps1 -ComfyUIPath "D:\ComfyUI_
 支持画笔压力和软笔刷；鼠标使用固定压力喵。
 笔径、硬度、笔触和叠加四个滑条位于图片编辑区下方喵。
 图片上传一次，之后每笔在浏览器内更新蒙版，并在工作流及运行参数中保存 PNG 数据，无需每画一笔都保存、重新加载磁盘文件喵。
+鼠标位于图片区域时滚轮缩放图片；位于工具栏、按钮、滑条或参数面板时，滚轮遵循 ComfyUI 的画布导航设置喵。
+从 ComfyUI 画布开始的连续滚轮手势移入图片时，继续导航外部画布；停下后再在图片里滚动才缩放图片喵。
 超大图仍会消耗浏览器内存，PNG 编码耗时取决于分辨率和设备，不能保证所有图像都瞬间完成喵。
 
+## 内联重绘参数
+
+内联蒙版连接 **WebUI 局部重绘** 的 `image` 输入后，采样参数自动移到内联蒙版底部，直接控制原采样节点的真实参数喵。
+宽度和高度各占一行，支持滑条及数值输入；重绘幅度也使用滑条，点击 **使用原图宽高** 可填入原图尺寸，按采样要求取最近的 8 的倍数喵。
+蒙版内外、填充、重绘范围、采样器、调度器、步数、CFG 和种子直接显示，蒙版处理、批量、Refiner 切换等位于 **蒙版、批量与高级设置** 中喵。
+如果一个内联蒙版连接多个采样节点，可在参数面板上方切换控制目标；断开连接后，采样节点恢复显示自身参数喵。
+外部连线控制的参数会禁用对应面板控件；模块化工作流仍使用各独立节点的参数喵。
+
 ## 图像对比与连续重绘
 
 添加 **图像对比 / Image Compare** 节点，将内联蒙版的 `image` 接到 `original`，最终完整重绘图 `image` 接到 `result`，运行后即可对比喵。
-鼠标移动时，竖线左边显示原图、右边显示重绘结果，普通滚轮缩放图片；批量结果可在上方选择喵。
+鼠标移入图片时，细竖线左边显示重绘结果、右边显示原图；移出后隐藏分割线，完整显示重绘结果，普通滚轮缩放图片；批量结果可在上方选择喵。
 满意后点击 **采用此结果**，插件会把当前选中的结果上传为新的原图，回填到上游内联蒙版，并清空旧蒙版，随后可以继续涂抹下一处喵。
 原图连接经过中间 IMAGE 节点时会向上寻找内联蒙版；若存在多个目标，可以在“回填到”中明确选择喵。
 回填只在点击按钮时发生，不会自动开始下一轮生成；`image` 输出仍传递整个结果批次，可接保存图像喵。
@@ -139,7 +149,7 @@ The editor supports brush/eraser, rectangles, freehand lasso, undo/redo, invert,
 Paint with the left button; hold Alt or use the right button to erase temporarily, use Ctrl+wheel for brush size, zoom with the plain wheel, and pan while holding Space喵.
 Enable **Embed source in workflow** before saving JSON to share the source image along with its mask喵.
 
-The **Image Compare** node takes `original` from Inline Mask and `result` from the final full-size generated image; hover to compare original on the left and result on the right喵.
+The **Image Compare** node takes `original` from Inline Mask and `result` from the final full-size generated image; hover to compare result on the left and original on the right, and leave the picture to see the full result喵.
 Select a batch result if needed, then click **采用此结果 / Adopt this result** to upload it as the upstream editor's new source and clear the old mask for another pass喵.
 
 The all-in-one node adds original/color-fill/noise/zero-latent modes, native ComfyUI sampling, per-image batch variants, dedicated inpaint conditioning and an optional compatible Refiner stage喵.

ROLLBACK.md

@@ -0,0 +1,20 @@
+# Git 版本与回滚
+
+`v0.2.0` 是本次界面调整前的回滚点，`v0.3.0` 包含内联参数面板、左右对比调整和滚轮路由修复喵。
+本机安装目录与源码目录均保留 Git 历史；普通发布 ZIP 不含 `.git`，可另用 Git bundle 恢复历史喵。
+
+在插件目录运行以下命令，先确认没有未保存改动，再切换版本喵。
+
+```powershell
+git status --short
+git switch --detach v0.2.0
+```
+
+恢复本版使用以下命令喵。
+
+```powershell
+git switch --detach v0.3.0
+```
+
+切换后重启 ComfyUI 并在浏览器按 `Ctrl+F5` 刷新喵。
+已有本地修改时请先提交或备份，避免覆盖自己的改动喵。

VERIFICATION.md

@@ -13,6 +13,10 @@
 - 0.2.0 新增 Alt 临时擦除和图像对比节点，后端 18 项测试通过；真实鼠标/键盘操作确认松开 Alt 恢复原工具喵。
 - 0.2.0 在经典节点与 Nodes 2.0 的实际 API 队列验证左右像素、鼠标分割线、滚轮缩放、Ctrl+滚轮笔径、批量结果选择、多编辑器上游定位、点击回填、旧蒙版清空和保存后重新打开，无插件脚本错误喵。
 - 两种节点模式中的图片滚轮事件均不会误触发整张工作流缩放，回填结果保存在 input 目录并可嵌入工作流喵。
+- 0.3.0 在经典节点与 Nodes 2.0 验证底部内联参数控制真实采样节点、宽高分行、原图尺寸填写、工作流重开不重复增高、断开连接恢复原参数，以及 Nodes 2.0 原节点参数行实际隐藏喵。
+- 0.3.0 验证工具栏和参数区域滚轮传递给外部画布，连续外部滚轮手势进入图片后不改变图片缩放，停下后的图片滚轮只缩放图片喵。
+- 0.3.0 对比节点实测左侧为结果、右侧为原图，移出后完整显示结果；分割线为一个物理像素，移除了圆形手柄、角标和底部说明，回填与批量选择仍通过喵。
+- 0.3.0 画笔浏览器交互 15 组通过，两种渲染模式的纵向拉伸和保存恢复通过，两个更新后的示例工作流连线及执行参数验证通过喵。
 
 采样路径还使用本机 ComfyUI 的真实 common_ksampler/KSampler 函数进行了噪声调度衔接检查；尚未加载实际 checkpoint 测试 GPU 生成质量或所有模型家族，不能将 CPU/接口测试视为模型效果验证喵。
 

backend.py

@@ -525,8 +525,8 @@ class AdachiImageCompare:
     @classmethod
     def INPUT_TYPES(cls):
         return {"required": {
-            "original": ("IMAGE", {"tooltip": "左侧原图，连接内联蒙版的 image / Original image shown on the left."}),
-            "result": ("IMAGE", {"tooltip": "右侧完整重绘图，请连接最终 image 而非 crop / Full-size generated image shown on the right; use image, not crop."}),
+            "original": ("IMAGE", {"tooltip": "右侧原图，连接内联蒙版的 image / Original image shown on the right."}),
+            "result": ("IMAGE", {"tooltip": "左侧完整重绘图，请连接最终 image 而非 crop / Full-size generated image shown on the left; use image, not crop."}),
         }}
 
     RETURN_TYPES = ("IMAGE",)

examples/01-inline-inpaint.json

@@ -13,7 +13,7 @@
       ],
       "size": [
         660,
-        700
+        1276
       ],
       "flags": {},
       "order": 0,
@@ -67,7 +67,8 @@
         }
       ],
       "properties": {
-        "Node name for S&R": "AdachiInlineMask"
+        "Node name for S&R": "AdachiInlineMask",
+        "adachi_inline_parameters": true
       },
       "widgets_values": [
         "",
@@ -84,7 +85,7 @@
       ],
       "size": [
         340,
-        110
+        130.65625
       ],
       "flags": {},
       "order": 1,
@@ -241,7 +242,7 @@
       ],
       "size": [
         430,
-        780
+        244
       ],
       "flags": {},
       "order": 5,
@@ -635,7 +636,7 @@
       "outputs": [],
       "properties": {},
       "widgets_values": [
-        "安达工作台 / Adachi Workbench\n1. 选择自己的 checkpoint 喵\n2. 在左侧节点载入原图并直接涂抹喵\n3. only_masked = 蒙版区域放大采样，whole_image = 整图采样喵\n4. width/height 是采样分辨率，最终 image 回贴为原图尺寸喵\n分享时勾选「原图嵌入工作流」喵"
+        "安达工作台 / Adachi Workbench\n1. 选择自己的 checkpoint 喵\n2. 在左侧节点载入原图并直接涂抹喵\n3. 在内联蒙版底部调整重绘参数喵\n4. width/height 是采样分辨率，最终 image 回贴为原图尺寸喵\n分享时勾选「原图嵌入工作流」喵"
       ],
       "color": "#432",
       "bgcolor": "#653"

examples/02-modular-inpaint.json

@@ -445,7 +445,8 @@
       ],
       "properties": {
         "Node name for S&R": "VAEEncode"
-      }
+      },
+      "widgets_values": []
     },
     {
       "id": 7,
@@ -487,7 +488,8 @@
       ],
       "properties": {
         "Node name for S&R": "SetLatentNoiseMask"
-      }
+      },
+      "widgets_values": []
     },
     {
       "id": 8,
@@ -646,7 +648,8 @@
       ],
       "properties": {
         "Node name for S&R": "VAEDecode"
-      }
+      },
+      "widgets_values": []
     },
     {
       "id": 10,
@@ -688,7 +691,8 @@
       ],
       "properties": {
         "Node name for S&R": "AdachiInpaintComposite"
-      }
+      },
+      "widgets_values": []
     },
     {
       "id": 11,

pyproject.toml

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

web/compare.js

@@ -1,4 +1,5 @@
 /* Original hover-comparison UI, MIT licensed. */
+import { registerImageWheel } from "./wheel_gestures.js";
 const element = (tag, className, text) => {
     const node = document.createElement(tag);
     if (className) node.className = className;
@@ -20,8 +21,7 @@ export class ImageCompareView {
         this.zoom = 1; this.pan = { x: 0, y: 0 }; this.split = .5;
         this.version = 0; this.ready = false;
         const head = element("div", "dd-head");
-        head.append(element("span", "dd-brand", "ADACHI / COMPARE"));
-        this.dimensionsLabel = element("span", "dd-dimensions", "原图 / 重绘结果"); head.append(this.dimensionsLabel);
+        this.dimensionsLabel = element("span", "dd-dimensions"); head.append(this.dimensionsLabel);
         const toolbar = element("div", "dd-row dd-compare-toolbar");
         toolbar.append(element("span", "dd-compare-label", "结果"));
         this.resultSelect = element("select"); this.resultSelect.setAttribute("aria-label", "选择重绘结果 / Choose result");
@@ -32,11 +32,11 @@ export class ImageCompareView {
         fit.onclick = () => { this.zoom = 1; this.pan = { x: 0, y: 0 }; 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", "左原图、右重绘结果，移动鼠标竖线对比 / Original left, result right; hover to compare");
+        this.canvas.setAttribute("aria-label", "左重绘结果、右原图，移动鼠标竖线对比 / 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);
-        const captions = element("div", "dd-compare-captions");
-        captions.append(element("span", "", "原图"), element("span", "", "重绘结果")); this.stage.append(captions);
         this.empty = element("div", "dd-empty", "连接原图与重绘结果，然后运行工作流"); this.stage.append(this.empty);
         const adoption = element("div", "dd-row dd-adoption");
         adoption.append(element("span", "dd-compare-label", "回填到"));
@@ -47,6 +47,7 @@ export class ImageCompareView {
         this.adoptButton = element("button", "dd-primary", "采用此结果"); this.adoptButton.type = "button";
         this.adoptButton.onclick = () => this.adopt(); adoption.append(this.adoptButton);
         this.message = element("div", "dd-status", "鼠标移动竖线对比 · 滚轮缩放 · 中键拖动");
+        this.message.hidden = true; this.message.setAttribute("role", "alert");
         this.root.append(head, toolbar, this.stage, adoption, this.message);
         this.canvas.addEventListener("pointermove", event => this.move(event));
         this.canvas.addEventListener("pointerdown", event => {
@@ -63,9 +64,7 @@ export class ImageCompareView {
             if (this.canvas.hasPointerCapture(id)) this.canvas.releasePointerCapture(id);
         };
         for (const name of ["pointerup", "pointercancel", "lostpointercapture"]) this.canvas.addEventListener(name, finish);
-        this.canvas.addEventListener("wheel", event => this.wheel(event), { passive: false });
-        this.captureWheel = event => { if (event.target === this.canvas) this.wheel(event); };
-        window.addEventListener("wheel", this.captureWheel, { capture: true, passive: false });
+        this.stopWheelCapture = registerImageWheel(this.canvas, () => this.ready, event => this.wheel(event), options.onGraphWheel);
         this.canvas.addEventListener("keydown", event => {
             if (event.code === "Space") { event.preventDefault(); event.stopPropagation(); this.space = true; }
             else if (["ArrowLeft", "ArrowRight"].includes(event.key)) {
@@ -79,7 +78,7 @@ export class ImageCompareView {
         this.refreshTargets(); this.updateButton();
     }
 
-    status(text, error = false) { this.message.textContent = text; this.message.classList.toggle("dd-error", error); }
+    status(text, error = false) { this.message.textContent = text; this.message.classList.toggle("dd-error", error); this.message.hidden = !error; }
 
     refreshTargets() {
         const selected = this.targetSelect.value;
@@ -94,7 +93,7 @@ export class ImageCompareView {
         this.updateButton();
     }
 
-    updateButton() { this.adoptButton.disabled = !this.ready || !this.targetSelect.value || !!this.busy; }
+    updateButton() { this.adoptButton.disabled = !this.ready || !this.targetSelect.value || !!this.busy; this.adoptButton.textContent = this.busy ? "采用中…" : "采用此结果"; }
 
     async setData(data, index = this.index) {
         this.originals = Array.isArray(data?.originals) ? data.originals : [];
@@ -122,7 +121,7 @@ export class ImageCompareView {
             this.before = images[0]; this.after = images[1];
             this.ready = true; this.empty.hidden = true;
             this.dimensionsLabel.textContent = `${this.before.width} × ${this.before.height}`;
-            this.status("左原图 / 右重绘 · 滚轮缩放 · 满意后点击采用此结果");
+            this.status("");
             this.updateButton(); this.schedule();
         } catch (error) { if (version === this.version && !this.destroyed) this.status(error.message, true); }
     }
@@ -141,6 +140,11 @@ 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 };
     }
@@ -160,6 +164,7 @@ export class ImageCompareView {
 
     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;
@@ -179,20 +184,20 @@ export class ImageCompareView {
         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.before, 0, 0);
+        ctx.drawImage(this.after, 0, 0, this.before.width, this.before.height);
+        if (!this.hovered) return;
         const split = this.split * this.before.width;
         ctx.save(); ctx.beginPath(); ctx.rect(split, 0, this.before.width - split, this.before.height); ctx.clip();
-        ctx.drawImage(this.after, 0, 0, this.before.width, this.before.height); ctx.restore();
-        ctx.beginPath(); ctx.moveTo(split, 0); ctx.lineTo(split, this.before.height);
-        ctx.strokeStyle = "#141820"; ctx.lineWidth = 3 / t.scale; ctx.stroke();
-        ctx.strokeStyle = "#ffe0b8"; ctx.lineWidth = 1 / t.scale; ctx.stroke();
-        ctx.beginPath(); ctx.arc(split, this.before.height / 2, 7 / t.scale, 0, Math.PI * 2);
-        ctx.fillStyle = "#272c35"; ctx.fill(); ctx.stroke();
+        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();
     }
 
     destroy() {
         this.destroyed = true; ++this.version; cancelAnimationFrame(this.frame); this.observer.disconnect();
-        window.removeEventListener("wheel", this.captureWheel, true);
+        this.stopWheelCapture();
         this.before = this.after = null; this.canvas.width = this.canvas.height = 0; this.root.remove();
     }
 }

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 { routeWheelOutsideImage } from "./wheel_routing.js";
 
 function viewUrl(image) {
     const type = ["input", "output", "temp"].includes(image?.type) ? image.type : "temp";
@@ -34,6 +35,7 @@ app.registerExtension({
             const value = created?.apply(this, arguments), node = this;
             const compare = new ImageCompareView({
                 resolveUrl: viewUrl,
+                onGraphWheel: event => app.canvas?.processMouseWheel(event),
                 getTargets: () => targets(node),
                 onSelect: index => { node.properties.adachi_result_index = index; },
                 async onAdopt(id, image) {
@@ -47,6 +49,7 @@ app.registerExtension({
                 },
             });
             node.adachiCompare = compare;
+            const stopWheelRouting = routeWheelOutsideImage(compare.root, compare.canvas, () => compare.ready);
             const widget = node.addDOMWidget("adachi_compare", "adachi_compare_view", compare.root, {
                 serialize: false, hideOnZoom: false, getMinHeight: () => 420, getMaxHeight: () => 4096,
             });
@@ -66,7 +69,7 @@ app.registerExtension({
                 return result;
             };
             const removed = node.onRemoved;
-            node.onRemoved = function () { compare.destroy(); return removed?.apply(this, arguments); };
+            node.onRemoved = function () { stopWheelRouting(); compare.destroy(); return removed?.apply(this, arguments); };
             node.setSize([Math.max(550, node.size[0]), Math.max(550, node.size[1])]);
             return value;
         };

web/editor.css

@@ -6,7 +6,7 @@
 }
 .dd-inpaint *, .dd-inpaint *::before, .dd-inpaint *::after { box-sizing: border-box; }
 .dd-inpaint:focus-within { border-color: #9f7950; }
-.dd-inpaint .dd-head { display: flex; flex-wrap: wrap; gap: 4px 14px; justify-content: space-between; padding: 11px 12px 6px; align-items: center; }
+.dd-inpaint .dd-head { display: flex; flex-wrap: wrap; gap: 4px 14px; justify-content: flex-end; padding: 6px 12px 2px; align-items: center; }
 .dd-inpaint .dd-brand { font-size: 11px; letter-spacing: 1.5px; font-weight: 700; color: var(--dd-accent); }
 .dd-inpaint .dd-dimensions, .dd-inpaint .dd-zoom { font-size: 11px; color: var(--dd-muted); font-variant-numeric: tabular-nums; }
 .dd-inpaint .dd-row { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; padding: 5px 10px; }
@@ -41,6 +41,28 @@
 .dd-inpaint .dd-embed input { accent-color: #e9ab68; margin: 0; }
 .dd-inpaint .dd-status { padding: 5px 11px 8px; color: var(--dd-muted); font-size: 10px; min-height: 27px; overflow-wrap: anywhere; }
 .dd-inpaint .dd-error { color: #ff9c92; }
+.dd-inpaint [hidden] { display: none !important; }
+.dd-inpaint .dd-parameters { flex: 0 0 auto; padding: 10px 12px 8px; border-top: 1px solid var(--dd-line); }
+.dd-inpaint .dd-param-header { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding-bottom: 7px; }
+.dd-inpaint .dd-param-header strong { font-weight: 500; font-size: 12px; }
+.dd-inpaint .dd-param-placeholder { color: var(--dd-muted); padding-block: 4px; font-size: 11px; }
+.dd-inpaint .dd-param-body { display: flex; flex-direction: column; gap: 8px; }
+.dd-inpaint .dd-param-field { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
+.dd-inpaint .dd-param-label { color: var(--dd-muted); font-size: 11px; }
+.dd-inpaint .dd-param-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
+.dd-inpaint .dd-param-pills { display: flex; flex-wrap: wrap; gap: 4px; }
+.dd-inpaint .dd-param-pills button { flex: 1; font-size: 11px; padding: 5px 7px; }
+.dd-inpaint .dd-param-number-label { display: flex; align-items: center; justify-content: space-between; gap: 5px; color: var(--dd-muted); font-size: 11px; }
+.dd-inpaint .dd-param-field input[type="number"] { width: 86px; min-width: 0; padding: 4px 5px; border: 1px solid var(--dd-line); border-radius: 4px; background: var(--dd-panel); color: var(--dd-text); font: inherit; font-variant-numeric: tabular-nums; }
+.dd-inpaint .dd-param-field select, .dd-inpaint .dd-param-header select { min-width: 0; max-width: 100%; color: var(--dd-text); background: var(--dd-panel); border: 1px solid var(--dd-line); border-radius: 4px; padding: 5px; font: inherit; }
+.dd-inpaint .dd-param-field:has(input[aria-label="随机种子"]) input { width: 130px; }
+.dd-inpaint .dd-param-resolution { display: flex; justify-content: space-between; align-items: center; gap: 10px; }
+.dd-inpaint .dd-param-resolution button { font-size: 11px; }
+.dd-inpaint .dd-param-advanced { border-top: 1px solid var(--dd-line); padding-top: 7px; }
+.dd-inpaint .dd-param-advanced summary { color: var(--dd-muted); cursor: pointer; font-size: 11px; }
+.dd-inpaint .dd-param-advanced-body { display: flex; flex-direction: column; gap: 8px; padding-top: 10px; }
+.dd-inpaint .dd-param-toggle { display: flex; gap: 6px; align-items: center; color: var(--dd-muted); font-size: 11px; }
+.dd-inpaint .dd-param-toggle input { margin: 0; accent-color: #e9ab68; }
 .dd-inpaint .dd-resize-handle { flex: 0 0 18px; display: flex; align-items: center; justify-content: center; color: var(--dd-muted); background: var(--dd-panel); border-top: 1px solid var(--dd-line); cursor: ns-resize; touch-action: none; font-size: 14px; line-height: 1; }
 .dd-inpaint .dd-resize-handle:hover, .dd-inpaint .dd-resize-handle:focus-visible { color: var(--dd-accent); background: #39424e; outline: none; }
 .dd-comparer .dd-compare-toolbar, .dd-comparer .dd-adoption { flex-wrap: nowrap; }

web/editor.js

@@ -1,4 +1,5 @@
 /* Original implementation, MIT licensed. No WebUI source is bundled. */
+import { registerImageWheel } from "./wheel_gestures.js";
 const el = (tag, cls, text) => {
     const node = document.createElement(tag);
     if (cls) node.className = cls;
@@ -40,8 +41,7 @@ export class InlineMaskEditor {
         this.observer.observe(this.stage);
         // Nodes 2.0 captures wheel events before widget handlers. Route only
         // this canvas at window capture so image gestures stay inside it.
-        this.captureWheel = event => { if (event.target === this.canvas) this.wheel(event); };
-        window.addEventListener("wheel", this.captureWheel, { capture: true, passive: false });
+        this.stopWheelCapture = registerImageWheel(this.canvas, () => this.ready, event => this.wheel(event), options.onGraphWheel);
         this.root.addEventListener("keydown", (event) => this.keydown(event));
         this.root.addEventListener("keyup", (event) => {
             if (event.code === "Space") { this.space = false; this.stage.classList.remove("dd-pan"); }
@@ -66,7 +66,6 @@ export class InlineMaskEditor {
 
     build() {
         const head = el("div", "dd-head");
-        head.append(el("span", "dd-brand", "ADACHI WORKBENCH"));
         this.sizeLabel = el("span", "dd-dimensions", "内联蒙版 · INLINE MASK");
         head.append(this.sizeLabel);
         this.root.append(head);
@@ -123,7 +122,6 @@ export class InlineMaskEditor {
         this.canvas.addEventListener("pointercancel", event => this.pointerUp(event));
         this.canvas.addEventListener("lostpointercapture", event => this.pointerUp(event));
         this.canvas.addEventListener("pointerleave", () => { this.cursor = null; this.schedule(); });
-        this.canvas.addEventListener("wheel", event => this.wheel(event), { passive: false });
         this.stage.addEventListener("dragover", event => { event.preventDefault(); event.stopPropagation(); this.stage.classList.add("dd-drop"); });
         this.stage.addEventListener("dragleave", () => this.stage.classList.remove("dd-drop"));
         this.stage.addEventListener("drop", event => {
@@ -158,6 +156,8 @@ export class InlineMaskEditor {
         embedRow.append(this.embed, document.createTextNode("原图嵌入工作流 · 分享时无需另传原图"));
         this.root.append(embedRow);
         this.message = el("div", "dd-status", "Alt 临时擦除 · Ctrl+滚轮调笔径 · 滚轮缩放 / 空格拖动");
+        this.message.hidden = true;
+        this.message.setAttribute("role", "alert");
         this.root.append(this.message);
         this.setTool("brush");
         this.updateButtons();
@@ -180,6 +180,7 @@ export class InlineMaskEditor {
     status(message, error = false) {
         this.message.textContent = message;
         this.message.classList.toggle("dd-error", error);
+        this.message.hidden = !error;
     }
 
     async upload(file) {
@@ -227,6 +228,7 @@ export class InlineMaskEditor {
             this.lastMask = maskData;
             this.fit();
             this.updateButtons();
+            this.options.onImage?.(image);
             this.status("橙色为绘制蒙版 · Alt 临时擦除 · Ctrl+滚轮调笔径");
         } catch (error) {
             if (version === this.loadVersion && !this.destroyed) this.status(error.message, true);
@@ -274,6 +276,11 @@ export class InlineMaskEditor {
 
     dimensions() {
         const r = this.canvas.getBoundingClientRect();
+        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;
+        }
+        this.viewport = { width: r.width, height: r.height };
         const scale = this.image ? Math.min(r.width / this.image.width, r.height / this.image.height) * this.zoom : 1;
         return { width: r.width, height: r.height, scale, x: (r.width - (this.image?.width || 0) * scale) / 2 + this.pan.x, y: (r.height - (this.image?.height || 0) * scale) / 2 + this.pan.y };
     }
@@ -541,7 +548,7 @@ export class InlineMaskEditor {
     destroy() {
         this.destroyed = true; ++this.loadVersion;
         cancelAnimationFrame(this.frame); this.observer.disconnect();
-        window.removeEventListener("wheel", this.captureWheel, true);
+        this.stopWheelCapture();
         for (const canvas of [this.mask, this.baseMask, this.overlay, this.canvas]) canvas.width = canvas.height = 0;
         this.history = []; this.future = []; this.image = null; this.root.remove();
     }

web/inline_inpaint.js

@@ -1,6 +1,9 @@
 import { app } from "../../scripts/app.js";
 import { api } from "../../scripts/api.js";
 import { InlineMaskEditor } from "./editor.js";
+import { InpaintParameterPanel } from "./inpaint_panel.js";
+import { connectedSamplers, relocateWidgets } from "./parameter_bridge.js";
+import { routeWheelOutsideImage } from "./wheel_routing.js";
 
 const styleId = "adachi-inpaint-style";
 if (!document.getElementById(styleId)) {
@@ -56,6 +59,7 @@ app.registerExtension({
             let restoring = false;
             let restoreFrame = 0;
             let uploadVersion = 0;
+            let panelBaseHeight = null;
             const restore = async () => {
                 const embedded = sourceWidget?.value;
                 const filename = imageWidget?.value;
@@ -69,6 +73,8 @@ app.registerExtension({
             const editor = new InlineMaskEditor({
                 onChange(data) { if (maskWidget && !restoring) maskWidget.value = data; },
                 onDirty() { markChanged(); },
+                onImage() { node.adachiParameters?.refresh(); },
+                onGraphWheel: event => app.canvas?.processMouseWheel(event),
                 async onUpload(file) {
                     const version = ++uploadVersion;
                     const body = new FormData();
@@ -94,6 +100,34 @@ app.registerExtension({
                 },
             });
             node.adachiEditor = editor;
+            const stopWheelRouting = routeWheelOutsideImage(editor.root, editor.canvas, () => editor.ready);
+            const panel = new InpaintParameterPanel({
+                getTargets: () => connectedSamplers(node),
+                getPreferred: () => node.properties.adachi_settings_target,
+                onPreferred: id => { node.properties.adachi_settings_target = id; markChanged(); },
+                getImage: () => editor.ready ? editor.image : null,
+                onTargetChange: (previous, next) => {
+                    if (next && !node.properties.adachi_inline_parameters) panelBaseHeight = node.size[1];
+                    relocateWidgets(node, previous, next);
+                },
+                onDirty: markChanged,
+                onHeight: () => {
+                    const parameters = node.adachiParameters;
+                    const panelHeight = parameters?.root.scrollHeight || 40;
+                    if (node.graph) {
+                        // Add the panel once when migrating an older workflow.
+                        // Reopening an already-migrated workflow must keep its saved size.
+                        const migrate = parameters?.target && panelHeight > 100 && !node.properties.adachi_inline_parameters;
+                        const migratedHeight = migrate ? (panelBaseHeight ?? node.size[1]) + Math.max(0, panelHeight - 40) : node.size[1];
+                        if (migrate) node.properties.adachi_inline_parameters = true;
+                        const height = Math.max(620 + panelHeight, migratedHeight);
+                        if (Math.abs(node.size[1] - height) > 1) node.setSize([node.size[0], height]);
+                    }
+                    editor.schedule();
+                },
+            });
+            node.adachiParameters = panel;
+            editor.root.append(panel.root);
             node.adachiUseResult = async file => {
                 if (editor.destroyed) throw new Error("内联蒙版节点已移除");
                 await editor.options.onUpload(file);
@@ -103,7 +137,7 @@ app.registerExtension({
             const domWidget = node.addDOMWidget("adachi_canvas", "adachi_inline_mask", editor.root, {
                 serialize: false,
                 hideOnZoom: false,
-                getMinHeight: () => 520,
+                getMinHeight: () => 520 + (panel.root.scrollHeight || 40),
                 getMaxHeight: () => 4096,
             });
             domWidget.serialize = false;
@@ -167,13 +201,19 @@ app.registerExtension({
             const previousConfigure = node.onConfigure;
             node.onConfigure = function () {
                 const configured = previousConfigure?.apply(this, arguments);
-                cancelAnimationFrame(restoreFrame); restoreFrame = requestAnimationFrame(restore);
+                cancelAnimationFrame(restoreFrame); restoreFrame = requestAnimationFrame(() => { restore(); panel.refresh(); });
                 return configured;
             };
+            const previousConnections = node.onConnectionsChange;
+            node.onConnectionsChange = function () {
+                const result = previousConnections?.apply(this, arguments);
+                queueMicrotask(() => { if (!editor.destroyed) panel.refresh(); });
+                return result;
+            };
             const previousImageCallback = imageWidget.callback;
             imageWidget.callback = function () { previousImageCallback?.apply(this, arguments); restore(); };
             const previousRemoved = node.onRemoved;
-            node.onRemoved = function () { cancelAnimationFrame(restoreFrame); editor.destroy(); return previousRemoved?.apply(this, arguments); };
+            node.onRemoved = function () { cancelAnimationFrame(restoreFrame); panel.destroy(); stopWheelRouting(); editor.destroy(); return previousRemoved?.apply(this, arguments); };
             node.setSize([Math.max(510, node.size[0]), Math.max(650, node.size[1])]);
             restoreFrame = requestAnimationFrame(restore);
             return result;

web/inpaint_panel.js

@@ -0,0 +1,146 @@
+/* Inline controls edit the connected sampler's real widgets, not a second set of parameters. */
+const el = (tag, cls, text) => { const e = document.createElement(tag); if (cls) e.className = cls; if (text) e.textContent = text; return e; };
+export const INPAINT_FIELDS = ["mask_mode", "fill", "area", "padding", "width", "height", "denoise", "sampler_name", "scheduler", "steps", "cfg", "seed", "control_after_generate", "batch_size", "mask_blur", "mask_grow", "resize_mode", "inpaint_model", "soft_edge", "soft_strength", "refiner_switch"];
+const choices = {
+    mask_mode: { inside: "蒙版内", outside: "蒙版外" },
+    fill: { fill: "填充", original: "原图像素", latent_noise: "潜空间噪声", latent_nothing: "空白潜空间" },
+    area: { whole_image: "整图重绘", only_masked: "仅蒙版区域" },
+    resize_mode: { stretch: "拉伸", crop: "居中裁剪", fill: "保比例填充" },
+    control_after_generate: { fixed: "固定种子", increment: "生成后递增", decrement: "生成后递减", randomize: "生成后随机" },
+};
+
+export class InpaintParameterPanel {
+    constructor(options) {
+        this.options = options; this.bindings = []; this.root = el("section", "dd-parameters");
+        const header = el("div", "dd-param-header"); header.append(el("strong", "", "局部重绘"));
+        this.targetSelect = el("select"); this.targetSelect.setAttribute("aria-label", "控制的局部重绘节点");
+        this.targetSelect.onchange = () => { this.preferred = this.targetSelect.value; this.options.onPreferred?.(this.preferred); this.refresh(); };
+        header.append(this.targetSelect); this.root.append(header);
+        this.placeholder = el("div", "dd-param-placeholder", "连接 WebUI 局部重绘节点后，在这里调整参数");
+        this.body = el("div", "dd-param-body"); this.root.append(this.placeholder, this.body);
+        this.observer = new ResizeObserver(() => options.onHeight?.()); this.observer.observe(this.root);
+        this.timer = setInterval(() => { if (this.root.isConnected && !document.hidden) this.refresh(); }, 350);
+        this.refresh();
+    }
+
+    refresh() {
+        const targets = this.options.getTargets?.() || [];
+        const preferred = this.preferred || this.options.getPreferred?.();
+        const next = targets.find(n => String(n.id) === String(preferred)) || targets[0] || null;
+        const signature = targets.map(n => `${n.id}:${n.title}`).join("|");
+        if (signature !== this.signature) {
+            this.signature = signature; this.targetSelect.replaceChildren();
+            for (const n of targets) { const option = el("option", "", `${n.title || "局部重绘"} #${n.id}`); option.value = String(n.id); this.targetSelect.append(option); }
+        }
+        this.targetSelect.hidden = targets.length < 2;
+        if (next) this.targetSelect.value = String(next.id);
+        if (next !== this.target) {
+            const previous = this.target; this.target = next;
+            this.options.onTargetChange?.(previous, next);
+            this.bindings = []; this.body.replaceChildren();
+            if (next) this.build();
+            this.options.onHeight?.();
+        }
+        this.placeholder.hidden = !!next; this.body.hidden = !next;
+        for (const binding of this.bindings) binding.sync();
+        if (this.sourceSize) this.sourceSize.disabled = !this.options.getImage?.();
+    }
+
+    widget(name) { return this.target?.widgets?.find(w => w.name === name); }
+    linked(name) { return this.target?.inputs?.some(input => input.name === name && input.link != null); }
+    write(name, value, commit = false) {
+        const widget = this.widget(name); if (!widget || this.linked(name)) return;
+        if (widget.value !== value) { widget.value = value; widget.callback?.(value); }
+        if (commit) this.options.onDirty?.();
+    }
+
+    enum(parent, name, label, pills = false) {
+        const widget = this.widget(name); if (!widget) return;
+        const wrapper = el("div", "dd-param-field"); wrapper.append(el("span", "dd-param-label", label));
+        let values = widget.options?.values; if (typeof values === "function") values = values();
+        if (!Array.isArray(values)) values = Object.keys(choices[name] || {});
+        if (!values.includes(widget.value)) values = [widget.value, ...values];
+        if (pills) {
+            const row = el("div", "dd-param-pills");
+            const buttons = values.map(value => {
+                const button = el("button", "", choices[name]?.[value] || String(value)); button.type = "button";
+                button.onclick = () => { this.write(name, value, true); this.refresh(); }; row.append(button); return { button, value };
+            });
+            wrapper.append(row); this.bindings.push({ sync: () => { for (const {button,value} of buttons) { button.classList.toggle("dd-active", widget.value === value); button.setAttribute("aria-pressed", String(widget.value === value)); button.disabled = this.linked(name); } } });
+        } else {
+            const select = el("select"); select.setAttribute("aria-label", label);
+            for (const value of values) { const option = el("option", "", choices[name]?.[value] || String(value)); option.value = value; select.append(option); }
+            select.onchange = () => this.write(name, select.value, true); wrapper.append(select);
+            this.bindings.push({ sync: () => { if (document.activeElement !== select) select.value = widget.value; select.disabled = this.linked(name); } });
+        }
+        parent.append(wrapper);
+    }
+
+    number(parent, name, label, { min, max, step = 1, range = false, rangeMax = max } = {}) {
+        const widget = this.widget(name); if (!widget) return;
+        min ??= widget.options?.min ?? 0; max ??= widget.options?.max ?? 1000000;
+        const wrapper = el("label", "dd-param-field"); const row = el("span", "dd-param-number-label"); row.append(el("span", "", label));
+        const input = el("input"); input.type = "number"; input.min = min; input.max = max; input.step = step; input.setAttribute("aria-label", label); row.append(input); wrapper.append(row);
+        let slider;
+        const update = raw => {
+            if (raw === "" || !Number.isFinite(Number(raw))) return;
+            const value = Math.max(min, Math.min(max, Math.round(Number(raw) / step) * step));
+            this.write(name, Number(value.toFixed(step < 1 ? Math.ceil(-Math.log10(step)) : 0)));
+            if (slider) slider.value = widget.value;
+        };
+        input.oninput = () => update(input.value); input.onchange = () => { update(input.value); input.value = widget.value; this.options.onDirty?.(); };
+        if (range) {
+            slider = el("input"); slider.type = "range"; slider.min = min; slider.max = rangeMax ?? max; slider.step = step; slider.setAttribute("aria-label", `${label}滑条`);
+            slider.oninput = () => { update(slider.value); input.value = widget.value; }; slider.onchange = () => this.options.onDirty?.(); wrapper.append(slider);
+        }
+        this.bindings.push({ sync: () => {
+            if (document.activeElement !== input) input.value = widget.value;
+            if (slider && document.activeElement !== slider) slider.value = widget.value;
+            input.disabled = this.linked(name); if (slider) slider.disabled = input.disabled;
+        } }); parent.append(wrapper);
+    }
+
+    toggle(parent, name, label) {
+        const widget = this.widget(name); if (!widget) return;
+        const wrapper = el("label", "dd-param-toggle"), input = el("input"); input.type = "checkbox";
+        input.onchange = () => this.write(name, input.checked, true); wrapper.append(input, document.createTextNode(label)); parent.append(wrapper);
+        this.bindings.push({ sync: () => { input.checked = !!widget.value; input.disabled = this.linked(name); } });
+    }
+
+    grid(parent) { const grid = el("div", "dd-param-grid"); parent.append(grid); return grid; }
+
+    build() {
+        this.enum(this.body, "mask_mode", "重绘区域", true);
+        this.enum(this.body, "fill", "重绘参考内容", true);
+        this.enum(this.body, "area", "重绘画布", true);
+        const resolution = el("div", "dd-param-resolution"); resolution.append(el("span", "dd-param-label", "采样分辨率"));
+        this.sourceSize = el("button", "", "使用原图宽高"); this.sourceSize.type = "button";
+        this.sourceSize.title = "填写当前原图宽高；按 8 的倍数对齐，并限制在 64–8192 像素";
+        this.sourceSize.onclick = () => {
+            const image = this.options.getImage?.(); if (!image) return;
+            const aligned = value => Math.max(64, Math.min(8192, Math.round(value / 8) * 8));
+            this.write("width", aligned(image.naturalWidth || image.width)); this.write("height", aligned(image.naturalHeight || image.height));
+            this.options.onDirty?.(); this.refresh();
+        };
+        resolution.append(this.sourceSize); this.body.append(resolution);
+        this.number(this.body, "width", "宽度", { min: 64, max: 8192, step: 8, range: true });
+        this.number(this.body, "height", "高度", { min: 64, max: 8192, step: 8, range: true });
+        this.number(this.body, "denoise", "重绘幅度", { min: 0, max: 1, step: .01, range: true });
+        const sampling = this.grid(this.body); this.enum(sampling, "sampler_name", "采样器"); this.enum(sampling, "scheduler", "调度器");
+        const scale = this.grid(this.body);
+        this.number(scale, "steps", "采样步数", { min: 1, max: 10000, range: true, rangeMax: 150 });
+        this.number(scale, "cfg", "提示词引导 CFG", { min: 0, max: 100, step: .1, range: true, rangeMax: 30 });
+        const seed = this.grid(this.body); this.number(seed, "seed", "随机种子", { min: 0, max: Number.MAX_SAFE_INTEGER }); this.enum(seed, "control_after_generate", "生成后种子");
+        const advanced = el("details", "dd-param-advanced"), summary = el("summary", "", "蒙版、批量与高级设置"); advanced.append(summary);
+        const content = el("div", "dd-param-advanced-body"); advanced.append(content);
+        this.number(content, "padding", "蒙版外扩边距", { min: 0, max: 2048 });
+        const masks = this.grid(content);
+        this.number(masks, "mask_blur", "蒙版模糊", { min: 0, max: 128, step: .5 }); this.number(masks, "mask_grow", "蒙版扩张 / 收缩", { min: -128, max: 128 });
+        const batch = this.grid(content); this.number(batch, "batch_size", "每张生成数量", { min: 1, max: 16 }); this.enum(batch, "resize_mode", "缩放方式");
+        this.toggle(content, "inpaint_model", "使用专用 Inpaint 模型"); this.toggle(content, "soft_edge", "额外羽化边缘");
+        this.number(content, "soft_strength", "额外羽化强度", { min: 0, max: 1, step: .05, range: true });
+        this.number(content, "refiner_switch", "Refiner 切换比例", { min: 0, max: 1, step: .01, range: true }); this.body.append(advanced);
+    }
+
+    destroy() { clearInterval(this.timer); this.observer.disconnect(); this.options.onTargetChange?.(this.target, null); this.target = null; this.root.remove(); }
+}

web/parameter_bridge.js

@@ -0,0 +1,64 @@
+import { INPAINT_FIELDS } from "./inpaint_panel.js";
+
+const hiddenWidgets = new WeakMap();
+const targetSizes = new WeakMap();
+
+function setHiddenOption(widget, value) {
+    widget.options ??= {};
+    // Recent frontends keep a reactive options proxy on BaseWidget state.
+    // Write through that proxy first so Nodes 2.0 observes runtime relocation.
+    const options = widget._state?.options || widget.options;
+    if (value === undefined) delete options.hidden; else options.hidden = value;
+    if (value === undefined) delete widget.options.hidden; else widget.options.hidden = value;
+}
+
+export function connectedSamplers(source) {
+    const graph = source.graph; if (!graph) return [];
+    const originatesFromSource = target => {
+        const input = target.inputs?.find(input => input.name === "image");
+        const link = graph.links?.[input?.link]; const queue = link ? [link.origin_id] : [], seen = new Set(), sources = new Set();
+        while (queue.length && seen.size < 256) {
+            const id = queue.shift(); if (seen.has(id)) continue; seen.add(id);
+            const current = graph.getNodeById(id); if (!current) continue;
+            if (current.type === "AdachiInlineMask") { sources.add(current.id); continue; }
+            for (const input of current.inputs || []) {
+                if (current.type === "AdachiImageCompare" && input.name !== "result") continue;
+                if (!["IMAGE", "*"].includes(input.type)) continue;
+                const next = graph.links?.[input.link]; if (next) queue.push(next.origin_id);
+            }
+        }
+        return sources.size === 1 && sources.has(source.id);
+    };
+    return (graph._nodes || []).filter(node => node.type === "AdachiWebUIInpaint" && originatesFromSource(node));
+}
+
+export function relocateWidgets(owner, previous, next) {
+    if (previous) {
+        for (const widget of previous.widgets || []) {
+            const state = hiddenWidgets.get(widget); if (!state) continue;
+            state.owners.delete(owner); if (state.owners.size) continue;
+            widget.type = state.type; widget.hidden = state.hidden;
+            setHiddenOption(widget, state.optionHidden);
+            if (state.ownComputeSize) widget.computeSize = state.computeSize; else delete widget.computeSize;
+            if (state.element) state.element.style.display = state.display;
+            hiddenWidgets.delete(widget);
+        }
+        const size = targetSizes.get(previous); if (size) { previous.setSize([previous.size[0], Math.max(size[1], previous.computeSize()[1])]); targetSizes.delete(previous); }
+    }
+    if (next) {
+        if (!targetSizes.has(next)) targetSizes.set(next, [...next.size]);
+        for (const widget of next.widgets || []) {
+            if (!INPAINT_FIELDS.includes(widget.name)) continue;
+            let state = hiddenWidgets.get(widget);
+            if (!state) {
+                const element = widget.element || widget.inputEl;
+                state = { type: widget.type, hidden: widget.hidden, optionHidden: widget.options?.hidden, ownComputeSize: Object.hasOwn(widget, "computeSize"), computeSize: widget.computeSize, element, display: element?.style.display || "", owners: new Set() };
+                hiddenWidgets.set(widget, state);
+                widget.type = "hidden"; widget.hidden = true; setHiddenOption(widget, true);
+                widget.computeSize = () => [0, -4]; if (element) element.style.display = "none";
+            }
+            state.owners.add(owner);
+        }
+        next.setSize([next.size[0], next.computeSize()[1]]);
+    }
+}

web/wheel_gestures.js

@@ -0,0 +1,35 @@
+/* Keep a continuous wheel gesture with its original viewport. */
+const canvases = new Map();
+let owner = null, lastTime = 0, modifiers = "";
+const IDLE_MS = 180;
+const reset = () => { owner = null; lastTime = 0; modifiers = ""; };
+
+function capture(event) {
+    // Ignore synthetic events forwarded by ComfyUI; they are not new gestures.
+    if (!event.isTrusted) return;
+    const entry = canvases.get(event.target);
+    const rect = entry?.canvas.getBoundingClientRect();
+    const inside = rect && event.clientX >= rect.left && event.clientX <= rect.right && event.clientY >= rect.top && event.clientY <= rect.bottom;
+    const canvas = entry && inside && entry.ready() ? entry.canvas : null;
+    const now = performance.now(), keys = `${event.ctrlKey}:${event.altKey}:${event.metaKey}:${event.shiftKey}`;
+    if (!owner || now - lastTime > IDLE_MS || keys !== modifiers) owner = canvas || "graph";
+    else if (owner !== "graph" && owner !== canvas) owner = "graph";
+    lastTime = now; modifiers = keys;
+    if (!entry || !inside || !entry.ready()) return;
+    if (owner === canvas) entry.wheel(event);
+    else if (entry.graphWheel) {
+        event.preventDefault(); event.stopPropagation(); entry.graphWheel(event);
+    }
+}
+
+export function registerImageWheel(canvas, ready, wheel, graphWheel) {
+    if (!canvases.size) {
+        window.addEventListener("wheel", capture, { capture: true, passive: false });
+        window.addEventListener("blur", reset);
+    }
+    canvases.set(canvas, { canvas, ready, wheel, graphWheel });
+    return () => {
+        canvases.delete(canvas);
+        if (!canvases.size) { window.removeEventListener("wheel", capture, true); window.removeEventListener("blur", reset); reset(); }
+    };
+}

web/wheel_routing.js

@@ -0,0 +1,13 @@
+import { app } from "../../scripts/app.js";
+
+export function routeWheelOutsideImage(root, canvas, isReady) {
+    const route = event => {
+        if (!root.contains(event.target)) return;
+        if (event.target === canvas && isReady()) return;
+        event.preventDefault(); event.stopPropagation();
+        // Preserve the user's ComfyUI navigation mode (zoom or pan).
+        app.canvas?.processMouseWheel(event);
+    };
+    window.addEventListener("wheel", route, { capture: true, passive: false });
+    return () => window.removeEventListener("wheel", route, true);
+}