diff --git a/src/composables/graph/useVueNodeLifecycle.ts b/src/composables/graph/useVueNodeLifecycle.ts index 648427a51..51fdf3377 100644 --- a/src/composables/graph/useVueNodeLifecycle.ts +++ b/src/composables/graph/useVueNodeLifecycle.ts @@ -8,6 +8,7 @@ import type { LGraphNode } from '@/lib/litegraph/src/litegraph' import { useCanvasStore } from '@/renderer/core/canvas/canvasStore' import { useLayoutMutations } from '@/renderer/core/layout/operations/layoutMutations' import { layoutStore } from '@/renderer/core/layout/store/layoutStore' +import { patchLGraphNodeMode } from '@/renderer/core/layout/sync/patchLGraphNodeMode' import { useLayoutSync } from '@/renderer/core/layout/sync/useLayoutSync' import { removeNodeTitleHeight } from '@/renderer/core/layout/utils/nodeSizeUtil' import { ensureCorrectLayoutScale } from '@/renderer/extensions/vueNodes/layout/ensureCorrectLayoutScale' @@ -36,7 +37,8 @@ function useVueNodeLifecycleIndividual() { size: [node.size[0], removeNodeTitleHeight(node.size[1])] as [ number, number - ] + ], + mode: node.mode })) layoutStore.initializeFromLiteGraph(nodes) @@ -59,6 +61,9 @@ function useVueNodeLifecycleIndividual() { ) } + // Patch LGraphNode.changeMode to sync with layoutStore + patchLGraphNodeMode() + // Initialize layout sync (one-way: Layout Store → LiteGraph) startSync(canvasStore.canvas) } diff --git a/src/extensions/core/groupOptions.ts b/src/extensions/core/groupOptions.ts index 7e3240bcf..8a73374dd 100644 --- a/src/extensions/core/groupOptions.ts +++ b/src/extensions/core/groupOptions.ts @@ -7,14 +7,14 @@ import { LGraphGroup, type LGraphNode } from '@/lib/litegraph/src/litegraph' +import { layoutStore } from '@/renderer/core/layout/store/layoutStore' import { useSettingStore } from '@/platform/settings/settingStore' import type { ComfyExtension } from '@/types/comfy' import { app } from '../../scripts/app' function setNodeMode(node: LGraphNode, mode: number) { - node.mode = mode - node.graph?.change() + layoutStore.setNodeMode(node.id.toString(), mode) } function addNodesToGroup(group: LGraphGroup, items: Iterable) { diff --git a/src/lib/litegraph/src/LGraphNode.ts b/src/lib/litegraph/src/LGraphNode.ts index 1ff503cdc..3a568ee3b 100644 --- a/src/lib/litegraph/src/LGraphNode.ts +++ b/src/lib/litegraph/src/LGraphNode.ts @@ -1325,6 +1325,9 @@ export class LGraphNode case LGraphEventMode.ALWAYS: break + case LGraphEventMode.BYPASS: + break + // @ts-expect-error Not impl. case LiteGraph.ON_REQUEST: break diff --git a/src/renderer/core/layout/sync/patchLGraphNodeMode.ts b/src/renderer/core/layout/sync/patchLGraphNodeMode.ts new file mode 100644 index 000000000..598ecd1d9 --- /dev/null +++ b/src/renderer/core/layout/sync/patchLGraphNodeMode.ts @@ -0,0 +1,33 @@ +/** + * Patches LGraphNode.changeMode to sync with layoutStore + * This ensures that mode changes from LiteGraph (e.g., keyboard shortcuts, context menus) + * are properly synchronized to the layout store. + */ +import { LGraphNode } from '@/lib/litegraph/src/LGraphNode' +import { layoutStore } from '@/renderer/core/layout/store/layoutStore' + +let isPatched = false + +/** + * Patches LGraphNode.prototype.changeMode to sync with layoutStore. + * Should be called once during application initialization. + */ +export function patchLGraphNodeMode(): void { + if (isPatched) return + + const originalChangeMode = LGraphNode.prototype.changeMode + + LGraphNode.prototype.changeMode = function (modeTo: number): boolean { + const previousMode = this.mode + const result = originalChangeMode.call(this, modeTo) + + // Sync to layoutStore if mode actually changed and the call succeeded + if (result && previousMode !== this.mode) { + layoutStore.setNodeMode(this.id.toString(), this.mode) + } + + return result + } + + isPatched = true +} diff --git a/src/renderer/core/layout/sync/useLayoutSync.ts b/src/renderer/core/layout/sync/useLayoutSync.ts index 221fe64eb..d789924b1 100644 --- a/src/renderer/core/layout/sync/useLayoutSync.ts +++ b/src/renderer/core/layout/sync/useLayoutSync.ts @@ -53,6 +53,11 @@ export function useLayoutSync() { // Use setSize() to trigger onResize callback liteNode.setSize([layout.size.width, layout.size.height]) } + + // Sync mode to LiteGraph node + if (liteNode.mode !== layout.mode) { + liteNode.changeMode(layout.mode) + } } // Trigger single redraw for all changes