Group navigation prototype

rgthree_config.json.default

@@ -20,6 +20,10 @@
  "height": 16,
  "position": "top"
  },
+ "group_nav_menu": {
+ "enabled": false,
+ "filter_regex": ""
+ },
  // Enables invokeExtensionsAsync for rgthree-nodes allowing other extensions to hook into the
  // nodes like the default ComfyNodes. This was not possible before Apr 2024, so it's a config
  // entry in case it causes issues. This is only for the nodeCreated event/function as of now.

src_web/comfyui/config.ts

@@ -127,6 +127,19 @@ const CONFIGURABLE: { features: ConfigurationSchema[] } = {
  "Will show a message at the top of the screen when loading a workflow that has " +
  "corrupt linking data.",
  },
+ {
+ key: "features.group_nav_menu.enabled",
+ type: ConfigType.BOOLEAN,
+ label: "Show Quick Nav for Groups",
+ description: "Will show a list in the rgthree-comfy context menu to jump to Groups",
+ subconfig: [
+ {
+ key: "features.group_nav_menu.filter_regex",
+ type: ConfigType.STRING,
+ label: "Filter RegEx: Only shows matching Groups",
+ },
+ ],
+ },
  {
  key: "log_level",
  type: ConfigType.STRING,

src_web/comfyui/fast_groups_muter.ts

@@ -16,6 +16,7 @@ import {
 } from "typings/litegraph.js";
 import {SERVICE as FAST_GROUPS_SERVICE} from "./fast_groups_service.js";
 import { drawNodeWidget, fitString } from "./utils_canvas.js";
+import { navigateToGroupMaybe } from "./utils.js";
 
 declare const LGraphCanvas: typeof TLGraphCanvas;
 declare const LiteGraph: typeof TLiteGraph;
@@ -269,21 +270,7 @@ export class FastGroupsMuter extends RgthreeBaseNode {
  node.properties?.[PROPERTY_SHOW_NAV] !== false &&
  pos[0] >= node.size[0] - 15 - 28 - 1
  ) {
- const canvas = app.canvas as TLGraphCanvas;
- const lowQuality = (canvas.ds?.scale || 1) <= 0.5;
- if (!lowQuality) {
- // Clicked on right half with nav arrow, go to the group, center on group and set
- // zoom to see it all.
- canvas.centerOnNode(group);
- const zoomCurrent = canvas.ds?.scale || 1;
- const zoomX = canvas.canvas.width / group._size[0] - 0.02;
- const zoomY = canvas.canvas.height / group._size[1] - 0.02;
- canvas.setZoom(Math.min(zoomCurrent, zoomX, zoomY), [
- canvas.canvas.width / 2,
- canvas.canvas.height / 2,
- ]);
- canvas.setDirty(true, true);
- }
+ navigateToGroupMaybe(group);
  } else {
  this.value = !this.value;
  setTimeout(() => {

src_web/comfyui/rgthree.ts

@@ -17,7 +17,7 @@ import { api } from "../../scripts/api.js";
 import { SERVICE as CONFIG_SERVICE } from "./config_service.js";
 import { fixBadLinks } from "rgthree/common/link_fixer.js";
 import { wait } from "rgthree/common/shared_utils.js";
-import { replaceNode, waitForCanvas, waitForGraph } from "./utils.js";
+import { navigateToGroupMaybe, replaceNode, waitForCanvas, waitForGraph } from "./utils.js";
 import { NodeTypesString } from "./constants.js";
 import { RgthreeProgressBar } from "rgthree/common/progress_bar.js";
 import { RgthreeConfigDialog } from "./config.js";
@@ -496,6 +496,42 @@ class Rgthree extends EventTarget {
  }
  const rerouteLabel = selectedNodes.length ? "selected" : "all";
 
+ function getGroupsMenu(): ContextMenuItem[] {
+ const groupNavEnabled = CONFIG_SERVICE.getConfigValue(
+ "features.group_nav_menu.enabled",
+ false,
+ );
+ if (!groupNavEnabled) {
+ return [];
+ }
+
+ const filterRegex = CONFIG_SERVICE.getConfigValue("features.group_nav_menu.filter_regex", "");
+ const filterRegexPattern = new RegExp(filterRegex);
+
+ const groups = graph._groups;
+ const groupMenuItems = groups
+ .sort((a, b) => a.title.localeCompare(b.title))
+ .filter((group) => !filterRegex || filterRegexPattern.test(group.title))
+ .map((group) => ({
+ content: `${group.title}`,
+ className: "rgthree-contextmenu-item rgthree-contextmenu-github",
+ callback: (...args: any[]) => {
+ navigateToGroupMaybe(group, { checkQuality: false, forceZoom: true });
+ },
+ }));
+
+ return [
+ {
+ content: "Groups",
+ disabled: true,
+ className: "rgthree-contextmenu-item rgthree-contextmenu-label",
+ },
+ ...groupMenuItems,
+ ];
+ }
+
+ const groupsMenuItems = getGroupsMenu();
+
  return [
  {
  content: "Actions",
@@ -535,6 +571,7 @@ class Rgthree extends EventTarget {
  })();
  },
  },
+ ...groupsMenuItems,
  {
  content: "More...",
  disabled: true,

src_web/comfyui/utils.ts

@@ -12,6 +12,7 @@ import type {
  INodeSlot,
  INodeInputSlot,
  INodeOutputSlot,
+ LGraphGroup,
 } from "typings/litegraph.js";
 import type { Constructor } from "typings/index.js";
 // @ts-ignore
@@ -869,3 +870,22 @@ LiteGraph.isValidConnection = function(typeA: string|string[], typeB: string|str
  }
  return isValid;
 }
+
+export function navigateToGroupMaybe(
+ group: LGraphGroup,
+ {checkQuality, forceZoom} = {checkQuality: true, forceZoom: false}) {
+ const canvas: TLGraphCanvas = app.canvas;
+ const lowQuality = (canvas.ds?.scale || 1) <= 0.5;
+ if (!lowQuality || !checkQuality) {
+ canvas.centerOnNode(group);
+ const zoomCurrent = forceZoom ? 2 : (canvas.ds?.scale || 1);
+
+ const zoomX = canvas.canvas.width / group._size[0] - 0.02;
+ const zoomY = canvas.canvas.height / group._size[1] - 0.02;
+ canvas.setZoom(Math.min(zoomCurrent, zoomX, zoomY), [
+ canvas.canvas.width / 2,
+ canvas.canvas.height / 2,
+ ]);
+ canvas.setDirty(true, true);
+ }
+}

web/comfyui/config.js

@@ -102,6 +102,19 @@ const CONFIGURABLE = {
  description: "Will show a message at the top of the screen when loading a workflow that has " +
  "corrupt linking data.",
  },
+ {
+ key: "features.group_nav_menu.enabled",
+ type: ConfigType.BOOLEAN,
+ label: "Show Quick Nav for Groups",
+ description: "Will show a list in the rgthree-comfy context menu to jump to Groups",
+ subconfig: [
+ {
+ key: "features.group_nav_menu.filter_regex",
+ type: ConfigType.STRING,
+ label: "Filter RegEx: Only shows matching Groups",
+ },
+ ],
+ },
  {
  key: "log_level",
  type: ConfigType.STRING,
@@ -262,7 +275,7 @@ export class RgthreeConfigDialog extends RgthreeDialog {
  }
  else {
  currentValue = currentValueEl === null || currentValueEl === void 0 ? void 0 : currentValueEl.value;
- if (currentValueEl.nodeName === 'SELECT') {
+ if (currentValueEl.nodeName === "SELECT") {
  currentValue = JSON.parse(currentValue).value;
  }
  else if (type === String(ConfigType.NUMBER)) {

web/comfyui/fast_groups_muter.js

@@ -3,6 +3,7 @@ import { RgthreeBaseNode } from "./base_node.js";
 import { NodeTypesString } from "./constants.js";
 import { SERVICE as FAST_GROUPS_SERVICE } from "./fast_groups_service.js";
 import { drawNodeWidget, fitString } from "./utils_canvas.js";
+import { navigateToGroupMaybe } from "./utils.js";
 const PROPERTY_SORT = "sort";
 const PROPERTY_SORT_CUSTOM_ALPHA = "customSortAlphabet";
 const PROPERTY_MATCH_COLORS = "matchColors";
@@ -182,23 +183,11 @@ export class FastGroupsMuter extends RgthreeBaseNode {
  return this.value;
  },
  mouse(event, pos, node) {
- var _a, _b, _c;
+ var _a;
  if (event.type == "pointerdown") {
  if (((_a = node.properties) === null || _a === void 0 ? void 0 : _a[PROPERTY_SHOW_NAV]) !== false &&
  pos[0] >= node.size[0] - 15 - 28 - 1) {
- const canvas = app.canvas;
- const lowQuality = (((_b = canvas.ds) === null || _b === void 0 ? void 0 : _b.scale) || 1) <= 0.5;
- if (!lowQuality) {
- canvas.centerOnNode(group);
- const zoomCurrent = ((_c = canvas.ds) === null || _c === void 0 ? void 0 : _c.scale) || 1;
- const zoomX = canvas.canvas.width / group._size[0] - 0.02;
- const zoomY = canvas.canvas.height / group._size[1] - 0.02;
- canvas.setZoom(Math.min(zoomCurrent, zoomX, zoomY), [
- canvas.canvas.width / 2,
- canvas.canvas.height / 2,
- ]);
- canvas.setDirty(true, true);
- }
+ navigateToGroupMaybe(group);
  }
  else {
  this.value = !this.value;

web/comfyui/rgthree.js

@@ -3,7 +3,7 @@ import { api } from "../../scripts/api.js";
 import { SERVICE as CONFIG_SERVICE } from "./config_service.js";
 import { fixBadLinks } from "../../rgthree/common/link_fixer.js";
 import { wait } from "../../rgthree/common/shared_utils.js";
-import { replaceNode, waitForCanvas, waitForGraph } from "./utils.js";
+import { navigateToGroupMaybe, replaceNode, waitForCanvas, waitForGraph } from "./utils.js";
 import { NodeTypesString } from "./constants.js";
 import { RgthreeProgressBar } from "../../rgthree/common/progress_bar.js";
 import { RgthreeConfigDialog } from "./config.js";
@@ -308,6 +308,34 @@ class Rgthree extends EventTarget {
  rerouteNodes = graph._nodes.filter((n) => n.type == "Reroute");
  }
  const rerouteLabel = selectedNodes.length ? "selected" : "all";
+ function getGroupsMenu() {
+ const groupNavEnabled = CONFIG_SERVICE.getConfigValue("features.group_nav_menu.enabled", false);
+ if (!groupNavEnabled) {
+ return [];
+ }
+ const filterRegex = CONFIG_SERVICE.getConfigValue("features.group_nav_menu.filter_regex", "");
+ const filterRegexPattern = new RegExp(filterRegex);
+ const groups = graph._groups;
+ const groupMenuItems = groups
+ .sort((a, b) => a.title.localeCompare(b.title))
+ .filter((group) => !filterRegex || filterRegexPattern.test(group.title))
+ .map((group) => ({
+ content: `${group.title}`,
+ className: "rgthree-contextmenu-item rgthree-contextmenu-github",
+ callback: (...args) => {
+ navigateToGroupMaybe(group, { checkQuality: false, forceZoom: true });
+ },
+ }));
+ return [
+ {
+ content: "Groups",
+ disabled: true,
+ className: "rgthree-contextmenu-item rgthree-contextmenu-label",
+ },
+ ...groupMenuItems,
+ ];
+ }
+ const groupsMenuItems = getGroupsMenu();
  return [
  {
  content: "Actions",
@@ -346,6 +374,7 @@ class Rgthree extends EventTarget {
  })();
  },
  },
+ ...groupsMenuItems,
  {
  content: "More...",
  disabled: true,

web/comfyui/utils.js

@@ -614,3 +614,19 @@ LiteGraph.isValidConnection = function (typeA, typeB) {
  }
  return isValid;
 };
+export function navigateToGroupMaybe(group, { checkQuality, forceZoom } = { checkQuality: true, forceZoom: false }) {
+ var _a, _b;
+ const canvas = app.canvas;
+ const lowQuality = (((_a = canvas.ds) === null || _a === void 0 ? void 0 : _a.scale) || 1) <= 0.5;
+ if (!lowQuality || !checkQuality) {
+ canvas.centerOnNode(group);
+ const zoomCurrent = forceZoom ? 2 : (((_b = canvas.ds) === null || _b === void 0 ? void 0 : _b.scale) || 1);
+ const zoomX = canvas.canvas.width / group._size[0] - 0.02;
+ const zoomY = canvas.canvas.height / group._size[1] - 0.02;
+ canvas.setZoom(Math.min(zoomCurrent, zoomX, zoomY), [
+ canvas.canvas.width / 2,
+ canvas.canvas.height / 2,
+ ]);
+ canvas.setDirty(true, true);
+ }
+}