This commit is contained in:
Sam Lavigne
parent
7c085cbba2
commit
d1079e47af
|
|
@ -6,6 +6,7 @@
|
|||
import Filter from "./Filter.svelte";
|
||||
import FilterPicker from "./FilterPicker.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,8 +196,12 @@
|
|||
</section>
|
||||
|
||||
<section class="graph">
|
||||
<Graph />
|
||||
<GraphOld />
|
||||
</section>
|
||||
|
||||
<!-- <section class="graph"> -->
|
||||
<!-- <Graph /> -->
|
||||
<!-- </section> -->
|
||||
</main>
|
||||
|
||||
<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 {
|
||||
}
|
||||
.svelte-flow__node {
|
||||
border-radius: 0px !important;
|
||||
border: 1px solid var(--b1) !important;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -4,14 +4,14 @@
|
|||
export let data = { name: "", inputs: [], outputs: [], onChange: () => {} };
|
||||
</script>
|
||||
|
||||
<div>
|
||||
<div class="node">
|
||||
{data.name}
|
||||
</div>
|
||||
{#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 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}
|
||||
<!-- <Handle type="source" position={Position.Right} id="a" style="top: 10px;" on:connect /> -->
|
||||
<!-- <Handle -->
|
||||
|
|
@ -21,3 +21,8 @@
|
|||
<!-- style="top: auto; bottom: 10px;" -->
|
||||
<!-- on:connect -->
|
||||
<!-- /> -->
|
||||
<style>
|
||||
.node {
|
||||
padding: 5px;
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
Loading…
Reference in New Issue