fix(vueNodes): decrease default size of reroute nodes

browser_tests/tests/vueNodes/interactions/node/imagePreview.spec.ts

@@ -1,23 +1,22 @@
 import { expect } from '@playwright/test'
 
+import type { ComfyPage } from '../../../../fixtures/ComfyPage'
 import { comfyPageFixture as test } from '../../../../fixtures/ComfyPage'
 
 test.describe('Vue Nodes Image Preview', () => {
   test.beforeEach(async ({ comfyPage }) => {
-    await comfyPage.setSetting('Comfy.VueNodes.Enabled', true)
-    await comfyPage.loadWorkflow('widgets/load_image_widget')
+    await comfyPage.settings.setSetting('Comfy.VueNodes.Enabled', true)
+    await comfyPage.workflow.loadWorkflow('widgets/load_image_widget')
     await comfyPage.vueNodes.waitForNodes()
   })
 
-  async function loadImageOnNode(
-    comfyPage: Awaited<
-      ReturnType<(typeof test)['info']>
-    >['fixtures']['comfyPage']
-  ) {
-    const loadImageNode = (await comfyPage.getNodeRefsByType('LoadImage'))[0]
+  async function loadImageOnNode(comfyPage: ComfyPage) {
+    const loadImageNode = (
+      await comfyPage.nodeOps.getNodeRefsByType('LoadImage')
+    )[0]
     const { x, y } = await loadImageNode.getPosition()
 
-    await comfyPage.dragAndDropFile('image64x64.webp', {
+    await comfyPage.dragDrop.dragAndDropFile('image64x64.webp', {
       dropPosition: { x, y }
     })
 

browser_tests/tests/vueNodes/rerouteNodeSize.spec.ts

@@ -0,0 +1,24 @@
+import {
+  comfyExpect as expect,
+  comfyPageFixture as test
+} from '../../fixtures/ComfyPage'
+
+test.describe('Vue Reroute Node Size', () => {
+  test.beforeEach(async ({ comfyPage }) => {
+    await comfyPage.settings.setSetting('Comfy.VueNodes.Enabled', true)
+    await comfyPage.settings.setSetting('Comfy.Minimap.Visible', false)
+    await comfyPage.workflow.loadWorkflow('links/single_connected_reroute_node')
+    await comfyPage.vueNodes.waitForNodes()
+  })
+
+  test(
+    'reroute node visual appearance',
+    { tag: '@screenshot' },
+    async ({ comfyPage }) => {
+      await comfyPage.nextFrame()
+      await expect(comfyPage.canvas).toHaveScreenshot(
+        'vue-reroute-node-compact.png'
+      )
+    }
+  )
+})

src/renderer/extensions/vueNodes/components/LGraphNode.test.ts

@@ -6,6 +6,7 @@ import type { ComponentProps } from 'vue-component-type-helpers'
 import { createI18n } from 'vue-i18n'
 
 import type { VueNodeData } from '@/composables/graph/useGraphNodeManager'
+import { TitleMode } from '@/lib/litegraph/src/types/globalEnums'
 import LGraphNode from '@/renderer/extensions/vueNodes/components/LGraphNode.vue'
 import { useVueElementTracking } from '@/renderer/extensions/vueNodes/composables/useVueNodeResizeTracking'
 import { useCanvasStore } from '@/renderer/core/canvas/canvasStore'
@@ -131,6 +132,14 @@ const mockNodeData: VueNodeData = {
   executing: false
 }
 
+const mockRerouteNodeData: VueNodeData = {
+  ...mockNodeData,
+  id: 'reroute-node-1',
+  title: '',
+  type: 'Reroute',
+  titleMode: TitleMode.NO_TITLE
+}
+
 describe('LGraphNode', () => {
   beforeEach(() => {
     vi.resetAllMocks()
@@ -223,4 +232,37 @@ describe('LGraphNode', () => {
     )
     expect(wrapper.element.style.getPropertyValue('--node-height-x')).toBe('')
   })
+
+  describe('Reroute node sizing', () => {
+    it('should not enforce minimum width for reroute nodes', () => {
+      const wrapper = mountLGraphNode({ nodeData: mockRerouteNodeData })
+      const regularWrapper = mountLGraphNode({ nodeData: mockNodeData })
+
+      const rerouteHasMinWidth = wrapper
+        .classes()
+        .some((c) => c.startsWith('min-w-'))
+      const regularHasMinWidth = regularWrapper
+        .classes()
+        .some((c) => c.startsWith('min-w-'))
+
+      expect(rerouteHasMinWidth).toBe(false)
+      expect(regularHasMinWidth).toBe(true)
+    })
+
+    it('should use fixed height for reroute nodes', () => {
+      const wrapper = mountLGraphNode({ nodeData: mockRerouteNodeData })
+      const hasFixedHeight = wrapper.classes().some((c) => c.startsWith('h-'))
+      expect(hasFixedHeight).toBe(true)
+    })
+
+    it('should not render resize handle for reroute nodes', () => {
+      const wrapper = mountLGraphNode({ nodeData: mockRerouteNodeData })
+      expect(wrapper.find('[role="button"][aria-label]').exists()).toBe(false)
+    })
+
+    it('should render resize handle for regular nodes', () => {
+      const wrapper = mountLGraphNode({ nodeData: mockNodeData })
+      expect(wrapper.find('[role="button"][aria-label]').exists()).toBe(true)
+    })
+  })
 })

src/renderer/extensions/vueNodes/components/LGraphNode.vue

@@ -10,7 +10,10 @@
     :class="
       cn(
         'group/node bg-node-component-header-surface lg-node absolute text-sm',
-        'contain-style contain-layout min-w-[225px] min-h-(--node-height) w-(--node-width)',
+        'contain-style contain-layout w-(--node-width)',
+        isRerouteNode
+          ? 'h-(--node-height)'
+          : 'min-w-[225px] min-h-(--node-height)',
         shapeClass,
         'touch-none flex flex-col',
         'border-1 border-solid border-component-node-border',
@@ -87,7 +90,11 @@
       :style="{ width: `${Math.min(progress * 100, 100)}%` }"
     />
 
-    <template v-if="!isCollapsed">
+    <template v-if="!isCollapsed && isRerouteNode">
+      <NodeSlots :node-data="nodeData" />
+    </template>
+
+    <template v-else-if="!isCollapsed">
       <div class="relative">
         <!-- Progress bar for executing state -->
         <div
@@ -123,6 +130,7 @@
       </div>
     </template>
     <Button
+      v-if="!isRerouteNode"
       variant="textonly"
       :class="
         cn(
@@ -165,7 +173,9 @@
         </template>
       </button>
     </Button>
-    <template v-if="!isCollapsed && nodeData.resizable !== false">
+    <template
+      v-if="!isCollapsed && !isRerouteNode && nodeData.resizable !== false"
+    >
       <div
         v-for="handle in RESIZE_HANDLES"
         :key="handle.corner"
@@ -312,6 +322,8 @@ const hasAnyError = computed((): boolean => {
 
 const displayHeader = computed(() => nodeData.titleMode !== TitleMode.NO_TITLE)
 
+const isRerouteNode = computed(() => nodeData.type === 'Reroute')
+
 const isCollapsed = computed(() => nodeData.flags?.collapsed ?? false)
 const bypassed = computed(
   (): boolean => nodeData.mode === LGraphEventMode.BYPASS