This commit is contained in:
Sam Lavigne
parent
7c085cbba2
commit
d1079e47af
|
|
@ -6,6 +6,7 @@
|
||||||
import Filter from "./Filter.svelte";
|
import Filter from "./Filter.svelte";
|
||||||
import FilterPicker from "./FilterPicker.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 { FFmpeg } from "@ffmpeg/ffmpeg";
|
||||||
import { fetchFile, toBlobURL } from "@ffmpeg/util";
|
import { fetchFile, toBlobURL } from "@ffmpeg/util";
|
||||||
import { dndzone } from "svelte-dnd-action";
|
import { dndzone } from "svelte-dnd-action";
|
||||||
|
|
@ -195,8 +196,12 @@
|
||||||
</section>
|
</section>
|
||||||
|
|
||||||
<section class="graph">
|
<section class="graph">
|
||||||
<Graph />
|
<GraphOld />
|
||||||
</section>
|
</section>
|
||||||
|
|
||||||
|
<!-- <section class="graph"> -->
|
||||||
|
<!-- <Graph /> -->
|
||||||
|
<!-- </section> -->
|
||||||
</main>
|
</main>
|
||||||
|
|
||||||
<style>
|
<style>
|
||||||
|
|
|
||||||
|
|
@ -0,0 +1,126 @@
|
||||||
|
<script>
|
||||||
|
import { v4 as uuidv4 } from "uuid";
|
||||||
|
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;
|
||||||
|
const targetAnchor = e.detail.targetAnchor;
|
||||||
|
const sourceNode = e.detail.sourceNode;
|
||||||
|
const targetNode = e.detail.targetNode;
|
||||||
|
// 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;
|
||||||
|
}
|
||||||
|
|
||||||
|
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;
|
||||||
|
|
||||||
|
// 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;
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<Svelvet
|
||||||
|
id="my-canvas"
|
||||||
|
width={800}
|
||||||
|
height={500}
|
||||||
|
snapTo={25}
|
||||||
|
on:disconnection={onDisconnect}
|
||||||
|
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}>
|
||||||
|
<div class="node">
|
||||||
|
<div class="header">
|
||||||
|
{n.data.name}
|
||||||
|
</div>
|
||||||
|
<slot />
|
||||||
|
</div>
|
||||||
|
<div class="input-anchors">
|
||||||
|
{#each n.data.inputs as inp, index}
|
||||||
|
<Anchor id={inp + "_" + index} let:linked let:connecting let:hovering input>
|
||||||
|
<div class:linked class:hovering class:connecting class="anchor in {inp}">{inp}</div>
|
||||||
|
</Anchor>
|
||||||
|
{/each}
|
||||||
|
</div>
|
||||||
|
<div class="output-anchors">
|
||||||
|
{#each n.data.outputs as out}
|
||||||
|
<Anchor id={out + "_" + index} let:linked let:connecting let:hovering output>
|
||||||
|
<div class:linked class:hovering class:connecting class="anchor in {out}">{out}</div>
|
||||||
|
</Anchor>
|
||||||
|
{/each}
|
||||||
|
</div>
|
||||||
|
</Node>
|
||||||
|
{/each}
|
||||||
|
<Controls />
|
||||||
|
</Svelvet>
|
||||||
|
|
||||||
|
<div>
|
||||||
|
{JSON.stringify($edges)}
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<style>
|
||||||
|
.node {
|
||||||
|
box-sizing: border-box;
|
||||||
|
width: fit-content;
|
||||||
|
height: fit-content;
|
||||||
|
position: relative;
|
||||||
|
pointer-events: auto;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
padding: 10px;
|
||||||
|
gap: 10px;
|
||||||
|
background-color: #fff;
|
||||||
|
border: 1px solid var(--b1);
|
||||||
|
font: 12px Times, serif;
|
||||||
|
box-shadow: none !important;
|
||||||
|
}
|
||||||
|
.output-anchors {
|
||||||
|
position: absolute;
|
||||||
|
right: -16px;
|
||||||
|
top: 0px;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
gap: 2px;
|
||||||
|
}
|
||||||
|
.input-anchors {
|
||||||
|
position: absolute;
|
||||||
|
left: -16px;
|
||||||
|
top: 0px;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
gap: 2px;
|
||||||
|
}
|
||||||
|
.anchor {
|
||||||
|
background-color: #fff;
|
||||||
|
font-size: 12px;
|
||||||
|
text-align: center;
|
||||||
|
line-height: 12px;
|
||||||
|
width: 14px;
|
||||||
|
height: 14px;
|
||||||
|
font-family: Times, serif;
|
||||||
|
border: solid 1px white;
|
||||||
|
border-color: var(--b1);
|
||||||
|
}
|
||||||
|
.hovering {
|
||||||
|
scale: 1.2;
|
||||||
|
}
|
||||||
|
.linked {
|
||||||
|
background-color: rgb(17, 214, 17) !important;
|
||||||
|
}
|
||||||
|
.connecting {
|
||||||
|
background-color: goldenrod;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
|
@ -1,201 +0,0 @@
|
||||||
<script>
|
|
||||||
import { inputs, output, filters } from "./stores.js";
|
|
||||||
import { Anchor, Node, Svelvet, Minimap, Controls } from "svelvet";
|
|
||||||
|
|
||||||
// let nodes = [];
|
|
||||||
// for (let inp of $inputs) {
|
|
||||||
// nodes.push({item: inp});
|
|
||||||
// }
|
|
||||||
//
|
|
||||||
// for (let filter of $filters) {
|
|
||||||
// nodes.push({item: filter});
|
|
||||||
// }
|
|
||||||
let edges = [];
|
|
||||||
let command = '';
|
|
||||||
|
|
||||||
function makeCommand() {
|
|
||||||
for (let e of edges) {
|
|
||||||
const [from, to] = e;
|
|
||||||
const [fromAnchorId, fromNodeId] = from.split("/");
|
|
||||||
const [toAnchorId, toNodeId] = to.split("/");
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
function countInputs(f) {
|
|
||||||
const [ins, outs] = f.type.split("->");
|
|
||||||
if (ins == "N") return 1;
|
|
||||||
return ins.length;
|
|
||||||
}
|
|
||||||
|
|
||||||
function countCons(f) {
|
|
||||||
const [ins, outs] = f.type.split("->");
|
|
||||||
return { in: ins.split(""), out: outs.split("") };
|
|
||||||
}
|
|
||||||
|
|
||||||
function countOutputs(f) {
|
|
||||||
const [ins, outs] = f.type.split("->");
|
|
||||||
if (outs == "N") return 1;
|
|
||||||
return outs.length;
|
|
||||||
}
|
|
||||||
|
|
||||||
function onConnect(e) {
|
|
||||||
const sourceAnchor = e.detail.sourceAnchor;
|
|
||||||
const targetAnchor = e.detail.targetAnchor;
|
|
||||||
const sourceNode = e.detail.sourceNode;
|
|
||||||
const targetNode = e.detail.targetNode;
|
|
||||||
// console.log(e);
|
|
||||||
// console.log(sourceNode.id, "->", targetNode.id)
|
|
||||||
// console.log(sourceAnchor.id, "->", targetAnchor.id)
|
|
||||||
edges.push([sourceAnchor.id, targetAnchor.id])
|
|
||||||
edges = edges;
|
|
||||||
makeCommand();
|
|
||||||
}
|
|
||||||
|
|
||||||
function onDisconnect(e) {
|
|
||||||
const sourceAnchor = e.detail.sourceAnchor;
|
|
||||||
const targetAnchor = e.detail.targetAnchor;
|
|
||||||
const sourceNode = e.detail.sourceNode;
|
|
||||||
const targetNode = e.detail.targetNode;
|
|
||||||
|
|
||||||
// console.log(sourceNode.id, "-/>", targetNode.id)
|
|
||||||
// console.log(sourceAnchor.id, "-/>", targetAnchor.id)
|
|
||||||
|
|
||||||
const index = edges.findIndex((e) => e[0] === sourceAnchor.id && e[1] === targetAnchor.id);
|
|
||||||
edges.splice(index, 1);
|
|
||||||
edges = edges;
|
|
||||||
makeCommand();
|
|
||||||
}
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<Svelvet
|
|
||||||
id="my-canvas"
|
|
||||||
width={800}
|
|
||||||
height={500}
|
|
||||||
snapTo={25}
|
|
||||||
on:disconnection={onDisconnect}
|
|
||||||
on:connection={onConnect}
|
|
||||||
>
|
|
||||||
{#each $inputs as inp, index}
|
|
||||||
<Node inputs={0} outputs={2} id={"input_" + inp.id}>
|
|
||||||
<div class="node">
|
|
||||||
<div class="header">
|
|
||||||
{inp.name}
|
|
||||||
</div>
|
|
||||||
<slot />
|
|
||||||
</div>
|
|
||||||
<div class="output-anchors">
|
|
||||||
<Anchor id={"video"} let:linked let:connecting let:hovering output>
|
|
||||||
<div class:linked class:hovering class:connecting class="anchor video">v</div>
|
|
||||||
</Anchor>
|
|
||||||
<Anchor id={"audio"} let:linked let:connecting let:hovering output>
|
|
||||||
<div class:linked class:hovering class:connecting class="anchor audio">a</div>
|
|
||||||
</Anchor>
|
|
||||||
</div>
|
|
||||||
</Node>
|
|
||||||
{/each}
|
|
||||||
|
|
||||||
{#each $filters as f, index}
|
|
||||||
<Node inputs={countInputs(f)} outputs={countOutputs(f)} id={"filter_" + f.id}>
|
|
||||||
<div class="node">
|
|
||||||
<div class="header">
|
|
||||||
{f.name}
|
|
||||||
</div>
|
|
||||||
<slot />
|
|
||||||
</div>
|
|
||||||
<div class="input-anchors">
|
|
||||||
{#each countCons(f).in as inp, index}
|
|
||||||
<Anchor id={"in_" + inp + "_" + index} let:linked let:connecting let:hovering input>
|
|
||||||
<div class:linked class:hovering class:connecting class="anchor in {inp}">{inp}</div>
|
|
||||||
</Anchor>
|
|
||||||
{/each}
|
|
||||||
</div>
|
|
||||||
<div class="output-anchors">
|
|
||||||
{#each countCons(f).out as out}
|
|
||||||
<Anchor id={"out_" + out + "_" + index} let:linked let:connecting let:hovering output>
|
|
||||||
<div class:linked class:hovering class:connecting class="anchor in {out}">{out}</div>
|
|
||||||
</Anchor>
|
|
||||||
{/each}
|
|
||||||
</div>
|
|
||||||
</Node>
|
|
||||||
{/each}
|
|
||||||
|
|
||||||
<Node inputs={2} outputs="0" id="output" position={{ x: 600, y: 250 }}>
|
|
||||||
<div class="node">
|
|
||||||
<div class="header">
|
|
||||||
{$output}
|
|
||||||
</div>
|
|
||||||
<slot />
|
|
||||||
</div>
|
|
||||||
<div class="input-anchors">
|
|
||||||
<Anchor id={"output_video"} let:linked let:connecting let:hovering input>
|
|
||||||
<div class:linked class:hovering class:connecting class="anchor video">v</div>
|
|
||||||
</Anchor>
|
|
||||||
<Anchor id={"output_audio"} let:linked let:connecting let:hovering input>
|
|
||||||
<div class:linked class:hovering class:connecting class="anchor audio">a</div>
|
|
||||||
</Anchor>
|
|
||||||
</div>
|
|
||||||
</Node>
|
|
||||||
<Controls />
|
|
||||||
</Svelvet>
|
|
||||||
|
|
||||||
<div>
|
|
||||||
{#each edges as e}
|
|
||||||
<p>
|
|
||||||
{e[0]} =======> {e[1]}
|
|
||||||
</p>
|
|
||||||
{/each}
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<style>
|
|
||||||
.node {
|
|
||||||
box-sizing: border-box;
|
|
||||||
width: fit-content;
|
|
||||||
height: fit-content;
|
|
||||||
position: relative;
|
|
||||||
pointer-events: auto;
|
|
||||||
display: flex;
|
|
||||||
flex-direction: column;
|
|
||||||
padding: 10px;
|
|
||||||
gap: 10px;
|
|
||||||
background-color: #fff;
|
|
||||||
border: 1px solid var(--b1);
|
|
||||||
font: 12px Times, serif;
|
|
||||||
box-shadow: none !important;
|
|
||||||
}
|
|
||||||
.output-anchors {
|
|
||||||
position: absolute;
|
|
||||||
right: -16px;
|
|
||||||
top: 0px;
|
|
||||||
display: flex;
|
|
||||||
flex-direction: column;
|
|
||||||
gap: 2px;
|
|
||||||
}
|
|
||||||
.input-anchors {
|
|
||||||
position: absolute;
|
|
||||||
left: -16px;
|
|
||||||
top: 0px;
|
|
||||||
display: flex;
|
|
||||||
flex-direction: column;
|
|
||||||
gap: 2px;
|
|
||||||
}
|
|
||||||
.anchor {
|
|
||||||
background-color: #fff;
|
|
||||||
font-size: 12px;
|
|
||||||
text-align: center;
|
|
||||||
line-height: 12px;
|
|
||||||
width: 14px;
|
|
||||||
height: 14px;
|
|
||||||
font-family: Times, serif;
|
|
||||||
border: solid 1px white;
|
|
||||||
border-color: var(--b1);
|
|
||||||
}
|
|
||||||
.hovering {
|
|
||||||
scale: 1.2;
|
|
||||||
}
|
|
||||||
.linked {
|
|
||||||
background-color: rgb(17, 214, 17) !important;
|
|
||||||
}
|
|
||||||
.connecting {
|
|
||||||
background-color: goldenrod;
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
|
|
@ -104,3 +104,7 @@ input[type="range"]::-moz-range-thumb {
|
||||||
|
|
||||||
input[type="range"]:focus::-moz-range-thumb {
|
input[type="range"]:focus::-moz-range-thumb {
|
||||||
}
|
}
|
||||||
|
.svelte-flow__node {
|
||||||
|
border-radius: 0px !important;
|
||||||
|
border: 1px solid var(--b1) !important;
|
||||||
|
}
|
||||||
|
|
|
||||||
|
|
@ -4,14 +4,14 @@
|
||||||
export let data = { name: "", inputs: [], outputs: [], onChange: () => {} };
|
export let data = { name: "", inputs: [], outputs: [], onChange: () => {} };
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<div>
|
<div class="node">
|
||||||
{data.name}
|
{data.name}
|
||||||
</div>
|
</div>
|
||||||
{#each data.inputs as inp, index}
|
{#each data.inputs as inp, index}
|
||||||
<Handle type="target" position={Position.Left} id={inp + "_" + index} style="top: {index*10}px; background-color: {inp == 'v' ? 'blue' : 'red'}" on:connect />
|
<Handle type="target" position={Position.Left} id={inp + "_" + index} style="top: {index*10}px; background-color: {inp == 'v' ? 'blue' : 'red'}" />
|
||||||
{/each}
|
{/each}
|
||||||
{#each data.outputs as out, index}
|
{#each data.outputs as out, index}
|
||||||
<Handle type="source" id={out + "_" + index} position={Position.Right} style="top: {index*10}px; background-color: {out == 'v' ? 'blue' : 'red'}" on:connect />
|
<Handle type="source" id={out + "_" + index} position={Position.Right} style="top: {index*10}px; background-color: {out == 'v' ? 'blue' : 'red'}" />
|
||||||
{/each}
|
{/each}
|
||||||
<!-- <Handle type="source" position={Position.Right} id="a" style="top: 10px;" on:connect /> -->
|
<!-- <Handle type="source" position={Position.Right} id="a" style="top: 10px;" on:connect /> -->
|
||||||
<!-- <Handle -->
|
<!-- <Handle -->
|
||||||
|
|
@ -21,3 +21,8 @@
|
||||||
<!-- style="top: auto; bottom: 10px;" -->
|
<!-- style="top: auto; bottom: 10px;" -->
|
||||||
<!-- on:connect -->
|
<!-- on:connect -->
|
||||||
<!-- /> -->
|
<!-- /> -->
|
||||||
|
<style>
|
||||||
|
.node {
|
||||||
|
padding: 5px;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue