Improve graphfx-ui node UX

graphfx-ui/src/lib/graphfxToVueFlow.ts

@@ -1,9 +1,12 @@
-import type { Edge, Node } from '@vue-flow/core'
+import { MarkerType, type Edge, type Node } from '@vue-flow/core'
+import { ioTypeFor, type GraphFxIoType } from './nodeDefinitions'
 
 export type GraphFxIoValue = {
   label?: string | null
   value?: unknown
   output?: string | null
+  type?: GraphFxIoType
+  definition?: { type?: GraphFxIoType }
 }
 
 export type GraphFxSerializedNode = {
@@ -27,7 +30,7 @@ export type GraphFxSerializedGraph = GraphFxSerializedNode[]
 export type GraphFxPort = {
   name: string
   label: string
-  type?: string
+  type: GraphFxIoType
   output?: string | null
   value?: unknown
 }
@@ -63,14 +66,25 @@ export function getOutputHandleId(nodeId: string, outputName: string) {
   return `${nodeId}:out:${outputName}`
 }
 
+const ioTypeColors: Record<GraphFxIoType, string> = {
+  Image: '#4dd7ff',
+  Number: '#f6c85f',
+  String: '#9ee66f',
+  Boolean: '#c084fc',
+  Color: '#ff78b7',
+  Font: '#fb923c',
+  Unknown: '#94a3b8',
+}
+
 function labelFor(name: string, io?: GraphFxIoValue) {
   return io?.label || name
 }
 
-function toPorts(record: Record<string, GraphFxIoValue> | undefined, direction: 'in' | 'out') {
+function toPorts(nodeName: string, record: Record<string, GraphFxIoValue> | undefined, direction: 'in' | 'out') {
   return Object.entries(record || {}).map(([name, io]) => ({
     name,
     label: labelFor(name, io),
+    type: ioTypeFor(nodeName, direction, name, io?.type || io?.definition?.type),
     output: direction === 'in' ? io?.output || null : null,
     value: direction === 'in' ? io?.value : undefined,
   }))
@@ -121,8 +135,8 @@ export function graphFxToVueFlow(graph: GraphFxSerializedGraph): GraphFxFlowMode
     .filter((item) => item?.node?.id && item.node.name)
     .map((item, index) => {
       const { hasSavedPosition, position } = savedPosition(item, index)
-      const inputs = toPorts(item.node.options?.in, 'in')
-      const outputs = toPorts(item.node.options?.out, 'out')
+      const inputs = toPorts(item.node.name, item.node.options?.in, 'in')
+      const outputs = toPorts(item.node.name, item.node.options?.out, 'out')
 
       return {
         id: item.node.id,
@@ -159,15 +173,20 @@ export function graphFxToVueFlow(graph: GraphFxSerializedGraph): GraphFxFlowMode
         continue
       }
 
+      const sourceNode = nodes.find((node) => node.id === source.nodeId)
+      const sourcePort = sourceNode?.data?.outputs.find((output) => output.name === source.outputName)
+      const edgeColor = ioTypeColors[sourcePort?.type || 'Unknown']
+
       edges.push({
         id: `${source.nodeId}:${source.outputName}->${item.node.id}:${inputName}`,
         source: source.nodeId,
         target: item.node.id,
         sourceHandle: getOutputHandleId(source.nodeId, source.outputName),
         targetHandle: getInputHandleId(item.node.id, inputName),
-        label: inputName,
         type: 'smoothstep',
         animated: false,
+        style: { stroke: edgeColor, strokeWidth: 2.8 },
+        markerEnd: { type: MarkerType.ArrowClosed, color: edgeColor },
       })
     }
   }