mirror of
https://github.com/Comfy-Org/ComfyUI_frontend.git
synced 2026-03-09 23:20:04 +00:00
Implement selection state management in Vue Nodes (#5421)
* let canvas continue to own selection state management * fix merge error * refactor: use computed instead of watcher for selectedNodeIds Replace watcher pattern with computed for better Vue idioms: - More reactive and efficient - Automatically recomputes when dependencies change - Simpler, more declarative code 🤖 Generated with [Claude Code](https://claude.ai/code) Co-Authored-By: Claude <noreply@anthropic.com> * fix: improve injection error handling for selectedNodeIds Replace silent fallback with explicit error when SelectedNodeIds is not provided: - Fail fast instead of silently using empty Set - Clear error message for debugging - Prevents nodes appearing unselected due to missing provider Addresses DrJKL's concern about injection default behavior. 🤖 Generated with [Claude Code](https://claude.ai/code) Co-Authored-By: Claude <noreply@anthropic.com> * test: improve mocking patterns using vi.mockObject Replace manual mock interfaces with vi.mockObject for better type safety: - Use Vitest's built-in mocking utilities instead of manual interfaces - Properly configure mock return values - Remove unnecessary type assertions Addresses DrJKL's feedback on test mocking patterns. 🤖 Generated with [Claude Code](https://claude.ai/code) Co-Authored-By: Claude <noreply@anthropic.com> * test: extract repeated nodeData for clarity Extract common test nodeData object to reduce duplication: - Move repeated VueNodeData object to describe scope - Replace 6 instances of identical nodeData declarations - Maintain different nodeData for specific test cases Addresses DrJKL's suggestion to extract repeated test data. 🤖 Generated with [Claude Code](https://claude.ai/code) Co-Authored-By: Claude <noreply@anthropic.com> * add type safety to mocks --------- Co-authored-by: Claude <noreply@anthropic.com>
This commit is contained in:
@@ -44,7 +44,6 @@
|
||||
:node-data="nodeData"
|
||||
:position="nodePositions.get(nodeData.id)"
|
||||
:size="nodeSizes.get(nodeData.id)"
|
||||
:selected="nodeData.selected"
|
||||
:readonly="false"
|
||||
:executing="executionStore.executingNodeId === nodeData.id"
|
||||
:error="
|
||||
@@ -79,6 +78,7 @@ import {
|
||||
computed,
|
||||
onMounted,
|
||||
onUnmounted,
|
||||
provide,
|
||||
ref,
|
||||
shallowRef,
|
||||
watch,
|
||||
@@ -112,6 +112,7 @@ import { useWorkflowPersistence } from '@/composables/useWorkflowPersistence'
|
||||
import { CORE_SETTINGS } from '@/constants/coreSettings'
|
||||
import { i18n, t } from '@/i18n'
|
||||
import type { LGraphNode } from '@/lib/litegraph/src/litegraph'
|
||||
import { SelectedNodeIdsKey } from '@/renderer/core/canvas/injectionKeys'
|
||||
import TransformPane from '@/renderer/core/layout/TransformPane.vue'
|
||||
import MiniMap from '@/renderer/extensions/minimap/MiniMap.vue'
|
||||
import VueGraphNode from '@/renderer/extensions/vueNodes/components/LGraphNode.vue'
|
||||
@@ -189,6 +190,17 @@ const handleNodeSelect = nodeEventHandlers.handleNodeSelect
|
||||
const handleNodeCollapse = nodeEventHandlers.handleNodeCollapse
|
||||
const handleNodeTitleUpdate = nodeEventHandlers.handleNodeTitleUpdate
|
||||
|
||||
// Provide selection state to all Vue nodes
|
||||
const selectedNodeIds = computed(
|
||||
() =>
|
||||
new Set(
|
||||
canvasStore.selectedItems
|
||||
.filter((item) => item.id !== undefined)
|
||||
.map((item) => String(item.id))
|
||||
)
|
||||
)
|
||||
provide(SelectedNodeIdsKey, selectedNodeIds)
|
||||
|
||||
watchEffect(() => {
|
||||
nodeDefStore.showDeprecated = settingStore.get('Comfy.Node.ShowDeprecated')
|
||||
})
|
||||
|
||||
Reference in New Issue
Block a user