Group navigation prototype

rgthree_config.json.default

@@ -23,6 +23,10 @@
       "height": 16,
       "position": "top"
     },
+    "menu_groups": {
+      "enabled": false,
+      "filter_regex": ""
+    },
     // Allows for dragging and dropping a workflow (image, json) onto an individual node to import
     // that specific node's widgets if it also exists in the dropped workflow (same id, type).
     "import_individual_nodes": {

src_web/comfyui/config.ts

@@ -91,6 +91,19 @@ const CONFIGURABLE: { features: ConfigurationSchema[] } = {
         },
       ],
     },
+    {
+      key: "features.menu_groups.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.menu_groups.filter_regex",
+          type: ConfigType.STRING,
+          label: "Filter RegEx: Only shows matching Groups",
+        },
+      ],
+    },
     {
       key: "features.menu_bookmarks.enabled",
       type: ConfigType.BOOLEAN,

src_web/comfyui/fast_groups_muter.ts

@@ -15,6 +15,7 @@ import {
 import {SERVICE as FAST_GROUPS_SERVICE} from "./fast_groups_service.js";
 import { drawNodeWidget, fitString } from "./utils_canvas.js";
 import { RgthreeBaseVirtualNodeConstructor } from "typings/rgthree.js";
+import { navigateToGroupMaybe } from "./utils.js";
 
 declare const LGraphCanvas: typeof TLGraphCanvas;
 declare const LiteGraph: typeof TLiteGraph;
@@ -280,21 +281,7 @@ export abstract class BaseFastGroupsModeChanger extends RgthreeBaseVirtualNode {
                 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,11 +17,12 @@ 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";
 import { iconGear, iconReplace, iconStarFilled, logoRgthree } from "rgthree/common/media/svgs.js";
+import { SERVICE as FAST_GROUPS_SERVICE } from "./fast_groups_service.js";
 import type { Bookmark } from "./bookmark";
 import { createElement, query } from "rgthree/common/utils_dom.js";
 
@@ -541,6 +542,38 @@ class Rgthree extends EventTarget {
     }
     const rerouteLabel = selectedNodes.length ? "selected" : "all";
 
+    function getGroupsMenu(): ContextMenuItem[] {
+      const groupNavEnabled = CONFIG_SERVICE.getConfigValue("features.menu_groups.enabled", false);
+      if (!groupNavEnabled) {
+        return [];
+      }
+
+      const filterRegex = CONFIG_SERVICE.getConfigValue("features.menu_groups.filter_regex", "");
+      const filterRegexPattern = new RegExp(filterRegex, "i");
+
+      const groupMenuItems = FAST_GROUPS_SERVICE.getGroups("alphanumeric")
+        .filter((group) => !filterRegex || filterRegexPattern.test(group.title))
+        .map((group) => ({
+          content: `${group.title}`,
+          className: "rgthree-contextmenu-item rgthree-contextmenu-github",
+          callback: () => {
+            navigateToGroupMaybe(group, { checkQuality: false, forceZoom: true });
+          },
+        }));
+
+      return !groupMenuItems.length
+        ? []
+        : [
+            {
+              content: "Groups",
+              disabled: true,
+              className: "rgthree-contextmenu-item rgthree-contextmenu-label",
+            },
+            ...groupMenuItems,
+          ];
+    }
+
+    const groupsMenuItems = getGroupsMenu();
     const showBookmarks = CONFIG_SERVICE.getFeatureValue("menu_bookmarks.enabled");
     const bookmarkMenuItems = showBookmarks ? getBookmarks() : [];
 
@@ -583,6 +616,7 @@ class Rgthree extends EventTarget {
           })();
         },
       },
+      ...groupsMenuItems,
       ...bookmarkMenuItems,
       {
         content: "More...",

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

@@ -68,6 +68,19 @@ const CONFIGURABLE = {
                 },
             ],
         },
+        {
+            key: "features.menu_groups.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.menu_groups.filter_regex",
+                    type: ConfigType.STRING,
+                    label: "Filter RegEx: Only shows matching Groups",
+                },
+            ],
+        },
         {
             key: "features.menu_bookmarks.enabled",
             type: ConfigType.BOOLEAN,

web/comfyui/fast_groups_muter.js

@@ -3,6 +3,7 @@ import { RgthreeBaseVirtualNode } 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";
@@ -190,23 +191,11 @@ export class BaseFastGroupsModeChanger extends RgthreeBaseVirtualNode {
                         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,11 +3,12 @@ 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";
 import { iconGear, iconReplace, iconStarFilled, logoRgthree } from "../../rgthree/common/media/svgs.js";
+import { SERVICE as FAST_GROUPS_SERVICE } from "./fast_groups_service.js";
 import { createElement, query } from "../../rgthree/common/utils_dom.js";
 export var LogLevel;
 (function (LogLevel) {
@@ -342,6 +343,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.menu_groups.enabled", false);
+            if (!groupNavEnabled) {
+                return [];
+            }
+            const filterRegex = CONFIG_SERVICE.getConfigValue("features.menu_groups.filter_regex", "");
+            const filterRegexPattern = new RegExp(filterRegex, "i");
+            const groupMenuItems = FAST_GROUPS_SERVICE.getGroups("alphanumeric")
+                .filter((group) => !filterRegex || filterRegexPattern.test(group.title))
+                .map((group) => ({
+                content: `${group.title}`,
+                className: "rgthree-contextmenu-item rgthree-contextmenu-github",
+                callback: () => {
+                    navigateToGroupMaybe(group, { checkQuality: false, forceZoom: true });
+                },
+            }));
+            return !groupMenuItems.length
+                ? []
+                : [
+                    {
+                        content: "Groups",
+                        disabled: true,
+                        className: "rgthree-contextmenu-item rgthree-contextmenu-label",
+                    },
+                    ...groupMenuItems,
+                ];
+        }
+        const groupsMenuItems = getGroupsMenu();
         const showBookmarks = CONFIG_SERVICE.getFeatureValue("menu_bookmarks.enabled");
         const bookmarkMenuItems = showBookmarks ? getBookmarks() : [];
         return [
@@ -382,6 +411,7 @@ class Rgthree extends EventTarget {
                     })();
                 },
             },
+            ...groupsMenuItems,
             ...bookmarkMenuItems,
             {
                 content: "More...",
@@ -711,6 +741,7 @@ class Rgthree extends EventTarget {
         return this.logger.newSession(name);
     }
     isDevMode() {
+        return GLOBAL_LOG_LEVEL >= LogLevel.DEBUG || window.location.href.includes("#rgthree-dev");
         if (window.location.href.includes("rgthree-dev=false")) {
             return false;
         }

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);
+    }
+}