Add Vue Flow graph visualizer

graphfx-ui/src/components/GraphFxNode.vue

@@ -0,0 +1,59 @@
+<script setup lang="ts">
+import { Handle, Position } from '@vue-flow/core'
+import type { GraphFxNodeData, GraphFxPort } from '../lib/graphfxToVueFlow'
+import { getInputHandleId, getOutputHandleId } from '../lib/graphfxToVueFlow'
+
+const props = defineProps<{
+  data: GraphFxNodeData
+}>()
+
+function valuePreview(port: GraphFxPort) {
+  if (port.output) return 'connected'
+  if (port.value === null || port.value === undefined) return 'empty'
+  if (typeof port.value === 'string') return port.value.length > 28 ? `${port.value.slice(0, 28)}…` : port.value
+  if (typeof port.value === 'number' || typeof port.value === 'boolean') return String(port.value)
+  if (typeof port.value === 'object') return 'object'
+  return String(port.value)
+}
+</script>
+
+<template>
+  <article class="graphfx-node">
+    <header class="graphfx-node__header">
+      <p class="graphfx-node__kind">GraphFX</p>
+      <h3>{{ data.name }}</h3>
+      <small>{{ data.id }}</small>
+    </header>
+
+    <section class="graphfx-node__ports" :class="{ 'graphfx-node__ports--empty': !data.inputs.length && !data.outputs.length }">
+      <div class="graphfx-node__column">
+        <p class="graphfx-node__column-title">Inputs</p>
+        <div v-if="!data.inputs.length" class="graphfx-node__empty">none</div>
+        <div v-for="port in data.inputs" :key="port.name" class="graphfx-node__port graphfx-node__port--input">
+          <Handle
+            type="target"
+            :id="getInputHandleId(data.id, port.name)"
+            :position="Position.Left"
+            class="graphfx-node__handle graphfx-node__handle--input"
+          />
+          <span class="graphfx-node__port-label">{{ port.label }}</span>
+          <span class="graphfx-node__port-value" :title="String(port.value ?? '')">{{ valuePreview(port) }}</span>
+        </div>
+      </div>
+
+      <div class="graphfx-node__column graphfx-node__column--outputs">
+        <p class="graphfx-node__column-title">Outputs</p>
+        <div v-if="!data.outputs.length" class="graphfx-node__empty">none</div>
+        <div v-for="port in data.outputs" :key="port.name" class="graphfx-node__port graphfx-node__port--output">
+          <span class="graphfx-node__port-label">{{ port.label }}</span>
+          <Handle
+            type="source"
+            :id="getOutputHandleId(data.id, port.name)"
+            :position="Position.Right"
+            class="graphfx-node__handle graphfx-node__handle--output"
+          />
+        </div>
+      </div>
+    </section>
+  </article>
+</template>