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>

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',