From 2da23fd37308940fa357563c379aed9eaf295261 Mon Sep 17 00:00:00 2001
From: Chenlei Hu <huchenlei@proton.me>
Date: Thu, 6 Feb 2025 15:21:11 -0500
Subject: [PATCH] [Refactor] Extract litegraph settings sync to a composable
 (#2461)

---
 src/components/graph/GraphCanvas.vue    | 116 +--------------------
 src/composables/useLitegraphSettings.ts | 128 ++++++++++++++++++++++++
 2 files changed, 130 insertions(+), 114 deletions(-)
 create mode 100644 src/composables/useLitegraphSettings.ts

diff --git a/src/components/graph/GraphCanvas.vue b/src/components/graph/GraphCanvas.vue
index b95ba53a02..22fb0c1fb3 100644
--- a/src/components/graph/GraphCanvas.vue
+++ b/src/components/graph/GraphCanvas.vue
@@ -29,7 +29,6 @@
 </template>
 
 <script setup lang="ts">
-import { CanvasPointer, LGraphNode, LiteGraph } from '@comfyorg/litegraph'
 import { computed, onMounted, ref, watch, watchEffect } from 'vue'
 
 import LiteGraphCanvasSplitterOverlay from '@/components/LiteGraphCanvasSplitterOverlay.vue'
@@ -45,6 +44,7 @@ import { useCanvasDrop } from '@/composables/useCanvasDrop'
 import { useContextMenuTranslation } from '@/composables/useContextMenuTranslation'
 import { useCopy } from '@/composables/useCopy'
 import { useGlobalLitegraph } from '@/composables/useGlobalLitegraph'
+import { useLitegraphSettings } from '@/composables/useLitegraphSettings'
 import { usePaste } from '@/composables/usePaste'
 import { useWorkflowPersistence } from '@/composables/useWorkflowPersistence'
 import { CORE_SETTINGS } from '@/constants/coreSettings'
@@ -79,42 +79,6 @@ const canvasMenuEnabled = computed(() =>
 )
 const tooltipEnabled = computed(() => settingStore.get('Comfy.EnableTooltips'))
 
-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(() => {
-  LiteGraph.snaps_for_comfy = settingStore.get('Comfy.Node.AutoSnapLinkToSlot')
-})
-
-watchEffect(() => {
-  LiteGraph.snap_highlights_node = settingStore.get(
-    'Comfy.Node.SnapHighlightsNode'
-  )
-})
-
-watchEffect(() => {
-  LGraphNode.keepAllLinksOnBypass = settingStore.get(
-    'Comfy.Node.BypassAllLinksOnDelete'
-  )
-})
-
-watchEffect(() => {
-  LiteGraph.middle_click_slot_add_default_node = settingStore.get(
-    'Comfy.Node.MiddleClickRerouteNode'
-  )
-})
-
 watchEffect(() => {
   nodeDefStore.showDeprecated = settingStore.get('Comfy.Node.ShowDeprecated')
 })
@@ -137,77 +101,6 @@ watchEffect(() => {
   })
 })
 
