Review feedback

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,15 +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 colorMapper = this.isConnected
+          ? colorContext.getConnectedColor
+          : colorContext.getDisconnectedColor
         const types = `${this.type}`
           .split(',')
-          .map(
-            this.isConnected
-              ? (type) => colorContext.getConnectedColor(type)
-              : (type) => colorContext.getDisconnectedColor(type)
-          )
-          .slice(0, 3)
+          .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/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,7 +32,10 @@ const types = computed(() => {
   //TODO Support connected/disconnected colors?
   if (!props.slotData) return [getSlotColor()]
   if (props.slotData.type === '*') return ['']
-  return `${props.slotData.type}`.split(',').map(getSlotColor).slice(0, 3)
+  return `${props.slotData.type}`
+    .split(',')
+    .map(getSlotColor)
+    .slice(0, MAX_MULTITYPE_SLICES)
 })
 
 defineExpose({