From 2cb1cea196a2f2a3d45ee7c56e60afadb623bc6a Mon Sep 17 00:00:00 2001
From: Chenlei Hu <huchenlei@proton.me>
Date: Tue, 8 Oct 2024 14:07:15 -0400
Subject: [PATCH] Make LGraphCanvas shallowReactive (#1169)

* Make LGraphCanvas shallowReactive

* Restore canvas options after creation
---
 src/components/graph/GraphCanvas.vue |  4 ++--
 src/scripts/app.ts                   | 16 +++++++++++++-
 src/stores/graphStore.ts             | 31 +++++++---------------------
 3 files changed, 24 insertions(+), 27 deletions(-)

diff --git a/src/components/graph/GraphCanvas.vue b/src/components/graph/GraphCanvas.vue
index ded3d7fd6..71d426546 100644
--- a/src/components/graph/GraphCanvas.vue
+++ b/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
   }
diff --git a/src/scripts/app.ts b/src/scripts/app.ts
index c9f2ee6a8..11a3b4a8c 100644
--- a/src/scripts/app.ts
+++ b/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
diff --git a/src/stores/graphStore.ts b/src/stores/graphStore.ts
index d51cea34f..268f82255 100644
--- a/src/stores/graphStore.ts
+++ b/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
   }
 })