Load real GraphFX serialized examples

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 })
+        }
+      }
     }
   }