Make LGraphCanvas shallowReactive (#1169)

* Make LGraphCanvas shallowReactive

* Restore canvas options after creation

src/components/graph/GraphCanvas.vue

@@ -108,12 +108,12 @@ watchEffect(() => {
 watchEffect(() => {
   if (!canvasStore.canvas) return
 
-  if (canvasStore.draggingCanvas) {
+  if (canvasStore.canvas.dragging_canvas) {
     canvasStore.canvas.canvas.style.cursor = 'grabbing'
     return
   }
 
-  if (canvasStore.readOnly) {
+  if (canvasStore.canvas.read_only) {
     canvasStore.canvas.canvas.style.cursor = 'grab'
     return
   }

src/scripts/app.ts

@@ -55,6 +55,7 @@ import { IWidget } from '@comfyorg/litegraph'
 import { useExtensionStore } from '@/stores/extensionStore'
 import { KeyComboImpl, useKeybindingStore } from '@/stores/keybindingStore'
 import { useCommandStore } from '@/stores/commandStore'
+import { shallowReactive } from 'vue'
 
 export const ANIM_PREVIEW_WIDGET = '$$comfy_animation_preview'
 
@@ -1836,7 +1837,20 @@ export class ComfyApp {
 
     this.#addAfterConfigureHandler()
 
-    this.canvas = new LGraphCanvas(canvasEl, this.graph)
+    // Make LGraphCanvas shallow reactive so that any change on the root object
+    // triggers reactivity.
+    this.canvas = shallowReactive(
+      new LGraphCanvas(canvasEl, this.graph, {
+        skip_events: true,
+        skip_render: true
+      })
+    )
+    // Bind event/ start rendering later, so that event handlers get reactive canvas reference.
+    this.canvas.options.skip_events = false
+    this.canvas.options.skip_render = false
+    this.canvas.bindEvents()
+    this.canvas.startRendering()
+
     this.ctx = canvasEl.getContext('2d')
 
     LiteGraph.alt_drag_do_clone_nodes = true

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