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.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]) {