Group selected nodes by Ctrl + g (#663)

* Ctrl + g to group selected noes

* Add playwright test

* nit

* Move button loc

* Update test expectations [skip ci]

---------

Co-authored-by: github-actions <github-actions@github.com>

browser_tests/interaction.spec.ts

@@ -158,6 +158,16 @@ test.describe('Node Interaction', () => {
     })
     expect(await comfyPage.page.locator('.node-title-editor').count()).toBe(0)
   })
+
+  test('Can group selected nodes', async ({ comfyPage }) => {
+    await comfyPage.setSetting('Comfy.GroupSelectedNodes.Padding', 10)
+    await comfyPage.select2Nodes()
+    await comfyPage.page.keyboard.down('Control')
+    await comfyPage.page.keyboard.press('KeyG')
+    await comfyPage.page.keyboard.up('Control')
+    await comfyPage.nextFrame()
+    await expect(comfyPage.canvas).toHaveScreenshot('group-selected-nodes.png')
+  })
 })
 
 test.describe('Canvas Interaction', () => {

package-lock.json

@@ -9,7 +9,7 @@
       "version": "1.2.38",
       "dependencies": {
         "@atlaskit/pragmatic-drag-and-drop": "^1.2.1",
-        "@comfyorg/litegraph": "^0.7.52",
+        "@comfyorg/litegraph": "^0.7.54",
         "@primevue/themes": "^4.0.0-rc.2",
         "@vitejs/plugin-vue": "^5.0.5",
         "@vueuse/core": "^11.0.0",
@@ -1881,9 +1881,9 @@
       "dev": true
     },
     "node_modules/@comfyorg/litegraph": {
-      "version": "0.7.52",
-      "resolved": "https://registry.npmjs.org/@comfyorg/litegraph/-/litegraph-0.7.52.tgz",
-      "integrity": "sha512-MtJn4VH3eaP4XYfLQVrc00vJGamOfl5a5xMRJpW8tfPO2iPaetshoB9dkDfNJ6fSolzMt24qvZttkPdh2aNR1Q==",
+      "version": "0.7.54",
+      "resolved": "https://registry.npmjs.org/@comfyorg/litegraph/-/litegraph-0.7.54.tgz",
+      "integrity": "sha512-nbd68LCFurokYmtq9c/fA9iIRRXAykDqKkAjAle33JlTU6FOr5FrZvg+VmHEk0YbxMTx7WB+4GGHBaaTJdMN9A==",
       "license": "MIT"
     },
     "node_modules/@cspotcode/source-map-support": {

package.json

@@ -56,7 +56,7 @@
   },
   "dependencies": {
     "@atlaskit/pragmatic-drag-and-drop": "^1.2.1",
-    "@comfyorg/litegraph": "^0.7.52",
+    "@comfyorg/litegraph": "^0.7.54",
     "@primevue/themes": "^4.0.0-rc.2",
     "@vitejs/plugin-vue": "^5.0.5",
     "@vueuse/core": "^11.0.0",

src/extensions/core/keybinds.ts

@@ -40,7 +40,8 @@ app.registerExtension({
         s: '#comfy-save-button',
         o: '#comfy-file-input',
         Backspace: '#comfy-clear-button',
-        d: '#comfy-load-default-button'
+        d: '#comfy-load-default-button',
+        g: '#comfy-group-selected-nodes-button'
       }
 
       const modifierKeybindId = modifierKeyIdMap[event.key]

src/scripts/app.ts

@@ -53,6 +53,7 @@ import { useSettingStore } from '@/stores/settingStore'
 import { useToastStore } from '@/stores/toastStore'
 import type { ToastMessageOptions } from 'primevue/toast'
 import { useWorkspaceStore } from '@/stores/workspaceStateStore'
+import { LGraphGroup } from '@comfyorg/litegraph'
 
 export const ANIM_PREVIEW_WIDGET = '$$comfy_animation_preview'
 

src/scripts/ui.ts

@@ -5,6 +5,9 @@ import { ComfySettingsDialog } from './ui/settings'
 import { ComfyApp, app } from './app'
 import { TaskItem } from '@/types/apiTypes'
 import { showSettingsDialog } from '@/services/dialogService'
+import { useToastStore } from '@/stores/toastStore'
+import { LGraphGroup } from '@comfyorg/litegraph'
+import { useSettingStore } from '@/stores/settingStore'
 
 export const ComfyDialog = _ComfyDialog
 
@@ -756,6 +759,31 @@ export class ComfyUI {
         onclick: async () => {
           app.resetView()
         }
+      }),
+      $el('button', {
+        id: 'comfy-group-selected-nodes-button',
+        textContent: 'Group',
+        hidden: true,
+        onclick: () => {
+          if (
+            !app.canvas.selected_nodes ||
+            Object.keys(app.canvas.selected_nodes).length === 0
+          ) {
+            useToastStore().add({
+              severity: 'error',
+              summary: 'No nodes selected',
+              detail: 'Please select nodes to group',
+              life: 3000
+            })
+            return
+          }
+          const group = new LGraphGroup()
+          const padding = useSettingStore().get(
+            'Comfy.GroupSelectedNodes.Padding'
+          )
+          group.addNodes(Object.values(app.canvas.selected_nodes), padding)
+          app.canvas.graph.add(group)
+        }
       })
     ]) as HTMLDivElement
 

src/scripts/ui/menu/index.ts

@@ -88,6 +88,7 @@ export class ComfyAppMenu {
         app
       })
     )
+
     this.actionsGroup = new ComfyButtonGroup(
       new ComfyButton({
         icon: 'refresh',

src/stores/settingStore.ts

@@ -241,6 +241,17 @@ export const useSettingStore = defineStore('setting', {
         type: 'hidden',
         defaultValue: ['.safetensors', '.sft']
       })
+
+      app.ui.settings.addSetting({
+        id: 'Comfy.GroupSelectedNodes.Padding',
+        name: 'Group selected nodes padding',
+        type: 'slider',
+        defaultValue: 10,
+        attrs: {
+          min: 0,
+          max: 100
+        }
+      })
     },
 
     set<K extends keyof Settings>(key: K, value: Settings[K]) {