From 974a7ef63f0826111c6131366c04a99ac4bece99 Mon Sep 17 00:00:00 2001
From: Chenlei Hu <chenlei.hu@mail.utoronto.ca>
Date: Tue, 3 Sep 2024 10:11:31 -0400
Subject: [PATCH] Store shallowRef of litegraph canvas (#722)

* Store shallowRef of litegraph canvas

* nit
---
 src/components/graph/GraphCanvas.vue | 52 ++++++++++++----------------
 src/stores/graphStore.ts             | 14 ++++++--
 2 files changed, 34 insertions(+), 32 deletions(-)

diff --git a/src/components/graph/GraphCanvas.vue b/src/components/graph/GraphCanvas.vue
index 533ba8948..8b993707e 100644
--- a/src/components/graph/GraphCanvas.vue
+++ b/src/components/graph/GraphCanvas.vue
@@ -36,12 +36,14 @@ import {
 } from '@comfyorg/litegraph'
 import type { RenderedTreeExplorerNode } from '@/types/treeExplorerTypes'
 import { useNodeBookmarkStore } from '@/stores/nodeBookmarkStore'
+import { useCanvasStore } from '@/stores/graphStore'
 
 const emit = defineEmits(['ready'])
 const canvasRef = ref<HTMLCanvasElement | null>(null)
 const settingStore = useSettingStore()
 const nodeDefStore = useNodeDefStore()
 const workspaceStore = useWorkspaceStore()
+const canvasStore = useCanvasStore()
 
 const betaMenuEnabled = computed(
   () => settingStore.get('Comfy.UseNewMenu') !== 'Disabled'
@@ -49,33 +51,27 @@ const betaMenuEnabled = computed(
 const nodeSearchEnabled = computed<boolean>(
   () => settingStore.get('Comfy.NodeSearchBoxImpl') === 'default'
 )
-watch(
-  nodeSearchEnabled,
-  (newVal) => {
-    LiteGraph.release_link_on_empty_shows_menu = !newVal
-    if (comfyApp.canvas) comfyApp.canvas.allow_searchbox = !newVal
-  },
-  { immediate: true }
-)
-const canvasInfoEnabled = computed<boolean>(() =>
-  settingStore.get('Comfy.Graph.CanvasInfo')
-)
-watch(
-  canvasInfoEnabled,
-  (newVal) => {
-    if (comfyApp.canvas) comfyApp.canvas.show_info = newVal
-  },
-  { immediate: true }
-)
 
-const zoomSpeed = computed(() => settingStore.get('Comfy.Graph.ZoomSpeed'))
-watch(
-  zoomSpeed,
-  (newVal: number) => {
-    if (comfyApp.canvas) comfyApp.canvas['zoom_speed'] = newVal
-  },
-  { immediate: true }
-)
+watchEffect(() => {
+  LiteGraph.release_link_on_empty_shows_menu = !nodeSearchEnabled.value
+  if (canvasStore.canvas) {
+    canvasStore.canvas.allow_searchbox = !nodeSearchEnabled.value
+  }
+})
+
+watchEffect(() => {
+  const canvasInfoEnabled = settingStore.get('Comfy.Graph.CanvasInfo')
+  if (canvasStore.canvas) {
+    canvasStore.canvas.show_info = canvasInfoEnabled
+  }
+})
+
+watchEffect(() => {
+  const zoomSpeed = settingStore.get('Comfy.Graph.ZoomSpeed')
+  if (canvasStore.canvas) {
+    canvasStore.canvas.zoom_speed = zoomSpeed
+  }
+})
 
 watchEffect(() => {
   nodeDefStore.showDeprecated = settingStore.get('Comfy.Node.ShowDeprecated')
@@ -117,9 +113,7 @@ onMounted(async () => {
 
   workspaceStore.spinner = true
   await comfyApp.setup(canvasRef.value)
-  comfyApp.canvas.allow_searchbox = !nodeSearchEnabled.value
-  comfyApp.canvas.show_info = canvasInfoEnabled.value
-  comfyApp.canvas['zoom_speed'] = zoomSpeed.value
+  canvasStore.canvas = comfyApp.canvas
   workspaceStore.spinner = false
 
   window['app'] = comfyApp
diff --git a/src/stores/graphStore.ts b/src/stores/graphStore.ts
index 74b03d82a..7eaa36997 100644
--- a/src/stores/graphStore.ts
+++ b/src/stores/graphStore.ts
@@ -1,11 +1,19 @@
-import { LGraphNode, LGraphGroup } from '@comfyorg/litegraph'
+import { LGraphNode, LGraphGroup, LGraphCanvas } from '@comfyorg/litegraph'
 import { defineStore } from 'pinia'
-import { ref } from 'vue'
+import { shallowRef } from 'vue'
 
 export const useTitleEditorStore = defineStore('titleEditor', () => {
-  const titleEditorTarget = ref<LGraphNode | LGraphGroup | null>(null)
+  const titleEditorTarget = shallowRef<LGraphNode | LGraphGroup | null>(null)
 
   return {
     titleEditorTarget
   }
 })
+
+export const useCanvasStore = defineStore('canvas', () => {
+  const canvas = shallowRef<LGraphCanvas | null>(null)
+
+  return {
+    canvas
+  }
+})