From 449a7aa071853e6d22b233e5109f7c9f46aff2bb Mon Sep 17 00:00:00 2001 From: Ficik Date: Fri, 19 Jun 2026 10:37:28 +0200 Subject: [PATCH] Fix GraphFX node port layout and previews --- graphfx-ui/src/components/GraphFxNode.vue | 58 +++++++------- graphfx-ui/src/lib/graphfxToVueFlow.ts | 34 ++++++--- graphfx-ui/src/lib/layout.ts | 31 +++++--- graphfx-ui/src/style.css | 93 ++++++++++++----------- 4 files changed, 122 insertions(+), 94 deletions(-) diff --git a/graphfx-ui/src/components/GraphFxNode.vue b/graphfx-ui/src/components/GraphFxNode.vue index 6f7dccc..ddd510e 100644 --- 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) {
{{ port.name }} - {{ port.label }} - {{ port.type }} + + {{ port.label }} + + +
- +
← {{ connectedText(port) }} @@ -175,18 +185,6 @@ function connectedText(port: GraphFxPort) { @keydown.stop /> - -
- label - -
@@ -200,24 +198,22 @@ function connectedText(port: GraphFxPort) { :title="`${port.name} · ${port.type}`" >
- {{ port.type }} - {{ port.label }} + + + {{ port.label }} + + {{ port.name }}
- - -
- label - -
+ 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 + 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 | 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 | 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), } }) } diff --git a/graphfx-ui/src/lib/layout.ts b/graphfx-ui/src/lib/layout.ts index cba0e7c..6e7b389 100644 --- 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) { diff --git a/graphfx-ui/src/style.css b/graphfx-ui/src/style.css index ba0e6d9..db9fcf7 100644 --- 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); }