From 2196c17e046b6ce30620823268603946a96f0e90 Mon Sep 17 00:00:00 2001
From: Sam Lavigne <splavigne@gmail.com>
Date: Wed, 30 Aug 2023 18:01:10 -0400
Subject: [PATCH] file uploads

---
 src/App.svelte   |  73 +++++--
 src/Graph.svelte |  74 +++-----
 src/Node.svelte  |  24 +--
 src/stores.js    | 485 ++++++++++++++++++++++++-----------------------
 4 files changed, 341 insertions(+), 315 deletions(-)

diff --git a/src/App.svelte b/src/App.svelte
index 05b6e33..b155dac 100644
--- a/src/App.svelte
+++ b/src/App.svelte
@@ -1,6 +1,15 @@
 <script>
   import { onMount } from "svelte";
-  import { selectedFilter, nodes, inputs, outputs, previewCommand } from "./stores.js";
+  import {
+    selectedFilter,
+    nodes,
+    inputs,
+    outputs,
+    auto,
+    addNode,
+    inputNames,
+    previewCommand,
+  } from "./stores.js";
   import Filter from "./Filter.svelte";
   import FilterPicker from "./FilterPicker.svelte";
   import Graph from "./Graph.svelte";
@@ -9,9 +18,7 @@
 
   const isChrome = navigator.userAgent.match(/chrome|chromium|crios/i);
   const baseURL = `https://unpkg.com/@ffmpeg/core${!isChrome ? "-mt" : ""}@0.12.2/dist/esm`;
-  // const baseURL = "";
   const TIMEOUT = 40000;
-
   const ffmpeg = new FFmpeg();
 
   let videoValue = "/" + $inputs[0].name;
@@ -22,6 +29,18 @@
   let commandRef;
   let vidPlayerRef;
   let renderProgress = 0;
+  let fileinput;
+
+  function addInput() {
+    addNode({ ...$inputNames[$inputNames.length - 1] }, "input");
+  }
+
+  async function onFileSelected(e) {
+    let vid = e.target.files[0];
+    await ffmpeg.writeFile(vid.name, await fetchFile(vid));
+    $inputNames.push({ name: vid.name, url: vid.name });
+    addInput();
+  }
 
   function copyCommand() {
     commandRef.select();
@@ -38,20 +57,18 @@
     try {
       if (log.trim() != "") log += "\n\n";
 
-      for (let vid of $inputs) {
-        await ffmpeg.writeFile(vid.name, await fetchFile("/" + vid.name));
+      const fontNames = [
+        ...new Set([...$previewCommand.join(" ").matchAll(/\W([a-z]+\.ttf)/g)].map((f) => f[1])),
+      ];
+
+      for (let f of fontNames) {
+        await ffmpeg.writeFile(f, await fetchFile("/" + f));
       }
 
-			const fontNames = [...new Set([...$previewCommand.join(" ").matchAll(/\W([a-z]+\.ttf)/g)].map(f => f[1]))];
-
-			for (let f of fontNames) {
-        await ffmpeg.writeFile(f, await fetchFile("/" + f));
-			}
-
-			let clist = [...$previewCommand];
-			clist.shift() // remove "ffmpeg" from start of command
-			clist.unshift("-hide_banner", "-loglevel", "error")
-			clist = clist.map(c => c.replaceAll('"', ""));
+      let clist = [...$previewCommand];
+      clist.shift(); // remove "ffmpeg" from start of command
+      clist.unshift("-hide_banner", "-loglevel", "error");
+      clist = clist.map((c) => c.replaceAll('"', ""));
       if (outname.endsWith("mp4")) {
         clist.splice(clist.length - 1, 0, "-pix_fmt");
         clist.splice(clist.length - 1, 0, "yuv420p");
@@ -95,6 +112,9 @@
         workerURL: await toBlobURL(`${baseURL}/ffmpeg-core.worker.js`, "text/javascript"),
       });
     }
+    for (let vid of $inputNames) {
+      await ffmpeg.writeFile(vid.name, await fetchFile(vid.url));
+    }
     ffmpegLoaded = true;
   }
 
@@ -196,7 +216,23 @@
   </section>
 
   <section class="graph">
