fix handles on N type nodes

src/Filter.svelte

@@ -1,10 +1,12 @@
 <script>
-  import { removeNode } from "./stores.js";
+	import {copyNode, nodes, selectedFilter} from './stores.js';
 
   export let filter = {
     name: "",
     params: [],
     description: "",
+		inputs: [],
+		outputs: [],
   };
 
   let show = true;
@@ -17,6 +19,22 @@
     filter = filter;
   }
 
+	function changeHandles(e, name) {
+		if (filter.type.includes("N") && name === "inputs" || name === "outputs") {
+			const total = +e.target.value;
+			if (name === "inputs") {
+				const outtype = filter.outputs[0];
+				filter.inputs = Array(total).fill(outtype);
+			} else if (name === "outputs") {
+				const intype = filter.inputs[0];
+				filter.outputs = Array(total).fill(intype);
+			}
+			const oldNode = $nodes[$selectedFilter];
+			oldNode.data = filter;
+			copyNode(oldNode);
+		}
+	}
+
   $: url = `https://ffmpeg.org/ffmpeg-filters.html#${filter.name}`;
 </script>
 
@@ -53,8 +71,9 @@
                   min={p.min}
                   max={p.max}
                   bind:value={p.value}
+									on:change={(e) => changeHandles(e, p.name)}
                 />
-                <input bind:value={p.value} />
+                <input bind:value={p.value} on:change={(e) => changeHandles(e, p.name)} />
               {:else}
                 <input bind:value={p.value} />
               {/if}

src/stores.js

@@ -244,9 +244,6 @@ export function addNode(_data, type) {
   } 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;
@@ -254,6 +251,8 @@ export function addNode(_data, type) {
         return p;
       });
     }
+    ins = data.inputs;
+    outs = data.outputs;
   }
 
   data.nodeType = type;
@@ -271,36 +270,62 @@ export function addNode(_data, type) {
   nodes.update((_nodes) => {
     _nodes.push(node);
 
-    const isAuto = get(auto);
+		_nodes = autoLayout(_nodes);
 
-    if (isAuto) {
-      const w = 120;
-      const h = 50;
-      const margin = 50;
-      let prev = null;
+    if (node.nodeType === "filter") {
+      selectedFilter.set(_nodes.length - 1);
+    }
+    return _nodes;
+  });
+}
 
-      for (let n of _nodes) {
-        if (n.nodeType === "input") {
-          n.position = { x: 0, y: prev ? prev.position.y + h + margin : 0 };
-          prev = n;
-        }
-      }
+function autoLayout(_nodes) {
+  const isAuto = get(auto);
 
-      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;
-        }
-      }
+  if (isAuto) {
+    const w = 120;
+    const h = 50;
+    const margin = 50;
+    let prev = null;
 
-      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 };
-        }
+    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 === "output") {
+        let _w = prev && prev.width ? prev.width : w;
+        n.position = { x: prev ? prev.position.x + _w + margin : 0, y: 0 };
+      }
+    }
+  }
+  return _nodes;
+}
+
+export function copyNode(node) {
+	const oldId = node.id;
+  node = JSON.parse(JSON.stringify(node));
+	node.id = uuidv4();
+
+  nodes.update((_nodes) => {
+		_nodes.push(node);
+
+    const index = _nodes.findIndex((n) => n.id === oldId);
+    _nodes.splice(index, 1);
+
+		_nodes = autoLayout(_nodes);
+
     if (node.nodeType === "filter") {
       selectedFilter.set(_nodes.length - 1);
     }