From 38fb53dca8776b14c98fe9e36cc84f8756f19999 Mon Sep 17 00:00:00 2001
From: Simula_r <18093452+simula-r@users.noreply.github.com>
Date: Wed, 19 Nov 2025 18:49:58 -0800
Subject: [PATCH] feat: LOD setting for LG and Vue (#6755)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

## Summary

Create a composable for useRenderModeSetting that lets you set a setting
for either vue or litegraph and once set remembers each state
respectively.

```
  useRenderModeSetting(
    { setting: 'LiteGraph.Canvas.MinFontSizeForLOD', vue: 0, litegraph: 8 },
    shouldRenderVueNodes
  )
```

## Screenshots (if applicable)

<img width="1611" height="997" alt="image"
src="https://github.com/user-attachments/assets/621930f2-2d21-4c86-a46d-e3e292d4e012"
/>
<img width="1611" height="997" alt="chrome_Gr1V3P6sJi"
src="https://github.com/user-attachments/assets/eb63b747-487f-4f5e-8fcf-f0d2ff97b976"
/>

┆Issue is synchronized with this [Notion
page](https://www.notion.so/PR-6755-feat-LOD-setting-for-LG-and-Vue-2b16d73d365081cbbf09c292ee3c0e96)
by [Unito](https://www.unito.io)
---
 .../vueNodes/interactions/canvas/zoom.spec.ts |  1 +
 .../tests/vueNodes/nodeStates/lod.spec.ts     |  1 +
 src/composables/graph/useVueNodeLifecycle.ts  |  8 +++-
 .../settings/useRenderModeSetting.ts          | 42 +++++++++++++++++++
 4 files changed, 50 insertions(+), 2 deletions(-)
 create mode 100644 src/composables/settings/useRenderModeSetting.ts

diff --git a/browser_tests/tests/vueNodes/interactions/canvas/zoom.spec.ts b/browser_tests/tests/vueNodes/interactions/canvas/zoom.spec.ts
index b87309f10..216623337 100644
--- a/browser_tests/tests/vueNodes/interactions/canvas/zoom.spec.ts
+++ b/browser_tests/tests/vueNodes/interactions/canvas/zoom.spec.ts
@@ -6,6 +6,7 @@ import {
 test.describe('Vue Nodes Zoom', () => {
   test.beforeEach(async ({ comfyPage }) => {
     await comfyPage.setSetting('Comfy.VueNodes.Enabled', true)
+    await comfyPage.setSetting('LiteGraph.Canvas.MinFontSizeForLOD', 8)
     await comfyPage.vueNodes.waitForNodes()
   })
 
diff --git a/browser_tests/tests/vueNodes/nodeStates/lod.spec.ts b/browser_tests/tests/vueNodes/nodeStates/lod.spec.ts
index cfe0ba1b3..884290227 100644
--- a/browser_tests/tests/vueNodes/nodeStates/lod.spec.ts
+++ b/browser_tests/tests/vueNodes/nodeStates/lod.spec.ts
@@ -9,6 +9,7 @@ test.beforeEach(async ({ comfyPage }) => {
 test.describe('Vue Nodes - LOD', () => {
   test.beforeEach(async ({ comfyPage }) => {
     await comfyPage.setSetting('Comfy.VueNodes.Enabled', true)
+    await comfyPage.setSetting('LiteGraph.Canvas.MinFontSizeForLOD', 8)
     await comfyPage.setup()
     await comfyPage.loadWorkflow('default')
   })
diff --git a/src/composables/graph/useVueNodeLifecycle.ts b/src/composables/graph/useVueNodeLifecycle.ts
index a1be77984..7f1744014 100644
--- a/src/composables/graph/useVueNodeLifecycle.ts
+++ b/src/composables/graph/useVueNodeLifecycle.ts
@@ -3,6 +3,7 @@ import { shallowRef, watch } from 'vue'
 
 import { useGraphNodeManager } from '@/composables/graph/useGraphNodeManager'
 import type { GraphNodeManager } from '@/composables/graph/useGraphNodeManager'
+import { useRenderModeSetting } from '@/composables/settings/useRenderModeSetting'
 import { useVueFeatureFlags } from '@/composables/useVueFeatureFlags'
 import { useVueNodesMigrationDismissed } from '@/composables/useVueNodesMigrationDismissed'
 import type { LGraphNode } from '@/lib/litegraph/src/litegraph'
@@ -18,15 +19,18 @@ function useVueNodeLifecycleIndividual() {
   const canvasStore = useCanvasStore()
   const layoutMutations = useLayoutMutations()
   const { shouldRenderVueNodes } = useVueFeatureFlags()
-
   const nodeManager = shallowRef<GraphNodeManager | null>(null)
-
   const { startSync } = useLayoutSync()
 
   const isVueNodeToastDismissed = useVueNodesMigrationDismissed()
 
   let hasShownMigrationToast = false
 
+  useRenderModeSetting(
+    { setting: 'LiteGraph.Canvas.MinFontSizeForLOD', vue: 0, litegraph: 8 },
+    shouldRenderVueNodes
+  )
+
   const initializeNodeManager = () => {
     // Use canvas graph if available (handles subgraph contexts), fallback to app graph
     const activeGraph = comfyApp.canvas?.graph
diff --git a/src/composables/settings/useRenderModeSetting.ts b/src/composables/settings/useRenderModeSetting.ts
new file mode 100644
index 000000000..6e97471e2
--- /dev/null
+++ b/src/composables/settings/useRenderModeSetting.ts
@@ -0,0 +1,42 @@
+import type { ComputedRef } from 'vue'
+import { ref, watch } from 'vue'
+
+import { useSettingStore } from '@/platform/settings/settingStore'
+import type { Settings } from '@/schemas/apiSchema'
+
+interface RenderModeSettingConfig<TSettingKey extends keyof Settings> {
+  setting: TSettingKey
+  vue: Settings[TSettingKey]
+  litegraph: Settings[TSettingKey]
+}
+
+export function useRenderModeSetting<TSettingKey extends keyof Settings>(
+  config: RenderModeSettingConfig<TSettingKey>,
+  isVueMode: ComputedRef<boolean>
+) {
+  const settingStore = useSettingStore()
+  const vueValue = ref(config.vue)
+  const litegraphValue = ref(config.litegraph)
+  const lastWasVue = ref<boolean | null>(null)
+
+  const load = async (vue: boolean) => {
+    if (lastWasVue.value === vue) return
+
+    if (lastWasVue.value !== null) {
+      const currentValue = settingStore.get(config.setting)
+      if (lastWasVue.value) {
+        vueValue.value = currentValue
+      } else {
+        litegraphValue.value = currentValue
+      }
+    }
+
+    await settingStore.set(
+      config.setting,
+      vue ? vueValue.value : litegraphValue.value
+    )
+    lastWasVue.value = vue
+  }
+
+  watch(isVueMode, load, { immediate: true })
+}