-    <Graph />
+    <div class="graph-holder">
+      <div class="nav">
+        <button on:click={addInput}>Add Sample Input</button>
+        <button on:click={() => fileinput.click()}>Upload File</button>
+        <input
+          type="file"
+          accept="video/*"
+          on:change={(e) => onFileSelected(e)}
+          bind:this={fileinput}
+          style="display: none;"
+        />
+        <label for="auto"
+          ><input id="auto" type="checkbox" bind:checked={$auto} />Automatic Layout</label
+        >
+      </div>
+      <Graph {fetchFile} ffmepg={ffmpeg} />
+    </div>
   </section>
 
   <section class="filter-editor">
@@ -383,6 +419,11 @@
   ol li {
     margin-bottom: 5px;
   }
+  .graph-holder {
+    flex-direction: column;
+    display: flex;
+    flex: 1;
+  }
 
   @media only screen and (max-width: 1400px) {
   }
diff --git a/src/Graph.svelte b/src/Graph.svelte
index 0b8ccf2..cbca98e 100644
--- a/src/Graph.svelte
+++ b/src/Graph.svelte
@@ -1,5 +1,5 @@
 <script>
-  import { addNode, nodes, edges, auto, selectedFilter } from "./stores.js";
+  import { nodes, edges, auto, selectedFilter } from "./stores.js";
   import {
     SvelteFlowProvider,
     SvelteFlow,
@@ -7,7 +7,7 @@
     Background,
     BackgroundVariant,
   } from "@xyflow/svelte";
-	import '@xyflow/svelte/dist/style.css';
+  import "@xyflow/svelte/dist/style.css";
   import Node from "./Node.svelte";
   import FitComp from "./FitComp.svelte";
   import ButtonEdge from "./ButtonEdge.svelte";
@@ -28,59 +28,41 @@
       }
     }
   }
-
-  function addInput() {
-    addNode({ name: "shoe.mp4" }, "input");
-  }
-
 </script>
 
 <SvelteFlowProvider>
-  <div class="holder">
-    <FitComp />
-    <div class="nav">
-      <button on:click={addInput}>Add Input</button>
-      <label for="auto"
-        ><input id="auto" type="checkbox" bind:checked={$auto} />Automatic Layout</label
+  <FitComp />
+  <div class="flow">
+    <div style="height: 100%; width: 100%">
+      <SvelteFlow
+        nodesDraggable={!$auto}
+        nodesConnectable={!$auto}
+        panOnDrag={!$auto}
+        edgesUpdatable={!$auto}
+        connectOnClick={true}
+        nodesFocusable={false}
+        edgesFocusable={false}
+        elementsSelectable={false}
+        nodesSelectable={!$auto}
+        zoomOnScroll={!$auto}
+        deleteKey={0}
+        multiSelectionKeyCode={null}
+        on:nodeclick={onClick}
+        {nodeTypes}
+        {edgeTypes}
+        {nodes}
+        {edges}
+        snapGrid={[10, 10]}
+        fitView
       >
-    </div>
-    <div class="flow">
-      <div style="height: 100%; width: 100%">
-        <SvelteFlow
-					nodesDraggable={!$auto}
-          nodesConnectable={!$auto}
-          panOnDrag={!$auto}
-          edgesUpdatable={!$auto}
-          connectOnClick={true}
-          nodesFocusable={false}
-          edgesFocusable={false}
-          elementsSelectable={false}
-          nodesSelectable={!$auto}
-					zoomOnScroll={!$auto}
-          deleteKey={0}
-          multiSelectionKeyCode={null}
-          on:nodeclick={onClick}
-          {nodeTypes}
-          {edgeTypes}
-          {nodes}
-          {edges}
-          snapGrid={[10, 10]}
-          fitView
-        >
-          <Controls />
-          <Background variant={BackgroundVariant.Dots} />
-        </SvelteFlow>
-      </div>
+        <Controls />
+        <Background variant={BackgroundVariant.Dots} />
+      </SvelteFlow>
     </div>
   </div>
 </SvelteFlowProvider>
 
 <style>
