This commit is contained in:
Sam Lavigne
parent
648dadaeca
commit
66327ad1c8
|
|
@ -5,8 +5,8 @@
|
|||
import Output from "./Output.svelte";
|
||||
import Filter from "./Filter.svelte";
|
||||
import FilterPicker from "./FilterPicker.svelte";
|
||||
// import Graph from "./Graph.svelte";
|
||||
import GraphOld from "./GraphOld.svelte";
|
||||
import Graph from "./Graph.svelte";
|
||||
// import GraphOld from "./GraphOld.svelte";
|
||||
import { FFmpeg } from "@ffmpeg/ffmpeg";
|
||||
import { fetchFile, toBlobURL } from "@ffmpeg/util";
|
||||
import { dndzone } from "svelte-dnd-action";
|
||||
|
|
@ -195,13 +195,13 @@
|
|||
</div>
|
||||
</section>
|
||||
|
||||
<section class="graph">
|
||||
<GraphOld />
|
||||
</section>
|
||||
|
||||
<!-- <section class="graph"> -->
|
||||
<!-- <Graph /> -->
|
||||
<!-- <GraphOld /> -->
|
||||
<!-- </section> -->
|
||||
|
||||
<section class="graph">
|
||||
<Graph />
|
||||
</section>
|
||||
</main>
|
||||
|
||||
<style>
|
||||
|
|
|
|||
|
|
@ -7,51 +7,6 @@
|
|||
ffmpeg: Node,
|
||||
};
|
||||
|
||||
console.log($nodes);
|
||||
|
||||
// const nodes = writable([
|
||||
// {
|
||||
// id: "1",
|
||||
// type: "ffmpeg",
|
||||
// data: { label: "test.mp4", inputs: [], outputs: ["v", "a"] },
|
||||
// position: { x: 0, y: 0 },
|
||||
// },
|
||||
// {
|
||||
// id: "2",
|
||||
// type: "ffmpeg",
|
||||
// data: { label: "filter", inputs: ["v"], outputs: ["v"] },
|
||||
// position: { x: 0, y: 150 },
|
||||
// },
|
||||
// {
|
||||
// id: "3",
|
||||
// type: "ffmpeg",
|
||||
// data: { label: "output.mp4", inputs: ["v", "a"], outputs: [] },
|
||||
// position: { x: 100, y: 20 },
|
||||
// },
|
||||
// ]);
|
||||
|
||||
// same for edges
|
||||
// const edges = writable([
|
||||
// {
|
||||
// id: "1-2",
|
||||
// type: "default",
|
||||
// source: "1",
|
||||
// sourceHandle: "v_0",
|
||||
// targetHandle: "v_0",
|
||||
// target: "2",
|
||||
// label: "Edge Text",
|
||||
// },
|
||||
// {
|
||||
// id: "2-3",
|
||||
// type: "default",
|
||||
// source: "2",
|
||||
// target: "3",
|
||||
// sourceHandle: "v_0",
|
||||
// targetHandle: "v_0",
|
||||
// label: "Edge Text",
|
||||
// },
|
||||
// ]);
|
||||
|
||||
const defaultEdgeOptions = {
|
||||
deletable: true,
|
||||
};
|
||||
|
|
|
|||
324
src/stores.js
324
src/stores.js
|
|
@ -8,6 +8,8 @@ export const nodes = writable([]);
|
|||
export const edges = writable([]);
|
||||
export const auto = writable(true);
|
||||
|
||||
const PREFIX = "";
|
||||
|
||||
addNode({ name: "punch.mp4" }, "input");
|
||||
addNode({ name: "out.mp4" }, "output");
|
||||
|
||||
|
|
@ -26,136 +28,138 @@ function makeFilterArgs(f) {
|
|||
return fCommand;
|
||||
}
|
||||
|
||||
export const previewCommand = derived([edges, nodes], ([$edges, $nodes]) => {
|
||||
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 finalCommand = [];
|
||||
|
||||
let filtergraph = [];
|
||||
|
||||
const inputs = $nodes.filter(n => n.nodeType == "input");
|
||||
const outputs = $nodes.filter(n => n.nodeType == "output");
|
||||
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 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 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);
|
||||
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 || !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";
|
||||
}
|
||||
}
|
||||
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);
|
||||
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}]`
|
||||
const eid = edgeIds[i.id];
|
||||
cmd += `[${eid}]`;
|
||||
}
|
||||
cmd += makeFilterArgs(n.data);
|
||||
for (let o of outs) {
|
||||
const eid = edgeIds[o.id];
|
||||
cmd += `[${eid}]`
|
||||
const eid = edgeIds[o.id];
|
||||
cmd += `[${eid}]`;
|
||||
}
|
||||
filtergraph.push(cmd);
|
||||
filtergraph.push(cmd);
|
||||
}
|
||||
|
||||
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);
|
||||
}
|
||||
|
||||
finalCommand.push("-filter_complex")
|
||||
finalCommand.push("-filter_complex");
|
||||
|
||||
finalCommand.push('"' + filtergraph.join(';') + '"');
|
||||
finalCommand.push('"' + filtergraph.join(";") + '"');
|
||||
|
||||
for (let out of outputs) {
|
||||
finalCommand.push("-map");
|
||||
finalCommand.push('"[out]"');
|
||||
}
|
||||
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 inp of inputs) {
|
||||
finalCommand.push("-map");
|
||||
finalCommand.push(inputIds[inp.id] + ":a");
|
||||
}
|
||||
|
||||
for (let out of outputs) {
|
||||
finalCommand.push(out.data.name);
|
||||
}
|
||||
for (let out of outputs) {
|
||||
finalCommand.push(out.data.name);
|
||||
}
|
||||
|
||||
const entireCommand = finalCommand.join(" ");
|
||||
return entireCommand;
|
||||
const entireCommand = finalCommand.join(" ");
|
||||
return entireCommand;
|
||||
});
|
||||
|
||||
export const previewCommandOld2 = derived([edges, nodes], ([$edges, $nodes]) => {
|
||||
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 finalCommand = [];
|
||||
let hasVid = false;
|
||||
let hasAud = false;
|
||||
|
||||
let finalCommand = [];
|
||||
|
||||
let filtergraph = [];
|
||||
|
||||
const inputs = $nodes.filter(n => n.nodeType == "input");
|
||||
const outputs = $nodes.filter(n => n.nodeType == "output");
|
||||
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 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 edgeIds = {};
|
||||
for (let i = 0; i < $edges.length; i++) {
|
||||
const e = $edges[i];
|
||||
edgeIds[e.id] = i + 1;
|
||||
|
||||
const source = $nodes.find(n => n.id === e.source);
|
||||
const target = $nodes.find(n => n.id === e.target);
|
||||
const source = $nodes.find((n) => n.id === e.source);
|
||||
const target = $nodes.find((n) => n.id === e.target);
|
||||
|
||||
if (source.nodeType === "input") {
|
||||
if (e.sourceHandle.includes("v")) {
|
||||
edgeIds[e.id] = inputIds[source.id] + ":v";
|
||||
}
|
||||
if (e.sourceHandle.includes("a")) {
|
||||
edgeIds[e.id] = inputIds[source.id] + ":a";
|
||||
}
|
||||
}
|
||||
|
||||
if (target.nodeType === "output") {
|
||||
edgeIds[e.id] = "out";
|
||||
}
|
||||
}
|
||||
if (source.nodeType === "input") {
|
||||
if (e.sourceHandle.includes("v")) {
|
||||
edgeIds[e.id] = inputIds[source.id] + ":v";
|
||||
}
|
||||
if (e.sourceHandle.includes("a")) {
|
||||
edgeIds[e.id] = inputIds[source.id] + ":a";
|
||||
}
|
||||
}
|
||||
|
||||
if (target.nodeType === "output") {
|
||||
const outType = e.targetHandle.includes("a") ? "aud_out" : "vid_out";
|
||||
edgeIds[e.id] = outType;
|
||||
}
|
||||
}
|
||||
|
||||
for (let n of $nodes.filter((n) => n.nodeType == "filter")) {
|
||||
let cmd = "";
|
||||
|
|
@ -166,44 +170,56 @@ export const previewCommandOld2 = derived([edges, nodes], ([$edges, $nodes]) =>
|
|||
if (outs.length == 0 && ins.length == 0) continue;
|
||||
|
||||
for (let i of ins) {
|
||||
const eid = edgeIds[i.id];
|
||||
cmd += `[${eid}]`
|
||||
const eid = edgeIds[i.id];
|
||||
cmd += `[${eid}]`;
|
||||
}
|
||||
cmd += makeFilterArgs(n.data);
|
||||
for (let o of outs) {
|
||||
const eid = edgeIds[o.id];
|
||||
cmd += `[${eid}]`
|
||||
const eid = edgeIds[o.id];
|
||||
cmd += `[${eid}]`;
|
||||
}
|
||||
filtergraph.push(cmd);
|
||||
filtergraph.push(cmd);
|
||||
}
|
||||
|
||||
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);
|
||||
}
|
||||
|
||||
finalCommand.push("-filter_complex")
|
||||
if (filtergraph.length > 0) {
|
||||
const fg = '"' + filtergraph.join(";") + '"';
|
||||
hasVid = fg.includes(":v]")
|
||||
hasAud = fg.includes(":a]")
|
||||
|
||||
finalCommand.push('"' + filtergraph.join(';') + '"');
|
||||
finalCommand.push("-filter_complex");
|
||||
finalCommand.push(fg);
|
||||
|
||||
for (let out of outputs) {
|
||||
finalCommand.push("-map");
|
||||
finalCommand.push('"[out]"');
|
||||
}
|
||||
if (hasAud) {
|
||||
finalCommand.push('"[aud_out]"');
|
||||
} else {
|
||||
finalCommand.push('0:a');
|
||||
}
|
||||
|
||||
for (let inp of inputs) {
|
||||
finalCommand.push("-map");
|
||||
finalCommand.push(inputIds[inp.id] + ":a");
|
||||
}
|
||||
if (hasVid) {
|
||||
finalCommand.push("-map");
|
||||
finalCommand.push('"[vid_out]"');
|
||||
}
|
||||
}
|
||||
|
||||
for (let out of outputs) {
|
||||
finalCommand.push(out.data.name);
|
||||
}
|
||||
// for (let inp of inputs) {
|
||||
// finalCommand.push("-map");
|
||||
// finalCommand.push(inputIds[inp.id] + ":a");
|
||||
// }
|
||||
|
||||
const entireCommand = finalCommand.join(" ");
|
||||
return entireCommand;
|
||||
for (let out of outputs) {
|
||||
finalCommand.push(out.data.name);
|
||||
}
|
||||
|
||||
const entireCommand = finalCommand.join(" ");
|
||||
return entireCommand;
|
||||
});
|
||||
|
||||
export const previewCommandOld = derived(nodes, ($nodes) => {
|
||||
|
|
@ -243,6 +259,65 @@ export const output = derived(nodes, ($nodes) => {
|
|||
return $nodes.filter((n) => n.nodeType === "output").map((n) => n.data);
|
||||
});
|
||||
|
||||
nodes.subscribe(($nodes) => {
|
||||
console.log($nodes);
|
||||
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(inputNodes, filterNodes, outputNodes)
|
||||
.filter((n) => n != undefined);
|
||||
|
||||
const filled = [];
|
||||
|
||||
// find next open output for same input
|
||||
let newEdges = [];
|
||||
for (let i = 0; i < orderedNodes.length; i++) {
|
||||
const n1 = orderedNodes[i];
|
||||
for (let j = 0; j < n1.data.outputs.length; j++) {
|
||||
const edgeType = n1.data.outputs[j];
|
||||
for (let k = i + 1; k < orderedNodes.length; k++) {
|
||||
const n2 = orderedNodes[k];
|
||||
const ind = n2.data.inputs.indexOf(edgeType);
|
||||
if (ind > -1 && !filled.includes(n2.id + edgeType + ind)) {
|
||||
newEdges.push({
|
||||
id: uuidv4(),
|
||||
type: "default",
|
||||
source: n1.id,
|
||||
target: n2.id,
|
||||
sourceHandle: edgeType + "_" + j,
|
||||
targetHandle: edgeType + "_" + ind,
|
||||
});
|
||||
filled.push(n2.id + edgeType + ind);
|
||||
break;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
// for (let i = 0; i < orderedNodes.length - 1; i++) {
|
||||
// const n1 = orderedNodes[i];
|
||||
// const n2 = orderedNodes[i + 1];
|
||||
// for (let j = 0; j < n1.data.outputs.length; j++) {
|
||||
// const edgeType = n1.data.outputs[j];
|
||||
// if (n2.data.inputs.includes(edgeType)) {
|
||||
// newEdges.push({
|
||||
// id: uuidv4(),
|
||||
// type: "default",
|
||||
// source: n1.id,
|
||||
// target: n2.id,
|
||||
// sourceHandle: edgeType + "_0",
|
||||
// targetHandle: edgeType + "_0",
|
||||
// });
|
||||
// }
|
||||
// }
|
||||
// }
|
||||
console.log("new", newEdges);
|
||||
edges.set(newEdges);
|
||||
});
|
||||
|
||||
export function addNode(data, type) {
|
||||
let ins = [];
|
||||
let outs = [];
|
||||
|
|
@ -271,9 +346,7 @@ export function addNode(data, type) {
|
|||
const h = 50;
|
||||
const margin = 10;
|
||||
|
||||
const existing = get(nodes);
|
||||
const ouputNode = existing.find(n => n.nodeType === 'output');
|
||||
const inputNodes = existing.find(n => n.nodeType === "input");
|
||||
let existing = get(nodes);
|
||||
|
||||
if (type === "input") {
|
||||
const inps = existing.filter((n) => n.nodeType === "input");
|
||||
|
|
@ -288,7 +361,6 @@ export function addNode(data, type) {
|
|||
data.inputs = ins;
|
||||
data.outputs = outs;
|
||||
|
||||
|
||||
let node = {
|
||||
id: uuidv4(),
|
||||
type: "ffmpeg",
|
||||
|
|
@ -302,15 +374,7 @@ export function addNode(data, type) {
|
|||
return n;
|
||||
});
|
||||
|
||||
if (auto) {
|
||||
const prev = existing[existing.length - 2];
|
||||
if (prev) {
|
||||
// set each prev out to new node in
|
||||
// set new node out to output in
|
||||
}
|
||||
}
|
||||
|
||||
//autolayout();
|
||||
//autolayout();
|
||||
|
||||
// edges.update((_edges) => {
|
||||
// const target = existing[existing.length - 2];
|
||||
|
|
@ -333,13 +397,13 @@ export function removeNode(id) {
|
|||
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;
|
||||
});
|
||||
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;
|
||||
});
|
||||
}
|
||||
|
|
|
|||
Loading…
Reference in New Issue