) {
!(
w.options?.canvasOnly ||
w.options?.hidden ||
- (w.options?.advanced && !includesAdvanced.value)
+ (advancedOverridesStore.getAdvancedState(node, w) &&
+ !includesAdvanced.value)
)
)
.map((widget) => ({ node, widget }))
diff --git a/src/renderer/extensions/vueNodes/components/LGraphNode.vue b/src/renderer/extensions/vueNodes/components/LGraphNode.vue
index d602e40624..3dbb55ec67 100644
--- a/src/renderer/extensions/vueNodes/components/LGraphNode.vue
+++ b/src/renderer/extensions/vueNodes/components/LGraphNode.vue
@@ -200,6 +200,7 @@ import { applyLightThemeColor } from '@/renderer/extensions/vueNodes/utils/nodeS
import { app } from '@/scripts/app'
import { useExecutionStore } from '@/stores/executionStore'
import { useNodeOutputStore } from '@/stores/imagePreviewStore'
+import { useAdvancedWidgetOverridesStore } from '@/stores/workspace/advancedWidgetOverridesStore'
import { useRightSidePanelStore } from '@/stores/workspace/rightSidePanelStore'
import { isTransparent } from '@/utils/colorUtil'
import {
@@ -496,6 +497,8 @@ const lgraphNode = computed(() => {
return getNodeByLocatorId(app.rootGraph, locatorId)
})
+const advancedOverridesStore = useAdvancedWidgetOverridesStore()
+
const showAdvancedInputsButton = computed(() => {
const node = lgraphNode.value
if (!node) return false
@@ -507,12 +510,11 @@ const showAdvancedInputsButton = computed(() => {
return allInteriorWidgets.some((w) => !w.computedDisabled && !w.promoted)
}
- // For regular nodes: show button if there are advanced widgets and they're currently hidden
- const hasAdvancedWidgets = nodeData.widgets?.some((w) => w.options?.advanced)
+ // For regular nodes: show button if there are effectively advanced widgets
const alwaysShowAdvanced = settingStore.get(
'Comfy.Node.AlwaysShowAdvancedWidgets'
)
- return hasAdvancedWidgets && !alwaysShowAdvanced
+ return advancedOverridesStore.hasAnyAdvanced(node) && !alwaysShowAdvanced
})
const showAdvancedState = customRef((track, trigger) => {
@@ -543,6 +545,9 @@ const showAdvancedState = customRef((track, trigger) => {
} else {
node.showAdvanced = value
internalState = value
+ nextTick(() => {
+ node.expandToFitContent()
+ })
}
trigger()
}
diff --git a/src/renderer/extensions/vueNodes/components/NodeWidgets.vue b/src/renderer/extensions/vueNodes/components/NodeWidgets.vue
index 000050451c..e078566d50 100644
--- a/src/renderer/extensions/vueNodes/components/NodeWidgets.vue
+++ b/src/renderer/extensions/vueNodes/components/NodeWidgets.vue
@@ -27,7 +27,7 @@
@@ -94,6 +94,7 @@ import {
shouldRenderAsVue
} from '@/renderer/extensions/vueNodes/widgets/registry/widgetRegistry'
import { app } from '@/scripts/app'
+import { useAdvancedWidgetOverridesStore } from '@/stores/workspace/advancedWidgetOverridesStore'
import type { SimplifiedWidget, WidgetValue } from '@/types/simplifiedWidget'
import {
getLocatorIdFromNodeData,
@@ -122,8 +123,9 @@ const lgraphNode = computed((): LGraphNode | null => {
return getNodeByLocatorId(graph, locatorId) ?? null
})
-// Provide node to child components for accessing advanced overrides
-provide('node', lgraphNode.value)
+provide('node', lgraphNode)
+
+const advancedOverridesStore = useAdvancedWidgetOverridesStore()
function handleWidgetPointerEvent(event: PointerEvent) {
if (shouldHandleNodePointerEvents.value) return
@@ -192,6 +194,10 @@ const processedWidgets = computed((): ProcessedWidget[] => {
? { ...options, disabled: true }
: options
+ const resolvedAdvanced = lgraphNode.value
+ ? advancedOverridesStore.getAdvancedState(lgraphNode.value, widget)
+ : !!widget.options?.advanced
+
const simplified: SimplifiedWidget = {
name: widget.name,
type: widget.type,
@@ -203,7 +209,7 @@ const processedWidgets = computed((): ProcessedWidget[] => {
nodeType: widget.nodeType,
options: widgetOptions,
spec: widget.spec,
- advanced: widget.options?.advanced,
+ advanced: resolvedAdvanced,
hidden: widget.options?.hidden
}
@@ -229,22 +235,37 @@ const processedWidgets = computed((): ProcessedWidget[] => {
})
}
+ // When per-node showAdvanced is on, move advanced widgets to the end.
+ // When global AlwaysShowAdvancedWidgets is on, keep original order.
+ if (
+ nodeData?.showAdvanced &&
+ !settingStore.get('Comfy.Node.AlwaysShowAdvancedWidgets')
+ ) {
+ const normal = result.filter((w) => !w.simplified.advanced)
+ const advanced = result.filter((w) => w.simplified.advanced)
+ return [...normal, ...advanced]
+ }
+
return result
})
const gridTemplateRows = computed((): string => {
if (!nodeData?.widgets) return ''
- const processedNames = new Set(toValue(processedWidgets).map((w) => w.name))
- return nodeData.widgets
- .filter(
- (w) =>
- processedNames.has(w.name) &&
- !w.options?.hidden &&
- (!w.options?.advanced || showAdvanced.value)
- )
- .map((w) =>
- shouldExpand(w.type) || w.hasLayoutSize ? 'auto' : 'min-content'
- )
+ const processed = toValue(processedWidgets)
+ const advancedByName = new Map(
+ processed.map((w) => [w.name, w.simplified.advanced])
+ )
+ // Use processedWidgets order (which may have advanced sorted to end)
+ const visible = processed.filter(
+ (w) =>
+ !w.simplified.hidden &&
+ (!advancedByName.get(w.name) || showAdvanced.value)
+ )
+ return visible
+ .map((w) => {
+ const raw = nodeData.widgets?.find((rw) => rw.name === w.name)
+ return shouldExpand(w.type) || raw?.hasLayoutSize ? 'auto' : 'min-content'
+ })
.join(' ')
})
diff --git a/src/renderer/extensions/vueNodes/widgets/components/layout/WidgetLayoutField.vue b/src/renderer/extensions/vueNodes/widgets/components/layout/WidgetLayoutField.vue
index 4caad4651c..47c71e34c0 100644
--- a/src/renderer/extensions/vueNodes/widgets/components/layout/WidgetLayoutField.vue
+++ b/src/renderer/extensions/vueNodes/widgets/components/layout/WidgetLayoutField.vue
@@ -1,8 +1,6 @@
@@ -60,15 +42,5 @@ function toggleAdvanced() {
-
-