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

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

@@ -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) {