dsh-comfyui-canvas 0.1.10 → 0.1.11

package/README.md

@@ -3,7 +3,7 @@
 > [中文](README.zh.md) · English
 
 [![License: MIT](https://img.shields.io/badge/license-MIT-blue.svg)](LICENSE)
-[![Version](https://img.shields.io/badge/version-0.1.7-brightgreen.svg)](https://github.com/wbin0001/dsh-comfyui-canvas/releases)
+[![Version](https://img.shields.io/badge/version-0.1.11-brightgreen.svg)](https://github.com/wbin0001/dsh-comfyui-canvas/releases)
 [![GitHub Stars](https://img.shields.io/github/stars/wbin0001/dsh-comfyui-canvas.svg?style=social)](https://github.com/wbin0001/dsh-comfyui-canvas)
 [![DSH](https://img.shields.io/badge/DSH-v0.1.x-blueviolet.svg)](https://github.com/DeepSeek-Harness/DSH)
 [![ComfyUI](https://img.shields.io/badge/ComfyUI-0.34+-orange.svg)](https://github.com/comfyanonymous/ComfyUI)
@@ -183,6 +183,18 @@ The built-in `comfyui-canvas-ops` skill instructs the agent to pick the right op
 
 The agent decides the path up front: visual canvas mode when the user is watching / tuning, API/MCP mode for fast validation, batch sweeps and unattended runs.
 
+### Workflow groups (organize complex pipelines)
+
+`comfyui_group` organizes a complex canvas into **named groups** that survive save/load:
+
+| Action | Behavior |
+|---|---|
+| `add` | Create a named group around the given nodes; the box auto-fits the nodes (an explicit `bounding` is honored when given) |
+| `add_nodes` / `remove_nodes` | Add / remove member nodes; the box re-fits automatically |
+| `rename` / `list` | Rename a group / list groups with their members |
+
+**Membership persistence**: saving the workflow serializes each group's member ids (`nodes`) next to `title` / `bounding` / `color`, and loading re-attaches them — a saved workflow reopens with the same boxes *and* their memberships intact.
+
 ## Requirements
 
 - DeepSeek Harness Web (DSH), Node `^22.19.0 || >=24`

package/README.zh.md

@@ -3,7 +3,7 @@
 > 中文 · [English](README.md)
 
 [![License: MIT](https://img.shields.io/badge/license-MIT-blue.svg)](LICENSE)
-[![Version](https://img.shields.io/badge/version-0.1.7-brightgreen.svg)](https://github.com/wbin0001/dsh-comfyui-canvas/releases)
+[![Version](https://img.shields.io/badge/version-0.1.11-brightgreen.svg)](https://github.com/wbin0001/dsh-comfyui-canvas/releases)
 [![GitHub Stars](https://img.shields.io/github/stars/wbin0001/dsh-comfyui-canvas.svg?style=social)](https://github.com/wbin0001/dsh-comfyui-canvas)
 [![DSH](https://img.shields.io/badge/DSH-v0.1.x-blueviolet.svg)](https://github.com/DeepSeek-Harness/DSH)
 [![ComfyUI](https://img.shields.io/badge/ComfyUI-0.34+-orange.svg)](https://github.com/comfyanonymous/ComfyUI)
@@ -196,6 +196,18 @@ pip install comfy-cli   # 独立 CLI，非 DSH 插件 —— 见 https://github.
 
 agent 动手前先判断场景：用户在实时看画布 / 需要调优 → 画布路径；快速验证、批量扫参、无人值守 → API/MCP 路径。
 
+### 工作流分组（组织复杂流水线）
+
+`comfyui_group` 把复杂画布分成**具名组**，且分组随工作流保存/重载完整恢复：
+
+| 命令 | 行为 |
+|---|---|
+| `add` | 围绕指定节点创建具名组，组框**自动贴合**节点（也可传 `bounding` 精确定位） |
+| `add_nodes` / `remove_nodes` | 增删组成员，组框自动重新贴合 |
+| `rename` / `list` | 重命名 / 列出组及成员 |
+
+**成员持久化**：保存工作流时把每个组的成员 id（`nodes`）与 `title` / `bounding` / `color` 一并写入 JSON，加载时自动重建成员关联——重开工作流后，组框和成员关系都原样保留。
+
 ---
 
 ## 环境要求

package/comfyui-bridge/ComfyUI-DSH-Canvas/__init__.py

@@ -9,7 +9,7 @@
 
 # Bridge release version. The DSH plugin compares this against its embedded
 # copy (see version.json) to decide whether an update is needed.
-__version__ = "0.1.7"
+__version__ = "0.1.11"
 
 import os
 import time

package/comfyui-bridge/ComfyUI-DSH-Canvas/entry/bridge.js

@@ -99,6 +99,36 @@ function applyWidgetValue(node, widget, value) {
   node.setDirtyCanvas?.(true, true);
 }
 
+// v0.1.8: some LiteGraph builds ship LGraphGroup without addNode /
+// computeBounding, so the bridge owns group membership and the bounding box
+// instead of relying on those methods. `bounding` stays pos.concat(size), so
+// saved workflows render the same box on load.
+function groupBounds(nodeObjs, pad = 20) {
+  if (!nodeObjs.length) return null;
+  let x1 = Infinity, y1 = Infinity, x2 = -Infinity, y2 = -Infinity;
+  for (const n of nodeObjs) {
+    const [x, y] = n.pos;
+    const [w, h] = n.size;
+    x1 = Math.min(x1, x);
+    y1 = Math.min(y1, y);
+    x2 = Math.max(x2, x + w);
+    y2 = Math.max(y2, y + h);
+  }
+  return [x1 - pad, y1 - pad, x2 - x1 + 2 * pad, y2 - y1 + 2 * pad];
+}
+
+function groupSetNodes(group, nodeObjs, keepBounds = false) {
+  // LGraphGroup.nodes is a read-only getter in some frontends, so membership
+  // lives on a bridge-owned property instead of the group's own array.
+  group._dshNodes = Array.isArray(nodeObjs) ? nodeObjs.slice() : [];
+  if (keepBounds) return;
+  const bb = groupBounds(group._dshNodes);
+  if (bb) {
+    group.pos = [bb[0], bb[1]];
+    group.size = [bb[2], bb[3]];
+  }
+}
+
 async function executeCommand(cmd, payload) {
   const graph = app.graph;
   const LiteGraph = await resolveLiteGraph();
@@ -331,10 +361,11 @@ async function executeCommand(cmd, payload) {
       return { cleared: true, nodes: 0 };
     }
 
-    // v0.1.6: group nodes into named groups (complex-workflow organization).
-    // Uses LiteGraph's native group API (graph._groups). Availability varies
-    // across custom frontends, so `list` reports groupingAvailable so the
-    // agent can degrade gracefully instead of hard-failing.
+    // v0.1.8: group nodes into named groups (complex-workflow organization).
+    // The bridge manages membership and the bounding box itself (groupSetNodes)
+    // because not every LiteGraph build ships LGraphGroup.addNode. Availability
+    // varies across custom frontends, so `list` reports groupingAvailable so
+    // the agent can degrade gracefully instead of hard-failing.
     case "group": {
       const { action, title, id, nodeIds } = payload ?? {};
       const groups = graph?._groups ?? null;
@@ -349,10 +380,14 @@ async function executeCommand(cmd, payload) {
           if (!title || typeof title !== "string") throw new Error("group add requires payload.title");
           const nodeObjs = (Array.isArray(nodeIds) ? nodeIds : []).map((n) => graph.getNodeById(+n)).filter(Boolean);
           const group = new LiteGraph.LGraphGroup(title);
-          for (const n of nodeObjs) group.addNode?.(n);
+          if (Array.isArray(payload.bounding)) {
+            group.pos = [payload.bounding[0], payload.bounding[1]];
+            group.size = [payload.bounding[2], payload.bounding[3]];
+          }
+          groupSetNodes(group, nodeObjs, Array.isArray(payload.bounding));
           groups.push(group);
           scheduleReport();
-          return { groupingAvailable: true, id: groups.indexOf(group), title: group.title, nodes: nodeObjs.map((n) => String(n.id)) };
+          return { groupingAvailable: true, id: groups.indexOf(group), title: group.title, nodes: group._dshNodes.map((n) => String(n.id)) };
         }
         case "rename": {
           const g = groups[+id];
@@ -364,22 +399,32 @@ async function executeCommand(cmd, payload) {
         case "add_nodes": {
           const g = groups[+id];
           if (!g) throw new Error(`group not found: ${id}`);
+          const seen = new Set((g._dshNodes ?? []).map((n) => n.id));
+          const merged = (g._dshNodes ?? []).slice();
           const added = [];
           for (const n of Array.isArray(nodeIds) ? nodeIds : []) {
             const node = graph.getNodeById(+n);
-            if (node && !(g.nodes ?? []).includes(node)) { g.addNode?.(node); added.push(String(n)); }
+            if (!node || seen.has(node.id)) continue;
+            seen.add(node.id);
+            merged.push(node);
+            added.push(String(n));
           }
+          groupSetNodes(g, merged);
           scheduleReport();
           return { groupingAvailable: true, id: +id, added };
         }
         case "remove_nodes": {
           const g = groups[+id];
           if (!g) throw new Error(`group not found: ${id}`);
+          const ids = new Set((Array.isArray(nodeIds) ? nodeIds : []).map((n) => String(n)));
           const removed = [];
-          for (const n of Array.isArray(nodeIds) ? nodeIds : []) {
-            const node = graph.getNodeById(+n);
-            if (node && (g.nodes ?? []).includes(node)) { g.removeNode?.(node); removed.push(String(n)); }
-          }
+          groupSetNodes(g, (g._dshNodes ?? []).filter((n) => {
+            if (ids.has(String(n.id))) {
+              removed.push(String(n.id));
+              return false;
+            }
+            return true;
+          }));
           scheduleReport();
           return { groupingAvailable: true, id: +id, removed };
         }
@@ -389,7 +434,7 @@ async function executeCommand(cmd, payload) {
             groups: groups.map((g, i) => ({
               id: i,
               title: g.title ?? "",
-              nodes: (g.nodes ?? []).map((n) => String(n.id)),
+              nodes: (g._dshNodes ?? []).map((n) => String(n.id)),
             })),
           };
         }
@@ -449,10 +494,40 @@ app.registerExtension({
       graph.configure = function (...args) {
         const out = prevGraphConfigure.apply(this, args);
         scheduleReport();
+        // v0.1.11: re-attach persisted group membership after a graph load so
+        // saved workflows restore which nodes belong to each group.
+        const data = args[0];
+        const groupsData = Array.isArray(data?.groups) ? data.groups : null;
+        const groups = this?._groups ?? null;
+        if (groupsData && Array.isArray(groups)) {
+          for (let i = 0; i < groups.length && i < groupsData.length; i++) {
+            const ids = groupsData[i]?.nodes;
+            if (!Array.isArray(ids)) continue;
+            const nodeObjs = ids.map((id) => this.getNodeById(+id)).filter(Boolean);
+            groupSetNodes(groups[i], nodeObjs, true);
+          }
+        }
         return out;
       };
     }
 
+    // v0.1.11: persist group membership in saved workflows — patch the group
+    // serializer so member ids land in the workflow JSON next to
+    // title/bounding/color, and the configure hook above restores them on load.
+    resolveLiteGraph().then((LG) => {
+      const proto = LG?.LGraphGroup?.prototype;
+      const orig = proto?.serialize;
+      if (!proto || typeof orig !== "function" || proto._dshSerializePatched) return;
+      proto._dshSerializePatched = true;
+      proto.serialize = function () {
+        const data = orig.call(this) ?? {};
+        if (Array.isArray(this._dshNodes) && this._dshNodes.length) {
+          data.nodes = this._dshNodes.map((n) => n.id);
+        }
+        return data;
+      };
+    });
+
     // M1: listen for write commands pushed over the WebSocket.
     // Per-tab targeting (M3): when the backend names a target clientId (the
     // last one that reported), only that tab executes — several open ComfyUI

package/comfyui-bridge/ComfyUI-DSH-Canvas/version.json

@@ -1,4 +1,4 @@
 {
   "name": "ComfyUI-DSH-Canvas",
-  "version": "0.1.7"
+  "version": "0.1.11"
 }

package/lib/client.js

@@ -1086,6 +1086,11 @@ function CanvasTab(props) {
     };
     fit();
     outer.style.display = "flex";
+    // 画布专注模式：告知 host 本会话正在画布标签（comfyui_config 按会话读取，
+    // agent 据此知道你在画布开工；按会话隔离，卸载时写回 chat）。
+    if (scope && typeof scope.set === "function" && props.sessionId) {
+      setSessionView(scope, String(props.sessionId), "canvas");
+    }
     var sync = function () {
       // frame.src 常带尾斜杠而 activeBase 不带——裸 !== 会让每次挂载都重置 src
       // 导致 ComfyUI 重载。归一化后仅当地址真正变化才更新。
@@ -1104,6 +1109,9 @@ function CanvasTab(props) {
       if (ro) ro.disconnect();
       window.removeEventListener("resize", fit);
       document.documentElement.removeAttribute("data-dsh-comfyui-fullscreen");
+      if (scope && typeof scope.set === "function" && props.sessionId) {
+        setSessionView(scope, String(props.sessionId), "chat");
+      }
       // 仅隐藏，不摘除：iframe 浏览上下文保活，切回秒开。
       outer.style.display = "none";
     };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "dsh-comfyui-canvas",
-  "version": "0.1.10",
+  "version": "0.1.11",
   "description": "Give DeepSeek Harness agents live control of your ComfyUI canvas (local or cloud): embed it as a split-screen tab, then read/edit/run workflows, debug errors, fetch output images, and batch-sweep parameters straight from the chat. Ships the ComfyUI-side bridge node.",
   "type": "module",
   "main": "lib/index.js",