fix handles on N type nodes

parse_filters.py

@@ -58,13 +58,22 @@ def get_params(f):
         text=True,
         capture_output=True,
     )
+
     text = help_text.stdout
+
+    input_channels, output_channels = f["type"].split("->")
+    f["inputs"] = list(input_channels.lower().strip())
+    f["outputs"] = list(output_channels.lower().strip())
+
     try:
         text = text.split("AVOptions:")[1]
     except Exception as e:
         return f
+    
     lines = text.split("\n")
+
     params = []
+
     for l in lines:
         if not l.startswith("   "):
             continue
@@ -124,6 +133,12 @@ def get_params(f):
             if type(item["default"]) == str:
                 item["default"] = item["default"].replace("'", "").replace('"', "")
 
+            if item["name"] == "inputs" and item["default"]:
+                f["inputs"] = [f["outputs"][0]] * item["default"]
+
+            if item["name"] == "outputs" and item["default"]:
+                f["outputs"] = [f["inputs"][0]] * item["default"]
+
         else:
             item = {"value": parts[0], "desc": " ".join(parts[3:])}
             if "options" not in params[-1]:

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) {
+    if (node.nodeType === "filter") {
-      const w = 120;
+      selectedFilter.set(_nodes.length - 1);
-      const h = 50;
+    }
-      const margin = 50;
+    return _nodes;
-      let prev = null;
+  });
+}
 
-      for (let n of _nodes) {
+function autoLayout(_nodes) {
-        if (n.nodeType === "input") {
+  const isAuto = get(auto);
-          n.position = { x: 0, y: prev ? prev.position.y + h + margin : 0 };
-          prev = n;
-        }
-      }
 
-      for (let n of _nodes) {
+  if (isAuto) {
-        if (n.nodeType === "filter") {
+    const w = 120;
-          let _w = prev && prev.width ? prev.width : w;
+    const h = 50;
-          n.position = { x: prev ? prev.position.x + _w + margin : 0, y: -50 };
+    const margin = 50;
-          prev = n;
+    let prev = null;
-        }
-      }
 
-      for (let n of _nodes) {
+    for (let n of _nodes) {
-        if (n.nodeType === "output") {
+      if (n.nodeType === "input") {
-          let _w = prev && prev.width ? prev.width : w;
+        n.position = { x: 0, y: prev ? prev.position.y + h + margin : 0 };
-          n.position = { x: prev ? prev.position.x + _w + margin : 0, y: 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);
     }