56 lines
1.2 KiB
Markdown
56 lines
1.2 KiB
Markdown
# graphfx-ui
|
|
|
|
Vue 3 visualizer for serialized GraphFX image-processing graphs.
|
|
|
|
## What it does
|
|
|
|
- Renders `graph.serialize()` output with [Vue Flow](https://vueflow.dev/).
|
|
- Builds edges from GraphFX input references (`input.output` points at `${sourceNodeId}-${outputName}`).
|
|
- Uses Dagre automatic layout when serialized nodes do not have `x/y` coordinates, which is the common case for graphs created in code.
|
|
- Can optionally preserve saved coordinates when every node has `x/y`.
|
|
- Shows inputs, outputs, constant input values, edge labels, and diagnostics for missing outputs.
|
|
|
|
## Development
|
|
|
|
```bash
|
|
cd graphfx-ui
|
|
npm install
|
|
npm run dev
|
|
```
|
|
|
|
## Production build
|
|
|
|
```bash
|
|
cd graphfx-ui
|
|
npm run build
|
|
```
|
|
|
|
## Input format
|
|
|
|
Paste the array returned by GraphFX `Graph.serialize()`:
|
|
|
|
```ts
|
|
const json = JSON.stringify(graph.serialize(), null, 2)
|
|
```
|
|
|
|
Each item should look like this:
|
|
|
|
```json
|
|
{
|
|
"node": {
|
|
"id": "resize-preview",
|
|
"name": "Resize",
|
|
"options": {
|
|
"in": {
|
|
"image": { "label": "Image", "value": null, "output": "webcam-image" }
|
|
},
|
|
"out": {
|
|
"image": { "label": "Preview image" }
|
|
}
|
|
}
|
|
}
|
|
}
|
|
```
|
|
|
|
Coordinates are optional. If omitted, `graphfx-ui` calculates a readable layout automatically.
|