This commit is contained in:
Sam Lavigne 2023-08-23 18:10:28 -04:00
parent 7c085cbba2
commit d1079e47af
5 changed files with 144 additions and 205 deletions

View File

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

126
src/GraphOld.svelte Normal file
View File

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

View File

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

View File

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

View File

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