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(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 { + setting: TSettingKey + vue: Settings[TSettingKey] + litegraph: Settings[TSettingKey] +} + +export function useRenderModeSetting( + config: RenderModeSettingConfig, + isVueMode: ComputedRef +) { + const settingStore = useSettingStore() + const vueValue = ref(config.vue) + const litegraphValue = ref(config.litegraph) + const lastWasVue = ref(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 }) +}