From de6ee6879d055c80c43fe35ea69de0213d4cdbd1 Mon Sep 17 00:00:00 2001 From: --list <18093452+simula-r@users.noreply.github.com> Date: Mon, 17 Nov 2025 18:32:30 -0800 Subject: [PATCH 1/5] fix: arbitrary styles, min size != content, ensure layout calc, truncate nodes with ... --- .../extensions/vueNodes/VideoPreview.vue | 4 ++-- .../vueNodes/components/ImagePreview.vue | 4 ++-- .../vueNodes/components/LGraphNode.vue | 12 +++++++--- .../vueNodes/components/NodeHeader.vue | 24 ++++++++++--------- .../layout/ensureCorrectLayoutScale.ts | 12 ++++++---- .../widgets/components/WidgetColorPicker.vue | 8 ++++--- .../components/WidgetInputNumberInput.vue | 3 ++- .../components/WidgetInputNumberSlider.vue | 2 +- .../widgets/components/WidgetInputText.vue | 1 + .../widgets/components/WidgetRecordAudio.vue | 4 ++-- .../components/WidgetSelectDefault.vue | 6 +++-- .../components/form/FormSelectButton.vue | 2 +- .../form/dropdown/FormDropdownInput.vue | 18 ++++++++------ .../components/layout/WidgetLayoutField.vue | 11 ++++----- 14 files changed, 66 insertions(+), 45 deletions(-) diff --git a/src/renderer/extensions/vueNodes/VideoPreview.vue b/src/renderer/extensions/vueNodes/VideoPreview.vue index a6ebc2c6b6..df1609e682 100644 --- a/src/renderer/extensions/vueNodes/VideoPreview.vue +++ b/src/renderer/extensions/vueNodes/VideoPreview.vue @@ -11,12 +11,12 @@ >

{{ $t('g.videoFailedToLoad') }}

diff --git a/src/renderer/extensions/vueNodes/components/ImagePreview.vue b/src/renderer/extensions/vueNodes/components/ImagePreview.vue index 01d1d23d1f..9b1020f94c 100644 --- a/src/renderer/extensions/vueNodes/components/ImagePreview.vue +++ b/src/renderer/extensions/vueNodes/components/ImagePreview.vue @@ -11,12 +11,12 @@ >

{{ $t('g.imageFailedToLoad') }}

