Update Litegraph API - canvas.state (#1372)

* Update Litegraph API - canvas.state * Update litegraph --------- Co-authored-by: filtered <[email protected]>
Comfy-Org · Oct 30, 2024 · 324eff9 · 324eff9
1 parent 4b1104f
commit 324eff9
Show file tree

Hide file tree

Showing 4 changed files with 11 additions and 20 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git 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
@@ -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
@@ -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')