Further dynamic input fixes (#8026)

- Fix deserialization of matchtype inputs spawned by autogrow.
- Rotate multitype slot indicators to align with design changes.
- Fix several instance of incorrect group matching
- MatchType reactively updates input type in vue
- Support the "hollow circle" optional input indicator in vue
- Custom combo sends index of selection to backend

┆Issue is synchronized with this [Notion
page](https://www.notion.so/PR-8026-Further-dynamic-input-fixes-2e76d73d3650819680fef327a94f4294)
by [Unito](https://www.unito.io)

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

@@ -13,18 +13,29 @@ const props = defineProps<{
   multi?: boolean
 }>()
 
+const clipPath = computed(() => {
+  switch (props.slotData?.shape) {
+    case 6:
+      return 'url(#square)'
+    case 7:
+      return 'url(#hollow)'
+    default:
+      return undefined
+  }
+})
+
 const slotElRef = useTemplateRef('slot-el')
 
-function getTypes() {
+const types = computed(() => {
   if (props.hasError) return ['var(--color-error)']
   //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)
-}
-const types = getTypes()
+})
 
 defineExpose({
   slotElRef
@@ -52,26 +63,65 @@ const slotClass = computed(() =>
     "
   >
     <div
-      v-if="types.length === 1"
+      v-if="types.length === 1 && slotData?.shape == undefined"
       ref="slot-el"
-      :style="{ backgroundColor: types[0] }"
+      :style="{ backgroundColor: types.length === 1 ? types[0] : undefined }"
       :class="slotClass"
     />
-    <div
+    <svg
       v-else
       ref="slot-el"
-      :style="{
-        '--type1': types[0],
-        '--type2': types[1],
-        '--type3': types[2]
-      }"
       :class="slotClass"
+      viewBox="0 0 100 100"
+      xmlns="http://www.w3.org/2000/svg"
     >
-      <i-comfy:node-slot2
-        v-if="types.length === 2"
-        class="size-full -translate-y-1/2"
+      <defs>
+        <clipPath id="square">
+          <rect x="20" y="20" width="60" height="60" />
+        </clipPath>
+        <clipPath id="hollow">
+          <path
+            d="M-50 50
+           A100 100 0 0 1 150 50
+           A100 100 0 0 1 -50 50
+           M30 50
+           A20 20 0 0 0 70 50
+           A20 20 0 0 0 30 50"
+          />
+        </clipPath>
+      </defs>
+      <circle
+        v-if="types.length === 1"
+        :clip-path
+        cx="50"
+        cy="50"
+        r="50"
+        :fill="types[0]"
       />
-      <i-comfy:node-slot3 v-else class="size-full -translate-y-1/2" />
-    </div>
+      <g v-else-if="types.length === 2" :clip-path stroke-width="4">
+        <path d="M0 50 A 50 50 0 0 1 100 50" :fill="types[0]" />
+        <path d="M100 50 A 50 50 0 0 1 0 50" :fill="types[1]" />
+        <path d="M0 50L100 50" stroke="var(--inner-stroke, black)" />
+        <path
+          d="M50 2A48 48 0 0 1 50 98A48 48 0 0 1 50 2"
+          fill="transparent"
+          stroke="var(--outer-stroke, transparent)"
+        />
+      </g>
+      <g v-else :clip-path stroke-width="4">
+        <path d="M0 50A50 50 0 0 0 75 93L50 50" :fill="types[0]" />
+        <path d="M75 93A50 50 0 0 0 75 7L50 50" :fill="types[1]" />
+        <path d="M75 7A50 50 0 0 0 0 50L50 50" :fill="types[2]" />
+        <path
+          d="M50 50L0 50M50 50L75 93M50 50L75 7"
+          stroke="var(--inner-stroke, black)"
+        />
+        <path
+          d="M50 2A48 48 0 0 1 50 98A48 48 0 0 1 50 2"
+          fill="transparent"
+          stroke="var(--outer-stroke, transparent)"
+        />
+      </g>
+    </svg>
   </div>
 </template>