diff --git a/src/renderer/extensions/vueNodes/components/LGraphNode.vue b/src/renderer/extensions/vueNodes/components/LGraphNode.vue index 0a94f848dd..d88aab4b6c 100644 --- a/src/renderer/extensions/vueNodes/components/LGraphNode.vue +++ b/src/renderer/extensions/vueNodes/components/LGraphNode.vue @@ -9,7 +9,8 @@ :class=" cn( 'bg-component-node-background lg-node absolute', - 'h-min w-min contain-style contain-layout min-h-(--node-height) min-w-(--node-width)', + + 'contain-style contain-layout min-w-[225px] min-h-(--node-height) w-(--node-width)', 'rounded-2xl touch-none flex flex-col', 'border-1 border-solid border-component-node-border', // hover (only when node should handle events) @@ -100,7 +101,7 @@
@@ -343,12 +344,17 @@ const cornerResizeHandles: CornerResizeHandle[] = [ } ] +const MIN_NODE_WIDTH = 225 + const { startResize } = useNodeResize( (result, element) => { if (isCollapsed.value) return + // Clamp width to minimum to avoid conflicts with CSS min-width + const clampedWidth = Math.max(result.size.width, MIN_NODE_WIDTH) + // Apply size directly to DOM element - ResizeObserver will pick this up - element.style.setProperty('--node-width', `${result.size.width}px`) + element.style.setProperty('--node-width', `${clampedWidth}px`) element.style.setProperty('--node-height', `${result.size.height}px`) const currentPosition = position.value diff --git a/src/renderer/extensions/vueNodes/components/NodeHeader.vue b/src/renderer/extensions/vueNodes/components/NodeHeader.vue index be5dc31b72..b7f4d9ab78 100644 --- a/src/renderer/extensions/vueNodes/components/NodeHeader.vue +++ b/src/renderer/extensions/vueNodes/components/NodeHeader.vue @@ -6,7 +6,7 @@ v-else :class=" cn( - 'lg-node-header py-2 pl-2 pr-3 text-sm rounded-t-2xl w-full min-w-50', + 'lg-node-header py-2 pl-2 pr-3 text-sm rounded-t-2xl w-full min-w-0', 'text-node-component-header bg-node-component-header-surface', collapsed && 'rounded-2xl' ) @@ -15,9 +15,9 @@ :data-testid="`node-header-${nodeData?.id || ''}`" @dblclick="handleDoubleClick" > -
+
-
+
- +
+ +
diff --git a/src/renderer/extensions/vueNodes/layout/ensureCorrectLayoutScale.ts b/src/renderer/extensions/vueNodes/layout/ensureCorrectLayoutScale.ts index cb3d95ef90..02070ccca6 100644 --- a/src/renderer/extensions/vueNodes/layout/ensureCorrectLayoutScale.ts +++ b/src/renderer/extensions/vueNodes/layout/ensureCorrectLayoutScale.ts @@ -10,7 +10,7 @@ import { app as comfyApp } from '@/scripts/app' import type { SubgraphInputNode } from '@/lib/litegraph/src/subgraph/SubgraphInputNode' import type { SubgraphOutputNode } from '@/lib/litegraph/src/subgraph/SubgraphOutputNode' -const SCALE_FACTOR = 1.75 +const SCALE_FACTOR = 1.2 export function ensureCorrectLayoutScale( renderer?: rendererType, @@ -81,14 +81,18 @@ export function ensureCorrectLayoutScale( const relativeX = lgNode.pos[0] - originX const relativeY = lgBodyY - originY const newX = originX + relativeX * scaleFactor - const newY = originY + relativeY * scaleFactor + const scaledY = originY + relativeY * scaleFactor const newWidth = lgNode.width * scaleFactor const newHeight = lgNode.height * scaleFactor + const finalY = needsUpscale + ? scaledY + LiteGraph.NODE_TITLE_HEIGHT / 2 + : scaledY + // Directly update LiteGraph node to ensure immediate consistency // Dont need to reference vue directly because the pos and dims are already in yjs lgNode.pos[0] = newX - lgNode.pos[1] = newY + lgNode.pos[1] = finalY lgNode.size[0] = newWidth lgNode.size[1] = newHeight - (needsDownscale ? LiteGraph.NODE_TITLE_HEIGHT : 0) @@ -99,7 +103,7 @@ export function ensureCorrectLayoutScale( nodeId: String(lgNode.id), bounds: { x: newX, - y: newY, + y: finalY, width: newWidth, height: newHeight - (needsDownscale ? LiteGraph.NODE_TITLE_HEIGHT : 0) } diff --git a/src/renderer/extensions/vueNodes/widgets/components/WidgetColorPicker.vue b/src/renderer/extensions/vueNodes/widgets/components/WidgetColorPicker.vue index 333966996c..b87f6b6164 100644 --- a/src/renderer/extensions/vueNodes/widgets/components/WidgetColorPicker.vue +++ b/src/renderer/extensions/vueNodes/widgets/components/WidgetColorPicker.vue @@ -16,9 +16,11 @@ }" @update:model-value="onPickerUpdate" /> - {{ - toHexFromFormat(localValue, format) - }} + {{ toHexFromFormat(localValue, format) }} diff --git a/src/renderer/extensions/vueNodes/widgets/components/WidgetInputNumberInput.vue b/src/renderer/extensions/vueNodes/widgets/components/WidgetInputNumberInput.vue index 44790f8807..b4a11de65a 100644 --- a/src/renderer/extensions/vueNodes/widgets/components/WidgetInputNumberInput.vue +++ b/src/renderer/extensions/vueNodes/widgets/components/WidgetInputNumberInput.vue @@ -97,7 +97,8 @@ const buttonTooltip = computed(() => { :show-buttons="!buttonsDisabled" :pt="{ root: { - class: '[&>input]:bg-transparent [&>input]:border-0' + class: + '[&>input]:bg-transparent [&>input]:border-0 [&>input]:truncate [&>input]:min-w-[4ch]' }, decrementButton: { class: 'w-8 border-0' diff --git a/src/renderer/extensions/vueNodes/widgets/components/WidgetInputNumberSlider.vue b/src/renderer/extensions/vueNodes/widgets/components/WidgetInputNumberSlider.vue index cebe4de75f..2346b78f1f 100644 --- a/src/renderer/extensions/vueNodes/widgets/components/WidgetInputNumberSlider.vue +++ b/src/renderer/extensions/vueNodes/widgets/components/WidgetInputNumberSlider.vue @@ -18,7 +18,7 @@ :max-fraction-digits="precision" :aria-label="widget.name" size="small" - pt:pc-input-text:root="min-w-full bg-transparent border-none text-center" + pt:pc-input-text:root="min-w-[4ch] bg-transparent border-none text-center truncate" class="w-16" :pt="sliderNumberPt" @update:model-value="handleNumberInputUpdate" diff --git a/src/renderer/extensions/vueNodes/widgets/components/WidgetInputText.vue b/src/renderer/extensions/vueNodes/widgets/components/WidgetInputText.vue index 882ce24745..5bad254e19 100644 --- a/src/renderer/extensions/vueNodes/widgets/components/WidgetInputText.vue +++ b/src/renderer/extensions/vueNodes/widgets/components/WidgetInputText.vue @@ -6,6 +6,7 @@ :class="cn(WidgetInputBaseClass, 'w-full text-xs py-2 px-4')" :aria-label="widget.name" size="small" + :pt="{ root: 'truncate min-w-[4ch]' }" @update:model-value="onChange" /> diff --git a/src/renderer/extensions/vueNodes/widgets/components/WidgetRecordAudio.vue b/src/renderer/extensions/vueNodes/widgets/components/WidgetRecordAudio.vue index 420cef027d..91e7e86477 100644 --- a/src/renderer/extensions/vueNodes/widgets/components/WidgetRecordAudio.vue +++ b/src/renderer/extensions/vueNodes/widgets/components/WidgetRecordAudio.vue @@ -2,7 +2,7 @@
diff --git a/src/renderer/extensions/vueNodes/widgets/components/WidgetSelectDefault.vue b/src/renderer/extensions/vueNodes/widgets/components/WidgetSelectDefault.vue index 72473d0613..9eccc6dd1e 100644 --- a/src/renderer/extensions/vueNodes/widgets/components/WidgetSelectDefault.vue +++ b/src/renderer/extensions/vueNodes/widgets/components/WidgetSelectDefault.vue @@ -5,12 +5,14 @@ :invalid :options="selectOptions" v-bind="combinedProps" - :class="cn(WidgetInputBaseClass, 'w-full text-xs')" + :class="cn(WidgetInputBaseClass, 'w-full text-xs truncate min-w-[4ch]')" :aria-label="widget.name" size="small" :pt="{ option: 'text-xs', - dropdown: 'w-8' + dropdown: 'w-8', + label: 'truncate min-w-[4ch]', + root: 'min-w-[4ch]' }" data-capture-wheel="true" @update:model-value="onChange" diff --git a/src/renderer/extensions/vueNodes/widgets/components/form/FormSelectButton.vue b/src/renderer/extensions/vueNodes/widgets/components/form/FormSelectButton.vue index 3745bc6029..f03a9b6b43 100644 --- a/src/renderer/extensions/vueNodes/widgets/components/form/FormSelectButton.vue +++ b/src/renderer/extensions/vueNodes/widgets/components/form/FormSelectButton.vue @@ -12,7 +12,7 @@ :key="getOptionValue(option, index)" :class=" cn( - 'flex-1 h-6 px-5 py-[5px] rounded flex justify-center items-center gap-1 transition-all duration-150 ease-in-out', + 'flex-1 h-6 px-5 py-[5px] rounded flex justify-center items-center gap-1 transition-all duration-150 ease-in-out truncate min-w-[4ch]', 'bg-transparent border-none', 'text-center text-xs font-normal', { diff --git a/src/renderer/extensions/vueNodes/widgets/components/form/dropdown/FormDropdownInput.vue b/src/renderer/extensions/vueNodes/widgets/components/form/dropdown/FormDropdownInput.vue index c342f8b89b..8d32d58baf 100644 --- a/src/renderer/extensions/vueNodes/widgets/components/form/dropdown/FormDropdownInput.vue +++ b/src/renderer/extensions/vueNodes/widgets/components/form/dropdown/FormDropdownInput.vue @@ -65,18 +65,22 @@ const theButtonStyle = computed(() =>