-
+
-
-
-
- {{ $t('subgraphStore.hidden') }}
+
+
+
+
+
+
+
+
+
+
-
-
-
-
diff --git a/src/core/graph/subgraph/SubgraphNodeWidget.vue b/src/components/rightSidePanel/subgraph/SubgraphNodeWidget.vue
similarity index 53%
rename from src/core/graph/subgraph/SubgraphNodeWidget.vue
rename to src/components/rightSidePanel/subgraph/SubgraphNodeWidget.vue
index 0051281c26..820a7329cb 100644
--- a/src/core/graph/subgraph/SubgraphNodeWidget.vue
+++ b/src/components/rightSidePanel/subgraph/SubgraphNodeWidget.vue
@@ -2,6 +2,7 @@
import Button from 'primevue/button'
import { cn } from '@/utils/tailwindUtil'
+import type { ClassValue } from '@/utils/tailwindUtil'
const props = defineProps<{
nodeTitle: string
@@ -9,19 +10,12 @@ const props = defineProps<{
isShown?: boolean
isDraggable?: boolean
isPhysical?: boolean
+ class?: ClassValue
}>()
defineEmits<{
(e: 'toggleVisibility'): void
}>()
-function classes() {
- return cn(
- 'flex py-1 pr-4 pl-0 break-all rounded items-center gap-1',
- 'bg-node-component-surface',
- props.isDraggable &&
- 'draggable-item drag-handle cursor-grab [&.is-draggable]:cursor-grabbing'
- )
-}
function getIcon() {
return props.isPhysical
? 'icon-[lucide--link]'
@@ -30,19 +24,24 @@ function getIcon() {
: 'icon-[lucide--eye-off]'
}
+
-
-
+
-
{{ nodeTitle }}
-
{{ widgetName }}
+
+ {{ nodeTitle }}
+
+
{{ widgetName }}
+
diff --git a/src/components/sidebar/tabs/nodeLibrary/NodeHelpPage.vue b/src/components/sidebar/tabs/nodeLibrary/NodeHelpPage.vue
index ca7574cf60..82408845ed 100644
--- a/src/components/sidebar/tabs/nodeLibrary/NodeHelpPage.vue
+++ b/src/components/sidebar/tabs/nodeLibrary/NodeHelpPage.vue
@@ -12,234 +12,21 @@
/>
{{ node.display_name }}
-
-
-
-
-
-
- {{ $t('g.description') }}: {{ node.description }}
-
-
-
-
- {{ $t('nodeHelpPage.inputs') }}:
-
-
-
-
-
- | {{ $t('g.name') }} |
- {{ $t('nodeHelpPage.type') }} |
- {{ $t('g.description') }} |
-
-
-
-
-
- {{ input.name }}
- |
- {{ input.type }} |
- {{ input.tooltip || '-' }} |
-
-
-
-
-
-
-
- {{ $t('nodeHelpPage.outputs') }}:
-
-
-
-
- | {{ $t('g.name') }} |
- {{ $t('nodeHelpPage.type') }} |
- {{ $t('g.description') }} |
-
-
-
-
-
- {{ output.name }}
- |
- {{ output.type }} |
- {{ output.tooltip || '-' }} |
-
-
-
-
-
+
+
-
-
diff --git a/src/composables/useCoreCommands.ts b/src/composables/useCoreCommands.ts
index 305debbc79..1cbfec9091 100644
--- a/src/composables/useCoreCommands.ts
+++ b/src/composables/useCoreCommands.ts
@@ -8,7 +8,6 @@ import {
DEFAULT_LIGHT_COLOR_PALETTE
} from '@/constants/coreColorPalettes'
import { tryToggleWidgetPromotion } from '@/core/graph/subgraph/proxyWidgetUtils'
-import { showSubgraphNodeDialog } from '@/core/graph/subgraph/useSubgraphNodeDialog'
import { t } from '@/i18n'
import {
LGraphEventMode,
@@ -48,6 +47,7 @@ import { useSubgraphNavigationStore } from '@/stores/subgraphNavigationStore'
import { useSubgraphStore } from '@/stores/subgraphStore'
import { useBottomPanelStore } from '@/stores/workspace/bottomPanelStore'
import { useColorPaletteStore } from '@/stores/workspace/colorPaletteStore'
+import { useRightSidePanelStore } from '@/stores/workspace/rightSidePanelStore'
import { useSearchBoxStore } from '@/stores/workspace/searchBoxStore'
import { useWorkspaceStore } from '@/stores/workspaceStore'
import {
@@ -1025,7 +1025,9 @@ export function useCoreCommands(): ComfyCommand[] {
label: 'Edit Subgraph Widgets',
icon: 'icon-[lucide--settings-2]',
versionAdded: '1.28.5',
- function: showSubgraphNodeDialog
+ function: () => {
+ useRightSidePanelStore().openPanel('subgraph')
+ }
},
{
id: 'Comfy.Graph.ToggleWidgetPromotion',
diff --git a/src/core/graph/subgraph/useSubgraphNodeDialog.ts b/src/core/graph/subgraph/useSubgraphNodeDialog.ts
deleted file mode 100644
index 6004e28509..0000000000
--- a/src/core/graph/subgraph/useSubgraphNodeDialog.ts
+++ /dev/null
@@ -1,27 +0,0 @@
-import SubgraphNode from '@/core/graph/subgraph/SubgraphNode.vue'
-import { useDialogStore } from '@/stores/dialogStore'
-import type { DialogComponentProps } from '@/stores/dialogStore'
-
-const key = 'global-subgraph-node-config'
-
-export function showSubgraphNodeDialog() {
- const dialogStore = useDialogStore()
- const dialogComponentProps: DialogComponentProps = {
- modal: false,
- position: 'topright',
- pt: {
- root: {
- class: 'bg-node-component-surface mt-22'
- },
- header: {
- class: 'h-8 text-xs ml-3'
- }
- }
- }
- dialogStore.showDialog({
- title: 'Parameters',
- key,
- component: SubgraphNode,
- dialogComponentProps
- })
-}
diff --git a/src/locales/en/main.json b/src/locales/en/main.json
index eeab8db2be..515d13f9e3 100644
--- a/src/locales/en/main.json
+++ b/src/locales/en/main.json
@@ -2251,5 +2251,24 @@
"description": "This workflow uses custom nodes you haven't installed yet.",
"replacementInstruction": "Install these nodes to run this workflow, or replace them with installed alternatives. Missing nodes are highlighted in red on the canvas."
}
+ },
+ "rightSidePanel": {
+ "togglePanel": "Toggle properties panel",
+ "noSelection": "Select a node to see its properties and info.",
+ "multipleSelection": "{count} items selected",
+ "parameters": "Parameters",
+ "info": "Info",
+ "nodeType": "Type",
+ "nodeId": "ID",
+ "description": "Description",
+ "color": "Node color",
+ "pinned": "Pinned",
+ "bypass": "Bypass",
+ "normal": "Normal",
+ "mute": "Mute",
+ "inputs": "INPUTS",
+ "properties": "Properties",
+ "nodeState": "Node state",
+ "settings": "Settings"
}
}
\ No newline at end of file
diff --git a/src/renderer/extensions/vueNodes/widgets/components/form/FormSelectButton.vue b/src/renderer/extensions/vueNodes/widgets/components/form/FormSelectButton.vue
index f03a9b6b43..cca84a353c 100644
--- a/src/renderer/extensions/vueNodes/widgets/components/form/FormSelectButton.vue
+++ b/src/renderer/extensions/vueNodes/widgets/components/form/FormSelectButton.vue
@@ -17,17 +17,19 @@
'text-center text-xs font-normal',
{
'bg-interface-menu-component-surface-selected':
- isSelected(option) && !disabled,
- 'hover:bg-interface-menu-component-surface-hovered':
- !isSelected(option) && !disabled,
+ isSelected(index) && !disabled,
+ 'hover:bg-interface-menu-component-surface-selected/50':
+ !isSelected(index) && !disabled,
'opacity-50 cursor-not-allowed': disabled,
'cursor-pointer': !disabled
},
- isSelected(option) && !disabled ? 'text-primary' : 'text-secondary'
+ isSelected(index) && !disabled
+ ? 'text-text-primary'
+ : 'text-text-secondary'
)
"
:disabled="disabled"
- @click="handleSelect(option)"
+ @click="handleSelect(index)"
>
{{ getOptionLabel(option) }}
@@ -37,14 +39,18 @@
diff --git a/src/renderer/extensions/vueNodes/widgets/components/layout/WidgetLayoutField.vue b/src/renderer/extensions/vueNodes/widgets/components/layout/WidgetLayoutField.vue
index 0632524924..032c4d6e88 100644
--- a/src/renderer/extensions/vueNodes/widgets/components/layout/WidgetLayoutField.vue
+++ b/src/renderer/extensions/vueNodes/widgets/components/layout/WidgetLayoutField.vue
@@ -1,18 +1,24 @@
-
+
{
{
content: 'Edit Subgraph Widgets',
callback: () => {
- showSubgraphNodeDialog()
+ useRightSidePanelStore().openPanel('subgraph')
}
},
{
diff --git a/src/stores/workspace/rightSidePanelStore.ts b/src/stores/workspace/rightSidePanelStore.ts
new file mode 100644
index 0000000000..a7cd9ac7cd
--- /dev/null
+++ b/src/stores/workspace/rightSidePanelStore.ts
@@ -0,0 +1,52 @@
+import { defineStore } from 'pinia'
+import { ref } from 'vue'
+
+type RightSidePanelTab = 'parameters' | 'settings' | 'info'
+
+/**
+ * Store for managing the right side panel state.
+ * This panel displays properties and settings for selected nodes.
+ */
+export const useRightSidePanelStore = defineStore('rightSidePanel', () => {
+ // Panel visibility state
+ const isOpen = ref(false)
+ const isEditingSubgraph = ref(false)
+
+ // Active tab in the node properties panel
+ const activeTab = ref('parameters')
+
+ // Actions
+ function openPanel(tab?: RightSidePanelTab | 'subgraph') {
+ isOpen.value = true
+ if (tab === 'subgraph') {
+ activeTab.value = 'parameters'
+ isEditingSubgraph.value = true
+ } else if (tab) {
+ activeTab.value = tab
+ isEditingSubgraph.value = false
+ }
+ }
+
+ function closePanel() {
+ isOpen.value = false
+ isEditingSubgraph.value = false
+ }
+
+ function togglePanel() {
+ isOpen.value = !isOpen.value
+ }
+
+ function setActiveTab(tab: RightSidePanelTab) {
+ activeTab.value = tab
+ }
+
+ return {
+ isOpen,
+ activeTab,
+ isEditingSubgraph,
+ openPanel,
+ closePanel,
+ togglePanel,
+ setActiveTab
+ }
+})