From 07281756b157475bfd0b252e8a309fb13d317518 Mon Sep 17 00:00:00 2001 From: Benjamin Lu Date: Tue, 8 Jul 2025 14:25:25 -0400 Subject: [PATCH 01/23] Align headers --- src/components/graph/vueNodes/NodeHeader.vue | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/graph/vueNodes/NodeHeader.vue b/src/components/graph/vueNodes/NodeHeader.vue index efe4d7c97f..134fa34360 100644 --- a/src/components/graph/vueNodes/NodeHeader.vue +++ b/src/components/graph/vueNodes/NodeHeader.vue @@ -4,7 +4,7 @@
+ + + {{ nodeInfo?.title || 'Untitled' }} - - -
- - - - -
From e0ef8ca37629c8cd9d44fdd0f6a6c3742792d690 Mon Sep 17 00:00:00 2001 From: Benjamin Lu Date: Tue, 8 Jul 2025 14:38:07 -0400 Subject: [PATCH 03/23] Correct rounding --- src/components/graph/vueNodes/LGraphNode.vue | 2 +- src/components/graph/vueNodes/NodeHeader.vue | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/src/components/graph/vueNodes/LGraphNode.vue b/src/components/graph/vueNodes/LGraphNode.vue index 15d38c49b2..1010407c61 100644 --- a/src/components/graph/vueNodes/LGraphNode.vue +++ b/src/components/graph/vueNodes/LGraphNode.vue @@ -5,7 +5,7 @@
Date: Tue, 8 Jul 2025 15:31:47 -0400 Subject: [PATCH 05/23] Adds basic collapsing --- src/components/graph/vueNodes/LGraphNode.vue | 18 +++++++++++++----- src/components/graph/vueNodes/NodeHeader.vue | 6 +++++- src/composables/graph/useGraphNodeManager.ts | 3 +++ 3 files changed, 21 insertions(+), 6 deletions(-) diff --git a/src/components/graph/vueNodes/LGraphNode.vue b/src/components/graph/vueNodes/LGraphNode.vue index 1010407c61..bbfa6cb680 100644 --- a/src/components/graph/vueNodes/LGraphNode.vue +++ b/src/components/graph/vueNodes/LGraphNode.vue @@ -24,15 +24,16 @@ > - -
+ +
() // LOD (Level of Detail) system based on zoom level @@ -143,6 +143,9 @@ onErrorCaptured((error) => { // Track dragging state for will-change optimization const isDragging = ref(false) +// Track collapsed state +const isCollapsed = ref(props.nodeData.flags?.collapsed ?? false) + // Check if node has custom content const hasCustomContent = computed(() => { // Currently all content is handled through widgets @@ -160,7 +163,12 @@ const handlePointerDown = (event: PointerEvent) => { } const handleCollapse = () => { - emit('collapse') + isCollapsed.value = !isCollapsed.value + // TODO: Sync with LiteGraph node when integration is complete + // if (props.node) { + // props.node.flags = props.node.flags || {} + // props.node.flags.collapsed = isCollapsed.value + // } } const handleSlotClick = ( diff --git a/src/components/graph/vueNodes/NodeHeader.vue b/src/components/graph/vueNodes/NodeHeader.vue index dddaec1536..6112638e3c 100644 --- a/src/components/graph/vueNodes/NodeHeader.vue +++ b/src/components/graph/vueNodes/NodeHeader.vue @@ -18,7 +18,10 @@ title="Toggle collapse" @click.stop="handleCollapse" > - + @@ -41,6 +44,7 @@ interface NodeHeaderProps { nodeData?: VueNodeData // New clean data structure readonly?: boolean lodLevel?: LODLevel + collapsed?: boolean } const props = defineProps() diff --git a/src/composables/graph/useGraphNodeManager.ts b/src/composables/graph/useGraphNodeManager.ts index 037f021efe..76e8e5082e 100644 --- a/src/composables/graph/useGraphNodeManager.ts +++ b/src/composables/graph/useGraphNodeManager.ts @@ -53,6 +53,9 @@ export interface VueNodeData { widgets?: SafeWidgetData[] inputs?: unknown[] outputs?: unknown[] + flags?: { + collapsed?: boolean + } } export interface SpatialMetrics { From 14b33007c30453a908abcc6f8fbf1aca5384b781 Mon Sep 17 00:00:00 2001 From: Benjamin Lu Date: Tue, 8 Jul 2025 15:43:27 -0400 Subject: [PATCH 06/23] Sync collapsing with litegraph --- src/components/graph/GraphCanvas.vue | 13 +++++++++++++ src/components/graph/vueNodes/LGraphNode.vue | 8 +++----- 2 files changed, 16 insertions(+), 5 deletions(-) diff --git a/src/components/graph/GraphCanvas.vue b/src/components/graph/GraphCanvas.vue index a7b26c8164..55b12be109 100644 --- a/src/components/graph/GraphCanvas.vue +++ b/src/components/graph/GraphCanvas.vue @@ -56,6 +56,7 @@ :zoom-level="canvasStore.canvas?.ds?.scale || 1" :data-node-id="nodeData.id" @node-click="handleNodeSelect" + @update:collapsed="handleNodeCollapse" /> @@ -458,6 +459,18 @@ const handleNodeSelect = (event: PointerEvent, nodeData: VueNodeData) => { canvasStore.updateSelectedItems() } +// Handle node collapse state changes +const handleNodeCollapse = (nodeId: string, collapsed: boolean) => { + if (!nodeManager) return + + const node = nodeManager.getNode(nodeId) + if (!node) return + + // Sync collapsed state back to LiteGraph node + node.flags = node.flags || {} + node.flags.collapsed = collapsed +} + watchEffect(() => { nodeDefStore.showDeprecated = settingStore.get('Comfy.Node.ShowDeprecated') }) diff --git a/src/components/graph/vueNodes/LGraphNode.vue b/src/components/graph/vueNodes/LGraphNode.vue index bbfa6cb680..d5bba61145 100644 --- a/src/components/graph/vueNodes/LGraphNode.vue +++ b/src/components/graph/vueNodes/LGraphNode.vue @@ -115,6 +115,7 @@ const emit = defineEmits<{ slotIndex: number, isInput: boolean ] + 'update:collapsed': [nodeId: string, collapsed: boolean] }>() // LOD (Level of Detail) system based on zoom level @@ -164,11 +165,8 @@ const handlePointerDown = (event: PointerEvent) => { const handleCollapse = () => { isCollapsed.value = !isCollapsed.value - // TODO: Sync with LiteGraph node when integration is complete - // if (props.node) { - // props.node.flags = props.node.flags || {} - // props.node.flags.collapsed = isCollapsed.value - // } + // Emit event so parent can sync with LiteGraph if needed + emit('update:collapsed', props.nodeData.id, isCollapsed.value) } const handleSlotClick = ( From 233ecd7d2817b18f5fee6011d94f97c127a1edd5 Mon Sep 17 00:00:00 2001 From: Benjamin Lu Date: Tue, 8 Jul 2025 16:09:54 -0400 Subject: [PATCH 07/23] Change hidden to disabled --- src/components/graph/vueNodes/NodeHeader.vue | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/graph/vueNodes/NodeHeader.vue b/src/components/graph/vueNodes/NodeHeader.vue index 6112638e3c..b30a6a7d78 100644 --- a/src/components/graph/vueNodes/NodeHeader.vue +++ b/src/components/graph/vueNodes/NodeHeader.vue @@ -13,8 +13,8 @@ > - - {{ nodeInfo?.title || 'Untitled' }} - +
+ +
diff --git a/src/composables/graph/useGraphNodeManager.ts b/src/composables/graph/useGraphNodeManager.ts index 76e8e5082e..f2933c0183 100644 --- a/src/composables/graph/useGraphNodeManager.ts +++ b/src/composables/graph/useGraphNodeManager.ts @@ -204,7 +204,8 @@ export const useGraphNodeManager = (graph: LGraph): GraphNodeManager => { executing: false, // Will be updated separately based on execution state widgets: safeWidgets, inputs: node.inputs ? [...node.inputs] : undefined, - outputs: node.outputs ? [...node.outputs] : undefined + outputs: node.outputs ? [...node.outputs] : undefined, + flags: node.flags ? { ...node.flags } : undefined } } From 8a6f87797c5a911685d3d1b35312f8cbef85b415 Mon Sep 17 00:00:00 2001 From: Benjamin Lu Date: Wed, 9 Jul 2025 02:23:49 -0400 Subject: [PATCH 11/23] Remove watch for now --- src/components/graph/vueNodes/NodeHeader.vue | 12 +----------- 1 file changed, 1 insertion(+), 11 deletions(-) diff --git a/src/components/graph/vueNodes/NodeHeader.vue b/src/components/graph/vueNodes/NodeHeader.vue index 370a601687..2f3127e7bc 100644 --- a/src/components/graph/vueNodes/NodeHeader.vue +++ b/src/components/graph/vueNodes/NodeHeader.vue @@ -37,7 +37,7 @@ diff --git a/src/components/graph/vueNodes/NodeSlots.vue b/src/components/graph/vueNodes/NodeSlots.vue index 76ec3e9a6b..6d1d6ec885 100644 --- a/src/components/graph/vueNodes/NodeSlots.vue +++ b/src/components/graph/vueNodes/NodeSlots.vue @@ -2,44 +2,49 @@
⚠️ Node Slots Error
-
- -
-
Inputs:
-
+
+ - {{ getInputName(input, index) }} ({{ getInputType(input) }}) -
+ :slot-data="input" + :index="getActualInputIndex(input, index)" + :readonly="readonly" + @slot-click=" + handleInputSlotClick(getActualInputIndex(input, index), $event) + " + />
-
-
Outputs:
-
+ - {{ getOutputName(output, index) }} ({{ getOutputType(output) }}) -
+ :slot-data="output" + :index="index" + :readonly="readonly" + @slot-click="handleOutputSlotClick(index, $event)" + />
diff --git a/src/components/graph/vueNodes/OutputSlot.vue b/src/components/graph/vueNodes/OutputSlot.vue index 16be94ebe0..2edd3f096f 100644 --- a/src/components/graph/vueNodes/OutputSlot.vue +++ b/src/components/graph/vueNodes/OutputSlot.vue @@ -2,44 +2,57 @@
⚠️
- + {{ slotData.name || `Output ${index}` }} -
+
+
+
diff --git a/src/components/graph/vueWidgets/WidgetColorPicker.vue b/src/components/graph/vueWidgets/WidgetColorPicker.vue index 67d08f0d16..16a3dd3746 100644 --- a/src/components/graph/vueWidgets/WidgetColorPicker.vue +++ b/src/components/graph/vueWidgets/WidgetColorPicker.vue @@ -1,9 +1,16 @@ + @@ -11,19 +18,31 @@ import ColorPicker from 'primevue/colorpicker' import { computed } from 'vue' +import { useWidgetValue } from '@/composables/graph/useWidgetValue' import type { SimplifiedWidget } from '@/types/simplifiedWidget' import { PANEL_EXCLUDED_PROPS, filterWidgetProps } from '@/utils/widgetPropFilter' -const value = defineModel({ required: true }) - const props = defineProps<{ widget: SimplifiedWidget + modelValue: string readonly?: boolean }>() +const emit = defineEmits<{ + 'update:modelValue': [value: string] +}>() + +// Use the composable for consistent widget value handling +const { localValue, onChange } = useWidgetValue({ + widget: props.widget, + modelValue: props.modelValue, + defaultValue: '#000000', + emit +}) + // ColorPicker specific excluded props include panel/overlay classes const COLOR_PICKER_EXCLUDED_PROPS = [...PANEL_EXCLUDED_PROPS] as const diff --git a/src/components/graph/vueWidgets/WidgetFileUpload.vue b/src/components/graph/vueWidgets/WidgetFileUpload.vue index b8908c734f..29cff10c07 100644 --- a/src/components/graph/vueWidgets/WidgetFileUpload.vue +++ b/src/components/graph/vueWidgets/WidgetFileUpload.vue @@ -1,66 +1,323 @@ diff --git a/src/components/graph/vueWidgets/WidgetGalleria.vue b/src/components/graph/vueWidgets/WidgetGalleria.vue index faa31ce913..3603b7ab67 100644 --- a/src/components/graph/vueWidgets/WidgetGalleria.vue +++ b/src/components/graph/vueWidgets/WidgetGalleria.vue @@ -1,17 +1,27 @@