Fix GraphFX node port layout and previews

2026-06-19 10:37:28 +02:00
parent 8c58aaae2b
commit 449a7aa071
4 changed files with 122 additions and 94 deletions
--- a/graphfx-ui/src/components/GraphFxNode.vue
+++ b/graphfx-ui/src/components/GraphFxNode.vue
@@ -13,7 +13,7 @@ function typeClass(port: GraphFxPort) {
 }

 function hasCustomLabel(port: GraphFxPort) {
-  return port.label && port.label !== port.name
+  return Boolean(port.label && port.label !== port.name)
 }

 function labelValue(port: GraphFxPort) {
@@ -121,11 +121,21 @@ function connectedText(port: GraphFxPort) {

          <div class="graphfx-node__port-head">
            <span class="graphfx-node__port-name">{{ port.name }}</span>
-            <span v-if="hasCustomLabel(port)" class="graphfx-node__label-chip">{{ port.label }}</span>
-            <span class="graphfx-node__port-type">{{ port.type }}</span>
+            <span class="graphfx-node__label-slot nodrag" @pointerdown.stop>
+              <span v-if="hasCustomLabel(port)" class="graphfx-node__label-chip">{{ port.label }}</span>
+              <input
+                class="graphfx-node__label-inline"
+                :value="labelValue(port)"
+                placeholder="label"
+                title="Input label"
+                @change="updateLabel('in', port, $event)"
+                @keydown.stop
+              />
+            </span>
+            <span class="graphfx-node__type-dot" :title="port.type" aria-hidden="true"></span>
          </div>

-          <img v-if="port.type === 'Image' && previewUrl('in', port)" class="graphfx-node__image-preview" :src="previewUrl('in', port)" :alt="`${port.name} preview`" />
+          <img v-if="previewUrl('in', port)" class="graphfx-node__image-preview" :src="previewUrl('in', port)" :alt="`${port.name} preview`" />

          <div v-if="port.output" class="graphfx-node__connected-value nodrag" @pointerdown.stop>
            <span :title="port.output">← {{ connectedText(port) }}</span>
@@ -175,18 +185,6 @@ function connectedText(port: GraphFxPort) {
              @keydown.stop
            />
          </template>
-
-          <details class="graphfx-node__label-editor nodrag" @pointerdown.stop @click.stop>
-            <summary title="Edit input label">label</summary>
-            <input
-              class="graphfx-node__label-input"
-              :value="labelValue(port)"
-              placeholder="optional label"
-              title="Input label"
-              @change="updateLabel('in', port, $event)"
-              @keydown.stop
-            />
-          </details>
        </div>
      </div>

@@ -200,24 +198,22 @@ function connectedText(port: GraphFxPort) {
          :title="`${port.name} · ${port.type}`"
        >
          <div class="graphfx-node__port-head graphfx-node__port-head--right">
-            <span class="graphfx-node__port-type">{{ port.type }}</span>
-            <span v-if="hasCustomLabel(port)" class="graphfx-node__label-chip">{{ port.label }}</span>
+            <span class="graphfx-node__type-dot" :title="port.type" aria-hidden="true"></span>
+            <span class="graphfx-node__label-slot nodrag" @pointerdown.stop>
+              <span v-if="hasCustomLabel(port)" class="graphfx-node__label-chip">{{ port.label }}</span>
+              <input
+                class="graphfx-node__label-inline"
+                :value="labelValue(port)"
+                placeholder="label"
+                title="Output label"
+                @change="updateLabel('out', port, $event)"
+                @keydown.stop
+              />
+            </span>
            <span class="graphfx-node__port-name">{{ port.name }}</span>
          </div>

-          <img v-if="port.type === 'Image' && previewUrl('out', port)" class="graphfx-node__image-preview" :src="previewUrl('out', port)" :alt="`${port.name} preview`" />
-
-          <details class="graphfx-node__label-editor nodrag" @pointerdown.stop @click.stop>
-            <summary title="Edit output label">label</summary>
-            <input
-              class="graphfx-node__label-input"
-              :value="labelValue(port)"
-              placeholder="optional label"
-              title="Output label"
-              @change="updateLabel('out', port, $event)"
-              @keydown.stop
-            />
-          </details>
+          <img v-if="previewUrl('out', port)" class="graphfx-node__image-preview" :src="previewUrl('out', port)" :alt="`${port.name} preview`" />

          <Handle
            type="source"
--- a/graphfx-ui/src/lib/graphfxToVueFlow.ts
+++ b/graphfx-ui/src/lib/graphfxToVueFlow.ts
@@ -112,22 +112,36 @@ function labelFor(name: string, io?: GraphFxIoValue) {
  return io?.label || name
 }

-function imagePreviewUrl(value: unknown): string | null {
-  if (!value) return null
+function imagePreviewUrl(value: unknown, depth = 0): string | null {
+  if (!value || depth > 4) return null
  if (typeof value === 'string') {
-    if (value.startsWith('data:image/')) return value
-    if (/^[A-Za-z0-9+/=\r\n]+$/.test(value) && value.length > 80) return `data:image/png;base64,${value.replace(/\s+/g, '')}`
+    const trimmed = value.trim()
+    if (trimmed.startsWith('data:image/')) return trimmed
+    const base64Match = trimmed.match(/(?:base64,)?([A-Za-z0-9+/=\r\n]{40,})$/)
+    if (base64Match && /^[A-Za-z0-9+/=\r\n]+$/.test(base64Match[1])) return `data:image/png;base64,${base64Match[1].replace(/\s+/g, '')}`
    return null
  }
  if (typeof value === 'object') {
-    const record = value as { src?: unknown; dataUrl?: unknown; base64?: unknown }
-    if (typeof record.src === 'string') return imagePreviewUrl(record.src)
-    if (typeof record.dataUrl === 'string') return imagePreviewUrl(record.dataUrl)
-    if (typeof record.base64 === 'string') return imagePreviewUrl(record.base64)
+    const record = value as Record<string, unknown>
+    for (const key of ['src', 'dataUrl', 'dataURL', 'url', 'href', 'base64', 'data', 'image', 'value']) {
+      const found = imagePreviewUrl(record[key], depth + 1)
+      if (found) return found
+    }
+    for (const nested of Object.values(record)) {
+      const found = imagePreviewUrl(nested, depth + 1)
+      if (found) return found
+    }
  }
  return null
 }

+function normalizedOptions(nodeName: string, direction: 'in' | 'out', name: string, io?: GraphFxIoValue) {
+  const options = ioOptionsFor(nodeName, direction, name, io?.definition)
+  if (!options.length) return []
+  const value = typeof io?.value === 'string' ? io.value : null
+  return value && !options.includes(value) ? [value, ...options] : options
+}
+
 function toPorts(nodeName: string, record: Record<string, GraphFxIoValue> | undefined, direction: 'in' | 'out') {
  return Object.entries(record || {}).map(([name, io]) => {
    const type = ioTypeFor(nodeName, direction, name, io?.type || io?.definition?.type)
@@ -137,8 +151,8 @@ function toPorts(nodeName: string, record: Record<string, GraphFxIoValue> | unde
      type,
      output: direction === 'in' ? io?.output || null : null,
      value: direction === 'in' ? io?.value : undefined,
-      options: ioOptionsFor(nodeName, direction, name, io?.definition),
-      previewUrl: type === 'Image' ? imagePreviewUrl(io?.value) : null,
+      options: normalizedOptions(nodeName, direction, name, io),
+      previewUrl: imagePreviewUrl(io?.value),
    }
  })
 }
--- a/graphfx-ui/src/lib/layout.ts
+++ b/graphfx-ui/src/lib/layout.ts
@@ -1,9 +1,8 @@
 import type { Edge, Node, Position } from '@vue-flow/core'
 import dagre from '@dagrejs/dagre'

-const DEFAULT_NODE_WIDTH = 340
-const DEFAULT_ROW_HEIGHT = 44
-const DEFAULT_HEADER_HEIGHT = 92
+const DEFAULT_NODE_WIDTH = 380
+const DEFAULT_HEADER_HEIGHT = 62
 const MIN_NODE_HEIGHT = 170

 type LayoutDirection = 'LR' | 'TB'
@@ -13,10 +12,22 @@ type LayoutOptions = {
  useSavedPositions?: boolean
 }

+function estimatePortHeight(port: any, direction: 'in' | 'out') {
+  let height = 54
+  if (port?.type === 'Image' && port?.previewUrl) height += 108
+  if (direction === 'in') height += port?.output ? 32 : 36
+  return height
+}
+
+function estimateColumnHeight(ports: any[] | undefined, direction: 'in' | 'out') {
+  if (!Array.isArray(ports) || ports.length === 0) return 44
+  return ports.reduce((total, port) => total + estimatePortHeight(port, direction), 0) + Math.max(0, ports.length - 1) * 7
+}
+
 function estimateNodeHeight(node: Node) {
-  const inputs = Array.isArray(node.data?.inputs) ? node.data.inputs.length : 0
-  const outputs = Array.isArray(node.data?.outputs) ? node.data.outputs.length : 0
-  return Math.max(MIN_NODE_HEIGHT, DEFAULT_HEADER_HEIGHT + Math.max(inputs, outputs, 1) * DEFAULT_ROW_HEIGHT)
+  const inputHeight = estimateColumnHeight(node.data?.inputs, 'in')
+  const outputHeight = estimateColumnHeight(node.data?.outputs, 'out')
+  return Math.max(MIN_NODE_HEIGHT, DEFAULT_HEADER_HEIGHT + Math.max(inputHeight, outputHeight) + 26)
 }

 function targetPosition(direction: LayoutDirection): Position {
@@ -42,10 +53,10 @@ export function layoutGraph(nodes: Node[], edges: Edge[], options: LayoutOptions
  graph.setDefaultEdgeLabel(() => ({}))
  graph.setGraph({
    rankdir: direction,
-    nodesep: 150,
-    ranksep: 210,
-    marginx: 80,
-    marginy: 80,
+    nodesep: 190,
+    ranksep: 260,
+    marginx: 100,
+    marginy: 100,
  })

  for (const node of nodes) {
--- a/graphfx-ui/src/style.css
+++ b/graphfx-ui/src/style.css
@@ -468,7 +468,8 @@ button.ghost.danger {
 }

 .graphfx-node {
-  min-width: 340px;
+  width: 380px;
+  min-width: 380px;
  max-width: 380px;
  overflow: visible;
  border: 1px solid rgb(157 177 255 / 24%);
@@ -601,62 +602,66 @@ button.ghost.danger {
  white-space: nowrap;
 }

-.graphfx-node__port-type {
+.graphfx-node__type-dot {
+  flex: 0 0 auto;
+  width: 0.55rem;
+  height: 0.55rem;
  border-radius: 999px;
-  padding: 0.08rem 0.34rem;
-  background: color-mix(in srgb, var(--io-color) 88%, white 12%);
-  color: #06101f;
-  font-size: 0.56rem;
-  font-weight: 950;
-  text-transform: uppercase;
+  background: var(--io-color);
+  box-shadow: 0 0 0 2px rgb(0 0 0 / 32%), 0 0 12px color-mix(in srgb, var(--io-color) 55%, transparent);
+}
+
+.graphfx-node__label-slot {
+  position: relative;
+  min-width: 0;
+  flex: 1 1 auto;
+  height: 1.26rem;
+}
+
+.graphfx-node__port--output .graphfx-node__label-slot {
+  flex: 0 1 8rem;
 }

 .graphfx-node__label-chip {
-  min-width: 0;
+  position: absolute;
+  inset: 0;
  overflow: hidden;
  border-radius: 999px;
-  padding: 0.08rem 0.36rem;
+  padding: 0.12rem 0.42rem;
  background: color-mix(in srgb, var(--io-color) 22%, transparent);
  color: color-mix(in srgb, var(--io-color) 72%, white 28%);
  font-size: 0.58rem;
  font-weight: 900;
+  line-height: 1rem;
  text-overflow: ellipsis;
  white-space: nowrap;
 }

-.graphfx-node__label-editor {
+.graphfx-node__label-inline {
+  position: absolute;
+  inset: 0;
+  z-index: 2;
  display: none;
-  justify-self: start;
-  max-width: 100%;
+  width: 100%;
+  min-width: 3.4rem;
+  border: 1px solid color-mix(in srgb, var(--io-color) 42%, transparent);
+  border-radius: 999px;
+  padding: 0.1rem 0.42rem;
+  background: rgb(4 9 18 / 94%);
+  color: color-mix(in srgb, var(--io-color) 78%, white 22%);
+  font-size: 0.58rem;
+  font-weight: 850;
+  line-height: 1rem;
 }

-.graphfx-node__port:hover .graphfx-node__label-editor,
-.graphfx-node__label-editor[open],
-.graphfx-node__label-editor:focus-within {
+.graphfx-node__port:hover .graphfx-node__label-inline,
+.graphfx-node__label-inline:focus {
  display: block;
 }

-.graphfx-node__port--output .graphfx-node__label-editor {
-  justify-self: end;
-}
-
-.graphfx-node__label-editor summary {
-  width: fit-content;
-  border-radius: 999px;
-  padding: 0.12rem 0.38rem;
-  background: rgb(255 255 255 / 6%);
-  color: #7f93b7;
-  cursor: pointer;
-  font-size: 0.58rem;
-  font-weight: 850;
-  list-style: none;
-}
-
-.graphfx-node__label-editor summary::-webkit-details-marker { display: none; }
-
-.graphfx-node__label-editor[open] summary {
-  margin-bottom: 0.25rem;
-  color: #dce7ff;
+.graphfx-node__port:hover .graphfx-node__label-chip:has(+ .graphfx-node__label-inline),
+.graphfx-node__label-inline:focus + .graphfx-node__label-chip {
+  opacity: 0;
 }

 .graphfx-node__image-preview {
@@ -725,17 +730,19 @@ button.ghost.danger {
 }

 .vue-flow__handle.graphfx-node__handle {
-  width: 56px !important;
-  height: 56px !important;
+  top: 50% !important;
+  width: 48px !important;
+  height: 48px !important;
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
+  transform: translateY(-50%) !important;
 }

 .graphfx-node__handle::after {
  content: '';
  position: absolute;
-  inset: 21px;
+  inset: 17px;
  border: 2px solid #0a1020;
  border-radius: 999px;
  background: #111827;
@@ -744,12 +751,12 @@ button.ghost.danger {

 .graphfx-node__handle:hover::after,
 .graphfx-node__handle:focus::after {
-  inset: 17px;
+  inset: 14px;
  box-shadow: 0 0 0 3px var(--io-color), 0 0 22px color-mix(in srgb, var(--io-color) 70%, transparent);
 }

-.vue-flow__handle.graphfx-node__handle--input { left: -30px !important; }
-.vue-flow__handle.graphfx-node__handle--output { right: -30px !important; }
+.vue-flow__handle.graphfx-node__handle--input { left: -24px !important; }
+.vue-flow__handle.graphfx-node__handle--output { right: -24px !important; }
 .graphfx-node__handle--output::after { background: var(--io-color); }
 .graphfx-node__port--connected .graphfx-node__handle--input::after { background: var(--io-color); }