ok

src/App.svelte

@@ -5,7 +5,7 @@
   import Output from "./Output.svelte";
   import Filter from "./Filter.svelte";
   import FilterPicker from "./FilterPicker.svelte";
-  import Graph from "./Graph.svelte";
+  // import Graph from "./Graph.svelte";
   import GraphOld from "./GraphOld.svelte";
   import { FFmpeg } from "@ffmpeg/ffmpeg";
   import { fetchFile, toBlobURL } from "@ffmpeg/util";

src/GraphOld.svelte

@@ -1,34 +1,45 @@
 <script>
-	import { v4 as uuidv4 } from "uuid";
+  import { v4 as uuidv4 } from "uuid";
   import { nodes, edges } from "./stores.js";
   import { Anchor, Node, Svelvet, Minimap, Controls } from "svelvet";
 
-
   function onConnect(e) {
-	console.log(e);
+    console.log(e);
-		const sourceAnchor = e.detail.sourceAnchor;
+    const sourceAnchor = e.detail.sourceAnchor;
-		const targetAnchor = e.detail.targetAnchor;
+    const targetAnchor = e.detail.targetAnchor;
-		const sourceNode = e.detail.sourceNode;
+    const sourceNode = e.detail.sourceNode;
-		const targetNode = e.detail.targetNode;
+    const targetNode = e.detail.targetNode;
-		// console.log(e);
+    // console.log(e);
-		// console.log(sourceNode.id, "->", targetNode.id)
+    // console.log(sourceNode.id, "->", targetNode.id)
-		// console.log(sourceAnchor.id, "->", targetAnchor.id)
+    // console.log(sourceAnchor.id, "->", targetAnchor.id)
-		$edges.push({id: uuidv4(), sourceAnchor: sourceAnchor.id, targetAnchor: targetAnchor.id, sourceNode: sourceNode.id, targetNode: targetNode.id})
+    edges.update((eds) => {
-		$edges = $edges;
+      eds.push({
+        id: uuidv4(),
+        sourceAnchor: sourceAnchor.id,
+        targetAnchor: targetAnchor.id,
+        source: sourceNode.id,
+        target: targetNode.id,
+      });
+      return eds;
+    });
   }
 
   function onDisconnect(e) {
-		const sourceAnchor = e.detail.sourceAnchor.id;
+    const sourceAnchor = e.detail.sourceAnchor.id;
-		const targetAnchor = e.detail.targetAnchor.id;
+    const targetAnchor = e.detail.targetAnchor.id;
-		const sourceNode = e.detail.sourceNode.id;
+    const source = e.detail.sourceNode.id;
-		const targetNode = e.detail.targetNode.id;
+    const target = e.detail.targetNode.id;
 
-		// console.log(sourceNode.id, "-/>", targetNode.id)
+    // console.log(sourceNode.id, "-/>", targetNode.id)
-		// console.log(sourceAnchor.id, "-/>", targetAnchor.id)
+    // console.log(sourceAnchor.id, "-/>", targetAnchor.id)
 
-		const index = edges.findIndex((e) => e.source);
+    edges.update((eds) => {
-		$edges.splice(index, 1);
+      const index = eds.findIndex(
-		$edges = edges;
+        (e) => e.sourceAnchor === sourceAnchor && e.targetAnchor === targetAnchor
+      );
+      eds.splice(index, 1);
+      return eds;
+    });
   }
 </script>
 
@@ -41,7 +52,12 @@
   on:connection={onConnect}
 >
   {#each $nodes as n, index}
-    <Node inputs={n.data.inputs.length} outputs={n.data.outputs.length} id={n.id} bind:position={n.position}>
+    <Node
+      inputs={n.data.inputs.length}
+      outputs={n.data.outputs.length}
+      id={n.id}
+      bind:position={n.position}
+    >
       <div class="node">
         <div class="header">
           {n.data.name}
@@ -67,10 +83,6 @@
   <Controls />
 </Svelvet>
 
-<div>
-	{JSON.stringify($edges)}
-</div>
-
 <style>
   .node {
     box-sizing: border-box;

src/stores.js

@@ -31,6 +31,96 @@ export const previewCommand = derived([edges, nodes], ([$edges, $nodes]) => {
 
 	let finalCommand = [];
 
+  let filtergraph = [];
+
+	const inputs = $nodes.filter(n => n.nodeType == "input");
+	const outputs = $nodes.filter(n => n.nodeType == "output");
+
+	const inputIds = {};
+	for (let i=0; i<inputs.length; i++) {
+		const inp = inputs[i];
+		inputIds[inp.id] = i;
+	}
+
+	console.log($edges)
+	const edgeIds = {};
+	for (let i = 0; i < $edges.length; i++) {
+		const e = $edges[i];
+		edgeIds[e.id] = i + 1;
+
+		const source = $nodes.find(n => "N-" + n.id === e.source);
+		const target = $nodes.find(n => "N-" + n.id === e.target);
+
+		if (source.nodeType === "input") {
+			if (e.sourceAnchor.startsWith("A-v")) {
+				edgeIds[e.id] = inputIds[source.id] + ":v";
+			}
+			if (e.sourceAnchor.startsWith("A-a")) {
+				edgeIds[e.id] = inputIds[source.id] + ":a";
+			}
+		}
+
+		if (target.nodeType === "output") {
+			edgeIds[e.id] = "out";
+		}
+	}
+
+
+  for (let n of $nodes.filter((n) => n.nodeType == "filter")) {
+    let cmd = "";
+
+    const outs = $edges.filter((e) => e.source == "N-" + n.id);
+    const ins = $edges.filter((e) => e.target == "N-" + n.id);
+
+    if (outs.length == 0 && ins.length == 0) continue;
+
+    for (let i of ins) {
+			const eid = edgeIds[i.id];
+      cmd += `[${eid}]`
+    }
+    cmd += makeFilterArgs(n.data);
+    for (let o of outs) {
+			const eid = edgeIds[o.id];
+      cmd += `[${eid}]`
+    }
+		filtergraph.push(cmd);
+  }
+
+	finalCommand.push("ffmpeg");
+
+	for (let inp of inputs) {
+		finalCommand.push("-i");
+		finalCommand.push(inp.data.name);
+	}
+
+	finalCommand.push("-filter_complex")
+
+	finalCommand.push('"' + filtergraph.join(';') + '"');
+
+	for (let out of outputs) {
+		finalCommand.push("-map");
+		finalCommand.push('"[out]"');
+	}
+
+	for (let inp of inputs) {
+		finalCommand.push("-map");
+		finalCommand.push(inputIds[inp.id] + ":a");
+	}
+
+	for (let out of outputs) {
+		finalCommand.push(out.data.name);
+	}
+
+	const entireCommand = finalCommand.join(" ");
+	return entireCommand;
+});
+
+export const previewCommandOld2 = derived([edges, nodes], ([$edges, $nodes]) => {
+  // [0:v]f1=val,f2=val[out] -map out
+  // [0:v]f1=val,f2=val[1];[1][1:v]overlay[out] -map out`
+
+	let finalCommand = [];
+
   let filtergraph = [];
 
 	const inputs = $nodes.filter(n => n.nodeType == "input");