From f32b46a7c50f0dc400cee5fff78926f32bad90ed Mon Sep 17 00:00:00 2001 From: Sam Lavigne Date: Fri, 25 Aug 2023 14:03:32 -0400 Subject: [PATCH] clean up and add delete edges --- src/App.svelte | 4 - src/ButtonEdge.svelte | 63 +++++++++++++++ src/Filter.svelte | 6 +- src/FilterEditor | 0 src/Graph.svelte | 32 +++++--- src/GraphOld.svelte | 138 -------------------------------- src/Input.svelte | 30 ------- src/Modal.svelte | 63 --------------- src/{nodes => }/Node.svelte | 6 +- src/Output.svelte | 11 --- src/nodes/FilterNode.svelte | 0 src/nodes/InputNode.svelte | 0 src/nodes/OutputNode.svelte | 0 src/stores.js | 155 ++---------------------------------- 14 files changed, 95 insertions(+), 413 deletions(-) create mode 100644 src/ButtonEdge.svelte delete mode 100644 src/FilterEditor delete mode 100644 src/GraphOld.svelte delete mode 100644 src/Input.svelte delete mode 100644 src/Modal.svelte rename src/{nodes => }/Node.svelte (93%) delete mode 100644 src/Output.svelte delete mode 100644 src/nodes/FilterNode.svelte delete mode 100644 src/nodes/InputNode.svelte delete mode 100644 src/nodes/OutputNode.svelte diff --git a/src/App.svelte b/src/App.svelte index 39c1067..0246059 100644 --- a/src/App.svelte +++ b/src/App.svelte @@ -2,11 +2,8 @@ import { onMount } from "svelte"; import { selectedFilter, - addNode, nodes, inputs, - output, - filters, previewCommand, } from "./stores.js"; import Filter from "./Filter.svelte"; @@ -56,7 +53,6 @@ // command.push("yuv420p"); // command.push("out.mp4"); await ffmpeg.exec(clist, TIMEOUT); - // await ffmpeg.exec(["-f", "lavfi", "-i", "color=size=1280x720:rate=25:color=red", "-t", "5", "out.mp4"]) const data = await ffmpeg.readFile("out.mp4"); rendering = false; videoValue = URL.createObjectURL(new Blob([data.buffer], { type: "video/mp4" })); diff --git a/src/ButtonEdge.svelte b/src/ButtonEdge.svelte new file mode 100644 index 0000000..8c25e63 --- /dev/null +++ b/src/ButtonEdge.svelte @@ -0,0 +1,63 @@ + + + + +
+ {#if !$auto} + + {/if} +
+ + + diff --git a/src/Filter.svelte b/src/Filter.svelte index ba940b7..9c64a64 100644 --- a/src/Filter.svelte +++ b/src/Filter.svelte @@ -1,5 +1,5 @@
-
- - -
+
+ + +
diff --git a/src/GraphOld.svelte b/src/GraphOld.svelte deleted file mode 100644 index a1f6b1a..0000000 --- a/src/GraphOld.svelte +++ /dev/null @@ -1,138 +0,0 @@ - - - - {#each $nodes as n, index} - -
-
- {n.data.name} -
- -
-
- {#each n.data.inputs as inp, index} - -
{inp}
- - {/each} -
-
- {#each n.data.outputs as out} - -
{out}
- - {/each} -
- - {/each} - - - diff --git a/src/Input.svelte b/src/Input.svelte deleted file mode 100644 index a355aa5..0000000 --- a/src/Input.svelte +++ /dev/null @@ -1,30 +0,0 @@ - - -
- - -
- - diff --git a/src/Modal.svelte b/src/Modal.svelte deleted file mode 100644 index 14248df..0000000 --- a/src/Modal.svelte +++ /dev/null @@ -1,63 +0,0 @@ - - - - (showModal = false)} - on:click|self={() => dialog.close()} -> - -
- - - - -
- - - diff --git a/src/nodes/Node.svelte b/src/Node.svelte similarity index 93% rename from src/nodes/Node.svelte rename to src/Node.svelte index 33d2afa..5042109 100644 --- a/src/nodes/Node.svelte +++ b/src/Node.svelte @@ -1,6 +1,6 @@ - - - - diff --git a/src/nodes/FilterNode.svelte b/src/nodes/FilterNode.svelte deleted file mode 100644 index e69de29..0000000 diff --git a/src/nodes/InputNode.svelte b/src/nodes/InputNode.svelte deleted file mode 100644 index e69de29..0000000 diff --git a/src/nodes/OutputNode.svelte b/src/nodes/OutputNode.svelte deleted file mode 100644 index e69de29..0000000 diff --git a/src/stores.js b/src/stores.js index be462dd..82dbad4 100644 --- a/src/stores.js +++ b/src/stores.js @@ -1,16 +1,11 @@ import { v4 as uuidv4 } from "uuid"; import { writable, derived, get } from "svelte/store"; -// export const inputs = writable([]); -// export const output = writable("out.mp4"); -// export const filters = writable([]); export const nodes = writable([]); export const edges = writable([]); export const auto = writable(true); export const selectedFilter = writable(); -const PREFIX = ""; - addNode({ name: "punch.mp4" }, "input"); addNode({ name: "out.mp4" }, "output"); @@ -29,100 +24,7 @@ function makeFilterArgs(f) { return fCommand; } -export const previewCommandSvelvet = 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"); - 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; - } - - const edgeIds = {}; - for (let i = 0; i < $edges.length; i++) { - const e = $edges[i]; - edgeIds[e.id] = i + 1; - - const source = $nodes.find((n) => PREFIX + n.id === e.source); - const target = $nodes.find((n) => PREFIX + n.id === e.target); - - if (!source || !target) continue; - - 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 == PREFIX + n.id); - const ins = $edges.filter((e) => e.target == PREFIX + 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 previewCommand = 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 hasVid = false; let hasAud = false; @@ -213,11 +115,6 @@ export const previewCommand = derived([edges, nodes], ([$edges, $nodes]) => { } } - // for (let inp of inputs) { - // finalCommand.push("-map"); - // finalCommand.push(inputIds[inp.id] + ":a"); - // } - for (let out of outputs) { finalCommand.push(out.data.name); } @@ -226,43 +123,11 @@ export const previewCommand = derived([edges, nodes], ([$edges, $nodes]) => { return entireCommand; }); -export const previewCommandOld = derived(nodes, ($nodes) => { - const cInputs = $nodes - .filter((n) => n.nodeType === "input") - .map((i) => `-i ${i.data.name}`) - .join(" "); - - const cOutput = $nodes - .filter((n) => n.nodeType === "output") - .map((i) => `${i.data.name}`) - .join(" "); - - const cFilters = $nodes - .filter((n) => n.nodeType === "filter") - .map((n) => n.data) - .map(makeFilterArgs) - .join(","); - - let out = `ffmpeg ${cInputs}`; - - if (cFilters) out += ` -filter_complex "${cFilters}"`; - - out += ` ${cOutput}`; - return out; -}); export const inputs = derived(nodes, ($nodes) => { return $nodes.filter((n) => n.nodeType === "input").map((n) => n.data); }); -export const filters = derived(nodes, ($nodes) => { - return $nodes.filter((n) => n.nodeType === "filter").map((n) => n.data); -}); - -export const output = derived(nodes, ($nodes) => { - return $nodes.filter((n) => n.nodeType === "output").map((n) => n.data); -}); - nodes.subscribe(($nodes) => { const isAuto = get(auto); if (!isAuto) return; @@ -384,8 +249,6 @@ export function addNode(data, type) { } return _nodes; }); - - } export function removeNode(id) { @@ -394,14 +257,12 @@ export function removeNode(id) { _nodes.splice(index, 1); return _nodes; }); - - edges.update((_edges) => { - for (let i = _edges.length - 1; i--; i >= 0) { - const e = _edges[i]; - if ("N-" + e.source === id || "N-" + e.target === id) { - _edges.splice(i, 1); - } - } - return _edges; - }); +} + +export function removeEdge(id) { + edges.update((_edges) => { + const index = _edges.findIndex((e) => e.id === id); + _edges.splice(index, 1); + return _edges; + }); }