Review feedback

browser_tests/tests/vueNodes/slots.spec.ts

@@ -0,0 +1,21 @@
+import {
+  comfyPageFixture as test,
+  comfyExpect as expect
+} from '@e2e/fixtures/ComfyPage'
+
+test('Can display a slot mismatched from widget type', async ({
+  comfyPage
+}) => {
+  await comfyPage.page.evaluate(() => {
+    const emptyLatent = window.app!.graph.getNodeById(5)!
+    emptyLatent.inputs[0].type = 'INT,FLOAT'
+  })
+  await comfyPage.settings.setSetting('Comfy.VueNodes.Enabled', true)
+
+  const width = comfyPage.vueNodes
+    .getNodeByTitle('Empty Latent')
+    .locator('.lg-node-widget')
+    .first()
+  await expect(width.locator('path[fill*="INT"]')).toBeVisible()
+  await expect(width.locator('path[fill*="FLOAT"]')).toBeVisible()
+})

src/composables/graph/useGraphNodeManager.ts

@@ -45,6 +45,7 @@ export interface WidgetSlotMetadata {
   linked: boolean
   originNodeId?: string
   originOutputName?: string
+  type: string
 }
 
 /**
@@ -395,7 +396,8 @@ function buildSlotMetadata(
       index,
       linked: input.link != null,
       originNodeId,
-      originOutputName
+      originOutputName,
+      type: String(input.type)
     }
     if (input.name) metadata.set(input.name, slotInfo)
     if (input.widget?.name) metadata.set(input.widget.name, slotInfo)

src/constants/slotColors.ts

@@ -1,3 +1,5 @@
+export const MAX_MULTITYPE_SLICES = 3
+
 export function getSlotColor(type?: string | number | null): string {
   if (!type) return '#AAA'
   const typeStr = String(type).toUpperCase()

src/lib/litegraph/src/node/NodeSlot.ts

@@ -1,3 +1,4 @@
+import { MAX_MULTITYPE_SLICES } from '@/constants/slotColors'
 import type { LGraphNode } from '@/lib/litegraph/src/LGraphNode'
 import { LabelPosition, SlotShape, SlotType } from '@/lib/litegraph/src/draw'
 import type {
@@ -172,17 +173,16 @@ export abstract class NodeSlot extends SlotBase implements INodeSlot {
           path.arc(pos[0], pos[1], highlight ? 2.5 : 1.5, 0, Math.PI * 2)
           ctx.clip(path, 'evenodd')
         }
+
         const radius = highlight ? 5 : 4
-        const typesSet = new Set(
-          `${this.type}`
-            .split(',')
-            .map(
-              this.isConnected
-                ? (type) => colorContext.getConnectedColor(type)
-                : (type) => colorContext.getDisconnectedColor(type)
-            )
-        )
-        const types = [...typesSet].slice(0, 3)
+        const colorMapper = this.isConnected
+          ? colorContext.getConnectedColor
+          : colorContext.getDisconnectedColor
+        const types = `${this.type}`
+          .split(',')
+          .map(colorMapper)
+          .slice(0, MAX_MULTITYPE_SLICES)
+
         if (types.length > 1) {
           doFill = false
           const arcLen = (Math.PI * 2) / types.length

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

@@ -41,7 +41,7 @@
             v-if="widget.slotMetadata"
             :slot-data="{
               name: widget.name,
-              type: widget.type,
+              type: widget.slotMetadata.type,
               boundingRect: [0, 0, 0, 0]
             }"
             :node-id="nodeData?.id != null ? String(nodeData.id) : ''"

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

@@ -1,7 +1,7 @@
 <script setup lang="ts">
 import { computed, useTemplateRef } from 'vue'
 
-import { getSlotColor } from '@/constants/slotColors'
+import { getSlotColor, MAX_MULTITYPE_SLICES } from '@/constants/slotColors'
 import type { INodeSlot } from '@/lib/litegraph/src/litegraph'
 import { RenderShape } from '@/lib/litegraph/src/types/globalEnums'
 import { cn } from '@/utils/tailwindUtil'
@@ -32,10 +32,10 @@ const types = computed(() => {
   //TODO Support connected/disconnected colors?
   if (!props.slotData) return [getSlotColor()]
   if (props.slotData.type === '*') return ['']
-  const typesSet = new Set(
-    `${props.slotData.type}`.split(',').map(getSlotColor)
-  )
-  return [...typesSet].slice(0, 3)
+  return `${props.slotData.type}`
+    .split(',')
+    .map(getSlotColor)
+    .slice(0, MAX_MULTITYPE_SLICES)
 })
 
 defineExpose({