feat(js): canvas editors auto-fit + clamp pan/zoom; add MEC clipboard

Code2Collapse · Code2Collapse · commit 228bb4023d07 · 2026-05-05T13:01:41.000+05:30
Canvas editors (points_bbox_editor.js, spline_mask_editor.js):
- Remove mouse-wheel zoom (bad UX inside ComfyUI outer canvas).
- Add toolbar zoom-in / zoom-out / fit buttons.
- Keyboard: +/-/0 for zoom in/out/fit; F still fits.
- minZoom() prevents zooming out beyond image bounds.
- clampPan() keeps the image inside the viewport at all times.
- setZoomAround() honours both clamps.

MEC clipboard (js/mec_clipboard.js, NEW):
- Nuke-style portable copy/paste with full metadata.
- Ctrl+Alt+C / Ctrl+Alt+V via OS clipboard, JSON payload tagged
  with header so settings survive across workflows / installs.
- Captures every widget value by NAME plus title, color, bgcolor,
  flags, properties, size, and intra-selection links.
- Right-click canvas + node menus expose the same actions.
- Self-contained, no server endpoint required.
diff --git a/js/mec_clipboard.js b/js/mec_clipboard.js
@@ -0,0 +1,208 @@
+// MEC clipboard — Nuke-style portable copy/paste for ComfyUI nodes.
+//
+// Ports the spirit of NukeMax's NkScript clipboard, but is fully
+// self-contained: no server endpoint, no TCL grammar. The payload is
+// plain JSON wrapped in a recognisable header so it round-trips through
+// the OS clipboard between workflows / instances / machines.
+//
+// Hotkeys (chosen to avoid clashing with NukeMax's Ctrl+Shift+C/V and
+// LiteGraph's own Ctrl+C/V):
+//   Ctrl+Alt+C   → copy selected nodes (all widget values, links,
+//                   relative positions, sizes, colours) to the clipboard.
+//   Ctrl+Alt+V   → paste the clipboard payload at the cursor.
+//
+// The payload includes EVERY widget value by name, so even if the user
+// pastes into a different workflow / different ComfyUI install (as long
+// as the same node packs are installed), the settings come across.
+
+import { app } from "../../scripts/app.js";
+
+const CLIP_HEADER = "# MEC.clipboard 1.0";
+
+function _toast(msg, severity = "info") {
+    try {
+        app.extensionManager?.toast?.add({
+            severity,
+            summary: "MEC Clipboard",
+            detail: msg,
+            life: 3500,
+        });
+    } catch (_) { console.log("[MEC.clipboard]", msg); }
+}
+
+function _selectedNodes() {
+    const sel = app.canvas?.selected_nodes;
+    if (!sel) return [];
+    return Object.values(sel);
+}
+
+function _serializeNode(n) {
+    // Capture every widget value by NAME (so widget-order changes don't
+    // break the paste).
+    const widgets = {};
+    for (const w of n.widgets || []) {
+        if (!w.name || w.value === undefined) continue;
+        // Skip DOM-widget values that aren't JSON-serialisable (canvas
+        // payloads, typed arrays). serializeValue() if available.
+        let v = w.value;
+        try {
+            if (typeof w.serializeValue === "function") {
+                v = w.serializeValue(n, n.widgets.indexOf(w));
+            }
+            JSON.stringify(v);
+        } catch (_) { continue; }
+        widgets[w.name] = v;
+    }
+    return {
+        id: n.id,
+        type: n.comfyClass || n.type,
+        title: n.title,
+        pos: [Math.round(n.pos?.[0] ?? 0), Math.round(n.pos?.[1] ?? 0)],
+        size: n.size ? [Math.round(n.size[0]), Math.round(n.size[1])] : undefined,
+        color: n.color,
+        bgcolor: n.bgcolor,
+        flags: n.flags,
+        properties: n.properties,
+        widgets,
+    };
+}
+
+function _gatherSubgraph(nodes) {
+    const ids = new Set(nodes.map((n) => n.id));
+    const out_nodes = nodes.map(_serializeNode);
+    const out_links = [];
+    const links = app.graph?.links || {};
+    for (const k in links) {
+        const l = links[k];
+        if (!l) continue;
+        if (ids.has(l.origin_id) && ids.has(l.target_id)) {
+            out_links.push({
+                src_id: l.origin_id, src_slot: l.origin_slot,
+                dst_id: l.target_id, dst_slot: l.target_slot,
+                type: l.type,
+            });
+        }
+    }
+    return { version: 1, nodes: out_nodes, links: out_links };
+}
+
+async function _copy() {
+    const nodes = _selectedNodes();
+    if (!nodes.length) { _toast("Nothing selected", "warn"); return; }
+    const payload = _gatherSubgraph(nodes);
+    const text = CLIP_HEADER + "\n" + JSON.stringify(payload, null, 2);
+    try {
+        await navigator.clipboard.writeText(text);
+        _toast(`Copied ${nodes.length} node(s) with full metadata`, "success");
+    } catch (e) {
+        _toast("Clipboard write denied: " + (e?.message || e), "error");
+    }
+}
+
+function _findHeader(text) {
+    if (!text) return null;
+    const i = text.indexOf(CLIP_HEADER);
+    if (i < 0) return null;
+    const j = text.indexOf("{", i);
+    if (j < 0) return null;
+    try { return JSON.parse(text.slice(j)); } catch (_) { return null; }
+}
+
+async function _paste() {
+    let text = "";
+    try { text = await navigator.clipboard.readText(); }
+    catch (e) { _toast("Clipboard read denied (browser permission)", "error"); return; }
+    const data = _findHeader(text);
+    if (!data || !Array.isArray(data.nodes)) {
+        _toast("Clipboard does not contain MEC payload", "warn"); return;
+    }
+    const cursor = app.canvas?.graph_mouse || [0, 0];
+    let originX = null, originY = null;
+    const idMap = {}; // old_id -> new node
+    for (const nd of data.nodes) {
+        const node = LiteGraph.createNode(nd.type);
+        if (!node) {
+            console.warn("[MEC.clipboard] unknown node type:", nd.type);
+            _toast(`Unknown node type "${nd.type}" — install the pack`, "warn");
+            continue;
+        }
+        if (originX === null) { originX = nd.pos[0]; originY = nd.pos[1]; }
+        node.pos = [
+            cursor[0] + (nd.pos[0] - originX),
+            cursor[1] + (nd.pos[1] - originY),
+        ];
+        if (nd.title) node.title = nd.title;
+        if (nd.color) node.color = nd.color;
+        if (nd.bgcolor) node.bgcolor = nd.bgcolor;
+        if (nd.flags) node.flags = { ...(node.flags || {}), ...nd.flags };
+        if (nd.properties) node.properties = { ...(node.properties || {}), ...nd.properties };
+        app.graph.add(node);
+        if (Array.isArray(nd.size)) {
+            // Apply AFTER add() so LiteGraph doesn't auto-resize on top of us.
+            node.size = [nd.size[0], nd.size[1]];
+        }
+        // Apply widgets by NAME.
+        for (const [wname, wval] of Object.entries(nd.widgets || {})) {
+            const w = (node.widgets || []).find((x) => x.name === wname);
+            if (!w) continue;
+            try {
+                w.value = wval;
+                w.callback?.(wval, app.canvas, node);
+            } catch (err) {
+                console.warn("[MEC.clipboard] widget set failed:", wname, err);
+            }
+        }
+        idMap[nd.id] = node;
+    }
+    // Re-wire links by old IDs.
+    for (const l of data.links || []) {
+        const src = idMap[l.src_id], dst = idMap[l.dst_id];
+        if (!src || !dst) continue;
+        try { src.connect(l.src_slot, dst, l.dst_slot); }
+        catch (err) { console.warn("[MEC.clipboard] link failed", err); }
+    }
+    // Select the freshly pasted nodes.
+    try {
+        app.canvas.deselectAllNodes?.();
+        for (const n of Object.values(idMap)) app.canvas.selectNode?.(n, true);
+    } catch (_) {}
+    app.graph.setDirtyCanvas(true, true);
+    _toast(`Pasted ${Object.keys(idMap).length} node(s)`, "success");
+}
+
+window.addEventListener("keydown", (ev) => {
+    if (!ev.ctrlKey || !ev.altKey || ev.shiftKey) return;
+    // Ignore if focus is in a text input — let the user paste into fields.
+    const t = ev.target;
+    if (t && (t.tagName === "INPUT" || t.tagName === "TEXTAREA" || t.isContentEditable)) return;
+    const k = ev.key.toLowerCase();
+    if (k === "c") { ev.preventDefault(); _copy(); }
+    else if (k === "v") { ev.preventDefault(); _paste(); }
+});
+
+app.registerExtension({
+    name: "MEC.Clipboard",
+    async setup() {
+        console.log("[MEC.clipboard] portable JSON copy/paste loaded (Ctrl+Alt+C / Ctrl+Alt+V)");
+        const origMenu = LGraphCanvas.prototype.getCanvasMenuOptions;
+        LGraphCanvas.prototype.getCanvasMenuOptions = function () {
+            const opts = origMenu.apply(this, arguments) || [];
+            opts.push(null);
+            opts.push({ content: "MEC: Copy node(s) with metadata (Ctrl+Alt+C)", callback: _copy });
+            opts.push({ content: "MEC: Paste node(s) from clipboard (Ctrl+Alt+V)", callback: _paste });
+            return opts;
+        };
+        // Also expose on per-node right-click menu.
+        const origNodeMenu = LGraphCanvas.prototype.getNodeMenuOptions;
+        LGraphCanvas.prototype.getNodeMenuOptions = function (node) {
+            const opts = origNodeMenu.apply(this, arguments) || [];
+            opts.push(null);
+            opts.push({ content: "MEC: Copy with metadata", callback: () => {
+                // Ensure this node is in the selection.
+                try { app.canvas.selectNode?.(node, true); } catch (_) {}
+                _copy();
+            }});
+            return opts;
+        };
+    },
+});
diff --git a/js/points_bbox_editor.js b/js/points_bbox_editor.js
@@ -90,9 +90,45 @@ class Editor {
         return { x: (vx - this.panX) / this.zoom, y: (vy - this.panY) / this.zoom };
     }
 
