mirror of
https://github.com/Comfy-Org/ComfyUI_frontend.git
synced 2026-05-23 14:16:00 +00:00
## Summary Backports #12205 to `core/1.43` so Node Info actions open the right-side Info tab when the new-menu UI makes that panel available, and hide the action in legacy-menu contexts. ## Changes - **What**: Cherry-picked `a3106c4d5305d2c0349bdccbb74cfc5855630a2d` and resolved the 1.43 Playwright conflict in `browser_tests/tests/selectionToolboxActions.spec.ts`. - **Dependencies**: None. ## Review Focus Conflict resolution was limited to `browser_tests/tests/selectionToolboxActions.spec.ts`. The backport keeps the 1.43 selection toolbox test structure and replaces the old generic properties-panel assertion with the upstream right-side Info tab assertions plus the legacy-menu hidden-button coverage. Backport of #12205. Replaces #12164. ## Validation - `pnpm install` - `pnpm test:unit -- src/composables/graph/useSelectionState.test.ts src/components/graph/SelectionToolbox.test.ts src/components/graph/selectionToolbox/InfoButton.test.ts` - `pnpm typecheck:browser` - `pnpm exec oxlint --type-aware browser_tests/tests/selectionToolboxActions.spec.ts` - `pnpm exec eslint --cache --no-warn-ignored browser_tests/tests/selectionToolboxActions.spec.ts` - `pnpm exec oxfmt --check browser_tests/tests/selectionToolboxActions.spec.ts` - `git show --check --stat --oneline --max-count=1` - Push hook: `knip --cache` Attempted targeted Playwright locally, but it did not reach the test assertions because the local Comfy settings setup returned `Not Found` and `window.app` readiness timed out in the fixture setup. ## Screenshots (if applicable) N/A ┆Issue is synchronized with this [Notion page](https://www.notion.so/PR-12249-backport-core-1-43-fix-open-node-info-panel-from-context-menu-12205-3606d73d365081af9ea3ded90ad5eb68) by [Unito](https://www.unito.io) Co-authored-by: github-actions <github-actions@github.com>
130 lines
4.0 KiB
TypeScript
130 lines
4.0 KiB
TypeScript
import { storeToRefs } from 'pinia'
|
|
import { computed } from 'vue'
|
|
|
|
import type { LGraphNode } from '@/lib/litegraph/src/litegraph'
|
|
import { LGraphEventMode, SubgraphNode } from '@/lib/litegraph/src/litegraph'
|
|
import { useSettingStore } from '@/platform/settings/settingStore'
|
|
import { useCanvasStore } from '@/renderer/core/canvas/canvasStore'
|
|
import { useNodeDefStore } from '@/stores/nodeDefStore'
|
|
import { useRightSidePanelStore } from '@/stores/workspace/rightSidePanelStore'
|
|
import { isImageNode, isLGraphNode, isLoad3dNode } from '@/utils/litegraphUtil'
|
|
import { filterOutputNodes } from '@/utils/nodeFilterUtil'
|
|
|
|
export interface NodeSelectionState {
|
|
collapsed: boolean
|
|
pinned: boolean
|
|
bypassed: boolean
|
|
}
|
|
|
|
/**
|
|
* Centralized computed selection state + shared helper actions to avoid duplication
|
|
* between selection toolbox, context menus, and other UI affordances.
|
|
*/
|
|
export function useSelectionState() {
|
|
const canvasStore = useCanvasStore()
|
|
const nodeDefStore = useNodeDefStore()
|
|
const settingStore = useSettingStore()
|
|
const rightSidePanelStore = useRightSidePanelStore()
|
|
|
|
const { selectedItems } = storeToRefs(canvasStore)
|
|
|
|
const selectedNodes = computed(() => {
|
|
return selectedItems.value.filter((i: unknown) =>
|
|
isLGraphNode(i)
|
|
) as LGraphNode[]
|
|
})
|
|
|
|
const nodeDef = computed(() => {
|
|
if (selectedNodes.value.length !== 1) return null
|
|
return nodeDefStore.fromLGraphNode(selectedNodes.value[0])
|
|
})
|
|
|
|
const hasAnySelection = computed(() => selectedItems.value.length > 0)
|
|
const hasSingleSelection = computed(() => selectedItems.value.length === 1)
|
|
const hasMultipleSelection = computed(() => selectedItems.value.length > 1)
|
|
|
|
const isSingleNode = computed(
|
|
() => hasSingleSelection.value && isLGraphNode(selectedItems.value[0])
|
|
)
|
|
const isSingleSubgraph = computed(
|
|
() =>
|
|
isSingleNode.value &&
|
|
(selectedItems.value[0] as LGraphNode)?.isSubgraphNode?.()
|
|
)
|
|
const isSingleImageNode = computed(
|
|
() =>
|
|
isSingleNode.value && isImageNode(selectedItems.value[0] as LGraphNode)
|
|
)
|
|
|
|
const hasSubgraphs = computed(() =>
|
|
selectedItems.value.some((i: unknown) => i instanceof SubgraphNode)
|
|
)
|
|
|
|
const hasAny3DNodeSelected = computed(() => {
|
|
const enable3DViewer = settingStore.get('Comfy.Load3D.3DViewerEnable')
|
|
return (
|
|
selectedNodes.value.length === 1 &&
|
|
selectedNodes.value.some(isLoad3dNode) &&
|
|
enable3DViewer
|
|
)
|
|
})
|
|
|
|
const hasImageNode = computed(() => isSingleImageNode.value)
|
|
const hasOutputNodesSelected = computed(
|
|
() => filterOutputNodes(selectedNodes.value).length > 0
|
|
)
|
|
|
|
// Helper function to compute selection flags (reused by both computed and function)
|
|
const computeSelectionStatesFromNodes = (
|
|
nodes: LGraphNode[]
|
|
): NodeSelectionState => {
|
|
if (!nodes.length)
|
|
return { collapsed: false, pinned: false, bypassed: false }
|
|
return {
|
|
collapsed: nodes.some((n) => n.flags?.collapsed),
|
|
pinned: nodes.some((n) => n.pinned),
|
|
bypassed: nodes.some((n) => n.mode === LGraphEventMode.BYPASS)
|
|
}
|
|
}
|
|
|
|
const selectedNodesStates = computed<NodeSelectionState>(() =>
|
|
computeSelectionStatesFromNodes(selectedNodes.value)
|
|
)
|
|
|
|
// On-demand computation (non-reactive) so callers can fetch fresh flags
|
|
const computeSelectionFlags = (): NodeSelectionState =>
|
|
computeSelectionStatesFromNodes(selectedNodes.value)
|
|
|
|
const canOpenNodeInfo = computed(
|
|
() =>
|
|
Boolean(nodeDef.value) &&
|
|
settingStore.get('Comfy.UseNewMenu') !== 'Disabled'
|
|
)
|
|
|
|
const openNodeInfo = () => {
|
|
if (!canOpenNodeInfo.value) return false
|
|
rightSidePanelStore.openPanel('info')
|
|
return true
|
|
}
|
|
|
|
return {
|
|
selectedItems,
|
|
selectedNodes,
|
|
nodeDef,
|
|
canOpenNodeInfo,
|
|
openNodeInfo,
|
|
hasAny3DNodeSelected,
|
|
hasAnySelection,
|
|
hasSingleSelection,
|
|
hasMultipleSelection,
|
|
isSingleNode,
|
|
isSingleSubgraph,
|
|
isSingleImageNode,
|
|
hasSubgraphs,
|
|
hasImageNode,
|
|
hasOutputNodesSelected,
|
|
selectedNodesStates,
|
|
computeSelectionFlags
|
|
}
|
|
}
|