Add Vue Flow graph visualizer
This commit is contained in:
24
graphfx-ui/.gitignore
vendored
Normal file
24
graphfx-ui/.gitignore
vendored
Normal file
@@ -0,0 +1,24 @@
|
|||||||
|
# Logs
|
||||||
|
logs
|
||||||
|
*.log
|
||||||
|
npm-debug.log*
|
||||||
|
yarn-debug.log*
|
||||||
|
yarn-error.log*
|
||||||
|
pnpm-debug.log*
|
||||||
|
lerna-debug.log*
|
||||||
|
|
||||||
|
node_modules
|
||||||
|
dist
|
||||||
|
dist-ssr
|
||||||
|
*.local
|
||||||
|
|
||||||
|
# Editor directories and files
|
||||||
|
.vscode/*
|
||||||
|
!.vscode/extensions.json
|
||||||
|
.idea
|
||||||
|
.DS_Store
|
||||||
|
*.suo
|
||||||
|
*.ntvs*
|
||||||
|
*.njsproj
|
||||||
|
*.sln
|
||||||
|
*.sw?
|
||||||
3
graphfx-ui/.vscode/extensions.json
vendored
Normal file
3
graphfx-ui/.vscode/extensions.json
vendored
Normal file
@@ -0,0 +1,3 @@
|
|||||||
|
{
|
||||||
|
"recommendations": ["Vue.volar"]
|
||||||
|
}
|
||||||
55
graphfx-ui/README.md
Normal file
55
graphfx-ui/README.md
Normal file
@@ -0,0 +1,55 @@
|
|||||||
|
# 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.
|
||||||
13
graphfx-ui/index.html
Normal file
13
graphfx-ui/index.html
Normal file
@@ -0,0 +1,13 @@
|
|||||||
|
<!doctype html>
|
||||||
|
<html lang="en">
|
||||||
|
<head>
|
||||||
|
<meta charset="UTF-8" />
|
||||||
|
<link rel="icon" type="image/svg+xml" href="/favicon.svg" />
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||||
|
<title>graphfx-ui</title>
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<div id="app"></div>
|
||||||
|
<script type="module" src="/src/main.ts"></script>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
1523
graphfx-ui/package-lock.json
generated
Normal file
1523
graphfx-ui/package-lock.json
generated
Normal file
File diff suppressed because it is too large
Load Diff
26
graphfx-ui/package.json
Normal file
26
graphfx-ui/package.json
Normal file
@@ -0,0 +1,26 @@
|
|||||||
|
{
|
||||||
|
"name": "graphfx-ui",
|
||||||
|
"private": true,
|
||||||
|
"version": "0.0.0",
|
||||||
|
"type": "module",
|
||||||
|
"scripts": {
|
||||||
|
"dev": "vite",
|
||||||
|
"build": "vue-tsc -b && vite build",
|
||||||
|
"preview": "vite preview"
|
||||||
|
},
|
||||||
|
"dependencies": {
|
||||||
|
"@dagrejs/dagre": "^3.0.0",
|
||||||
|
"@vue-flow/background": "^1.3.2",
|
||||||
|
"@vue-flow/controls": "^1.1.3",
|
||||||
|
"@vue-flow/core": "^1.48.2",
|
||||||
|
"vue": "^3.5.34"
|
||||||
|
},
|
||||||
|
"devDependencies": {
|
||||||
|
"@types/node": "^24.12.3",
|
||||||
|
"@vitejs/plugin-vue": "^6.0.6",
|
||||||
|
"@vue/tsconfig": "^0.9.1",
|
||||||
|
"typescript": "~6.0.2",
|
||||||
|
"vite": "^8.0.12",
|
||||||
|
"vue-tsc": "^3.2.8"
|
||||||
|
}
|
||||||
|
}
|
||||||
1
graphfx-ui/public/favicon.svg
Normal file
1
graphfx-ui/public/favicon.svg
Normal file
File diff suppressed because one or more lines are too long
|
After Width: | Height: | Size: 9.3 KiB |
24
graphfx-ui/public/icons.svg
Normal file
24
graphfx-ui/public/icons.svg
Normal file
@@ -0,0 +1,24 @@
|
|||||||
|
<svg xmlns="http://www.w3.org/2000/svg">
|
||||||
|
<symbol id="bluesky-icon" viewBox="0 0 16 17">
|
||||||
|
<g clip-path="url(#bluesky-clip)"><path fill="#08060d" d="M7.75 7.735c-.693-1.348-2.58-3.86-4.334-5.097-1.68-1.187-2.32-.981-2.74-.79C.188 2.065.1 2.812.1 3.251s.241 3.602.398 4.13c.52 1.744 2.367 2.333 4.07 2.145-2.495.37-4.71 1.278-1.805 4.512 3.196 3.309 4.38-.71 4.987-2.746.608 2.036 1.307 5.91 4.93 2.746 2.72-2.746.747-4.143-1.747-4.512 1.702.189 3.55-.4 4.07-2.145.156-.528.397-3.691.397-4.13s-.088-1.186-.575-1.406c-.42-.19-1.06-.395-2.741.79-1.755 1.24-3.64 3.752-4.334 5.099"/></g>
|
||||||
|
<defs><clipPath id="bluesky-clip"><path fill="#fff" d="M.1.85h15.3v15.3H.1z"/></clipPath></defs>
|
||||||
|
</symbol>
|
||||||
|
<symbol id="discord-icon" viewBox="0 0 20 19">
|
||||||
|
<path fill="#08060d" d="M16.224 3.768a14.5 14.5 0 0 0-3.67-1.153c-.158.286-.343.67-.47.976a13.5 13.5 0 0 0-4.067 0c-.128-.306-.317-.69-.476-.976A14.4 14.4 0 0 0 3.868 3.77C1.546 7.28.916 10.703 1.231 14.077a14.7 14.7 0 0 0 4.5 2.306q.545-.748.965-1.587a9.5 9.5 0 0 1-1.518-.74q.191-.14.372-.293c2.927 1.369 6.107 1.369 8.999 0q.183.152.372.294-.723.437-1.52.74.418.838.963 1.588a14.6 14.6 0 0 0 4.504-2.308c.37-3.911-.63-7.302-2.644-10.309m-9.13 8.234c-.878 0-1.599-.82-1.599-1.82 0-.998.705-1.82 1.6-1.82.894 0 1.614.82 1.599 1.82.001 1-.705 1.82-1.6 1.82m5.91 0c-.878 0-1.599-.82-1.599-1.82 0-.998.705-1.82 1.6-1.82.893 0 1.614.82 1.599 1.82 0 1-.706 1.82-1.6 1.82"/>
|
||||||
|
</symbol>
|
||||||
|
<symbol id="documentation-icon" viewBox="0 0 21 20">
|
||||||
|
<path fill="none" stroke="#aa3bff" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.35" d="m15.5 13.333 1.533 1.322c.645.555.967.833.967 1.178s-.322.623-.967 1.179L15.5 18.333m-3.333-5-1.534 1.322c-.644.555-.966.833-.966 1.178s.322.623.966 1.179l1.534 1.321"/>
|
||||||
|
<path fill="none" stroke="#aa3bff" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.35" d="M17.167 10.836v-4.32c0-1.41 0-2.117-.224-2.68-.359-.906-1.118-1.621-2.08-1.96-.599-.21-1.349-.21-2.848-.21-2.623 0-3.935 0-4.983.369-1.684.591-3.013 1.842-3.641 3.428C3 6.449 3 7.684 3 10.154v2.122c0 2.558 0 3.838.706 4.726q.306.383.713.671c.76.536 1.79.64 3.581.66"/>
|
||||||
|
<path fill="none" stroke="#aa3bff" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.35" d="M3 10a2.78 2.78 0 0 1 2.778-2.778c.555 0 1.209.097 1.748-.047.48-.129.854-.503.982-.982.145-.54.048-1.194.048-1.749a2.78 2.78 0 0 1 2.777-2.777"/>
|
||||||
|
</symbol>
|
||||||
|
<symbol id="github-icon" viewBox="0 0 19 19">
|
||||||
|
<path fill="#08060d" fill-rule="evenodd" d="M9.356 1.85C5.05 1.85 1.57 5.356 1.57 9.694a7.84 7.84 0 0 0 5.324 7.44c.387.079.528-.168.528-.376 0-.182-.013-.805-.013-1.454-2.165.467-2.616-.935-2.616-.935-.349-.91-.864-1.143-.864-1.143-.71-.48.051-.48.051-.48.787.051 1.2.805 1.2.805.695 1.194 1.817.857 2.268.649.064-.507.27-.857.49-1.052-1.728-.182-3.545-.857-3.545-3.87 0-.857.31-1.558.8-2.104-.078-.195-.349-1 .077-2.078 0 0 .657-.208 2.14.805a7.5 7.5 0 0 1 1.946-.26c.657 0 1.328.092 1.946.26 1.483-1.013 2.14-.805 2.14-.805.426 1.078.155 1.883.078 2.078.502.546.799 1.247.799 2.104 0 3.013-1.818 3.675-3.558 3.87.284.247.528.714.528 1.454 0 1.052-.012 1.896-.012 2.156 0 .208.142.455.528.377a7.84 7.84 0 0 0 5.324-7.441c.013-4.338-3.48-7.844-7.773-7.844" clip-rule="evenodd"/>
|
||||||
|
</symbol>
|
||||||
|
<symbol id="social-icon" viewBox="0 0 20 20">
|
||||||
|
<path fill="none" stroke="#aa3bff" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.35" d="M12.5 6.667a4.167 4.167 0 1 0-8.334 0 4.167 4.167 0 0 0 8.334 0"/>
|
||||||
|
<path fill="none" stroke="#aa3bff" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.35" d="M2.5 16.667a5.833 5.833 0 0 1 8.75-5.053m3.837.474.513 1.035c.07.144.257.282.414.309l.93.155c.596.1.736.536.307.965l-.723.73a.64.64 0 0 0-.152.531l.207.903c.164.715-.213.991-.84.618l-.872-.52a.63.63 0 0 0-.577 0l-.872.52c-.624.373-1.003.094-.84-.618l.207-.903a.64.64 0 0 0-.152-.532l-.723-.729c-.426-.43-.289-.864.306-.964l.93-.156a.64.64 0 0 0 .412-.31l.513-1.034c.28-.562.735-.562 1.012 0"/>
|
||||||
|
</symbol>
|
||||||
|
<symbol id="x-icon" viewBox="0 0 19 19">
|
||||||
|
<path fill="#08060d" fill-rule="evenodd" d="M1.893 1.98c.052.072 1.245 1.769 2.653 3.77l2.892 4.114c.183.261.333.48.333.486s-.068.089-.152.183l-.522.593-.765.867-3.597 4.087c-.375.426-.734.834-.798.905a1 1 0 0 0-.118.148c0 .01.236.017.664.017h.663l.729-.83c.4-.457.796-.906.879-.999a692 692 0 0 0 1.794-2.038c.034-.037.301-.34.594-.675l.551-.624.345-.392a7 7 0 0 1 .34-.374c.006 0 .93 1.306 2.052 2.903l2.084 2.965.045.063h2.275c1.87 0 2.273-.003 2.266-.021-.008-.02-1.098-1.572-3.894-5.547-2.013-2.862-2.28-3.246-2.273-3.266.008-.019.282-.332 2.085-2.38l2-2.274 1.567-1.782c.022-.028-.016-.03-.65-.03h-.674l-.3.342a871 871 0 0 1-1.782 2.025c-.067.075-.405.458-.75.852a100 100 0 0 1-.803.91c-.148.172-.299.344-.99 1.127-.304.343-.32.358-.345.327-.015-.019-.904-1.282-1.976-2.808L6.365 1.85H1.8zm1.782.91 8.078 11.294c.772 1.08 1.413 1.973 1.425 1.984.016.017.241.02 1.05.017l1.03-.004-2.694-3.766L7.796 5.75 5.722 2.852l-1.039-.004-1.039-.004z" clip-rule="evenodd"/>
|
||||||
|
</symbol>
|
||||||
|
</svg>
|
||||||
|
After Width: | Height: | Size: 4.9 KiB |
147
graphfx-ui/src/App.vue
Normal file
147
graphfx-ui/src/App.vue
Normal file
@@ -0,0 +1,147 @@
|
|||||||
|
<script setup lang="ts">
|
||||||
|
import { computed, nextTick, ref, watch } from 'vue'
|
||||||
|
import { VueFlow, useVueFlow, type Edge, type Node } from '@vue-flow/core'
|
||||||
|
import { Background } from '@vue-flow/background'
|
||||||
|
import { Controls } from '@vue-flow/controls'
|
||||||
|
import '@vue-flow/core/dist/style.css'
|
||||||
|
import '@vue-flow/core/dist/theme-default.css'
|
||||||
|
import '@vue-flow/controls/dist/style.css'
|
||||||
|
import GraphFxNode from './components/GraphFxNode.vue'
|
||||||
|
import { countSavedPositions, graphFxToVueFlow, parseGraphFxJson, type GraphFxFlowWarning, type GraphFxSerializedGraph } from './lib/graphfxToVueFlow'
|
||||||
|
import { layoutGraph } from './lib/layout'
|
||||||
|
import { sampleGraph } from './lib/sampleGraph'
|
||||||
|
|
||||||
|
const editorText = ref(JSON.stringify(sampleGraph, null, 2))
|
||||||
|
const parseError = ref<string | null>(null)
|
||||||
|
const graph = ref<GraphFxSerializedGraph>(sampleGraph)
|
||||||
|
const nodes = ref<Node[]>([])
|
||||||
|
const edges = ref<Edge[]>([])
|
||||||
|
const warnings = ref<GraphFxFlowWarning[]>([])
|
||||||
|
const layoutDirection = ref<'LR' | 'TB'>('LR')
|
||||||
|
const preferSavedPositions = ref(false)
|
||||||
|
const { fitView } = useVueFlow()
|
||||||
|
|
||||||
|
const stats = computed(() => ({
|
||||||
|
nodes: nodes.value.length,
|
||||||
|
edges: edges.value.length,
|
||||||
|
savedPositions: countSavedPositions(graph.value),
|
||||||
|
warnings: warnings.value.length,
|
||||||
|
}))
|
||||||
|
|
||||||
|
function refreshFlow() {
|
||||||
|
try {
|
||||||
|
const parsed = parseGraphFxJson(editorText.value)
|
||||||
|
const model = graphFxToVueFlow(parsed)
|
||||||
|
graph.value = parsed
|
||||||
|
nodes.value = layoutGraph(model.nodes, model.edges, {
|
||||||
|
direction: layoutDirection.value,
|
||||||
|
useSavedPositions: preferSavedPositions.value,
|
||||||
|
})
|
||||||
|
edges.value = model.edges
|
||||||
|
warnings.value = model.warnings
|
||||||
|
parseError.value = null
|
||||||
|
nextTick(() => fitView({ padding: 0.18, duration: 250 }))
|
||||||
|
} catch (error) {
|
||||||
|
parseError.value = error instanceof Error ? error.message : String(error)
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
function loadSample() {
|
||||||
|
editorText.value = JSON.stringify(sampleGraph, null, 2)
|
||||||
|
refreshFlow()
|
||||||
|
}
|
||||||
|
|
||||||
|
function relayout() {
|
||||||
|
const model = graphFxToVueFlow(graph.value)
|
||||||
|
nodes.value = layoutGraph(model.nodes, model.edges, {
|
||||||
|
direction: layoutDirection.value,
|
||||||
|
useSavedPositions: preferSavedPositions.value,
|
||||||
|
})
|
||||||
|
edges.value = model.edges
|
||||||
|
warnings.value = model.warnings
|
||||||
|
nextTick(() => fitView({ padding: 0.18, duration: 250 }))
|
||||||
|
}
|
||||||
|
|
||||||
|
watch([layoutDirection, preferSavedPositions], relayout)
|
||||||
|
refreshFlow()
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<template>
|
||||||
|
<main class="app-shell">
|
||||||
|
<aside class="sidebar">
|
||||||
|
<div class="brand">
|
||||||
|
<div class="brand__mark">GFX</div>
|
||||||
|
<div>
|
||||||
|
<p>graphfx-ui</p>
|
||||||
|
<h1>GraphFX Pipeline Viewer</h1>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<p class="sidebar__intro">
|
||||||
|
Paste the JSON returned by <code>graph.serialize()</code>. If nodes do not have <code>x/y</code>, the UI lays them out automatically.
|
||||||
|
</p>
|
||||||
|
|
||||||
|
<div class="toolbar">
|
||||||
|
<button type="button" @click="refreshFlow">Render JSON</button>
|
||||||
|
<button type="button" class="secondary" @click="loadSample">Load sample</button>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="options">
|
||||||
|
<label>
|
||||||
|
Layout
|
||||||
|
<select v-model="layoutDirection">
|
||||||
|
<option value="LR">Left → right</option>
|
||||||
|
<option value="TB">Top → bottom</option>
|
||||||
|
</select>
|
||||||
|
</label>
|
||||||
|
<label class="checkbox-row">
|
||||||
|
<input v-model="preferSavedPositions" type="checkbox" />
|
||||||
|
Prefer saved x/y when every node has coordinates
|
||||||
|
</label>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<dl class="stats">
|
||||||
|
<div><dt>Nodes</dt><dd>{{ stats.nodes }}</dd></div>
|
||||||
|
<div><dt>Edges</dt><dd>{{ stats.edges }}</dd></div>
|
||||||
|
<div><dt>Saved positions</dt><dd>{{ stats.savedPositions }}</dd></div>
|
||||||
|
<div><dt>Warnings</dt><dd>{{ stats.warnings }}</dd></div>
|
||||||
|
</dl>
|
||||||
|
|
||||||
|
<p v-if="parseError" class="error">{{ parseError }}</p>
|
||||||
|
|
||||||
|
<div v-if="warnings.length" class="warnings">
|
||||||
|
<p>Diagnostics</p>
|
||||||
|
<ul>
|
||||||
|
<li v-for="warning in warnings" :key="`${warning.type}-${warning.nodeId}-${warning.ioName}-${warning.outputId}`">
|
||||||
|
{{ warning.message }}
|
||||||
|
</li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<label class="json-editor">
|
||||||
|
Serialized graph
|
||||||
|
<textarea v-model="editorText" spellcheck="false" />
|
||||||
|
</label>
|
||||||
|
</aside>
|
||||||
|
|
||||||
|
<section class="flow-panel" aria-label="GraphFX graph visualization">
|
||||||
|
<VueFlow
|
||||||
|
v-model:nodes="nodes"
|
||||||
|
v-model:edges="edges"
|
||||||
|
:default-edge-options="{ type: 'smoothstep' }"
|
||||||
|
:nodes-draggable="true"
|
||||||
|
:nodes-connectable="false"
|
||||||
|
:elements-selectable="true"
|
||||||
|
:min-zoom="0.15"
|
||||||
|
:max-zoom="1.6"
|
||||||
|
fit-view-on-init
|
||||||
|
>
|
||||||
|
<template #node-graphfx="nodeProps">
|
||||||
|
<GraphFxNode v-bind="nodeProps" />
|
||||||
|
</template>
|
||||||
|
<Background pattern-color="#2f3a54" :gap="24" />
|
||||||
|
<Controls />
|
||||||
|
</VueFlow>
|
||||||
|
</section>
|
||||||
|
</main>
|
||||||
|
</template>
|
||||||
59
graphfx-ui/src/components/GraphFxNode.vue
Normal file
59
graphfx-ui/src/components/GraphFxNode.vue
Normal file
@@ -0,0 +1,59 @@
|
|||||||
|
<script setup lang="ts">
|
||||||
|
import { Handle, Position } from '@vue-flow/core'
|
||||||
|
import type { GraphFxNodeData, GraphFxPort } from '../lib/graphfxToVueFlow'
|
||||||
|
import { getInputHandleId, getOutputHandleId } from '../lib/graphfxToVueFlow'
|
||||||
|
|
||||||
|
const props = defineProps<{
|
||||||
|
data: GraphFxNodeData
|
||||||
|
}>()
|
||||||
|
|
||||||
|
function valuePreview(port: GraphFxPort) {
|
||||||
|
if (port.output) return 'connected'
|
||||||
|
if (port.value === null || port.value === undefined) return 'empty'
|
||||||
|
if (typeof port.value === 'string') return port.value.length > 28 ? `${port.value.slice(0, 28)}…` : port.value
|
||||||
|
if (typeof port.value === 'number' || typeof port.value === 'boolean') return String(port.value)
|
||||||
|
if (typeof port.value === 'object') return 'object'
|
||||||
|
return String(port.value)
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<template>
|
||||||
|
<article class="graphfx-node">
|
||||||
|
<header class="graphfx-node__header">
|
||||||
|
<p class="graphfx-node__kind">GraphFX</p>
|
||||||
|
<h3>{{ data.name }}</h3>
|
||||||
|
<small>{{ data.id }}</small>
|
||||||
|
</header>
|
||||||
|
|
||||||
|
<section class="graphfx-node__ports" :class="{ 'graphfx-node__ports--empty': !data.inputs.length && !data.outputs.length }">
|
||||||
|
<div class="graphfx-node__column">
|
||||||
|
<p class="graphfx-node__column-title">Inputs</p>
|
||||||
|
<div v-if="!data.inputs.length" class="graphfx-node__empty">none</div>
|
||||||
|
<div v-for="port in data.inputs" :key="port.name" class="graphfx-node__port graphfx-node__port--input">
|
||||||
|
<Handle
|
||||||
|
type="target"
|
||||||
|
:id="getInputHandleId(data.id, port.name)"
|
||||||
|
:position="Position.Left"
|
||||||
|
class="graphfx-node__handle graphfx-node__handle--input"
|
||||||
|
/>
|
||||||
|
<span class="graphfx-node__port-label">{{ port.label }}</span>
|
||||||
|
<span class="graphfx-node__port-value" :title="String(port.value ?? '')">{{ valuePreview(port) }}</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="graphfx-node__column graphfx-node__column--outputs">
|
||||||
|
<p class="graphfx-node__column-title">Outputs</p>
|
||||||
|
<div v-if="!data.outputs.length" class="graphfx-node__empty">none</div>
|
||||||
|
<div v-for="port in data.outputs" :key="port.name" class="graphfx-node__port graphfx-node__port--output">
|
||||||
|
<span class="graphfx-node__port-label">{{ port.label }}</span>
|
||||||
|
<Handle
|
||||||
|
type="source"
|
||||||
|
:id="getOutputHandleId(data.id, port.name)"
|
||||||
|
:position="Position.Right"
|
||||||
|
class="graphfx-node__handle graphfx-node__handle--output"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
</article>
|
||||||
|
</template>
|
||||||
188
graphfx-ui/src/lib/graphfxToVueFlow.ts
Normal file
188
graphfx-ui/src/lib/graphfxToVueFlow.ts
Normal file
@@ -0,0 +1,188 @@
|
|||||||
|
import type { Edge, Node } from '@vue-flow/core'
|
||||||
|
|
||||||
|
export type GraphFxIoValue = {
|
||||||
|
label?: string | null
|
||||||
|
value?: unknown
|
||||||
|
output?: string | null
|
||||||
|
}
|
||||||
|
|
||||||
|
export type GraphFxSerializedNode = {
|
||||||
|
node: {
|
||||||
|
id: string
|
||||||
|
name: string
|
||||||
|
options?: {
|
||||||
|
in?: Record<string, GraphFxIoValue>
|
||||||
|
out?: Record<string, GraphFxIoValue>
|
||||||
|
[key: string]: unknown
|
||||||
|
}
|
||||||
|
[key: string]: unknown
|
||||||
|
}
|
||||||
|
x?: number
|
||||||
|
y?: number
|
||||||
|
[key: string]: unknown
|
||||||
|
}
|
||||||
|
|
||||||
|
export type GraphFxSerializedGraph = GraphFxSerializedNode[]
|
||||||
|
|
||||||
|
export type GraphFxPort = {
|
||||||
|
name: string
|
||||||
|
label: string
|
||||||
|
type?: string
|
||||||
|
output?: string | null
|
||||||
|
value?: unknown
|
||||||
|
}
|
||||||
|
|
||||||
|
export type GraphFxNodeData = {
|
||||||
|
id: string
|
||||||
|
name: string
|
||||||
|
inputs: GraphFxPort[]
|
||||||
|
outputs: GraphFxPort[]
|
||||||
|
hasSavedPosition: boolean
|
||||||
|
raw: GraphFxSerializedNode
|
||||||
|
}
|
||||||
|
|
||||||
|
export type GraphFxFlowWarning = {
|
||||||
|
type: 'missing-output' | 'duplicate-output' | 'invalid-node'
|
||||||
|
message: string
|
||||||
|
nodeId?: string
|
||||||
|
ioName?: string
|
||||||
|
outputId?: string
|
||||||
|
}
|
||||||
|
|
||||||
|
export type GraphFxFlowModel = {
|
||||||
|
nodes: Node<GraphFxNodeData>[]
|
||||||
|
edges: Edge[]
|
||||||
|
warnings: GraphFxFlowWarning[]
|
||||||
|
}
|
||||||
|
|
||||||
|
export function getInputHandleId(nodeId: string, inputName: string) {
|
||||||
|
return `${nodeId}:in:${inputName}`
|
||||||
|
}
|
||||||
|
|
||||||
|
export function getOutputHandleId(nodeId: string, outputName: string) {
|
||||||
|
return `${nodeId}:out:${outputName}`
|
||||||
|
}
|
||||||
|
|
||||||
|
function labelFor(name: string, io?: GraphFxIoValue) {
|
||||||
|
return io?.label || name
|
||||||
|
}
|
||||||
|
|
||||||
|
function toPorts(record: Record<string, GraphFxIoValue> | undefined, direction: 'in' | 'out') {
|
||||||
|
return Object.entries(record || {}).map(([name, io]) => ({
|
||||||
|
name,
|
||||||
|
label: labelFor(name, io),
|
||||||
|
output: direction === 'in' ? io?.output || null : null,
|
||||||
|
value: direction === 'in' ? io?.value : undefined,
|
||||||
|
}))
|
||||||
|
}
|
||||||
|
|
||||||
|
function savedPosition(item: GraphFxSerializedNode, index: number) {
|
||||||
|
const hasX = typeof item.x === 'number' && Number.isFinite(item.x)
|
||||||
|
const hasY = typeof item.y === 'number' && Number.isFinite(item.y)
|
||||||
|
|
||||||
|
return {
|
||||||
|
hasSavedPosition: hasX && hasY,
|
||||||
|
position: hasX && hasY ? { x: item.x as number, y: item.y as number } : { x: index * 280, y: 0 },
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
export function graphFxToVueFlow(graph: GraphFxSerializedGraph): GraphFxFlowModel {
|
||||||
|
const warnings: GraphFxFlowWarning[] = []
|
||||||
|
const outputBySerializedId = new Map<string, { nodeId: string; outputName: string }>()
|
||||||
|
const nodeIds = new Set<string>()
|
||||||
|
|
||||||
|
for (const [index, item] of graph.entries()) {
|
||||||
|
if (!item?.node?.id || !item.node.name) {
|
||||||
|
warnings.push({
|
||||||
|
type: 'invalid-node',
|
||||||
|
message: `Graph entry #${index + 1} does not look like a serialized GraphFX node.`,
|
||||||
|
})
|
||||||
|
continue
|
||||||
|
}
|
||||||
|
|
||||||
|
nodeIds.add(item.node.id)
|
||||||
|
|
||||||
|
for (const outputName of Object.keys(item.node.options?.out || {})) {
|
||||||
|
const serializedOutputId = `${item.node.id}-${outputName}`
|
||||||
|
if (outputBySerializedId.has(serializedOutputId)) {
|
||||||
|
warnings.push({
|
||||||
|
type: 'duplicate-output',
|
||||||
|
message: `Output id ${serializedOutputId} appears more than once.`,
|
||||||
|
nodeId: item.node.id,
|
||||||
|
ioName: outputName,
|
||||||
|
outputId: serializedOutputId,
|
||||||
|
})
|
||||||
|
}
|
||||||
|
outputBySerializedId.set(serializedOutputId, { nodeId: item.node.id, outputName })
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
const nodes: Node<GraphFxNodeData>[] = graph
|
||||||
|
.filter((item) => item?.node?.id && item.node.name)
|
||||||
|
.map((item, index) => {
|
||||||
|
const { hasSavedPosition, position } = savedPosition(item, index)
|
||||||
|
const inputs = toPorts(item.node.options?.in, 'in')
|
||||||
|
const outputs = toPorts(item.node.options?.out, 'out')
|
||||||
|
|
||||||
|
return {
|
||||||
|
id: item.node.id,
|
||||||
|
type: 'graphfx',
|
||||||
|
position,
|
||||||
|
data: {
|
||||||
|
id: item.node.id,
|
||||||
|
name: item.node.name,
|
||||||
|
inputs,
|
||||||
|
outputs,
|
||||||
|
hasSavedPosition,
|
||||||
|
raw: item,
|
||||||
|
},
|
||||||
|
}
|
||||||
|
})
|
||||||
|
|
||||||
|
const edges: Edge[] = []
|
||||||
|
|
||||||
|
for (const item of graph) {
|
||||||
|
if (!item?.node?.id) continue
|
||||||
|
|
||||||
|
for (const [inputName, input] of Object.entries(item.node.options?.in || {})) {
|
||||||
|
if (!input.output) continue
|
||||||
|
|
||||||
|
const source = outputBySerializedId.get(input.output)
|
||||||
|
if (!source) {
|
||||||
|
warnings.push({
|
||||||
|
type: 'missing-output',
|
||||||
|
message: `${item.node.name}.${inputName} references missing output ${input.output}.`,
|
||||||
|
nodeId: item.node.id,
|
||||||
|
ioName: inputName,
|
||||||
|
outputId: input.output,
|
||||||
|
})
|
||||||
|
continue
|
||||||
|
}
|
||||||
|
|
||||||
|
edges.push({
|
||||||
|
id: `${source.nodeId}:${source.outputName}->${item.node.id}:${inputName}`,
|
||||||
|
source: source.nodeId,
|
||||||
|
target: item.node.id,
|
||||||
|
sourceHandle: getOutputHandleId(source.nodeId, source.outputName),
|
||||||
|
targetHandle: getInputHandleId(item.node.id, inputName),
|
||||||
|
label: inputName,
|
||||||
|
type: 'smoothstep',
|
||||||
|
animated: false,
|
||||||
|
})
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
return { nodes, edges, warnings }
|
||||||
|
}
|
||||||
|
|
||||||
|
export function parseGraphFxJson(json: string): GraphFxSerializedGraph {
|
||||||
|
const parsed = JSON.parse(json)
|
||||||
|
if (!Array.isArray(parsed)) {
|
||||||
|
throw new Error('GraphFX serialized graphs are arrays returned by graph.serialize().')
|
||||||
|
}
|
||||||
|
return parsed as GraphFxSerializedGraph
|
||||||
|
}
|
||||||
|
|
||||||
|
export function countSavedPositions(graph: GraphFxSerializedGraph) {
|
||||||
|
return graph.filter((item) => typeof item.x === 'number' && typeof item.y === 'number').length
|
||||||
|
}
|
||||||
77
graphfx-ui/src/lib/layout.ts
Normal file
77
graphfx-ui/src/lib/layout.ts
Normal file
@@ -0,0 +1,77 @@
|
|||||||
|
import type { Edge, Node, Position } from '@vue-flow/core'
|
||||||
|
import dagre from '@dagrejs/dagre'
|
||||||
|
|
||||||
|
const DEFAULT_NODE_WIDTH = 280
|
||||||
|
const DEFAULT_ROW_HEIGHT = 34
|
||||||
|
const DEFAULT_HEADER_HEIGHT = 88
|
||||||
|
const MIN_NODE_HEIGHT = 150
|
||||||
|
|
||||||
|
type LayoutDirection = 'LR' | 'TB'
|
||||||
|
|
||||||
|
type LayoutOptions = {
|
||||||
|
direction?: LayoutDirection
|
||||||
|
useSavedPositions?: boolean
|
||||||
|
}
|
||||||
|
|
||||||
|
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)
|
||||||
|
}
|
||||||
|
|
||||||
|
function targetPosition(direction: LayoutDirection): Position {
|
||||||
|
return direction === 'LR' ? 'left' as Position : 'top' as Position
|
||||||
|
}
|
||||||
|
|
||||||
|
function sourcePosition(direction: LayoutDirection): Position {
|
||||||
|
return direction === 'LR' ? 'right' as Position : 'bottom' as Position
|
||||||
|
}
|
||||||
|
|
||||||
|
export function layoutGraph(nodes: Node[], edges: Edge[], options: LayoutOptions = {}) {
|
||||||
|
const direction = options.direction || 'LR'
|
||||||
|
|
||||||
|
if (options.useSavedPositions && nodes.every((node) => node.data?.hasSavedPosition)) {
|
||||||
|
return nodes.map((node) => ({
|
||||||
|
...node,
|
||||||
|
targetPosition: targetPosition(direction),
|
||||||
|
sourcePosition: sourcePosition(direction),
|
||||||
|
}))
|
||||||
|
}
|
||||||
|
|
||||||
|
const graph = new dagre.graphlib.Graph()
|
||||||
|
graph.setDefaultEdgeLabel(() => ({}))
|
||||||
|
graph.setGraph({
|
||||||
|
rankdir: direction,
|
||||||
|
nodesep: 90,
|
||||||
|
ranksep: 130,
|
||||||
|
marginx: 40,
|
||||||
|
marginy: 40,
|
||||||
|
})
|
||||||
|
|
||||||
|
for (const node of nodes) {
|
||||||
|
graph.setNode(node.id, {
|
||||||
|
width: DEFAULT_NODE_WIDTH,
|
||||||
|
height: estimateNodeHeight(node),
|
||||||
|
})
|
||||||
|
}
|
||||||
|
|
||||||
|
for (const edge of edges) {
|
||||||
|
graph.setEdge(edge.source, edge.target)
|
||||||
|
}
|
||||||
|
|
||||||
|
dagre.layout(graph)
|
||||||
|
|
||||||
|
return nodes.map((node) => {
|
||||||
|
const graphNode = graph.node(node.id)
|
||||||
|
const height = estimateNodeHeight(node)
|
||||||
|
|
||||||
|
return {
|
||||||
|
...node,
|
||||||
|
targetPosition: targetPosition(direction),
|
||||||
|
sourcePosition: sourcePosition(direction),
|
||||||
|
position: graphNode
|
||||||
|
? { x: graphNode.x - DEFAULT_NODE_WIDTH / 2, y: graphNode.y - height / 2 }
|
||||||
|
: node.position,
|
||||||
|
}
|
||||||
|
})
|
||||||
|
}
|
||||||
124
graphfx-ui/src/lib/sampleGraph.ts
Normal file
124
graphfx-ui/src/lib/sampleGraph.ts
Normal file
@@ -0,0 +1,124 @@
|
|||||||
|
import type { GraphFxSerializedGraph } from './graphfxToVueFlow'
|
||||||
|
|
||||||
|
export const sampleGraph: GraphFxSerializedGraph = [
|
||||||
|
{
|
||||||
|
node: {
|
||||||
|
id: 'webcam',
|
||||||
|
name: 'Webcam',
|
||||||
|
options: {
|
||||||
|
in: {},
|
||||||
|
out: {
|
||||||
|
image: { label: 'Camera image' },
|
||||||
|
},
|
||||||
|
},
|
||||||
|
},
|
||||||
|
},
|
||||||
|
{
|
||||||
|
node: {
|
||||||
|
id: 'resize-preview',
|
||||||
|
name: 'Resize',
|
||||||
|
options: {
|
||||||
|
in: {
|
||||||
|
image: { label: 'Image', value: null, output: 'webcam-image' },
|
||||||
|
width: { label: 'Width', value: 1280, output: null },
|
||||||
|
height: { label: 'Height', value: 720, output: null },
|
||||||
|
},
|
||||||
|
out: {
|
||||||
|
image: { label: 'Preview image' },
|
||||||
|
},
|
||||||
|
},
|
||||||
|
},
|
||||||
|
},
|
||||||
|
{
|
||||||
|
node: {
|
||||||
|
id: 'face-mask',
|
||||||
|
name: 'BodySegmentation',
|
||||||
|
options: {
|
||||||
|
in: {
|
||||||
|
image: { label: 'Image', value: null, output: 'resize-preview-image' },
|
||||||
|
},
|
||||||
|
out: {
|
||||||
|
mask: { label: 'Person mask' },
|
||||||
|
},
|
||||||
|
},
|
||||||
|
},
|
||||||
|
},
|
||||||
|
{
|
||||||
|
node: {
|
||||||
|
id: 'green-screen',
|
||||||
|
name: 'GreenScreen',
|
||||||
|
options: {
|
||||||
|
in: {
|
||||||
|
image: { label: 'Image', value: null, output: 'resize-preview-image' },
|
||||||
|
mask: { label: 'Mask', value: null, output: 'face-mask-mask' },
|
||||||
|
feather: { label: 'Feather', value: 0.25, output: null },
|
||||||
|
},
|
||||||
|
out: {
|
||||||
|
image: { label: 'Cutout' },
|
||||||
|
},
|
||||||
|
},
|
||||||
|
},
|
||||||
|
},
|
||||||
|
{
|
||||||
|
node: {
|
||||||
|
id: 'qr-generator',
|
||||||
|
name: 'QRCodeGenerator',
|
||||||
|
options: {
|
||||||
|
in: {
|
||||||
|
text: { label: 'Text', value: 'https://example.com/gallery/1234', output: null },
|
||||||
|
size: { label: 'Size', value: 180, output: null },
|
||||||
|
},
|
||||||
|
out: {
|
||||||
|
image: { label: 'QR image' },
|
||||||
|
},
|
||||||
|
},
|
||||||
|
},
|
||||||
|
},
|
||||||
|
{
|
||||||
|
node: {
|
||||||
|
id: 'caption',
|
||||||
|
name: 'Text',
|
||||||
|
options: {
|
||||||
|
in: {
|
||||||
|
text: { label: 'Text', value: 'Photo Booth', output: null },
|
||||||
|
fontSize: { label: 'Font size', value: 64, output: null },
|
||||||
|
color: { label: 'Color', value: '#ffffff', output: null },
|
||||||
|
},
|
||||||
|
out: {
|
||||||
|
image: { label: 'Caption layer' },
|
||||||
|
},
|
||||||
|
},
|
||||||
|
},
|
||||||
|
},
|
||||||
|
{
|
||||||
|
node: {
|
||||||
|
id: 'compose-final',
|
||||||
|
name: 'Compose',
|
||||||
|
options: {
|
||||||
|
in: {
|
||||||
|
background: { label: 'Background', value: null, output: 'green-screen-image' },
|
||||||
|
overlay: { label: 'Overlay', value: null, output: 'caption-image' },
|
||||||
|
qr: { label: 'QR', value: null, output: 'qr-generator-image' },
|
||||||
|
},
|
||||||
|
out: {
|
||||||
|
image: { label: 'Final print' },
|
||||||
|
},
|
||||||
|
},
|
||||||
|
},
|
||||||
|
},
|
||||||
|
{
|
||||||
|
node: {
|
||||||
|
id: 'printer-api',
|
||||||
|
name: 'Api',
|
||||||
|
options: {
|
||||||
|
in: {
|
||||||
|
image: { label: 'Image', value: null, output: 'compose-final-image' },
|
||||||
|
endpoint: { label: 'Endpoint', value: '/print', output: null },
|
||||||
|
},
|
||||||
|
out: {
|
||||||
|
response: { label: 'Response' },
|
||||||
|
},
|
||||||
|
},
|
||||||
|
},
|
||||||
|
},
|
||||||
|
]
|
||||||
5
graphfx-ui/src/main.ts
Normal file
5
graphfx-ui/src/main.ts
Normal file
@@ -0,0 +1,5 @@
|
|||||||
|
import { createApp } from 'vue'
|
||||||
|
import './style.css'
|
||||||
|
import App from './App.vue'
|
||||||
|
|
||||||
|
createApp(App).mount('#app')
|
||||||
387
graphfx-ui/src/style.css
Normal file
387
graphfx-ui/src/style.css
Normal file
@@ -0,0 +1,387 @@
|
|||||||
|
:root {
|
||||||
|
color: #e8eefc;
|
||||||
|
background: #080b12;
|
||||||
|
font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
|
||||||
|
font-synthesis: none;
|
||||||
|
line-height: 1.5;
|
||||||
|
text-rendering: optimizeLegibility;
|
||||||
|
-webkit-font-smoothing: antialiased;
|
||||||
|
-moz-osx-font-smoothing: grayscale;
|
||||||
|
}
|
||||||
|
|
||||||
|
* { box-sizing: border-box; }
|
||||||
|
|
||||||
|
body {
|
||||||
|
margin: 0;
|
||||||
|
min-width: 1100px;
|
||||||
|
min-height: 100vh;
|
||||||
|
overflow: hidden;
|
||||||
|
}
|
||||||
|
|
||||||
|
button, select, textarea, input { font: inherit; }
|
||||||
|
|
||||||
|
button {
|
||||||
|
border: 0;
|
||||||
|
border-radius: 12px;
|
||||||
|
padding: 0.72rem 1rem;
|
||||||
|
background: linear-gradient(135deg, #6d7cff, #37d5ff);
|
||||||
|
color: #07101d;
|
||||||
|
font-weight: 800;
|
||||||
|
cursor: pointer;
|
||||||
|
box-shadow: 0 12px 28px rgb(55 213 255 / 20%);
|
||||||
|
}
|
||||||
|
|
||||||
|
button.secondary {
|
||||||
|
background: #172033;
|
||||||
|
color: #dce7ff;
|
||||||
|
box-shadow: inset 0 0 0 1px rgb(255 255 255 / 9%);
|
||||||
|
}
|
||||||
|
|
||||||
|
button:hover { transform: translateY(-1px); }
|
||||||
|
|
||||||
|
code {
|
||||||
|
color: #98f5ff;
|
||||||
|
background: rgb(152 245 255 / 10%);
|
||||||
|
border-radius: 6px;
|
||||||
|
padding: 0.1rem 0.28rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
#app { height: 100vh; }
|
||||||
|
|
||||||
|
.app-shell {
|
||||||
|
display: grid;
|
||||||
|
grid-template-columns: 430px 1fr;
|
||||||
|
height: 100vh;
|
||||||
|
background:
|
||||||
|
radial-gradient(circle at 15% 10%, rgb(84 101 255 / 18%), transparent 32rem),
|
||||||
|
radial-gradient(circle at 88% 18%, rgb(55 213 255 / 14%), transparent 28rem),
|
||||||
|
#080b12;
|
||||||
|
}
|
||||||
|
|
||||||
|
.sidebar {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
gap: 1rem;
|
||||||
|
padding: 1.25rem;
|
||||||
|
border-right: 1px solid rgb(255 255 255 / 8%);
|
||||||
|
background: rgb(10 14 24 / 92%);
|
||||||
|
box-shadow: 18px 0 44px rgb(0 0 0 / 28%);
|
||||||
|
overflow: auto;
|
||||||
|
}
|
||||||
|
|
||||||
|
.brand {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
gap: 0.9rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.brand__mark {
|
||||||
|
display: grid;
|
||||||
|
place-items: center;
|
||||||
|
width: 3.4rem;
|
||||||
|
height: 3.4rem;
|
||||||
|
border-radius: 18px;
|
||||||
|
background: linear-gradient(135deg, #8090ff, #33e1ba);
|
||||||
|
color: #08101b;
|
||||||
|
font-weight: 950;
|
||||||
|
letter-spacing: -0.08em;
|
||||||
|
}
|
||||||
|
|
||||||
|
.brand p, .brand h1 { margin: 0; }
|
||||||
|
.brand p {
|
||||||
|
color: #8fa4c7;
|
||||||
|
font-size: 0.82rem;
|
||||||
|
font-weight: 800;
|
||||||
|
text-transform: uppercase;
|
||||||
|
letter-spacing: 0.15em;
|
||||||
|
}
|
||||||
|
.brand h1 {
|
||||||
|
font-size: 1.2rem;
|
||||||
|
line-height: 1.1;
|
||||||
|
}
|
||||||
|
|
||||||
|
.sidebar__intro {
|
||||||
|
margin: 0;
|
||||||
|
color: #9eb0cf;
|
||||||
|
font-size: 0.92rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.toolbar {
|
||||||
|
display: grid;
|
||||||
|
grid-template-columns: 1fr 1fr;
|
||||||
|
gap: 0.7rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.options {
|
||||||
|
display: grid;
|
||||||
|
gap: 0.72rem;
|
||||||
|
padding: 0.9rem;
|
||||||
|
border: 1px solid rgb(255 255 255 / 8%);
|
||||||
|
border-radius: 18px;
|
||||||
|
background: rgb(255 255 255 / 4%);
|
||||||
|
}
|
||||||
|
|
||||||
|
.options label,
|
||||||
|
.json-editor {
|
||||||
|
display: grid;
|
||||||
|
gap: 0.42rem;
|
||||||
|
color: #b8c7e4;
|
||||||
|
font-size: 0.85rem;
|
||||||
|
font-weight: 800;
|
||||||
|
}
|
||||||
|
|
||||||
|
.options select {
|
||||||
|
width: 100%;
|
||||||
|
border: 1px solid rgb(255 255 255 / 12%);
|
||||||
|
border-radius: 10px;
|
||||||
|
padding: 0.55rem 0.7rem;
|
||||||
|
color: #f5f8ff;
|
||||||
|
background: #101827;
|
||||||
|
}
|
||||||
|
|
||||||
|
.checkbox-row {
|
||||||
|
display: flex !important;
|
||||||
|
grid-template-columns: none;
|
||||||
|
align-items: center;
|
||||||
|
gap: 0.55rem;
|
||||||
|
font-weight: 650 !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
.checkbox-row input { width: 1rem; height: 1rem; }
|
||||||
|
|
||||||
|
.stats {
|
||||||
|
display: grid;
|
||||||
|
grid-template-columns: repeat(4, 1fr);
|
||||||
|
gap: 0.5rem;
|
||||||
|
margin: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.stats div {
|
||||||
|
padding: 0.68rem;
|
||||||
|
border-radius: 16px;
|
||||||
|
background: rgb(255 255 255 / 5%);
|
||||||
|
border: 1px solid rgb(255 255 255 / 7%);
|
||||||
|
}
|
||||||
|
|
||||||
|
.stats dt {
|
||||||
|
margin-bottom: 0.14rem;
|
||||||
|
color: #8fa4c7;
|
||||||
|
font-size: 0.68rem;
|
||||||
|
font-weight: 900;
|
||||||
|
text-transform: uppercase;
|
||||||
|
}
|
||||||
|
|
||||||
|
.stats dd {
|
||||||
|
margin: 0;
|
||||||
|
color: #f5f8ff;
|
||||||
|
font-size: 1.2rem;
|
||||||
|
font-weight: 900;
|
||||||
|
}
|
||||||
|
|
||||||
|
.error, .warnings {
|
||||||
|
margin: 0;
|
||||||
|
border-radius: 14px;
|
||||||
|
padding: 0.8rem;
|
||||||
|
font-size: 0.86rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.error {
|
||||||
|
color: #ffd5d5;
|
||||||
|
background: rgb(255 80 80 / 14%);
|
||||||
|
border: 1px solid rgb(255 80 80 / 22%);
|
||||||
|
}
|
||||||
|
|
||||||
|
.warnings {
|
||||||
|
color: #ffeabb;
|
||||||
|
background: rgb(255 190 80 / 12%);
|
||||||
|
border: 1px solid rgb(255 190 80 / 20%);
|
||||||
|
}
|
||||||
|
|
||||||
|
.warnings p { margin: 0 0 0.35rem; font-weight: 900; }
|
||||||
|
.warnings ul { margin: 0; padding-left: 1.1rem; }
|
||||||
|
|
||||||
|
.json-editor {
|
||||||
|
min-height: 22rem;
|
||||||
|
flex: 1;
|
||||||
|
}
|
||||||
|
|
||||||
|
.json-editor textarea {
|
||||||
|
flex: 1;
|
||||||
|
min-height: 22rem;
|
||||||
|
resize: vertical;
|
||||||
|
border: 1px solid rgb(255 255 255 / 10%);
|
||||||
|
border-radius: 18px;
|
||||||
|
padding: 0.9rem;
|
||||||
|
outline: none;
|
||||||
|
background: #050913;
|
||||||
|
color: #d8e3fb;
|
||||||
|
font-family: "SFMono-Regular", Consolas, "Liberation Mono", monospace;
|
||||||
|
font-size: 0.78rem;
|
||||||
|
line-height: 1.5;
|
||||||
|
}
|
||||||
|
|
||||||
|
.json-editor textarea:focus {
|
||||||
|
border-color: rgb(55 213 255 / 48%);
|
||||||
|
box-shadow: 0 0 0 4px rgb(55 213 255 / 10%);
|
||||||
|
}
|
||||||
|
|
||||||
|
.flow-panel {
|
||||||
|
min-width: 0;
|
||||||
|
min-height: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.vue-flow {
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
background: transparent;
|
||||||
|
}
|
||||||
|
|
||||||
|
.vue-flow__edge-path {
|
||||||
|
stroke: #7da2ff;
|
||||||
|
stroke-width: 2.5;
|
||||||
|
}
|
||||||
|
|
||||||
|
.vue-flow__edge-textbg {
|
||||||
|
fill: #101827;
|
||||||
|
stroke: rgb(255 255 255 / 12%);
|
||||||
|
}
|
||||||
|
|
||||||
|
.vue-flow__edge-text {
|
||||||
|
fill: #dce7ff;
|
||||||
|
font-weight: 800;
|
||||||
|
font-size: 11px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.vue-flow__controls {
|
||||||
|
overflow: hidden;
|
||||||
|
border: 1px solid rgb(255 255 255 / 10%);
|
||||||
|
border-radius: 14px;
|
||||||
|
box-shadow: 0 18px 36px rgb(0 0 0 / 28%);
|
||||||
|
}
|
||||||
|
|
||||||
|
.vue-flow__controls-button {
|
||||||
|
border-bottom: 1px solid rgb(255 255 255 / 8%);
|
||||||
|
background: #111a2b;
|
||||||
|
color: #dce7ff;
|
||||||
|
}
|
||||||
|
|
||||||
|
.graphfx-node {
|
||||||
|
min-width: 280px;
|
||||||
|
overflow: hidden;
|
||||||
|
border: 1px solid rgb(157 177 255 / 30%);
|
||||||
|
border-radius: 20px;
|
||||||
|
background: linear-gradient(180deg, rgb(28 39 63 / 96%), rgb(13 20 34 / 96%));
|
||||||
|
box-shadow:
|
||||||
|
0 18px 48px rgb(0 0 0 / 34%),
|
||||||
|
inset 0 1px 0 rgb(255 255 255 / 8%);
|
||||||
|
}
|
||||||
|
|
||||||
|
.graphfx-node__header {
|
||||||
|
padding: 0.9rem 1rem 0.75rem;
|
||||||
|
border-bottom: 1px solid rgb(255 255 255 / 8%);
|
||||||
|
background:
|
||||||
|
radial-gradient(circle at top right, rgb(55 213 255 / 20%), transparent 10rem),
|
||||||
|
rgb(255 255 255 / 3%);
|
||||||
|
}
|
||||||
|
|
||||||
|
.graphfx-node__kind {
|
||||||
|
margin: 0 0 0.18rem;
|
||||||
|
color: #33e1ba;
|
||||||
|
font-size: 0.68rem;
|
||||||
|
font-weight: 950;
|
||||||
|
letter-spacing: 0.16em;
|
||||||
|
text-transform: uppercase;
|
||||||
|
}
|
||||||
|
|
||||||
|
.graphfx-node h3 {
|
||||||
|
margin: 0;
|
||||||
|
color: #fff;
|
||||||
|
font-size: 1.05rem;
|
||||||
|
line-height: 1.1;
|
||||||
|
}
|
||||||
|
|
||||||
|
.graphfx-node small {
|
||||||
|
display: block;
|
||||||
|
margin-top: 0.25rem;
|
||||||
|
max-width: 240px;
|
||||||
|
overflow: hidden;
|
||||||
|
color: #8fa4c7;
|
||||||
|
font-size: 0.7rem;
|
||||||
|
text-overflow: ellipsis;
|
||||||
|
}
|
||||||
|
|
||||||
|
.graphfx-node__ports {
|
||||||
|
display: grid;
|
||||||
|
grid-template-columns: 1fr 1fr;
|
||||||
|
gap: 0.55rem;
|
||||||
|
padding: 0.75rem 0.6rem 0.85rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.graphfx-node__ports--empty { grid-template-columns: 1fr; }
|
||||||
|
|
||||||
|
.graphfx-node__column-title {
|
||||||
|
margin: 0 0 0.35rem;
|
||||||
|
padding: 0 0.4rem;
|
||||||
|
color: #7f93b6;
|
||||||
|
font-size: 0.65rem;
|
||||||
|
font-weight: 950;
|
||||||
|
text-transform: uppercase;
|
||||||
|
letter-spacing: 0.12em;
|
||||||
|
}
|
||||||
|
|
||||||
|
.graphfx-node__port {
|
||||||
|
position: relative;
|
||||||
|
display: grid;
|
||||||
|
gap: 0.08rem;
|
||||||
|
min-height: 31px;
|
||||||
|
padding: 0.38rem 0.45rem;
|
||||||
|
border-radius: 10px;
|
||||||
|
background: rgb(255 255 255 / 5%);
|
||||||
|
color: #dbe7ff;
|
||||||
|
font-size: 0.76rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.graphfx-node__port + .graphfx-node__port { margin-top: 0.25rem; }
|
||||||
|
|
||||||
|
.graphfx-node__port--input { padding-left: 0.62rem; }
|
||||||
|
.graphfx-node__port--output { padding-right: 0.62rem; text-align: right; }
|
||||||
|
|
||||||
|
.graphfx-node__port-label {
|
||||||
|
overflow: hidden;
|
||||||
|
text-overflow: ellipsis;
|
||||||
|
white-space: nowrap;
|
||||||
|
font-weight: 850;
|
||||||
|
}
|
||||||
|
|
||||||
|
.graphfx-node__port-value {
|
||||||
|
overflow: hidden;
|
||||||
|
color: #8397ba;
|
||||||
|
font-size: 0.64rem;
|
||||||
|
text-overflow: ellipsis;
|
||||||
|
white-space: nowrap;
|
||||||
|
}
|
||||||
|
|
||||||
|
.graphfx-node__empty {
|
||||||
|
padding: 0.55rem 0.45rem;
|
||||||
|
border-radius: 10px;
|
||||||
|
color: #61708a;
|
||||||
|
background: rgb(255 255 255 / 3%);
|
||||||
|
font-size: 0.75rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.graphfx-node__handle {
|
||||||
|
width: 11px;
|
||||||
|
height: 11px;
|
||||||
|
border: 2px solid #0c1322;
|
||||||
|
background: #33e1ba;
|
||||||
|
}
|
||||||
|
|
||||||
|
.graphfx-node__handle--input {
|
||||||
|
left: -6px;
|
||||||
|
background: #7da2ff;
|
||||||
|
}
|
||||||
|
|
||||||
|
.graphfx-node__handle--output {
|
||||||
|
right: -6px;
|
||||||
|
background: #33e1ba;
|
||||||
|
}
|
||||||
14
graphfx-ui/tsconfig.app.json
Normal file
14
graphfx-ui/tsconfig.app.json
Normal file
@@ -0,0 +1,14 @@
|
|||||||
|
{
|
||||||
|
"extends": "@vue/tsconfig/tsconfig.dom.json",
|
||||||
|
"compilerOptions": {
|
||||||
|
"tsBuildInfoFile": "./node_modules/.tmp/tsconfig.app.tsbuildinfo",
|
||||||
|
"types": ["vite/client"],
|
||||||
|
|
||||||
|
/* Linting */
|
||||||
|
"noUnusedLocals": true,
|
||||||
|
"noUnusedParameters": true,
|
||||||
|
"erasableSyntaxOnly": true,
|
||||||
|
"noFallthroughCasesInSwitch": true
|
||||||
|
},
|
||||||
|
"include": ["src/**/*.ts", "src/**/*.tsx", "src/**/*.vue"]
|
||||||
|
}
|
||||||
7
graphfx-ui/tsconfig.json
Normal file
7
graphfx-ui/tsconfig.json
Normal file
@@ -0,0 +1,7 @@
|
|||||||
|
{
|
||||||
|
"files": [],
|
||||||
|
"references": [
|
||||||
|
{ "path": "./tsconfig.app.json" },
|
||||||
|
{ "path": "./tsconfig.node.json" }
|
||||||
|
]
|
||||||
|
}
|
||||||
24
graphfx-ui/tsconfig.node.json
Normal file
24
graphfx-ui/tsconfig.node.json
Normal file
@@ -0,0 +1,24 @@
|
|||||||
|
{
|
||||||
|
"compilerOptions": {
|
||||||
|
"tsBuildInfoFile": "./node_modules/.tmp/tsconfig.node.tsbuildinfo",
|
||||||
|
"target": "es2023",
|
||||||
|
"lib": ["ES2023"],
|
||||||
|
"module": "esnext",
|
||||||
|
"types": ["node"],
|
||||||
|
"skipLibCheck": true,
|
||||||
|
|
||||||
|
/* Bundler mode */
|
||||||
|
"moduleResolution": "bundler",
|
||||||
|
"allowImportingTsExtensions": true,
|
||||||
|
"verbatimModuleSyntax": true,
|
||||||
|
"moduleDetection": "force",
|
||||||
|
"noEmit": true,
|
||||||
|
|
||||||
|
/* Linting */
|
||||||
|
"noUnusedLocals": true,
|
||||||
|
"noUnusedParameters": true,
|
||||||
|
"erasableSyntaxOnly": true,
|
||||||
|
"noFallthroughCasesInSwitch": true
|
||||||
|
},
|
||||||
|
"include": ["vite.config.ts"]
|
||||||
|
}
|
||||||
7
graphfx-ui/vite.config.ts
Normal file
7
graphfx-ui/vite.config.ts
Normal file
@@ -0,0 +1,7 @@
|
|||||||
|
import { defineConfig } from 'vite'
|
||||||
|
import vue from '@vitejs/plugin-vue'
|
||||||
|
|
||||||
|
// https://vite.dev/config/
|
||||||
|
export default defineConfig({
|
||||||
|
plugins: [vue()],
|
||||||
|
})
|
||||||
Reference in New Issue
Block a user