Manage app.ts litegraph keybindings (#1151)

* Manage app.ts litegraph keybindings

* nit

src/stores/commandStore.ts

@@ -17,6 +17,7 @@ import { useTitleEditorStore } from './graphStore'
 import { useErrorHandling } from '@/hooks/errorHooks'
 import { useWorkflowStore } from './workflowStore'
 import { type KeybindingImpl, useKeybindingStore } from './keybindingStore'
+import { LGraphNode } from '@comfyorg/litegraph'
 
 export interface ComfyCommand {
   id: string
@@ -75,6 +76,28 @@ export class ComfyCommandImpl implements ComfyCommand {
 const getTracker = () =>
   app.workflowManager.activeWorkflow?.changeTracker ?? globalTracker
 
+const getSelectedNodes = (): LGraphNode[] => {
+  const selectedNodes = app.canvas.selected_nodes
+  const result: LGraphNode[] = []
+  if (selectedNodes) {
+    for (const i in selectedNodes) {
+      const node = selectedNodes[i]
+      result.push(node)
+    }
+  }
+  return result
+}
+
+const toggleSelectedNodesMode = (mode: number) => {
+  getSelectedNodes().forEach((node) => {
+    if (node.mode === mode) {
+      node.mode = 0 // always
+    } else {
+      node.mode = mode
+    }
+  })
+}
+
 export const useCommandStore = defineStore('command', () => {
   const settingStore = useSettingStore()
 
@@ -248,7 +271,11 @@ export const useCommandStore = defineStore('command', () => {
       icon: 'pi pi-plus',
       label: 'Zoom In',
       function: () => {
-        app.canvas.ds.changeScale(app.canvas.ds.scale + 0.1)
+        const ds = app.canvas.ds
+        ds.changeScale(ds.scale * 1.1, [
+          ds.element.width / 2,
+          ds.element.height / 2
+        ])
         app.canvas.setDirty(true, true)
       }
     },
@@ -257,7 +284,11 @@ export const useCommandStore = defineStore('command', () => {
       icon: 'pi pi-minus',
       label: 'Zoom Out',
       function: () => {
-        app.canvas.ds.changeScale(app.canvas.ds.scale - 0.1)
+        const ds = app.canvas.ds
+        ds.changeScale(ds.scale / 1.1, [
+          ds.element.width / 2,
+          ds.element.height / 2
+        ])
         app.canvas.setDirty(true, true)
       }
     },
@@ -365,6 +396,46 @@ export const useCommandStore = defineStore('command', () => {
       function: () => {
         useWorkflowStore().loadPreviousOpenedWorkflow()
       }
+    },
+    {
+      id: 'Comfy.Canvas.ToggleSelectedNodes.Mute',
+      icon: 'pi pi-volume-off',
+      label: 'Mute/Unmute Selected Nodes',
+      versionAdded: '1.3.11',
+      function: () => {
+        toggleSelectedNodesMode(2) // muted
+      }
+    },
+    {
+      id: 'Comfy.Canvas.ToggleSelectedNodes.Bypass',
+      icon: 'pi pi-shield',
+      label: 'Bypass/Unbypass Selected Nodes',
+      versionAdded: '1.3.11',
+      function: () => {
+        toggleSelectedNodesMode(4) // bypassed
+      }
+    },
+    {
+      id: 'Comfy.Canvas.ToggleSelectedNodes.Pin',
+      icon: 'pi pi-pin',
+      label: 'Pin/Unpin Selected Nodes',
+      versionAdded: '1.3.11',
+      function: () => {
+        getSelectedNodes().forEach((node) => {
+          node.pin(!node.pinned)
+        })
+      }
+    },
+    {
+      id: 'Comfy.Canvas.ToggleSelectedNodes.Collapse',
+      icon: 'pi pi-minus',
+      label: 'Collapse/Expand Selected Nodes',
+      versionAdded: '1.3.11',
+      function: () => {
+        getSelectedNodes().forEach((node) => {
+          node.collapse()
+        })
+      }
     }
   ]
 

src/stores/coreKeybindings.ts

@@ -94,5 +94,71 @@ export const CORE_KEYBINDINGS: Keybinding[] = [
       ctrl: true
     },
     commandId: 'Comfy.ShowSettingsDialog'
+  },
+  // For '=' both holding shift and not holding shift
+  {
+    combo: {
+      key: '=',
+      alt: true
+    },
+    commandId: 'Comfy.Canvas.ZoomIn',
+    targetSelector: '#graph-canvas'
+  },
+  {
+    combo: {
+      key: '+',
+      alt: true,
+      shift: true
+    },
+    commandId: 'Comfy.Canvas.ZoomIn',
+    targetSelector: '#graph-canvas'
+  },
+  // For number pad '+'
+  {
+    combo: {
+      key: '+',
+      alt: true
+    },
+    commandId: 'Comfy.Canvas.ZoomIn',
+    targetSelector: '#graph-canvas'
+  },
+  {
+    combo: {
+      key: '-',
+      alt: true
+    },
+    commandId: 'Comfy.Canvas.ZoomOut',
+    targetSelector: '#graph-canvas'
+  },
+  {
+    combo: {
+      key: 'p'
+    },
+    commandId: 'Comfy.Canvas.ToggleSelectedNodes.Pin',
+    targetSelector: '#graph-canvas'
+  },
+  {
+    combo: {
+      key: 'c',
+      alt: true
+    },
+    commandId: 'Comfy.Canvas.ToggleSelectedNodes.Collapse',
+    targetSelector: '#graph-canvas'
+  },
+  {
+    combo: {
+      key: 'b',
+      ctrl: true
+    },
+    commandId: 'Comfy.Canvas.ToggleSelectedNodes.Bypass',
+    targetSelector: '#graph-canvas'
+  },
+  {
+    combo: {
+      key: 'm',
+      ctrl: true
+    },
+    commandId: 'Comfy.Canvas.ToggleSelectedNodes.Mute',
+    targetSelector: '#graph-canvas'
   }
 ]

src/stores/keybindingStore.ts

@@ -8,16 +8,20 @@ import type { ComfyExtension } from '@/types/comfy'
 export class KeybindingImpl implements Keybinding {
   commandId: string
   combo: KeyComboImpl
+  targetSelector?: string
 
   constructor(obj: Keybinding) {
     this.commandId = obj.commandId
     this.combo = new KeyComboImpl(obj.combo)
+    this.targetSelector = obj.targetSelector
   }
 
   equals(other: any): boolean {
     if (toRaw(other) instanceof KeybindingImpl) {
       return (
-        this.commandId === other.commandId && this.combo.equals(other.combo)
+        this.commandId === other.commandId &&
+        this.combo.equals(other.combo) &&
+        this.targetSelector === other.targetSelector
       )
     }
     return false