This commit is contained in:
Sam Lavigne 2023-08-23 19:30:04 -04:00
parent d1079e47af
commit 2ab5af0235
3 changed files with 129 additions and 27 deletions

View File

@ -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";

View File

@ -3,7 +3,6 @@
import { nodes, edges } from "./stores.js";
import { Anchor, Node, Svelvet, Minimap, Controls } from "svelvet";
function onConnect(e) {
console.log(e);
const sourceAnchor = e.detail.sourceAnchor;
@ -13,22 +12,34 @@
// console.log(e);
// console.log(sourceNode.id, "->", targetNode.id)
// console.log(sourceAnchor.id, "->", targetAnchor.id)
$edges.push({id: uuidv4(), sourceAnchor: sourceAnchor.id, targetAnchor: targetAnchor.id, sourceNode: sourceNode.id, targetNode: targetNode.id})
$edges = $edges;
edges.update((eds) => {
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 targetAnchor = e.detail.targetAnchor.id;
const sourceNode = e.detail.sourceNode.id;
const targetNode = e.detail.targetNode.id;
const source = e.detail.sourceNode.id;
const target = e.detail.targetNode.id;
// console.log(sourceNode.id, "-/>", targetNode.id)
// console.log(sourceAnchor.id, "-/>", targetAnchor.id)
const index = edges.findIndex((e) => e.source);
$edges.splice(index, 1);
$edges = edges;
edges.update((eds) => {
const index = eds.findIndex(
(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;

View File

@ -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");