gemma/graphfx
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Fix GraphFX node port layout and previews

Browse Source
This commit is contained in:
Ficik
2026-06-19 10:37:28 +02:00
parent 8c58aaae2b
commit 449a7aa071
4 changed files with 122 additions and 94 deletions
Download Patch File Download Diff File Expand all files Collapse all files

58
graphfx-ui/src/components/GraphFxNode.vue
View File

@@ -13,7 +13,7 @@ function typeClass(port: GraphFxPort) {
} }
function hasCustomLabel(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) { function labelValue(port: GraphFxPort) {
@@ -121,11 +121,21 @@ function connectedText(port: GraphFxPort) {
<div class="graphfx-node__port-head"> <div class="graphfx-node__port-head">
<span class="graphfx-node__port-name">{{ port.name }}</span> <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__label-slot nodrag" @pointerdown.stop>
<span class="graphfx-node__port-type">{{ port.type }}</span> <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> </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> <div v-if="port.output" class="graphfx-node__connected-value nodrag" @pointerdown.stop>
<span :title="port.output">← {{ connectedText(port) }}</span> <span :title="port.output">← {{ connectedText(port) }}</span>
@@ -175,18 +185,6 @@ function connectedText(port: GraphFxPort) {
@keydown.stop @keydown.stop
/> />
</template> </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>
</div> </div>
@@ -200,24 +198,22 @@ function connectedText(port: GraphFxPort) {
:title="`${port.name} · ${port.type}`" :title="`${port.name} · ${port.type}`"
> >
<div class="graphfx-node__port-head graphfx-node__port-head--right"> <div class="graphfx-node__port-head graphfx-node__port-head--right">
<span class="graphfx-node__port-type">{{ port.type }}</span> <span class="graphfx-node__type-dot" :title="port.type" aria-hidden="true"></span>
<span v-if="hasCustomLabel(port)" class="graphfx-node__label-chip">{{ port.label }}</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> <span class="graphfx-node__port-name">{{ port.name }}</span>
</div> </div>
<img v-if="port.type === 'Image' && previewUrl('out', port)" class="graphfx-node__image-preview" :src="previewUrl('out', port)" :alt="`${port.name} preview`" /> <img v-if="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>
<Handle <Handle
type="source" type="source"

34
graphfx-ui/src/lib/graphfxToVueFlow.ts
View File

@@ -112,22 +112,36 @@ function labelFor(name: string, io?: GraphFxIoValue) {
return io?.label || name return io?.label || name
} }
function imagePreviewUrl(value: unknown): string | null { function imagePreviewUrl(value: unknown, depth = 0): string | null {
if (!value) return null if (!value || depth > 4) return null
if (typeof value === 'string') { if (typeof value === 'string') {
if (value.startsWith('data:image/')) return value const trimmed = value.trim()
if (/^[A-Za-z0-9+/=\r\n]+$/.test(value) && value.length > 80) return `data:image/png;base64,${value.replace(/\s+/g, '')}` 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 return null
} }
if (typeof value === 'object') { if (typeof value === 'object') {
const record = value as { src?: unknown; dataUrl?: unknown; base64?: unknown } const record = value as Record<string, unknown>
if (typeof record.src === 'string') return imagePreviewUrl(record.src) for (const key of ['src', 'dataUrl', 'dataURL', 'url', 'href', 'base64', 'data', 'image', 'value']) {
if (typeof record.dataUrl === 'string') return imagePreviewUrl(record.dataUrl) const found = imagePreviewUrl(record[key], depth + 1)
if (typeof record.base64 === 'string') return imagePreviewUrl(record.base64) if (found) return found
}
for (const nested of Object.values(record)) {
const found = imagePreviewUrl(nested, depth + 1)
if (found) return found
}
} }
return null 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') { function toPorts(nodeName: string, record: Record<string, GraphFxIoValue> | undefined, direction: 'in' | 'out') {
return Object.entries(record || {}).map(([name, io]) => { return Object.entries(record || {}).map(([name, io]) => {
const type = ioTypeFor(nodeName, direction, name, io?.type || io?.definition?.type) 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, type,
output: direction === 'in' ? io?.output || null : null, output: direction === 'in' ? io?.output || null : null,
value: direction === 'in' ? io?.value : undefined, value: direction === 'in' ? io?.value : undefined,
options: ioOptionsFor(nodeName, direction, name, io?.definition), options: normalizedOptions(nodeName, direction, name, io),
previewUrl: type === 'Image' ? imagePreviewUrl(io?.value) : null, previewUrl: imagePreviewUrl(io?.value),
} }
}) })
} }

31
graphfx-ui/src/lib/layout.ts
View File

@@ -1,9 +1,8 @@
import type { Edge, Node, Position } from '@vue-flow/core' import type { Edge, Node, Position } from '@vue-flow/core'
import dagre from '@dagrejs/dagre' import dagre from '@dagrejs/dagre'
const DEFAULT_NODE_WIDTH = 340 const DEFAULT_NODE_WIDTH = 380
const DEFAULT_ROW_HEIGHT = 44 const DEFAULT_HEADER_HEIGHT = 62
const DEFAULT_HEADER_HEIGHT = 92
const MIN_NODE_HEIGHT = 170 const MIN_NODE_HEIGHT = 170
type LayoutDirection = 'LR' | 'TB' type LayoutDirection = 'LR' | 'TB'
@@ -13,10 +12,22 @@ type LayoutOptions = {
useSavedPositions?: boolean 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) { function estimateNodeHeight(node: Node) {
const inputs = Array.isArray(node.data?.inputs) ? node.data.inputs.length : 0 const inputHeight = estimateColumnHeight(node.data?.inputs, 'in')
const outputs = Array.isArray(node.data?.outputs) ? node.data.outputs.length : 0 const outputHeight = estimateColumnHeight(node.data?.outputs, 'out')
return Math.max(MIN_NODE_HEIGHT, DEFAULT_HEADER_HEIGHT + Math.max(inputs, outputs, 1) * DEFAULT_ROW_HEIGHT) return Math.max(MIN_NODE_HEIGHT, DEFAULT_HEADER_HEIGHT + Math.max(inputHeight, outputHeight) + 26)
} }
function targetPosition(direction: LayoutDirection): Position { function targetPosition(direction: LayoutDirection): Position {
@@ -42,10 +53,10 @@ export function layoutGraph(nodes: Node[], edges: Edge[], options: LayoutOptions
graph.setDefaultEdgeLabel(() => ({})) graph.setDefaultEdgeLabel(() => ({}))
graph.setGraph({ graph.setGraph({
rankdir: direction, rankdir: direction,
nodesep: 150, nodesep: 190,
ranksep: 210, ranksep: 260,
marginx: 80, marginx: 100,
marginy: 80, marginy: 100,
}) })
for (const node of nodes) { for (const node of nodes) {

93
graphfx-ui/src/style.css
View File

@@ -468,7 +468,8 @@ button.ghost.danger {
} }
.graphfx-node { .graphfx-node {
min-width: 340px; width: 380px;
min-width: 380px;
max-width: 380px; max-width: 380px;
overflow: visible; overflow: visible;
border: 1px solid rgb(157 177 255 / 24%); border: 1px solid rgb(157 177 255 / 24%);
@@ -601,62 +602,66 @@ button.ghost.danger {
white-space: nowrap; white-space: nowrap;
} }
.graphfx-node__port-type { .graphfx-node__type-dot {
flex: 0 0 auto;
width: 0.55rem;
height: 0.55rem;
border-radius: 999px; border-radius: 999px;
padding: 0.08rem 0.34rem; background: var(--io-color);
background: color-mix(in srgb, var(--io-color) 88%, white 12%); box-shadow: 0 0 0 2px rgb(0 0 0 / 32%), 0 0 12px color-mix(in srgb, var(--io-color) 55%, transparent);
color: #06101f; }
font-size: 0.56rem;
font-weight: 950; .graphfx-node__label-slot {
text-transform: uppercase; 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 { .graphfx-node__label-chip {
min-width: 0; position: absolute;
inset: 0;
overflow: hidden; overflow: hidden;
border-radius: 999px; border-radius: 999px;
padding: 0.08rem 0.36rem; padding: 0.12rem 0.42rem;
background: color-mix(in srgb, var(--io-color) 22%, transparent); background: color-mix(in srgb, var(--io-color) 22%, transparent);
color: color-mix(in srgb, var(--io-color) 72%, white 28%); color: color-mix(in srgb, var(--io-color) 72%, white 28%);
font-size: 0.58rem; font-size: 0.58rem;
font-weight: 900; font-weight: 900;
line-height: 1rem;
text-overflow: ellipsis; text-overflow: ellipsis;
white-space: nowrap; white-space: nowrap;
} }
.graphfx-node__label-editor { .graphfx-node__label-inline {
position: absolute;
inset: 0;
z-index: 2;
display: none; display: none;
justify-self: start; width: 100%;
max-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__port:hover .graphfx-node__label-inline,
.graphfx-node__label-editor[open], .graphfx-node__label-inline:focus {
.graphfx-node__label-editor:focus-within {
display: block; display: block;
} }
.graphfx-node__port--output .graphfx-node__label-editor { .graphfx-node__port:hover .graphfx-node__label-chip:has(+ .graphfx-node__label-inline),
justify-self: end; .graphfx-node__label-inline:focus + .graphfx-node__label-chip {
} opacity: 0;
.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__image-preview { .graphfx-node__image-preview {
@@ -725,17 +730,19 @@ button.ghost.danger {
} }
.vue-flow__handle.graphfx-node__handle { .vue-flow__handle.graphfx-node__handle {
width: 56px !important; top: 50% !important;
height: 56px !important; width: 48px !important;
height: 48px !important;
border: 0 !important; border: 0 !important;
background: transparent !important; background: transparent !important;
box-shadow: none !important; box-shadow: none !important;
transform: translateY(-50%) !important;
} }
.graphfx-node__handle::after { .graphfx-node__handle::after {
content: ''; content: '';
position: absolute; position: absolute;
inset: 21px; inset: 17px;
border: 2px solid #0a1020; border: 2px solid #0a1020;
border-radius: 999px; border-radius: 999px;
background: #111827; background: #111827;
@@ -744,12 +751,12 @@ button.ghost.danger {
.graphfx-node__handle:hover::after, .graphfx-node__handle:hover::after,
.graphfx-node__handle:focus::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); 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--input { left: -24px !important; }
.vue-flow__handle.graphfx-node__handle--output { right: -30px !important; } .vue-flow__handle.graphfx-node__handle--output { right: -24px !important; }
.graphfx-node__handle--output::after { background: var(--io-color); } .graphfx-node__handle--output::after { background: var(--io-color); }
.graphfx-node__port--connected .graphfx-node__handle--input::after { background: var(--io-color); } .graphfx-node__port--connected .graphfx-node__handle--input::after { background: var(--io-color); }