ffmpeg-explorer/src/Graph.svelte

<script>
  import { nodes, edges} from "./stores.js";
  import { SvelteFlow, Controls, Background, BackgroundVariant, MiniMap } from "@xyflow/svelte";
  import Node from "./nodes/Node.svelte";

  const nodeTypes = {
    ffmpeg: Node,
  };

  const defaultEdgeOptions = {
    deletable: true,
  };

  function onEdgeUpdate(e) {
    console.log(e);
  }

  function onEdgeUpdateStart(e) {
    console.log(e);
  }

  function onEdgeUpdateEnd(e) {
    console.log(e);
  }
	function onMoveStart(e) {
	console.log(e);
	}
	function onConnect(e){
		console.log('connect', e);
	}
</script>


<div style="width: 900px; height: 500px;">
  <SvelteFlow
    {nodeTypes}
    {nodes}
    {edges}
		snapGrid={[10, 10]}
    fitView
  >
    <Controls />
    <Background variant={BackgroundVariant.Dots} />
  </SvelteFlow>
</div>