diff --git a/browser_tests/tests/vueNodes/nodeStates/bypass.spec.ts b/browser_tests/tests/vueNodes/nodeStates/bypass.spec.ts index 2d67ca99f1..3dc3606998 100644 --- a/browser_tests/tests/vueNodes/nodeStates/bypass.spec.ts +++ b/browser_tests/tests/vueNodes/nodeStates/bypass.spec.ts @@ -15,11 +15,14 @@ test.describe('Vue Node Bypass', () => { test('should allow toggling bypass on a selected node with hotkey', async ({ comfyPage }) => { + await comfyPage.setup() await comfyPage.page.getByText('Load Checkpoint').click() await comfyPage.page.keyboard.press(BYPASS_HOTKEY) const checkpointNode = comfyPage.vueNodes.getNodeByTitle('Load Checkpoint') await expect(checkpointNode).toHaveClass(BYPASS_CLASS) + await comfyPage.page.mouse.click(400, 300) + await comfyPage.page.waitForTimeout(128) await expect(comfyPage.canvas).toHaveScreenshot( 'vue-node-bypassed-state.png' ) diff --git a/browser_tests/tests/vueNodes/nodeStates/bypass.spec.ts-snapshots/vue-node-bypassed-state-chromium-linux.png b/browser_tests/tests/vueNodes/nodeStates/bypass.spec.ts-snapshots/vue-node-bypassed-state-chromium-linux.png index fbf048e5c8..28f6e7cac2 100644 Binary files a/browser_tests/tests/vueNodes/nodeStates/bypass.spec.ts-snapshots/vue-node-bypassed-state-chromium-linux.png and b/browser_tests/tests/vueNodes/nodeStates/bypass.spec.ts-snapshots/vue-node-bypassed-state-chromium-linux.png differ diff --git a/src/renderer/extensions/minimap/composables/useMinimapGraph.ts b/src/renderer/extensions/minimap/composables/useMinimapGraph.ts index c5bf9aa6c9..54d6320fd7 100644 --- a/src/renderer/extensions/minimap/composables/useMinimapGraph.ts +++ b/src/renderer/extensions/minimap/composables/useMinimapGraph.ts @@ -2,7 +2,11 @@ import { useThrottleFn } from '@vueuse/core' import { ref, watch } from 'vue' import type { Ref } from 'vue' -import type { LGraph, LGraphNode } from '@/lib/litegraph/src/litegraph' +import type { + LGraph, + LGraphNode, + LGraphTriggerEvent +} from '@/lib/litegraph/src/litegraph' import type { NodeId } from '@/platform/workflow/validation/schemas/workflowSchema' import { layoutStore } from '@/renderer/core/layout/store/layoutStore' import { api } from '@/scripts/api' @@ -14,6 +18,7 @@ interface GraphCallbacks { onNodeAdded?: (node: LGraphNode) => void onNodeRemoved?: (node: LGraphNode) => void onConnectionChange?: (node: LGraphNode) => void + onTrigger?: (event: LGraphTriggerEvent) => void } export function useMinimapGraph( @@ -53,7 +58,8 @@ export function useMinimapGraph( const originalCallbacks: GraphCallbacks = { onNodeAdded: g.onNodeAdded, onNodeRemoved: g.onNodeRemoved, - onConnectionChange: g.onConnectionChange + onConnectionChange: g.onConnectionChange, + onTrigger: g.onTrigger } originalCallbacksMap.set(g.id, originalCallbacks) @@ -72,6 +78,22 @@ export function useMinimapGraph( originalCallbacks.onConnectionChange?.call(this, node) void handleGraphChangedThrottled() } + + g.onTrigger = function (event: LGraphTriggerEvent) { + originalCallbacks.onTrigger?.call(this, event) + + // Listen for visual property changes that affect minimap rendering + if ( + event.type === 'node:property:changed' && + (event.property === 'mode' || + event.property === 'bgcolor' || + event.property === 'color') + ) { + // Invalidate cache for this node to force redraw + nodeStatesCache.delete(String(event.nodeId)) + void handleGraphChangedThrottled() + } + } } const cleanupEventListeners = (oldGraph?: LGraph) => { @@ -89,6 +111,7 @@ export function useMinimapGraph( g.onNodeAdded = originalCallbacks.onNodeAdded g.onNodeRemoved = originalCallbacks.onNodeRemoved g.onConnectionChange = originalCallbacks.onConnectionChange + g.onTrigger = originalCallbacks.onTrigger originalCallbacksMap.delete(g.id) }