From 324eff93fd62f5cd4741b91a41c841a8e075b9f5 Mon Sep 17 00:00:00 2001
From: Chenlei Hu <huchenlei@proton.me>
Date: Tue, 29 Oct 2024 22:07:04 -0400
Subject: [PATCH] Update Litegraph API - canvas.state (#1372)

* Update Litegraph API - canvas.state

* Update litegraph

---------

Co-authored-by: filtered <176114999+webfiltered@users.noreply.github.com>
---
 package-lock.json                    |  8 ++++----
 package.json                         |  2 +-
 src/components/graph/GraphCanvas.vue |  4 ++--
 src/scripts/app.ts                   | 17 ++++-------------
 4 files changed, 11 insertions(+), 20 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index 024e65c69..0e9338a15 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -9,7 +9,7 @@
       "version": "1.3.28",
       "dependencies": {
         "@atlaskit/pragmatic-drag-and-drop": "^1.3.1",
-        "@comfyorg/litegraph": "^0.8.10",
+        "@comfyorg/litegraph": "^0.8.11",
         "@primevue/themes": "^4.0.5",
         "@vueuse/core": "^11.0.0",
         "axios": "^1.7.4",
@@ -1911,9 +1911,9 @@
       "dev": true
     },
     "node_modules/@comfyorg/litegraph": {
-      "version": "0.8.10",
-      "resolved": "https://registry.npmjs.org/@comfyorg/litegraph/-/litegraph-0.8.10.tgz",
-      "integrity": "sha512-xGAlWKnXTOG9cYR6300MJ/6euCaf1Wonc/gbbueNyaSvpBLUo4H5CdiYL6SzUCXol7FG3KeTt4/CpXWrhSvGKQ==",
+      "version": "0.8.11",
+      "resolved": "https://registry.npmjs.org/@comfyorg/litegraph/-/litegraph-0.8.11.tgz",
+      "integrity": "sha512-oTKWUWDaAjCV1kZROimKsevDJUSEIpSzjLdm8lE2IwMV+O1KUQNV3Y+/Xw4RywxGL4Z0zOpdI0aYA9zSB81w7Q==",
       "license": "MIT"
     },
     "node_modules/@cspotcode/source-map-support": {
diff --git a/package.json b/package.json
index 71dc5ec98..e8731fc80 100644
--- a/package.json
+++ b/package.json
@@ -67,7 +67,7 @@
   },
   "dependencies": {
     "@atlaskit/pragmatic-drag-and-drop": "^1.3.1",
-    "@comfyorg/litegraph": "^0.8.10",
+    "@comfyorg/litegraph": "^0.8.11",
     "@primevue/themes": "^4.0.5",
     "@vueuse/core": "^11.0.0",
     "axios": "^1.7.4",
diff --git a/src/components/graph/GraphCanvas.vue b/src/components/graph/GraphCanvas.vue
index bedb76826..4df4a177d 100644
--- a/src/components/graph/GraphCanvas.vue
+++ b/src/components/graph/GraphCanvas.vue
@@ -118,12 +118,12 @@ watchEffect(() => {
 watchEffect(() => {
   if (!canvasStore.canvas) return
 
-  if (canvasStore.canvas.dragging_canvas) {
+  if (canvasStore.canvas.state.draggingCanvas) {
     canvasStore.canvas.canvas.style.cursor = 'grabbing'
     return
   }
 
-  if (canvasStore.canvas.read_only) {
+  if (canvasStore.canvas.state.readOnly) {
     canvasStore.canvas.canvas.style.cursor = 'grab'
     return
   }
diff --git a/src/scripts/app.ts b/src/scripts/app.ts
index 9a32bb9f2..fa0e278cd 100644
--- a/src/scripts/app.ts
+++ b/src/scripts/app.ts
@@ -1847,19 +1847,10 @@ export class ComfyApp {
 
     this.#addAfterConfigureHandler()
 
-    // 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()
+    // Make LGraphCanvas.state shallow reactive so that any change on the root
+    // object triggers reactivity.
+    this.canvas = new LGraphCanvas(canvasEl, this.graph)
+    this.canvas.state = shallowReactive(this.canvas.state)
 
     this.ctx = canvasEl.getContext('2d')