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/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
   }
 })