Graph canvas menu (#1023)

* add graph canvas menu

* Move to corner

* Remove action bar reset zoom button

* nit

* Add setting

---------

Co-authored-by: huchenlei <chenlei.hu@mail.utoronto.ca>

src/stores/commandStore.ts

@@ -124,7 +124,7 @@ export const useCommandStore = defineStore('command', () => {
       }
     },
     {
-      id: 'Comfy.ResetView',
+      id: 'Comfy.Canvas.ResetView',
       icon: 'pi pi-expand',
       label: 'Reset View',
       function: () => {
@@ -180,6 +180,32 @@ export const useCommandStore = defineStore('command', () => {
       icon: 'pi pi-folder-open',
       label: 'Browse Templates',
       function: showTemplateWorkflowsDialog
+    },
+    {
+      id: 'Comfy.Canvas.ZoomIn',
+      icon: 'pi pi-plus',
+      label: 'Zoom In',
+      function: () => {
+        app.canvas.ds.changeScale(app.canvas.ds.scale + 0.1)
+        app.canvas.setDirty(true, true)
+      }
+    },
+    {
+      id: 'Comfy.Canvas.ZoomOut',
+      icon: 'pi pi-minus',
+      label: 'Zoom Out',
+      function: () => {
+        app.canvas.ds.changeScale(app.canvas.ds.scale - 0.1)
+        app.canvas.setDirty(true, true)
+      }
+    },
+    {
+      id: 'Comfy.Canvas.ToggleLock',
+      icon: 'pi pi-lock',
+      label: 'Toggle Lock',
+      function: () => {
+        app.canvas['read_only'] = !app.canvas['read_only']
+      }
     }
   ]
 

src/stores/coreSettings.ts

@@ -12,7 +12,6 @@ export const CORE_SETTINGS: SettingParams[] = [
     type: 'boolean',
     defaultValue: true
   },
-
   {
     id: 'Comfy.NodeSearchBoxImpl',
     category: ['Comfy', 'Node Search Box', 'Implementation'],
@@ -381,5 +380,11 @@ export const CORE_SETTINGS: SettingParams[] = [
     type: 'hidden',
     options: ['Sidebar', 'Topbar'],
     defaultValue: 'Sidebar'
+  },
+  {
+    id: 'Comfy.Graph.CanvasMenu',
+    name: 'Show graph canvas menu',
+    type: 'boolean',
+    defaultValue: true
   }
 ]

src/stores/graphStore.ts

@@ -1,6 +1,6 @@
 import { LGraphNode, LGraphGroup, LGraphCanvas } from '@comfyorg/litegraph'
 import { defineStore } from 'pinia'
-import { shallowRef } from 'vue'
+import { ref, shallowRef } from 'vue'
 
 export const useTitleEditorStore = defineStore('titleEditor', () => {
   const titleEditorTarget = shallowRef<LGraphNode | LGraphGroup | null>(null)
@@ -12,8 +12,19 @@ export const useTitleEditorStore = defineStore('titleEditor', () => {
 
 export const useCanvasStore = defineStore('canvas', () => {
   const canvas = shallowRef<LGraphCanvas | null>(null)
+  const readOnly = ref(false)
+
+  document.addEventListener(
+    'litegraph:canvas',
+    (e: CustomEvent<{ subType: string; readOnly: boolean }>) => {
+      if (e.detail?.subType === 'read-only') {
+        readOnly.value = e.detail.readOnly
+      }
+    }
+  )
 
   return {
-    canvas
+    canvas,
+    readOnly
   }
 })