clean up and add delete edges

src/App.svelte

@@ -2,11 +2,8 @@
   import { onMount } from "svelte";
   import {
     selectedFilter,
-    addNode,
     nodes,
     inputs,
-    output,
-    filters,
     previewCommand,
   } from "./stores.js";
   import Filter from "./Filter.svelte";
@@ -56,7 +53,6 @@
       // command.push("yuv420p");
       // command.push("out.mp4");
       await ffmpeg.exec(clist, TIMEOUT);
-      // await ffmpeg.exec(["-f", "lavfi", "-i", "color=size=1280x720:rate=25:color=red", "-t", "5", "out.mp4"])
       const data = await ffmpeg.readFile("out.mp4");
       rendering = false;
       videoValue = URL.createObjectURL(new Blob([data.buffer], { type: "video/mp4" }));

src/ButtonEdge.svelte

@@ -0,0 +1,63 @@
+<script>
+  import { BaseEdge, EdgeLabelRenderer, getBezierPath } from "@xyflow/svelte";
+  import { auto, removeEdge } from "./stores.js";
+
+  export let id;
+  export let sourceX;
+  export let sourceY;
+  export let targetX;
+  export let targetY;
+  export let sourcePosition;
+  export let targetPosition;
+	export let markerEnd;
+
+  $: positions = getBezierPath({
+    sourceX,
+    sourceY,
+    sourcePosition,
+    targetX,
+    targetY,
+    targetPosition,
+  });
+
+  $: edgePath = positions[0];
+  $: labelX = positions[1];
+  $: labelY = positions[2];
+
+  function onClick(e) {
+    e.stopPropagation();
+    removeEdge(id);
+  }
+</script>
+
+<BaseEdge path={edgePath} {markerEnd} />
+<EdgeLabelRenderer>
+  <div
+    style="position: absolute; transform: translate(-50%, -50%) translate({labelX}px,{labelY}px); fontSize: 12; pointer-events: all"
+    class="nodrag nopan"
+  >
+    {#if !$auto}
+      <button class="edgebutton" on:click={onClick}>×</button>
+    {/if}
+  </div>
+</EdgeLabelRenderer>
+
+<style>
+  .edgebutton {
+    padding: 0;
+    top: -3px;
+    position: relative;
+    width: 8px;
+    height: 8px;
+    background: pink;
+    border: none;
+    cursor: pointer;
+    font-size: 8px;
+    line-height: 1;
+    box-shadow: none;
+  }
+
+  /* .edgebutton:hover { */
+  /*   box-shadow: 0 0 6px 2px rgba(0, 0, 0, 0.08); */
+  /* } */
+</style>

src/Filter.svelte

@@ -1,5 +1,5 @@
 <script>
-  import { filters, removeNode } from "./stores.js";
+  import { removeNode } from "./stores.js";
 
   export let filter = {
     name: "",
@@ -9,10 +9,6 @@
 
   let show = true;
 
-  function remove() {
-		removeNode(filter.id);
-  }
-
   function reset() {
     for (let p of filter.params) {
       p.value = null;

src/Graph.svelte

@@ -7,13 +7,18 @@
     Background,
     BackgroundVariant,
   } from "@xyflow/svelte";
-  import Node from "./nodes/Node.svelte";
+  import Node from "./Node.svelte";
   import FitComp from "./FitComp.svelte";
+  import ButtonEdge from "./ButtonEdge.svelte";
 
   const nodeTypes = {
     ffmpeg: Node,
   };
 
+  const edgeTypes = {
+    default: ButtonEdge,
+  };
+
   function onClick(e) {
     if (e.detail.nodeType === "filter") {
       const newSelected = $nodes.findIndex((n) => n.id === e.detail.id);
@@ -27,7 +32,6 @@
     addNode({ name: "shoe.mp4" }, "input");
   }
 
-
 </script>
 
 <SvelteFlowProvider>
@@ -48,8 +52,10 @@
           connectOnClick={true}
           nodesFocusable={!auto}
           edgesFocusable={!auto}
+          deleteKey={0}
           on:nodeclick={onClick}
           {nodeTypes}
+          {edgeTypes}
           {nodes}
           {edges}
           snapGrid={[10, 10]}

src/GraphOld.svelte

@@ -1,138 +0,0 @@
-<script>
-  import { v4 as uuidv4 } from "uuid";
-  import { nodes, edges } from "./stores.js";
-  import { Anchor, Node, Svelvet} 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.update((eds) => {
-      eds.push({
-        id: uuidv4(),
-        sourceAnchor: sourceAnchor.id,
-        targetAnchor: targetAnchor.id,
-        source: sourceNode.id,
-        target: targetNode.id,
-      });
-      return eds;
-    });
-  }
-
-  function onDisconnect(e) {
-	console.log('dis', e);
-    const sourceAnchor = e.detail.sourceAnchor.id;
-    const targetAnchor = e.detail.targetAnchor.id;
-    const source = e.detail.sourceNode.id;
-    const target = e.detail.targetNode.id;
-
-    // console.log(sourceNode.id, "-/>", targetNode.id)
-    // console.log(sourceAnchor.id, "-/>", targetAnchor.id)
-
-    edges.update((eds) => {
-      const index = eds.findIndex(
-        (e) => e.sourceAnchor === sourceAnchor && e.targetAnchor === targetAnchor
-      );
-      eds.splice(index, 1);
-      return eds;
-    });
-  }
-</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}
-</Svelvet>
-
-<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>

src/Input.svelte

@@ -1,30 +0,0 @@
-<script>
-  import { removeNode } from "./stores.js";
-  export let filename = "punch.mp4";
-	export let id;
-  export let index;
-
-  function remove() {
-		removeNode(id);
-  }
-</script>
-
-<div>
-  <select bind:value={filename}>
-    <option value="punch.mp4">punch.mp4</option>
-    <option value="shoe.mp4">shoe.mp4</option>
-  </select>
-  <button on:click={remove}>X</button>
-</div>
-
-<style>
-  div {
-    margin-top: 10px;
-    margin-bottom: 10px;
-    display: flex;
-  }
-  select {
-    flex: 1;
-		margin-right: 10px;
-  }
-</style>

src/Modal.svelte

@@ -1,63 +0,0 @@
-<script>
-  export let showModal; // boolean
-
-  let dialog; // HTMLDialogElement
-
-  $: if (dialog && showModal) dialog.showModal();
-</script>
-
-<!-- svelte-ignore a11y-click-events-have-key-events a11y-no-noninteractive-element-interactions -->
-<dialog
-  bind:this={dialog}
-  on:close={() => (showModal = false)}
-  on:click|self={() => dialog.close()}
->
-  <!-- svelte-ignore a11y-no-static-element-interactions -->
-  <div on:click|stopPropagation>
-    <slot name="header" />
-    <slot />
-    <!-- svelte-ignore a11y-autofocus -->
-    <button autofocus on:click={() => dialog.close()}>Close</button>
-  </div>
-</dialog>
-
-<style>
-  dialog {
-    max-width: 600px;
-		min-width: 600px;
-    border-radius: 0.2em;
-    border: none;
-    padding: 0;
-  }
-  dialog::backdrop {
-    background: rgba(0, 0, 0, 0.3);
-  }
-  dialog > div {
-    padding: 1em;
-  }
-  dialog[open] {
-    animation: zoom 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
-  }
-  @keyframes zoom {
-    from {
-      transform: scale(0.95);
-    }
-    to {
-      transform: scale(1);
-    }
-  }
-  dialog[open]::backdrop {
-    animation: fade 0.2s ease-out;
-  }
-  @keyframes fade {
-    from {
-      opacity: 0;
-    }
-    to {
-      opacity: 1;
-    }
-  }
-  button {
-    display: block;
-  }
-</style>

src/Node.svelte

@@ -1,6 +1,6 @@
 <script lang="ts">
   import { Handle, Position } from "@xyflow/svelte";
-  import { removeNode } from "../stores.js";
+  import { removeNode } from "./stores.js";
 
   export let data = { nodeType: "", name: "", inputs: [], outputs: [] };
   export let id;
@@ -13,7 +13,9 @@
 <div class="node {data.nodeType}">
   <div class="head">
     <div class="node-type">{data.nodeType}</div>
+    {#if data.nodeType != "output"}
       <button on:click={remove}>X</button>
+    {/if}
   </div>
   <div class="body">
     {#if data.nodeType == "input"}

src/Output.svelte

@@ -1,11 +0,0 @@
-<script>
-  export let filename = "";
-</script>
-
-<input bind:value={filename} />
-
-<style>
-  input {
-    width: 100%;
-  }
-</style>

src/stores.js

@@ -1,16 +1,11 @@
 import { v4 as uuidv4 } from "uuid";
 import { writable, derived, get } from "svelte/store";
 
-// export const inputs = writable([]);
-// export const output = writable("out.mp4");
-// export const filters = writable([]);
 export const nodes = writable([]);
 export const edges = writable([]);
 export const auto = writable(true);
 export const selectedFilter = writable();
 
-const PREFIX = "";
-
 addNode({ name: "punch.mp4" }, "input");
 addNode({ name: "out.mp4" }, "output");
 
@@ -29,100 +24,7 @@ function makeFilterArgs(f) {
   return fCommand;
 }
 
-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 filtergraph = [];
-
-  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 edgeIds = {};
-  for (let i = 0; i < $edges.length; i++) {
-    const e = $edges[i];
-    edgeIds[e.id] = i + 1;
-
-    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.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 == 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}]`;
-    }
-    cmd += makeFilterArgs(n.data);
-    for (let o of outs) {
-      const eid = edgeIds[o.id];
-      cmd += `[${eid}]`;
-    }
-    filtergraph.push(cmd);
-  }
-
-  finalCommand.push("ffmpeg");
-
-  for (let inp of inputs) {
-    finalCommand.push("-i");
-    finalCommand.push(inp.data.name);
-  }
-
-  finalCommand.push("-filter_complex");
-
-  finalCommand.push('"' + filtergraph.join(";") + '"');
-
-  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 out of outputs) {
-    finalCommand.push(out.data.name);
-  }
-
-  const entireCommand = finalCommand.join(" ");
-  return entireCommand;
-});
-
 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 hasVid = false;
   let hasAud = false;
 
@@ -213,11 +115,6 @@ export const previewCommand = derived([edges, nodes], ([$edges, $nodes]) => {
     }
   }
 
-  // for (let inp of inputs) {
-  //   finalCommand.push("-map");
-  //   finalCommand.push(inputIds[inp.id] + ":a");
-  // }
-
   for (let out of outputs) {
     finalCommand.push(out.data.name);
   }
@@ -226,43 +123,11 @@ export const previewCommand = derived([edges, nodes], ([$edges, $nodes]) => {
   return entireCommand;
 });
 
-export const previewCommandOld = derived(nodes, ($nodes) => {
-  const cInputs = $nodes
-    .filter((n) => n.nodeType === "input")
-    .map((i) => `-i ${i.data.name}`)
-    .join(" ");
-
-  const cOutput = $nodes
-    .filter((n) => n.nodeType === "output")
-    .map((i) => `${i.data.name}`)
-    .join(" ");
-
-  const cFilters = $nodes
-    .filter((n) => n.nodeType === "filter")
-    .map((n) => n.data)
-    .map(makeFilterArgs)
-    .join(",");
-
-  let out = `ffmpeg ${cInputs}`;
-
-  if (cFilters) out += ` -filter_complex "${cFilters}"`;
-
-  out += ` ${cOutput}`;
-  return out;
-});
 
 export const inputs = derived(nodes, ($nodes) => {
   return $nodes.filter((n) => n.nodeType === "input").map((n) => n.data);
 });
 
-export const filters = derived(nodes, ($nodes) => {
-  return $nodes.filter((n) => n.nodeType === "filter").map((n) => n.data);
-});
-
-export const output = derived(nodes, ($nodes) => {
-  return $nodes.filter((n) => n.nodeType === "output").map((n) => n.data);
-});
-
 nodes.subscribe(($nodes) => {
   const isAuto = get(auto);
   if (!isAuto) return;
@@ -384,8 +249,6 @@ export function addNode(data, type) {
 		}
     return _nodes;
   });
-
-
 }
 
 export function removeNode(id) {
@@ -394,14 +257,12 @@ export function removeNode(id) {
     _nodes.splice(index, 1);
     return _nodes;
   });
+}
 
+export function removeEdge(id) {
 	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);
-      }
-    }
+    const index = _edges.findIndex((e) => e.id === id);
+    _edges.splice(index, 1);
     return _edges;
 	});
 }