+    // Smallest zoom that still fits the image inside the viewport (no
+    // scrolling past the borders). Used to clamp every zoom-out.
+    minZoom(viewW, viewH) {
+        if (viewW <= 0 || viewH <= 0) return 0.05;
+        return Math.min(viewW / this.canvasW, viewH / this.canvasH);
+    }
+
+    // Stop pan from moving the image off-screen. Anchors:
+    //   - if the image is wider than the viewport, allow X pan only inside
+    //     the overflow region; otherwise centre it horizontally.
+    //   - same for Y.
+    clampPan(viewW, viewH) {
+        const dW = this.canvasW * this.zoom;
+        const dH = this.canvasH * this.zoom;
+        if (dW <= viewW) {
+            this.panX = (viewW - dW) / 2;
+        } else {
+            this.panX = Math.min(0, Math.max(viewW - dW, this.panX));
+        }
+        if (dH <= viewH) {
+            this.panY = (viewH - dH) / 2;
+        } else {
+            this.panY = Math.min(0, Math.max(viewH - dH, this.panY));
+        }
+    }
+
+    setZoomAround(newZ, anchorX, anchorY, viewW, viewH) {
+        const minZ = this.minZoom(viewW, viewH);
+        newZ = Math.max(minZ, Math.min(8, newZ));
+        const k = newZ / this.zoom;
+        this.panX = anchorX - (anchorX - this.panX) * k;
+        this.panY = anchorY - (anchorY - this.panY) * k;
+        this.zoom = newZ;
+        this.clampPan(viewW, viewH);
+    }
+
     fitView(viewW, viewH) {
         if (viewW <= 0 || viewH <= 0) return;
-        const pad = 16;
+        const pad = 8;
         const sx = (viewW - pad * 2) / this.canvasW;
         const sy = (viewH - pad * 2) / this.canvasH;
         this.zoom = Math.max(0.05, Math.min(sx, sy, 8));
@@ -403,7 +439,15 @@ function installEditor(node) {
 
     tb.appendChild(mkIcon("↶", "Undo (Ctrl+Z)", () => { if (ed.undo()) ed.save(); }));
     tb.appendChild(mkIcon("↷", "Redo (Ctrl+Y)", () => { if (ed.redo()) ed.save(); }));
-    tb.appendChild(mkIcon("⛶", "Fit view (F)", () => {
+    tb.appendChild(mkIcon("\u2796", "Zoom out (-)", () => {
+        const r = canvasWrap.getBoundingClientRect();
+        ed.setZoomAround(ed.zoom * 0.85, r.width / 2, r.height / 2, r.width, r.height);
+    }));
+    tb.appendChild(mkIcon("\u2795", "Zoom in (+)", () => {
+        const r = canvasWrap.getBoundingClientRect();
+        ed.setZoomAround(ed.zoom * 1.15, r.width / 2, r.height / 2, r.width, r.height);
+    }));
+    tb.appendChild(mkIcon("\u2B1B", "Fit image (0 / F)", () => {
         const r = canvasWrap.getBoundingClientRect();
         ed.fitView(r.width, r.height);
     }));
@@ -585,6 +629,7 @@ function installEditor(node) {
             const sx1 = canvas.width / (r1.width || 1), sy1 = canvas.height / (r1.height || 1);
             ed.panX = (e.clientX - r1.left) * sx1 - ed.drag.startX;
             ed.panY = (e.clientY - r1.top)  * sy1 - ed.drag.startY;
+            ed.clampPan(canvas.width, canvas.height);
             render(); return;
         }
         if (ed.drag?.kind === "point") {
@@ -667,26 +712,15 @@ function installEditor(node) {
 
     canvas.addEventListener("contextmenu", (e) => e.preventDefault());
 
+    // Mouse wheel inside the editor does NOTHING. Zoom is via toolbar
+    // buttons or +/-/0 keys; this prevents accidental zoom while panning
+    // the parent ComfyUI canvas. Wheel events are not even prevented so
+    // the outer ComfyUI canvas can still receive them via bubbling.
     canvas.addEventListener("wheel", (e) => {
-        e.preventDefault(); e.stopPropagation();
-        const r = canvas.getBoundingClientRect();
-        const sx = canvas.width  / (r.width  || 1);
-        const sy = canvas.height / (r.height || 1);
-        const mx = (e.clientX - r.left) * sx, my = (e.clientY - r.top) * sy;
-        if (e.ctrlKey || e.metaKey) {
-            const f = e.deltaY < 0 ? 1.15 : 0.87;
-            const newZ = Math.max(0.05, Math.min(40, ed.zoom * f));
-            const k = newZ / ed.zoom;
-            ed.panX = mx - (mx - ed.panX) * k;
-            ed.panY = my - (my - ed.panY) * k;
-            ed.zoom = newZ;
-        } else {
-            ed.radius = Math.max(0.5, Math.min(256, ed.radius + (e.deltaY < 0 ? 0.5 : -0.5)));
-            const rW = node.widgets?.find(x => x.name === "default_radius");
-            if (rW) rW.value = ed.radius;
-        }
-        render();
-    }, { passive: false });
+        // Eat the event only when the user is over our canvas AND wants
+        // to scroll the parent — we don't want to fight ComfyUI's zoom,
+        // so let it bubble.
+    }, { passive: true });
 
     canvas.addEventListener("keydown", (e) => {
         if ((e.ctrlKey || e.metaKey) && e.key.toLowerCase() === "z") {
@@ -699,9 +733,20 @@ function installEditor(node) {
             if (ed.hover.kind === "point") { ed.pushUndo(); ed.points.splice(ed.hover.idx, 1); ed.save(); }
             else if (ed.hover.kind === "bbox") { ed.pushUndo(); ed.bboxes.splice(ed.hover.idx, 1); ed.save(); }
             ed.hover = { kind: null, idx: -1 }; render();
-        } else if (e.key.toLowerCase() === "f") {
+        } else if (e.key.toLowerCase() === "f" || e.key === "0") {
+            e.preventDefault();
             const r = canvasWrap.getBoundingClientRect();
             ed.fitView(r.width, r.height); render();
+        } else if (e.key === "+" || e.key === "=") {
+            e.preventDefault();
+            const r = canvasWrap.getBoundingClientRect();
+            ed.setZoomAround(ed.zoom * 1.15, r.width / 2, r.height / 2, r.width, r.height);
+            render();
+        } else if (e.key === "-" || e.key === "_") {
+            e.preventDefault();
+            const r = canvasWrap.getBoundingClientRect();
+            ed.setZoomAround(ed.zoom * 0.85, r.width / 2, r.height / 2, r.width, r.height);
+            render();
         }
     });
 
diff --git a/js/spline_mask_editor.js b/js/spline_mask_editor.js
