file uploads
This commit is contained in:
Sam Lavigne
parent
88f4aa920f
commit
2196c17e04
|
|
@ -1,6 +1,15 @@
|
|||
<script>
|
||||
import { onMount } from "svelte";
|
||||
import { selectedFilter, nodes, inputs, outputs, previewCommand } from "./stores.js";
|
||||
import {
|
||||
selectedFilter,
|
||||
nodes,
|
||||
inputs,
|
||||
outputs,
|
||||
auto,
|
||||
addNode,
|
||||
inputNames,
|
||||
previewCommand,
|
||||
} from "./stores.js";
|
||||
import Filter from "./Filter.svelte";
|
||||
import FilterPicker from "./FilterPicker.svelte";
|
||||
import Graph from "./Graph.svelte";
|
||||
|
|
@ -9,9 +18,7 @@
|
|||
|
||||
const isChrome = navigator.userAgent.match(/chrome|chromium|crios/i);
|
||||
const baseURL = `https://unpkg.com/@ffmpeg/core${!isChrome ? "-mt" : ""}@0.12.2/dist/esm`;
|
||||
// const baseURL = "";
|
||||
const TIMEOUT = 40000;
|
||||
|
||||
const ffmpeg = new FFmpeg();
|
||||
|
||||
let videoValue = "/" + $inputs[0].name;
|
||||
|
|
@ -22,6 +29,18 @@
|
|||
let commandRef;
|
||||
let vidPlayerRef;
|
||||
let renderProgress = 0;
|
||||
let fileinput;
|
||||
|
||||
function addInput() {
|
||||
addNode({ ...$inputNames[$inputNames.length - 1] }, "input");
|
||||
}
|
||||
|
||||
async function onFileSelected(e) {
|
||||
let vid = e.target.files[0];
|
||||
await ffmpeg.writeFile(vid.name, await fetchFile(vid));
|
||||
$inputNames.push({ name: vid.name, url: vid.name });
|
||||
addInput();
|
||||
}
|
||||
|
||||
function copyCommand() {
|
||||
commandRef.select();
|
||||
|
|
@ -38,20 +57,18 @@
|
|||
try {
|
||||
if (log.trim() != "") log += "\n\n";
|
||||
|
||||
for (let vid of $inputs) {
|
||||
await ffmpeg.writeFile(vid.name, await fetchFile("/" + vid.name));
|
||||
const fontNames = [
|
||||
...new Set([...$previewCommand.join(" ").matchAll(/\W([a-z]+\.ttf)/g)].map((f) => f[1])),
|
||||
];
|
||||
|
||||
for (let f of fontNames) {
|
||||
await ffmpeg.writeFile(f, await fetchFile("/" + f));
|
||||
}
|
||||
|
||||
const fontNames = [...new Set([...$previewCommand.join(" ").matchAll(/\W([a-z]+\.ttf)/g)].map(f => f[1]))];
|
||||
|
||||
for (let f of fontNames) {
|
||||
await ffmpeg.writeFile(f, await fetchFile("/" + f));
|
||||
}
|
||||
|
||||
let clist = [...$previewCommand];
|
||||
clist.shift() // remove "ffmpeg" from start of command
|
||||
clist.unshift("-hide_banner", "-loglevel", "error")
|
||||
clist = clist.map(c => c.replaceAll('"', ""));
|
||||
let clist = [...$previewCommand];
|
||||
clist.shift(); // remove "ffmpeg" from start of command
|
||||
clist.unshift("-hide_banner", "-loglevel", "error");
|
||||
clist = clist.map((c) => c.replaceAll('"', ""));
|
||||
if (outname.endsWith("mp4")) {
|
||||
clist.splice(clist.length - 1, 0, "-pix_fmt");
|
||||
clist.splice(clist.length - 1, 0, "yuv420p");
|
||||
|
|
@ -95,6 +112,9 @@
|
|||
workerURL: await toBlobURL(`${baseURL}/ffmpeg-core.worker.js`, "text/javascript"),
|
||||
});
|
||||
}
|
||||
for (let vid of $inputNames) {
|
||||
await ffmpeg.writeFile(vid.name, await fetchFile(vid.url));
|
||||
}
|
||||
ffmpegLoaded = true;
|
||||
}
|
||||
|
||||
|
|
@ -196,7 +216,23 @@
|
|||
</section>
|
||||
|
||||
<section class="graph">
|
||||
<Graph />
|
||||
<div class="graph-holder">
|
||||
<div class="nav">
|
||||
<button on:click={addInput}>Add Sample Input</button>
|
||||
<button on:click={() => fileinput.click()}>Upload File</button>
|
||||
<input
|
||||
type="file"
|
||||
accept="video/*"
|
||||
on:change={(e) => onFileSelected(e)}
|
||||
bind:this={fileinput}
|
||||
style="display: none;"
|
||||
/>
|
||||
<label for="auto"
|
||||
><input id="auto" type="checkbox" bind:checked={$auto} />Automatic Layout</label
|
||||
>
|
||||
</div>
|
||||
<Graph {fetchFile} ffmepg={ffmpeg} />
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class="filter-editor">
|
||||
|
|
@ -383,6 +419,11 @@
|
|||
ol li {
|
||||
margin-bottom: 5px;
|
||||
}
|
||||
.graph-holder {
|
||||
flex-direction: column;
|
||||
display: flex;
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
@media only screen and (max-width: 1400px) {
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,5 +1,5 @@
|
|||
<script>
|
||||
import { addNode, nodes, edges, auto, selectedFilter } from "./stores.js";
|
||||
import { nodes, edges, auto, selectedFilter } from "./stores.js";
|
||||
import {
|
||||
SvelteFlowProvider,
|
||||
SvelteFlow,
|
||||
|
|
@ -7,7 +7,7 @@
|
|||
Background,
|
||||
BackgroundVariant,
|
||||
} from "@xyflow/svelte";
|
||||
import '@xyflow/svelte/dist/style.css';
|
||||
import "@xyflow/svelte/dist/style.css";
|
||||
import Node from "./Node.svelte";
|
||||
import FitComp from "./FitComp.svelte";
|
||||
import ButtonEdge from "./ButtonEdge.svelte";
|
||||
|
|
@ -28,59 +28,41 @@
|
|||
}
|
||||
}
|
||||
}
|
||||
|
||||
function addInput() {
|
||||
addNode({ name: "shoe.mp4" }, "input");
|
||||
}
|
||||
|
||||
</script>
|
||||
|
||||
<SvelteFlowProvider>
|
||||
<div class="holder">
|
||||
<FitComp />
|
||||
<div class="nav">
|
||||
<button on:click={addInput}>Add Input</button>
|
||||
<label for="auto"
|
||||
><input id="auto" type="checkbox" bind:checked={$auto} />Automatic Layout</label
|
||||
<FitComp />
|
||||
<div class="flow">
|
||||
<div style="height: 100%; width: 100%">
|
||||
<SvelteFlow
|
||||
nodesDraggable={!$auto}
|
||||
nodesConnectable={!$auto}
|
||||
panOnDrag={!$auto}
|
||||
edgesUpdatable={!$auto}
|
||||
connectOnClick={true}
|
||||
nodesFocusable={false}
|
||||
edgesFocusable={false}
|
||||
elementsSelectable={false}
|
||||
nodesSelectable={!$auto}
|
||||
zoomOnScroll={!$auto}
|
||||
deleteKey={0}
|
||||
multiSelectionKeyCode={null}
|
||||
on:nodeclick={onClick}
|
||||
{nodeTypes}
|
||||
{edgeTypes}
|
||||
{nodes}
|
||||
{edges}
|
||||
snapGrid={[10, 10]}
|
||||
fitView
|
||||
>
|
||||
</div>
|
||||
<div class="flow">
|
||||
<div style="height: 100%; width: 100%">
|
||||
<SvelteFlow
|
||||
nodesDraggable={!$auto}
|
||||
nodesConnectable={!$auto}
|
||||
panOnDrag={!$auto}
|
||||
edgesUpdatable={!$auto}
|
||||
connectOnClick={true}
|
||||
nodesFocusable={false}
|
||||
edgesFocusable={false}
|
||||
elementsSelectable={false}
|
||||
nodesSelectable={!$auto}
|
||||
zoomOnScroll={!$auto}
|
||||
deleteKey={0}
|
||||
multiSelectionKeyCode={null}
|
||||
on:nodeclick={onClick}
|
||||
{nodeTypes}
|
||||
{edgeTypes}
|
||||
{nodes}
|
||||
{edges}
|
||||
snapGrid={[10, 10]}
|
||||
fitView
|
||||
>
|
||||
<Controls />
|
||||
<Background variant={BackgroundVariant.Dots} />
|
||||
</SvelteFlow>
|
||||
</div>
|
||||
<Controls />
|
||||
<Background variant={BackgroundVariant.Dots} />
|
||||
</SvelteFlow>
|
||||
</div>
|
||||
</div>
|
||||
</SvelteFlowProvider>
|
||||
|
||||
<style>
|
||||
.holder {
|
||||
flex-direction: column;
|
||||
display: flex;
|
||||
flex: 1;
|
||||
}
|
||||
.flow {
|
||||
flex: 1;
|
||||
margin-top: 10px;
|
||||
|
|
|
|||
|
|
@ -5,17 +5,17 @@
|
|||
export let data = { ext: "", nodeType: "", name: "", inputs: [], outputs: [] };
|
||||
export let id;
|
||||
|
||||
$: isSelected = $selectedFilter && $nodes[$selectedFilter] && $nodes[$selectedFilter].id === id;
|
||||
$: isSelected = $selectedFilter && $nodes[$selectedFilter] && $nodes[$selectedFilter].id === id;
|
||||
|
||||
function remove() {
|
||||
removeNode(id);
|
||||
}
|
||||
|
||||
function resetNode() {
|
||||
// hack to deselect node and apply changes on chrome
|
||||
$nodes.find(n => n.id === id).selected = false;
|
||||
$nodes = $nodes
|
||||
}
|
||||
function resetNode() {
|
||||
// hack to deselect node and apply changes on chrome
|
||||
$nodes.find((n) => n.id === id).selected = false;
|
||||
$nodes = $nodes;
|
||||
}
|
||||
|
||||
function changeFile() {
|
||||
const newFile = OUTPUTNAMES.find((n) => n.name === data.name);
|
||||
|
|
@ -24,7 +24,7 @@
|
|||
data.ext = newFile.ext;
|
||||
data = data;
|
||||
|
||||
resetNode();
|
||||
resetNode();
|
||||
}
|
||||
</script>
|
||||
|
||||
|
|
@ -81,7 +81,7 @@
|
|||
}
|
||||
:global(.svelte-flow__node) {
|
||||
box-shadow: 2px 2px 0px var(--b2);
|
||||
background-color: #fff;
|
||||
background-color: #fff;
|
||||
}
|
||||
:global(.svelte-flow__node.selected) {
|
||||
outline: 1px solid var(--b1) !important;
|
||||
|
|
@ -94,7 +94,7 @@
|
|||
background-color: white !important;
|
||||
font-size: 10px;
|
||||
line-height: 6px;
|
||||
text-align: center;
|
||||
text-align: center;
|
||||
}
|
||||
:global(.handle.a) {
|
||||
/* border: 1px solid var(--b2) !important; */
|
||||
|
|
@ -102,10 +102,10 @@
|
|||
.node {
|
||||
padding: 5px;
|
||||
}
|
||||
.selected {
|
||||
.selected {
|
||||
outline: 2px solid var(--b1);
|
||||
background-color: var(--b2);
|
||||
}
|
||||
background-color: var(--b2);
|
||||
}
|
||||
.head {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
|
|
|
|||
485
src/stores.js
485
src/stores.js
|
|
@ -7,322 +7,325 @@ export const auto = writable(true);
|
|||
export const selectedFilter = writable();
|
||||
|
||||
export const INPUTNAMES = [
|
||||
{name: "punch.mp4", ext: "mp4", outputs: ["v", "a"], inputs: []},
|
||||
{name: "shoe.mp4", ext: "mp4", outputs: ["v", "a"], inputs: []}
|
||||
{ name: "punch.mp4", url: "/punch.mp4", ext: "mp4", outputs: ["v", "a"], inputs: [] },
|
||||
{ name: "shoe.mp4", url: "/shoe.mp4", ext: "mp4", outputs: ["v", "a"], inputs: [] },
|
||||
];
|
||||
|
||||
export const OUTPUTNAMES = [
|
||||
{name: "out.mp4", ext: "mp4", inputs: ["v", "a"], outputs: []},
|
||||
{name: "out.gif", ext: "gif", inputs: ["v"], outputs: []}
|
||||
{ name: "out.mp4", ext: "mp4", inputs: ["v", "a"], outputs: [] },
|
||||
{ name: "out.gif", ext: "gif", inputs: ["v"], outputs: [] },
|
||||
];
|
||||
|
||||
addNode({...INPUTNAMES[0]}, "input");
|
||||
addNode({...OUTPUTNAMES[0]}, "output");
|
||||
export const inputNames = writable(INPUTNAMES);
|
||||
export const outputNames = writable(OUTPUTNAMES);
|
||||
|
||||
addNode({ ...INPUTNAMES[0] }, "input");
|
||||
addNode({ ...OUTPUTNAMES[0] }, "output");
|
||||
|
||||
export function makeFilterArgs(f) {
|
||||
let fCommand = f.name;
|
||||
if (f.params && f.params.length > 0) {
|
||||
let params = f.params
|
||||
.map((p) => {
|
||||
if (p.value === "" || p.value === null || p.value === p.default) return null;
|
||||
return `${p.name}=${p.value}`;
|
||||
})
|
||||
.filter((p) => p !== null)
|
||||
.join(":");
|
||||
if (params) fCommand += "=" + params;
|
||||
}
|
||||
return fCommand;
|
||||
let fCommand = f.name;
|
||||
if (f.params && f.params.length > 0) {
|
||||
let params = f.params
|
||||
.map((p) => {
|
||||
if (p.value === "" || p.value === null || p.value === p.default) return null;
|
||||
return `${p.name}=${p.value}`;
|
||||
})
|
||||
.filter((p) => p !== null)
|
||||
.join(":");
|
||||
if (params) fCommand += "=" + params;
|
||||
}
|
||||
return fCommand;
|
||||
}
|
||||
|
||||
export const previewCommand = derived([edges, nodes], ([$edges, $nodes]) => {
|
||||
let finalCommand = [];
|
||||
let filtergraph = [];
|
||||
let labelIndex = 1;
|
||||
const edgeIds = {};
|
||||
const inputIdMap = {};
|
||||
let finalCommand = [];
|
||||
let filtergraph = [];
|
||||
let labelIndex = 1;
|
||||
const edgeIds = {};
|
||||
const inputIdMap = {};
|
||||
|
||||
const inputs = $nodes.filter((n) => n.nodeType === "input");
|
||||
const inputIds = inputs.map((n) => n.id);
|
||||
const inputEdges = $edges.filter((e) => inputIds.includes(e.source));
|
||||
const outputs = $nodes.filter((n) => n.nodeType === "output");
|
||||
const inputs = $nodes.filter((n) => n.nodeType === "input");
|
||||
const inputIds = inputs.map((n) => n.id);
|
||||
const inputEdges = $edges.filter((e) => inputIds.includes(e.source));
|
||||
const outputs = $nodes.filter((n) => n.nodeType === "output");
|
||||
|
||||
// create edge labels for each input
|
||||
inputs.forEach((inp, i) => (inputIdMap[inp.id] = i));
|
||||
// create edge labels for each input
|
||||
inputs.forEach((inp, i) => (inputIdMap[inp.id] = i));
|
||||
|
||||
// create edge labels for each filter
|
||||
function traverseEdges(edg, type) {
|
||||
const outEdges = $edges.filter((e) => e.source === edg.target && e.sourceHandle.includes(type));
|
||||
// create edge labels for each filter
|
||||
function traverseEdges(edg, type) {
|
||||
const outEdges = $edges.filter((e) => e.source === edg.target && e.sourceHandle.includes(type));
|
||||
|
||||
let label;
|
||||
let label;
|
||||
|
||||
const inNode = $nodes.find((n) => n.id === edg.source);
|
||||
const outNode = $nodes.find((n) => n.id === edg.target);
|
||||
const inNode = $nodes.find((n) => n.id === edg.source);
|
||||
const outNode = $nodes.find((n) => n.id === edg.target);
|
||||
|
||||
if (inNode && outNode) {
|
||||
if (inNode.nodeType === "input" && outNode.nodeType === "filter") {
|
||||
label = inputIdMap[inNode.id] + ":" + edg.sourceHandle[0];
|
||||
} else if (inNode.nodeType === "filter" && outNode.nodeType === "filter") {
|
||||
label = labelIndex;
|
||||
labelIndex++;
|
||||
} else if (inNode.nodeType === "filter" && outNode.nodeType === "output") {
|
||||
label = "out_" + type;
|
||||
} else if (inNode.nodeType === "input" && outNode.nodeType === "output") {
|
||||
label = "FILTERLESS_" + inputIdMap[inNode.id] + ":" + type;
|
||||
} else {
|
||||
label = "UNKNOWN";
|
||||
}
|
||||
if (inNode && outNode) {
|
||||
if (inNode.nodeType === "input" && outNode.nodeType === "filter") {
|
||||
label = inputIdMap[inNode.id] + ":" + edg.sourceHandle[0];
|
||||
} else if (inNode.nodeType === "filter" && outNode.nodeType === "filter") {
|
||||
label = labelIndex;
|
||||
labelIndex++;
|
||||
} else if (inNode.nodeType === "filter" && outNode.nodeType === "output") {
|
||||
label = "out_" + type;
|
||||
} else if (inNode.nodeType === "input" && outNode.nodeType === "output") {
|
||||
label = "FILTERLESS_" + inputIdMap[inNode.id] + ":" + type;
|
||||
} else {
|
||||
label = "UNKNOWN";
|
||||
}
|
||||
|
||||
edgeIds[edg.id] = label;
|
||||
}
|
||||
edgeIds[edg.id] = label;
|
||||
}
|
||||
|
||||
for (let e2 of outEdges) {
|
||||
traverseEdges(e2, type);
|
||||
}
|
||||
}
|
||||
for (let e2 of outEdges) {
|
||||
traverseEdges(e2, type);
|
||||
}
|
||||
}
|
||||
|
||||
for (let inp of inputEdges) {
|
||||
for (let t of ["v", "a"]) {
|
||||
if (inp.sourceHandle.includes(t)) {
|
||||
traverseEdges(inp, t);
|
||||
}
|
||||
}
|
||||
}
|
||||
for (let inp of inputEdges) {
|
||||
for (let t of ["v", "a"]) {
|
||||
if (inp.sourceHandle.includes(t)) {
|
||||
traverseEdges(inp, t);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
for (let n of $nodes.filter((n) => n.nodeType == "filter")) {
|
||||
let cmd = { weight: 0, in: [], out: [], cmd: "" };
|
||||
for (let n of $nodes.filter((n) => n.nodeType == "filter")) {
|
||||
let cmd = { weight: 0, in: [], out: [], cmd: "" };
|
||||
|
||||
const outs = $edges.filter((e) => e.source == n.id);
|
||||
const ins = $edges.filter((e) => e.target == n.id);
|
||||
const outs = $edges.filter((e) => e.source == n.id);
|
||||
const ins = $edges.filter((e) => e.target == n.id);
|
||||
|
||||
if (outs.length == 0 && ins.length == 0) continue;
|
||||
if (outs.length == 0 && ins.length == 0) continue;
|
||||
|
||||
for (let i of ins) {
|
||||
const eid = edgeIds[i.id];
|
||||
if (typeof eid == "string" && eid.includes(":")) cmd.weight = -1000;
|
||||
cmd.in.push(eid);
|
||||
}
|
||||
for (let i of ins) {
|
||||
const eid = edgeIds[i.id];
|
||||
if (typeof eid == "string" && eid.includes(":")) cmd.weight = -1000;
|
||||
cmd.in.push(eid);
|
||||
}
|
||||
|
||||
cmd.cmd = makeFilterArgs(n.data);
|
||||
cmd.cmd = makeFilterArgs(n.data);
|
||||
|
||||
for (let o of outs) {
|
||||
const eid = edgeIds[o.id];
|
||||
if (typeof eid == "string" && eid.includes("out")) cmd.weight = 1000;
|
||||
else cmd.weight = eid;
|
||||
cmd.out.push(eid);
|
||||
}
|
||||
for (let o of outs) {
|
||||
const eid = edgeIds[o.id];
|
||||
if (typeof eid == "string" && eid.includes("out")) cmd.weight = 1000;
|
||||
else cmd.weight = eid;
|
||||
cmd.out.push(eid);
|
||||
}
|
||||
|
||||
filtergraph.push(cmd);
|
||||
}
|
||||
filtergraph.push(cmd);
|
||||
}
|
||||
|
||||
filtergraph.sort((a, b) => {
|
||||
return a.weight - b.weight;
|
||||
});
|
||||
filtergraph.sort((a, b) => {
|
||||
return a.weight - b.weight;
|
||||
});
|
||||
|
||||
filtergraph = filtergraph.map((c) => {
|
||||
return c.in.map((i) => `[${i}]`).join("") + c.cmd + c.out.map((i) => `[${i}]`).join("");
|
||||
});
|
||||
filtergraph = filtergraph.map((c) => {
|
||||
return c.in.map((i) => `[${i}]`).join("") + c.cmd + c.out.map((i) => `[${i}]`).join("");
|
||||
});
|
||||
|
||||
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);
|
||||
}
|
||||
|
||||
let hasVid = false;
|
||||
let hasAud = false;
|
||||
let hasVid = false;
|
||||
let hasAud = false;
|
||||
|
||||
let mediaMaps = Object.values(edgeIds)
|
||||
.map((eid) => {
|
||||
if (String(eid).includes("FILTERLESS")) {
|
||||
return eid.split("_")[1];
|
||||
}
|
||||
return null;
|
||||
})
|
||||
.filter((m) => m !== null);
|
||||
let mediaMaps = Object.values(edgeIds)
|
||||
.map((eid) => {
|
||||
if (String(eid).includes("FILTERLESS")) {
|
||||
return eid.split("_")[1];
|
||||
}
|
||||
return null;
|
||||
})
|
||||
.filter((m) => m !== null);
|
||||
|
||||
if (filtergraph.length > 0) {
|
||||
let fg = `"${filtergraph.join(";")}"`;
|
||||
if (filtergraph.length > 0) {
|
||||
let fg = `"${filtergraph.join(";")}"`;
|
||||
|
||||
// this crazy thing replaces stuff like [1];[1] with a comma!
|
||||
fg = fg.replaceAll(/(\[\d+\]);\1(?!\[)/g, ",");
|
||||
// this crazy thing replaces stuff like [1];[1] with a comma!
|
||||
fg = fg.replaceAll(/(\[\d+\]);\1(?!\[)/g, ",");
|
||||
|
||||
hasVid = fg.includes(":v]");
|
||||
hasAud = fg.includes(":a]");
|
||||
hasVid = fg.includes(":v]");
|
||||
hasAud = fg.includes(":a]");
|
||||
|
||||
finalCommand.push("-filter_complex", fg);
|
||||
finalCommand.push("-filter_complex", fg);
|
||||
|
||||
if (hasAud) {
|
||||
finalCommand.push("-map", '"[out_a]"');
|
||||
}
|
||||
if (hasAud) {
|
||||
finalCommand.push("-map", '"[out_a]"');
|
||||
}
|
||||
|
||||
if (hasVid) {
|
||||
finalCommand.push("-map", '"[out_v]"');
|
||||
}
|
||||
if (hasVid) {
|
||||
finalCommand.push("-map", '"[out_v]"');
|
||||
}
|
||||
|
||||
for (let m of mediaMaps) {
|
||||
finalCommand.push("-map", m);
|
||||
}
|
||||
}
|
||||
for (let m of mediaMaps) {
|
||||
finalCommand.push("-map", m);
|
||||
}
|
||||
}
|
||||
|
||||
for (let out of outputs) {
|
||||
finalCommand.push(out.data.name);
|
||||
}
|
||||
for (let out of outputs) {
|
||||
finalCommand.push(out.data.name);
|
||||
}
|
||||
|
||||
return finalCommand;
|
||||
return finalCommand;
|
||||
});
|
||||
|
||||
export const inputs = derived(nodes, ($nodes) => {
|
||||
return $nodes.filter((n) => n.nodeType === "input").map((n) => n.data);
|
||||
return $nodes.filter((n) => n.nodeType === "input").map((n) => n.data);
|
||||
});
|
||||
|
||||
export const outputs = derived(nodes, ($nodes) => {
|
||||
return $nodes.filter((n) => n.nodeType === "output").map((n) => n.data);
|
||||
return $nodes.filter((n) => n.nodeType === "output").map((n) => n.data);
|
||||
});
|
||||
|
||||
nodes.subscribe(($nodes) => {
|
||||
const isAuto = get(auto);
|
||||
if (!isAuto) return;
|
||||
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(filterNodes, outputNodes).filter((n) => n != undefined);
|
||||
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(filterNodes, outputNodes).filter((n) => n != undefined);
|
||||
|
||||
const filled = [];
|
||||
let newEdges = [];
|
||||
const filled = [];
|
||||
let newEdges = [];
|
||||
|
||||
function connectNode(n1, rest) {
|
||||
for (let i = 0; i < n1.data.outputs.length; i++) {
|
||||
const edgeType = n1.data.outputs[i];
|
||||
for (let j = 0; j < rest.length; j++) {
|
||||
let found = false;
|
||||
const n2 = rest[j];
|
||||
for (let k = 0; k < n2.data.inputs.length; k++) {
|
||||
const targetEdgeType = n2.data.inputs[k];
|
||||
if (edgeType === targetEdgeType && !filled.includes(n2.id + k)) {
|
||||
newEdges.push({
|
||||
id: uuidv4(),
|
||||
type: "default",
|
||||
source: n1.id,
|
||||
target: n2.id,
|
||||
sourceHandle: edgeType + "_" + i,
|
||||
targetHandle: edgeType + "_" + k,
|
||||
});
|
||||
filled.push(n2.id + k);
|
||||
found = true;
|
||||
break;
|
||||
}
|
||||
}
|
||||
if (found) break;
|
||||
}
|
||||
}
|
||||
const nextNode = rest.shift();
|
||||
if (nextNode) {
|
||||
connectNode(nextNode, rest);
|
||||
}
|
||||
}
|
||||
function connectNode(n1, rest) {
|
||||
for (let i = 0; i < n1.data.outputs.length; i++) {
|
||||
const edgeType = n1.data.outputs[i];
|
||||
for (let j = 0; j < rest.length; j++) {
|
||||
let found = false;
|
||||
const n2 = rest[j];
|
||||
for (let k = 0; k < n2.data.inputs.length; k++) {
|
||||
const targetEdgeType = n2.data.inputs[k];
|
||||
if (edgeType === targetEdgeType && !filled.includes(n2.id + k)) {
|
||||
newEdges.push({
|
||||
id: uuidv4(),
|
||||
type: "default",
|
||||
source: n1.id,
|
||||
target: n2.id,
|
||||
sourceHandle: edgeType + "_" + i,
|
||||
targetHandle: edgeType + "_" + k,
|
||||
});
|
||||
filled.push(n2.id + k);
|
||||
found = true;
|
||||
break;
|
||||
}
|
||||
}
|
||||
if (found) break;
|
||||
}
|
||||
}
|
||||
const nextNode = rest.shift();
|
||||
if (nextNode) {
|
||||
connectNode(nextNode, rest);
|
||||
}
|
||||
}
|
||||
|
||||
for (let inpNode of inputNodes) {
|
||||
connectNode(inpNode, [...orderedNodes]);
|
||||
}
|
||||
for (let inpNode of inputNodes) {
|
||||
connectNode(inpNode, [...orderedNodes]);
|
||||
}
|
||||
|
||||
edges.set(newEdges);
|
||||
edges.set(newEdges);
|
||||
});
|
||||
|
||||
export function addNode(_data, type) {
|
||||
const data = JSON.parse(JSON.stringify(_data));
|
||||
const data = JSON.parse(JSON.stringify(_data));
|
||||
|
||||
let ins = [];
|
||||
let outs = [];
|
||||
let ins = [];
|
||||
let outs = [];
|
||||
|
||||
if (type === "input") {
|
||||
outs = ["v", "a"];
|
||||
} 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;
|
||||
if (p.default != null) p.value = p.default;
|
||||
return p;
|
||||
});
|
||||
}
|
||||
}
|
||||
if (type === "input") {
|
||||
outs = ["v", "a"];
|
||||
} 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;
|
||||
if (p.default != null) p.value = p.default;
|
||||
return p;
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
data.nodeType = type;
|
||||
data.inputs = ins;
|
||||
data.outputs = outs;
|
||||
data.nodeType = type;
|
||||
data.inputs = ins;
|
||||
data.outputs = outs;
|
||||
|
||||
let node = {
|
||||
id: uuidv4(),
|
||||
type: "ffmpeg",
|
||||
data: data,
|
||||
nodeType: type,
|
||||
position: { x: 0, y: 0 },
|
||||
};
|
||||
let node = {
|
||||
id: uuidv4(),
|
||||
type: "ffmpeg",
|
||||
data: data,
|
||||
nodeType: type,
|
||||
position: { x: 0, y: 0 },
|
||||
};
|
||||
|
||||
nodes.update((_nodes) => {
|
||||
_nodes.push(node);
|
||||
nodes.update((_nodes) => {
|
||||
_nodes.push(node);
|
||||
|
||||
const isAuto = get(auto);
|
||||
const isAuto = get(auto);
|
||||
|
||||
if (isAuto) {
|
||||
const w = 120;
|
||||
const h = 50;
|
||||
const margin = 50;
|
||||
let prev = null;
|
||||
if (isAuto) {
|
||||
const w = 120;
|
||||
const h = 50;
|
||||
const margin = 50;
|
||||
let prev = null;
|
||||
|
||||
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 === "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 === "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 };
|
||||
}
|
||||
}
|
||||
}
|
||||
if (node.nodeType === "filter") {
|
||||
selectedFilter.set(_nodes.length - 1);
|
||||
}
|
||||
return _nodes;
|
||||
});
|
||||
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 };
|
||||
}
|
||||
}
|
||||
}
|
||||
if (node.nodeType === "filter") {
|
||||
selectedFilter.set(_nodes.length - 1);
|
||||
}
|
||||
return _nodes;
|
||||
});
|
||||
}
|
||||
|
||||
export function resetNodes() {
|
||||
nodes.set([]);
|
||||
addNode({ name: "punch.mp4" }, "input");
|
||||
addNode({ name: "out.mp4" }, "output");
|
||||
nodes.set([]);
|
||||
addNode({ name: "punch.mp4" }, "input");
|
||||
addNode({ name: "out.mp4" }, "output");
|
||||
}
|
||||
|
||||
export function removeNode(id) {
|
||||
nodes.update((_nodes) => {
|
||||
const index = _nodes.findIndex((n) => n.id === id);
|
||||
_nodes.splice(index, 1);
|
||||
return _nodes;
|
||||
});
|
||||
nodes.update((_nodes) => {
|
||||
const index = _nodes.findIndex((n) => n.id === id);
|
||||
_nodes.splice(index, 1);
|
||||
return _nodes;
|
||||
});
|
||||
}
|
||||
|
||||
export function removeEdge(id) {
|
||||
edges.update((_edges) => {
|
||||
const index = _edges.findIndex((e) => e.id === id);
|
||||
_edges.splice(index, 1);
|
||||
return _edges;
|
||||
});
|
||||
edges.update((_edges) => {
|
||||
const index = _edges.findIndex((e) => e.id === id);
|
||||
_edges.splice(index, 1);
|
||||
return _edges;
|
||||
});
|
||||
}
|
||||
|
|
|
|||
Loading…
Reference in New Issue