-  .holder {
-    flex-direction: column;
-    display: flex;
-    flex: 1;
-  }
   .flow {
     flex: 1;
     margin-top: 10px;
diff --git a/src/Node.svelte b/src/Node.svelte
index 58ba87d..afff3b8 100644
--- a/src/Node.svelte
+++ b/src/Node.svelte
@@ -5,17 +5,17 @@
   export let data = { ext: "", nodeType: "", name: "", inputs: [], outputs: [] };
   export let id;
 
-	$: isSelected = $selectedFilter && $nodes[$selectedFilter] && $nodes[$selectedFilter].id === id;
+  $: isSelected = $selectedFilter && $nodes[$selectedFilter] && $nodes[$selectedFilter].id === id;
 
   function remove() {
     removeNode(id);
   }
 
-	function resetNode() {
-		// hack to deselect node and apply changes on chrome
-		$nodes.find(n => n.id === id).selected = false;
-		$nodes = $nodes
-	}
+  function resetNode() {
+    // hack to deselect node and apply changes on chrome
+    $nodes.find((n) => n.id === id).selected = false;
+    $nodes = $nodes;
+  }
 
   function changeFile() {
     const newFile = OUTPUTNAMES.find((n) => n.name === data.name);
@@ -24,7 +24,7 @@
     data.ext = newFile.ext;
     data = data;
 
-		resetNode();
+    resetNode();
   }
 </script>
 
@@ -81,7 +81,7 @@
   }
   :global(.svelte-flow__node) {
     box-shadow: 2px 2px 0px var(--b2);
-		background-color: #fff;
+    background-color: #fff;
   }
   :global(.svelte-flow__node.selected) {
     outline: 1px solid var(--b1) !important;
@@ -94,7 +94,7 @@
     background-color: white !important;
     font-size: 10px;
     line-height: 6px;
-		text-align: center;
+    text-align: center;
   }
   :global(.handle.a) {
     /* border: 1px solid var(--b2) !important; */
@@ -102,10 +102,10 @@
   .node {
     padding: 5px;
   }
-	.selected {
+  .selected {
     outline: 2px solid var(--b1);
-		background-color: var(--b2);
-	}
+    background-color: var(--b2);
+  }
   .head {
     display: flex;
     justify-content: space-between;
diff --git a/src/stores.js b/src/stores.js
index eeb1a1b..c024990 100644
--- a/src/stores.js
+++ b/src/stores.js
@@ -7,322 +7,325 @@ export const auto = writable(true);
 export const selectedFilter = writable();
 
 export const INPUTNAMES = [
-	{name: "punch.mp4", ext: "mp4", outputs: ["v", "a"], inputs: []},
-	{name: "shoe.mp4", ext: "mp4", outputs: ["v", "a"], inputs: []}
+  { name: "punch.mp4", url: "/punch.mp4", ext: "mp4", outputs: ["v", "a"], inputs: [] },
+  { name: "shoe.mp4", url: "/shoe.mp4", ext: "mp4", outputs: ["v", "a"], inputs: [] },
 ];
 
 export const OUTPUTNAMES = [
-	{name: "out.mp4", ext: "mp4", inputs: ["v", "a"], outputs: []},
-	{name: "out.gif", ext: "gif", inputs: ["v"], outputs: []}
+  { name: "out.mp4", ext: "mp4", inputs: ["v", "a"], outputs: [] },
+  { name: "out.gif", ext: "gif", inputs: ["v"], outputs: [] },
 ];
 
-addNode({...INPUTNAMES[0]}, "input");
-addNode({...OUTPUTNAMES[0]}, "output");
+export const inputNames = writable(INPUTNAMES);
+export const outputNames = writable(OUTPUTNAMES);
+
+addNode({ ...INPUTNAMES[0] }, "input");
+addNode({ ...OUTPUTNAMES[0] }, "output");
 
 export function makeFilterArgs(f) {
-	let fCommand = f.name;
-	if (f.params && f.params.length > 0) {
-		let params = f.params
-			.map((p) => {
-				if (p.value === "" || p.value === null || p.value === p.default) return null;
-				return `${p.name}=${p.value}`;
-			})
-			.filter((p) => p !== null)
-			.join(":");
-		if (params) fCommand += "=" + params;
-	}
-	return fCommand;
+  let fCommand = f.name;
+  if (f.params && f.params.length > 0) {
+    let params = f.params
+      .map((p) => {
+        if (p.value === "" || p.value === null || p.value === p.default) return null;
+        return `${p.name}=${p.value}`;
+      })
+      .filter((p) => p !== null)
+      .join(":");
+    if (params) fCommand += "=" + params;
+  }
+  return fCommand;
 }
 
 export const previewCommand = derived([edges, nodes], ([$edges, $nodes]) => {
-	let finalCommand = [];
-	let filtergraph = [];
-	let labelIndex = 1;
-	const edgeIds = {};
-	const inputIdMap = {};
+  let finalCommand = [];
+  let filtergraph = [];
+  let labelIndex = 1;
+  const edgeIds = {};
+  const inputIdMap = {};
 
-	const inputs = $nodes.filter((n) => n.nodeType === "input");
-	const inputIds = inputs.map((n) => n.id);
-	const inputEdges = $edges.filter((e) => inputIds.includes(e.source));
-	const outputs = $nodes.filter((n) => n.nodeType === "output");
+  const inputs = $nodes.filter((n) => n.nodeType === "input");
+  const inputIds = inputs.map((n) => n.id);
+  const inputEdges = $edges.filter((e) => inputIds.includes(e.source));
+  const outputs = $nodes.filter((n) => n.nodeType === "output");
 
-	// create edge labels for each input
-	inputs.forEach((inp, i) => (inputIdMap[inp.id] = i));
+  // create edge labels for each input
+  inputs.forEach((inp, i) => (inputIdMap[inp.id] = i));
 
-	// create edge labels for each filter
-	function traverseEdges(edg, type) {
-		const outEdges = $edges.filter((e) => e.source === edg.target && e.sourceHandle.includes(type));
+  // create edge labels for each filter
+  function traverseEdges(edg, type) {
+    const outEdges = $edges.filter((e) => e.source === edg.target && e.sourceHandle.includes(type));
 
-		let label;
+    let label;
 
-		const inNode = $nodes.find((n) => n.id === edg.source);
-		const outNode = $nodes.find((n) => n.id === edg.target);
+    const inNode = $nodes.find((n) => n.id === edg.source);
+    const outNode = $nodes.find((n) => n.id === edg.target);
 
-		if (inNode && outNode) {
-			if (inNode.nodeType === "input" && outNode.nodeType === "filter") {
-				label = inputIdMap[inNode.id] + ":" + edg.sourceHandle[0];
-			} else if (inNode.nodeType === "filter" && outNode.nodeType === "filter") {
-				label = labelIndex;
-				labelIndex++;
-			} else if (inNode.nodeType === "filter" && outNode.nodeType === "output") {
-				label = "out_" + type;
-			} else if (inNode.nodeType === "input" && outNode.nodeType === "output") {
-				label = "FILTERLESS_" + inputIdMap[inNode.id] + ":" + type;
-			} else {
-				label = "UNKNOWN";
-			}
+    if (inNode && outNode) {
+      if (inNode.nodeType === "input" && outNode.nodeType === "filter") {
+        label = inputIdMap[inNode.id] + ":" + edg.sourceHandle[0];
+      } else if (inNode.nodeType === "filter" && outNode.nodeType === "filter") {
+        label = labelIndex;
+        labelIndex++;
+      } else if (inNode.nodeType === "filter" && outNode.nodeType === "output") {
+        label = "out_" + type;
+      } else if (inNode.nodeType === "input" && outNode.nodeType === "output") {
+        label = "FILTERLESS_" + inputIdMap[inNode.id] + ":" + type;
+      } else {
+        label = "UNKNOWN";
+      }
 
-			edgeIds[edg.id] = label;
-		}
+      edgeIds[edg.id] = label;
+    }
 
-		for (let e2 of outEdges) {
-			traverseEdges(e2, type);
-		}
-	}
+    for (let e2 of outEdges) {
+      traverseEdges(e2, type);
+    }
+  }
 
-	for (let inp of inputEdges) {
-		for (let t of ["v", "a"]) {
-			if (inp.sourceHandle.includes(t)) {
-				traverseEdges(inp, t);
-			}
-		}
-	}
+  for (let inp of inputEdges) {
+    for (let t of ["v", "a"]) {
+      if (inp.sourceHandle.includes(t)) {
+        traverseEdges(inp, t);
+      }
+    }
+  }
 
-	for (let n of $nodes.filter((n) => n.nodeType == "filter")) {
-		let cmd = { weight: 0, in: [], out: [], cmd: "" };
+  for (let n of $nodes.filter((n) => n.nodeType == "filter")) {
+    let cmd = { weight: 0, in: [], out: [], cmd: "" };
 
-		const outs = $edges.filter((e) => e.source == n.id);
-		const ins = $edges.filter((e) => e.target == n.id);
+    const outs = $edges.filter((e) => e.source == n.id);
+    const ins = $edges.filter((e) => e.target == n.id);
 
-		if (outs.length == 0 && ins.length == 0) continue;
+    if (outs.length == 0 && ins.length == 0) continue;
 
-		for (let i of ins) {
-			const eid = edgeIds[i.id];
-			if (typeof eid == "string" && eid.includes(":")) cmd.weight = -1000;
-			cmd.in.push(eid);
-		}
+    for (let i of ins) {
+      const eid = edgeIds[i.id];
+      if (typeof eid == "string" && eid.includes(":")) cmd.weight = -1000;
+      cmd.in.push(eid);
+    }
 
-		cmd.cmd = makeFilterArgs(n.data);
+    cmd.cmd = makeFilterArgs(n.data);
 
-		for (let o of outs) {
-			const eid = edgeIds[o.id];
-			if (typeof eid == "string" && eid.includes("out")) cmd.weight = 1000;
-			else cmd.weight = eid;
-			cmd.out.push(eid);
-		}
+    for (let o of outs) {
+      const eid = edgeIds[o.id];
+      if (typeof eid == "string" && eid.includes("out")) cmd.weight = 1000;
+      else cmd.weight = eid;
+      cmd.out.push(eid);
+    }
 
-		filtergraph.push(cmd);
-	}
+    filtergraph.push(cmd);
+  }
 
-	filtergraph.sort((a, b) => {
-		return a.weight - b.weight;
-	});
+  filtergraph.sort((a, b) => {
+    return a.weight - b.weight;
+  });
 
-	filtergraph = filtergraph.map((c) => {
-		return c.in.map((i) => `[${i}]`).join("") + c.cmd + c.out.map((i) => `[${i}]`).join("");
-	});
+  filtergraph = filtergraph.map((c) => {
+    return c.in.map((i) => `[${i}]`).join("") + c.cmd + c.out.map((i) => `[${i}]`).join("");
+  });
 
-	finalCommand.push("ffmpeg");
+  finalCommand.push("ffmpeg");
 
-	for (let inp of inputs) {
-		finalCommand.push("-i");
-		finalCommand.push(inp.data.name);
-	}
+  for (let inp of inputs) {
+    finalCommand.push("-i");
+    finalCommand.push(inp.data.name);
+  }
 
-	let hasVid = false;
-	let hasAud = false;
+  let hasVid = false;
+  let hasAud = false;
 
-	let mediaMaps = Object.values(edgeIds)
-		.map((eid) => {
-			if (String(eid).includes("FILTERLESS")) {
-				return eid.split("_")[1];
-			}
-			return null;
-		})
-		.filter((m) => m !== null);
+  let mediaMaps = Object.values(edgeIds)
+    .map((eid) => {
+      if (String(eid).includes("FILTERLESS")) {
+        return eid.split("_")[1];
+      }
+      return null;
+    })
+    .filter((m) => m !== null);
 
-	if (filtergraph.length > 0) {
-		let fg = `"${filtergraph.join(";")}"`;
+  if (filtergraph.length > 0) {
+    let fg = `"${filtergraph.join(";")}"`;
 
-		// this crazy thing replaces stuff like [1];[1] with a comma!
-		fg = fg.replaceAll(/(\[\d+\]);\1(?!\[)/g, ",");
+    // this crazy thing replaces stuff like [1];[1] with a comma!
+    fg = fg.replaceAll(/(\[\d+\]);\1(?!\[)/g, ",");
 
-		hasVid = fg.includes(":v]");
-		hasAud = fg.includes(":a]");
+    hasVid = fg.includes(":v]");
+    hasAud = fg.includes(":a]");
 
-		finalCommand.push("-filter_complex", fg);
+    finalCommand.push("-filter_complex", fg);
 
-		if (hasAud) {
-			finalCommand.push("-map", '"[out_a]"');
-		}
+    if (hasAud) {
+      finalCommand.push("-map", '"[out_a]"');
+    }
 
-		if (hasVid) {
-			finalCommand.push("-map", '"[out_v]"');
-		}
+    if (hasVid) {
+      finalCommand.push("-map", '"[out_v]"');
+    }
 
-		for (let m of mediaMaps) {
-			finalCommand.push("-map", m);
-		}
-	}
+    for (let m of mediaMaps) {
+      finalCommand.push("-map", m);
+    }
+  }
 
-	for (let out of outputs) {
-		finalCommand.push(out.data.name);
-	}
+  for (let out of outputs) {
+    finalCommand.push(out.data.name);
+  }
 
-	return finalCommand;
+  return finalCommand;
 });
 
 export const inputs = derived(nodes, ($nodes) => {
-	return $nodes.filter((n) => n.nodeType === "input").map((n) => n.data);
+  return $nodes.filter((n) => n.nodeType === "input").map((n) => n.data);
 });
 
 export const outputs = derived(nodes, ($nodes) => {
-	return $nodes.filter((n) => n.nodeType === "output").map((n) => n.data);
+  return $nodes.filter((n) => n.nodeType === "output").map((n) => n.data);
 });
 
 nodes.subscribe(($nodes) => {
-	const isAuto = get(auto);
-	if (!isAuto) return;
+  const isAuto = get(auto);
+  if (!isAuto) return;
 
-	const outputNodes = $nodes.filter((n) => n.nodeType === "output");
-	const inputNodes = $nodes.filter((n) => n.nodeType === "input");
-	const filterNodes = $nodes.filter((n) => n.nodeType === "filter");
-	const orderedNodes = [].concat(filterNodes, outputNodes).filter((n) => n != undefined);
+  const outputNodes = $nodes.filter((n) => n.nodeType === "output");
+  const inputNodes = $nodes.filter((n) => n.nodeType === "input");
+  const filterNodes = $nodes.filter((n) => n.nodeType === "filter");
+  const orderedNodes = [].concat(filterNodes, outputNodes).filter((n) => n != undefined);
 
-	const filled = [];
-	let newEdges = [];
+  const filled = [];
+  let newEdges = [];
 
-	function connectNode(n1, rest) {
-		for (let i = 0; i < n1.data.outputs.length; i++) {
-			const edgeType = n1.data.outputs[i];
-			for (let j = 0; j < rest.length; j++) {
-				let found = false;
-				const n2 = rest[j];
-				for (let k = 0; k < n2.data.inputs.length; k++) {
-					const targetEdgeType = n2.data.inputs[k];
-					if (edgeType === targetEdgeType && !filled.includes(n2.id + k)) {
-						newEdges.push({
-							id: uuidv4(),
-							type: "default",
-							source: n1.id,
-							target: n2.id,
-							sourceHandle: edgeType + "_" + i,
-							targetHandle: edgeType + "_" + k,
-						});
-						filled.push(n2.id + k);
-						found = true;
-						break;
-					}
-				}
-				if (found) break;
-			}
-		}
-		const nextNode = rest.shift();
-		if (nextNode) {
-			connectNode(nextNode, rest);
-		}
-	}
+  function connectNode(n1, rest) {
+    for (let i = 0; i < n1.data.outputs.length; i++) {
+      const edgeType = n1.data.outputs[i];
+      for (let j = 0; j < rest.length; j++) {
+        let found = false;
+        const n2 = rest[j];
+        for (let k = 0; k < n2.data.inputs.length; k++) {
+          const targetEdgeType = n2.data.inputs[k];
+          if (edgeType === targetEdgeType && !filled.includes(n2.id + k)) {
+            newEdges.push({
+              id: uuidv4(),
+              type: "default",
+              source: n1.id,
+              target: n2.id,
+              sourceHandle: edgeType + "_" + i,
+              targetHandle: edgeType + "_" + k,
+            });
+            filled.push(n2.id + k);
+            found = true;
+            break;
+          }
+        }
+        if (found) break;
+      }
+    }
+    const nextNode = rest.shift();
+    if (nextNode) {
+      connectNode(nextNode, rest);
+    }
+  }
 
-	for (let inpNode of inputNodes) {
-		connectNode(inpNode, [...orderedNodes]);
-	}
+  for (let inpNode of inputNodes) {
+    connectNode(inpNode, [...orderedNodes]);
+  }
 
-	edges.set(newEdges);
+  edges.set(newEdges);
 });
 
 export function addNode(_data, type) {
-	const data = JSON.parse(JSON.stringify(_data));
+  const data = JSON.parse(JSON.stringify(_data));
 
-	let ins = [];
-	let outs = [];
+  let ins = [];
+  let outs = [];
 
-	if (type === "input") {
-		outs = ["v", "a"];
-	} else if (type === "output") {
-		ins = ["v", "a"];
-	} else if (type === "filter") {
-		const [_ins, _outs] = data.type.split("->");
-		ins = _ins.toLowerCase().split("");
-		outs = _outs.toLowerCase().split("");
-		if (data.params) {
-			data.params = data.params.map((p) => {
-				p.value = null;
-				if (p.default != null) p.value = p.default;
-				return p;
-			});
-		}
-	}
+  if (type === "input") {
+    outs = ["v", "a"];
+  } else if (type === "output") {
+    ins = ["v", "a"];
+  } else if (type === "filter") {
+    const [_ins, _outs] = data.type.split("->");
+    ins = _ins.toLowerCase().split("");
+    outs = _outs.toLowerCase().split("");
+    if (data.params) {
+      data.params = data.params.map((p) => {
+        p.value = null;
+        if (p.default != null) p.value = p.default;
+        return p;
+      });
+    }
+  }
 
-	data.nodeType = type;
-	data.inputs = ins;
-	data.outputs = outs;
+  data.nodeType = type;
+  data.inputs = ins;
+  data.outputs = outs;
 
-	let node = {
-		id: uuidv4(),
-		type: "ffmpeg",
-		data: data,
-		nodeType: type,
-		position: { x: 0, y: 0 },
-	};
+  let node = {
+    id: uuidv4(),
+    type: "ffmpeg",
+    data: data,
+    nodeType: type,
+    position: { x: 0, y: 0 },
+  };
 
-	nodes.update((_nodes) => {
-		_nodes.push(node);
+  nodes.update((_nodes) => {
+    _nodes.push(node);
 
-		const isAuto = get(auto);
+    const isAuto = get(auto);
 
-		if (isAuto) {
-			const w = 120;
-			const h = 50;
-			const margin = 50;
-			let prev = null;
+    if (isAuto) {
+      const w = 120;
+      const h = 50;
+      const margin = 50;
+      let prev = null;
 
-			for (let n of _nodes) {
-				if (n.nodeType === "input") {
-					n.position = { x: 0, y: prev ? prev.position.y + h + margin : 0 };
-					prev = n;
-				}
-			}
+      for (let n of _nodes) {
+        if (n.nodeType === "input") {
+          n.position = { x: 0, y: prev ? prev.position.y + h + margin : 0 };
+          prev = n;
+        }
+      }
 
-			for (let n of _nodes) {
-				if (n.nodeType === "filter") {
-					let _w = prev && prev.width ? prev.width : w;
-					n.position = { x: prev ? prev.position.x + _w + margin : 0, y: -50 };
-					prev = n;
-				}
-			}
+      for (let n of _nodes) {
+        if (n.nodeType === "filter") {
+          let _w = prev && prev.width ? prev.width : w;
+          n.position = { x: prev ? prev.position.x + _w + margin : 0, y: -50 };
+          prev = n;
+        }
+      }
 
-			for (let n of _nodes) {
-				if (n.nodeType === "output") {
-					let _w = prev && prev.width ? prev.width : w;
-					n.position = { x: prev ? prev.position.x + _w + margin : 0, y: 0 };
-				}
-			}
-		}
-		if (node.nodeType === "filter") {
-			selectedFilter.set(_nodes.length - 1);
-		}
-		return _nodes;
-	});
+      for (let n of _nodes) {
+        if (n.nodeType === "output") {
+          let _w = prev && prev.width ? prev.width : w;
+          n.position = { x: prev ? prev.position.x + _w + margin : 0, y: 0 };
+        }
+      }
+    }
+    if (node.nodeType === "filter") {
+      selectedFilter.set(_nodes.length - 1);
+    }
+    return _nodes;
+  });
 }
 
 export function resetNodes() {
-	nodes.set([]);
-	addNode({ name: "punch.mp4" }, "input");
-	addNode({ name: "out.mp4" }, "output");
+  nodes.set([]);
+  addNode({ name: "punch.mp4" }, "input");
+  addNode({ name: "out.mp4" }, "output");
 }
 
 export function removeNode(id) {
-	nodes.update((_nodes) => {
-		const index = _nodes.findIndex((n) => n.id === id);
-		_nodes.splice(index, 1);
-		return _nodes;
-	});
+  nodes.update((_nodes) => {
+    const index = _nodes.findIndex((n) => n.id === id);
+    _nodes.splice(index, 1);
+    return _nodes;
+  });
 }
 
 export function removeEdge(id) {
-	edges.update((_edges) => {
-		const index = _edges.findIndex((e) => e.id === id);
-		_edges.splice(index, 1);
-		return _edges;
-	});
+  edges.update((_edges) => {
+    const index = _edges.findIndex((e) => e.id === id);
+    _edges.splice(index, 1);
+    return _edges;
+  });
 }