Load real GraphFX serialized examples

graphfx-ui/.gitignore

@@ -22,7 +22,3 @@ dist-ssr
 *.njsproj
 *.sln
 *.sw?
-examples/*
-
-# Local graph examples
-examples/*

graphfx-ui/src/App.vue

@@ -10,6 +10,7 @@ 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'
+import apiExampleJson from '../examples/api.json?raw'
 
 const editorText = ref(JSON.stringify(sampleGraph, null, 2))
 const parseError = ref<string | null>(null)
@@ -18,7 +19,7 @@ const nodes = ref<Node[]>([])
 const edges = ref<Edge[]>([])
 const warnings = ref<GraphFxFlowWarning[]>([])
 const layoutDirection = ref<'LR' | 'TB'>('LR')
-const preferSavedPositions = ref(false)
+const preferSavedPositions = ref(true)
 const selectedSaveSlot = ref(localStorage.getItem('GRAPHFX_UI_SELECTED_SAVE_SLOT') || 'My first graph')
 const fileInput = ref<HTMLInputElement | null>(null)
 const { fitView } = useVueFlow()
@@ -53,6 +54,12 @@ function loadSample() {
   refreshFlow()
 }
 
+function loadApiExample() {
+  editorText.value = JSON.stringify(parseGraphFxJson(apiExampleJson), null, 2)
+  selectedSaveSlot.value = 'api'
+  refreshFlow()
+}
+
 function saveSlotKey(name = selectedSaveSlot.value) {
   return `GRAPHFX_UI_SAVE_${name}`
 }
@@ -129,6 +136,7 @@ refreshFlow()
       <div class="toolbar">
         <button type="button" @click="refreshFlow">Render JSON</button>
         <button type="button" class="secondary" @click="loadSample">Load sample</button>
+        <button type="button" class="secondary" @click="loadApiExample">Load api.json</button>
       </div>
 
       <div class="savebar">
@@ -150,7 +158,7 @@ refreshFlow()
         </label>
         <label class="checkbox-row">
           <input v-model="preferSavedPositions" type="checkbox" />
-          Prefer saved x/y when every node has coordinates
+          Use saved x/y when every node has coordinates
         </label>
       </div>
 

graphfx-ui/src/lib/graphfxToVueFlow.ts

@@ -66,6 +66,15 @@ export function getOutputHandleId(nodeId: string, outputName: string) {
   return `${nodeId}:out:${outputName}`
 }
 
+function serializedOutputIds(nodeId: string, outputName: string) {
+  return [
+    // GraphFX Output.id is `${outputsSet.id}-${name}` and Outputs.id is `${node.id}-out`.
+    `${nodeId}-out-${outputName}`,
+    // Keep accepting early graphfx-ui/sample shorthand.
+    `${nodeId}-${outputName}`,
+  ]
+}
+
 const ioTypeColors: Record<GraphFxIoType, string> = {
   Image: '#4dd7ff',
   Number: '#f6c85f',
@@ -117,7 +126,7 @@ export function graphFxToVueFlow(graph: GraphFxSerializedGraph): GraphFxFlowMode
     nodeIds.add(item.node.id)
 
     for (const outputName of Object.keys(item.node.options?.out || {})) {
-      const serializedOutputId = `${item.node.id}-${outputName}`
+      const [serializedOutputId, ...aliases] = serializedOutputIds(item.node.id, outputName)
       if (outputBySerializedId.has(serializedOutputId)) {
         warnings.push({
           type: 'duplicate-output',
@@ -128,6 +137,11 @@ export function graphFxToVueFlow(graph: GraphFxSerializedGraph): GraphFxFlowMode
         })
       }
       outputBySerializedId.set(serializedOutputId, { nodeId: item.node.id, outputName })
+      for (const alias of aliases) {
+        if (!outputBySerializedId.has(alias)) {
+          outputBySerializedId.set(alias, { nodeId: item.node.id, outputName })
+        }
+      }
     }
   }
 

graphfx-ui/src/style.css

@@ -108,8 +108,17 @@ code {
 
 .toolbar {
   display: grid;
-  grid-template-columns: 1fr 1fr;
-  gap: 0.7rem;
+  grid-template-columns: repeat(2, minmax(0, 1fr));
+  gap: 0.55rem;
+}
+
+.toolbar button {
+  padding-inline: 0.68rem;
+  white-space: nowrap;
+}
+
+.toolbar button:first-child {
+  grid-column: 1 / -1;
 }
 
 .savebar {