Make LGraphCanvas shallowReactive (#1169)

* Make LGraphCanvas shallowReactive

* Restore canvas options after creation

src/stores/graphStore.ts

@@ -1,6 +1,6 @@
 import { LGraphNode, LGraphGroup, LGraphCanvas } from '@comfyorg/litegraph'
 import { defineStore } from 'pinia'
-import { ref, shallowRef } from 'vue'
+import { shallowRef } from 'vue'
 
 export const useTitleEditorStore = defineStore('titleEditor', () => {
   const titleEditorTarget = shallowRef<LGraphNode | LGraphGroup | null>(null)
@@ -11,31 +11,14 @@ export const useTitleEditorStore = defineStore('titleEditor', () => {
 })
 
 export const useCanvasStore = defineStore('canvas', () => {
+  /**
+   * The LGraphCanvas instance.
+   *
+   * The root LGraphCanvas object is shallow reactive.
+   */
   const canvas = shallowRef<LGraphCanvas | null>(null)
-  const readOnly = ref(false)
-  const draggingCanvas = ref(false)
-
-  document.addEventListener(
-    'litegraph:canvas',
-    (e: CustomEvent<{ subType: string; readOnly: boolean }>) => {
-      if (e.detail?.subType === 'read-only') {
-        readOnly.value = e.detail.readOnly
-      }
-    }
-  )
-
-  document.addEventListener(
-    'litegraph:canvas',
-    (e: CustomEvent<{ subType: string; draggingCanvas: boolean }>) => {
-      if (e.detail?.subType === 'dragging-canvas') {
-        draggingCanvas.value = e.detail.draggingCanvas
-      }
-    }
-  )
 
   return {
-    canvas,
-    readOnly,
-    draggingCanvas
+    canvas
   }
 })