-watchEffect(() => {
-  const linkRenderMode = settingStore.get('Comfy.LinkRenderMode')
-  if (canvasStore.canvas) {
-    canvasStore.canvas.links_render_mode = linkRenderMode
-    canvasStore.canvas.setDirty(/* fg */ false, /* bg */ true)
-  }
-})
-
-watchEffect(() => {
-  const lowQualityRenderingZoomThreshold = settingStore.get(
-    'LiteGraph.Canvas.LowQualityRenderingZoomThreshold'
-  )
-  if (canvasStore.canvas) {
-    canvasStore.canvas.low_quality_zoom_threshold =
-      lowQualityRenderingZoomThreshold
-    canvasStore.canvas.setDirty(/* fg */ true, /* bg */ true)
-  }
-})
-
-watchEffect(() => {
-  const linkMarkerShape = settingStore.get('Comfy.Graph.LinkMarkers')
-  const { canvas } = canvasStore
-  if (canvas) {
-    canvas.linkMarkerShape = linkMarkerShape
-    canvas.setDirty(false, true)
-  }
-})
-
-watchEffect(() => {
-  const reroutesEnabled = settingStore.get('Comfy.RerouteBeta')
-  const { canvas } = canvasStore
-  if (canvas) {
-    canvas.reroutesEnabled = reroutesEnabled
-    canvas.setDirty(false, true)
-  }
-})
-
-watchEffect(() => {
-  const maximumFps = settingStore.get('LiteGraph.Canvas.MaximumFps')
-  const { canvas } = canvasStore
-  if (canvas) canvas.maximumFps = maximumFps
-})
-
-watchEffect(() => {
-  const dragZoomEnabled = settingStore.get('Comfy.Graph.CtrlShiftZoom')
-  const { canvas } = canvasStore
-  if (canvas) canvas.dragZoomEnabled = dragZoomEnabled
-})
-
-watchEffect(() => {
-  CanvasPointer.doubleClickTime = settingStore.get(
-    'Comfy.Pointer.DoubleClickTime'
-  )
-})
-
-watchEffect(() => {
-  CanvasPointer.bufferTime = settingStore.get('Comfy.Pointer.ClickBufferTime')
-})
-
-watchEffect(() => {
-  CanvasPointer.maxClickDrift = settingStore.get('Comfy.Pointer.ClickDrift')
-})
-
-watchEffect(() => {
-  LiteGraph.CANVAS_GRID_SIZE = settingStore.get('Comfy.SnapToGrid.GridSize')
-})
-
-watchEffect(() => {
-  LiteGraph.alwaysSnapToGrid = settingStore.get('pysssss.SnapToGrid')
-})
-
 watch(
   () => settingStore.get('Comfy.WidgetControlMode'),
   () => {
@@ -247,12 +140,6 @@ watch(
   }
 )
 
-watchEffect(() => {
-  LiteGraph.context_menu_scaling = settingStore.get(
-    'LiteGraph.ContextMenu.Scaling'
-  )
-})
-
 const loadCustomNodesI18n = async () => {
   try {
     const i18nData = await api.getCustomNodesI18n()
@@ -267,6 +154,7 @@ const loadCustomNodesI18n = async () => {
 const comfyAppReady = ref(false)
 const workflowPersistence = useWorkflowPersistence()
 useCanvasDrop(canvasRef)
+useLitegraphSettings()
 
 onMounted(async () => {
   useGlobalLitegraph()
diff --git a/src/composables/useLitegraphSettings.ts b/src/composables/useLitegraphSettings.ts
new file mode 100644
index 0000000000..8ca88a2d7f
--- /dev/null
+++ b/src/composables/useLitegraphSettings.ts
@@ -0,0 +1,128 @@
+import { CanvasPointer, LGraphNode, LiteGraph } from '@comfyorg/litegraph'
+import { watchEffect } from 'vue'
+
+import { useCanvasStore } from '@/stores/graphStore'
+import { useSettingStore } from '@/stores/settingStore'
+
+/**
+ * Watch for changes in the setting store and update the LiteGraph settings accordingly.
+ */
+export const useLitegraphSettings = () => {
+  const settingStore = useSettingStore()
+  const canvasStore = useCanvasStore()
+
+  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(() => {
+    LiteGraph.snaps_for_comfy = settingStore.get(
+      'Comfy.Node.AutoSnapLinkToSlot'
+    )
+  })
+
+  watchEffect(() => {
+    LiteGraph.snap_highlights_node = settingStore.get(
+      'Comfy.Node.SnapHighlightsNode'
+    )
+  })
+
+  watchEffect(() => {
+    LGraphNode.keepAllLinksOnBypass = settingStore.get(
+      'Comfy.Node.BypassAllLinksOnDelete'
+    )
+  })
+
+  watchEffect(() => {
+    LiteGraph.middle_click_slot_add_default_node = settingStore.get(
+      'Comfy.Node.MiddleClickRerouteNode'
+    )
+  })
+
+  watchEffect(() => {
+    const linkRenderMode = settingStore.get('Comfy.LinkRenderMode')
+    if (canvasStore.canvas) {
+      canvasStore.canvas.links_render_mode = linkRenderMode
+      canvasStore.canvas.setDirty(/* fg */ false, /* bg */ true)
+    }
+  })
+
+  watchEffect(() => {
+    const lowQualityRenderingZoomThreshold = settingStore.get(
+      'LiteGraph.Canvas.LowQualityRenderingZoomThreshold'
+    )
+    if (canvasStore.canvas) {
+      canvasStore.canvas.low_quality_zoom_threshold =
+        lowQualityRenderingZoomThreshold
+      canvasStore.canvas.setDirty(/* fg */ true, /* bg */ true)
+    }
+  })
+
+  watchEffect(() => {
+    const linkMarkerShape = settingStore.get('Comfy.Graph.LinkMarkers')
+    const { canvas } = canvasStore
+    if (canvas) {
+      canvas.linkMarkerShape = linkMarkerShape
+      canvas.setDirty(false, true)
+    }
+  })
+
+  watchEffect(() => {
+    const reroutesEnabled = settingStore.get('Comfy.RerouteBeta')
+    const { canvas } = canvasStore
+    if (canvas) {
+      canvas.reroutesEnabled = reroutesEnabled
+      canvas.setDirty(false, true)
+    }
+  })
+
+  watchEffect(() => {
+    const maximumFps = settingStore.get('LiteGraph.Canvas.MaximumFps')
+    const { canvas } = canvasStore
+    if (canvas) canvas.maximumFps = maximumFps
+  })
+
+  watchEffect(() => {
+    const dragZoomEnabled = settingStore.get('Comfy.Graph.CtrlShiftZoom')
+    const { canvas } = canvasStore
+    if (canvas) canvas.dragZoomEnabled = dragZoomEnabled
+  })
+
+  watchEffect(() => {
+    CanvasPointer.doubleClickTime = settingStore.get(
+      'Comfy.Pointer.DoubleClickTime'
+    )
+  })
+
+  watchEffect(() => {
+    CanvasPointer.bufferTime = settingStore.get('Comfy.Pointer.ClickBufferTime')
+  })
+
+  watchEffect(() => {
+    CanvasPointer.maxClickDrift = settingStore.get('Comfy.Pointer.ClickDrift')
+  })
+
+  watchEffect(() => {
+    LiteGraph.CANVAS_GRID_SIZE = settingStore.get('Comfy.SnapToGrid.GridSize')
+  })
+
+  watchEffect(() => {
+    LiteGraph.alwaysSnapToGrid = settingStore.get('pysssss.SnapToGrid')
+  })
+
+  watchEffect(() => {
+    LiteGraph.context_menu_scaling = settingStore.get(
+      'LiteGraph.ContextMenu.Scaling'
+    )
+  })
+}