many improvements

src/FitComp.svelte

@@ -0,0 +1,12 @@
+<script>
+  import { useSvelteFlow } from "@xyflow/svelte";
+	import {nodes, auto} from './stores.js';
+
+  const { zoomIn, zoomOut, setZoom, fitView, setCenter, setViewport, getViewport, viewport } =
+    useSvelteFlow();
+
+	nodes.subscribe((n) => {
+		if ($auto) fitView();
+	});
+</script>
+<button>Fit</button>

src/Graph.svelte

@@ -1,7 +1,14 @@
 <script>
-  import { nodes, edges, auto} from "./stores.js";
-  import { SvelteFlow, Controls, Background, BackgroundVariant, MiniMap } from "@xyflow/svelte";
+  import { nodes, edges, auto } from "./stores.js";
+  import {
+    SvelteFlowProvider,
+    SvelteFlow,
+    Controls,
+    Background,
+    BackgroundVariant,
+  } from "@xyflow/svelte";
   import Node from "./nodes/Node.svelte";
+  import FitComp from "./FitComp.svelte";
 
   const nodeTypes = {
     ffmpeg: Node,
@@ -22,25 +29,21 @@
   function onEdgeUpdateEnd(e) {
     console.log(e);
   }
-	function onMoveStart(e) {
-	console.log(e);
-	}
-	function onConnect(e){
-		console.log('connect', e);
-	}
+  function onMoveStart(e) {
+    console.log(e);
+  }
+  function onConnect(e) {
+    console.log("connect", e);
+  }
 </script>
 
-
-<label for="auto"><input id="auto" type="checkbox" bind:checked={$auto} />Automatic Layout</label>
-<div style="width: 900px; height: 500px;">
-  <SvelteFlow
-    {nodeTypes}
-    {nodes}
-    {edges}
-		snapGrid={[10, 10]}
-    fitView
-  >
-    <Controls />
-    <Background variant={BackgroundVariant.Dots} />
-  </SvelteFlow>
-</div>
+<SvelteFlowProvider>
+	<FitComp/>
+  <label for="auto"><input id="auto" type="checkbox" bind:checked={$auto} />Automatic Layout</label>
+  <div style="width: 900px; height: 500px;">
+    <SvelteFlow {nodeTypes} {nodes} {edges} snapGrid={[10, 10]} fitView>
+      <Controls />
+      <Background variant={BackgroundVariant.Dots} />
+    </SvelteFlow>
+  </div>
+</SvelteFlowProvider>

src/app.css

@@ -108,3 +108,7 @@ input[type="range"]:focus::-moz-range-thumb {
 	border-radius: 0px !important;
 	border: 1px solid var(--b1) !important;
 }
+
+.svelte-flow__attribution {
+	display: none !important;
+}

src/stores.js

@@ -275,11 +275,11 @@ nodes.subscribe(($nodes) => {
     for (let i = 0; i < n1.data.outputs.length; i++) {
       const edgeType = n1.data.outputs[i];
       for (let j = 0; j < rest.length; j++) {
-				let found = false;
+        let found = false;
         const n2 = rest[j];
         for (let k = 0; k < n2.data.inputs.length; k++) {
-					const targetEdgeType = n2.data.inputs[k];
-          if (edgeType === targetEdgeType && !filled.includes(n2.id+k)) {
+          const targetEdgeType = n2.data.inputs[k];
+          if (edgeType === targetEdgeType && !filled.includes(n2.id + k)) {
             newEdges.push({
               id: uuidv4(),
               type: "default",
@@ -288,12 +288,12 @@ nodes.subscribe(($nodes) => {
               sourceHandle: edgeType + "_" + i,
               targetHandle: edgeType + "_" + k,
             });
-            filled.push(n2.id+ k);
-						found = true;
+            filled.push(n2.id + k);
+            found = true;
             break;
           }
         }
-				if (found) break;
+        if (found) break;
       }
     }
     const nextNode = rest.shift();
@@ -330,25 +330,6 @@ export function addNode(data, type) {
     }
   }
 
-  let x = 0;
-  let y = 0;
-
-  const w = 100;
-  const h = 50;
-  const margin = 10;
-
-  let existing = get(nodes);
-
-  if (type === "input") {
-    const inps = existing.filter((n) => n.nodeType === "input");
-    y = inps.length * h;
-  } else if (type === "filter") {
-    const flts = existing.filter((n) => n.nodeType === "filter");
-    x = (flts.length + 1) * w;
-  } else if (type === "output") {
-    x = 500;
-  }
-
   data.inputs = ins;
   data.outputs = outs;
 
@@ -357,28 +338,44 @@ export function addNode(data, type) {
     type: "ffmpeg",
     data: data,
     nodeType: type,
-    position: { x, y },
+    position: { x: 0, y: 0 },
   };
 
-  nodes.update((n) => {
-    n.push(node);
-    return n;
+  nodes.update((_nodes) => {
+    _nodes.push(node);
+
+    const isAuto = get(auto);
+
+    if (isAuto) {
+      const w = 100;
+      const h = 50;
+      const margin = 10;
+      let prev = null;
+
+      for (let n of _nodes) {
+        if (n.nodeType === "input") {
+          n.position = { x: 0, y: prev ? prev.position.y + h + margin : 0 };
+          prev = n;
+        }
+      }
+
+      for (let n of _nodes) {
+        if (n.nodeType === "filter") {
+					let _w = prev && prev.width ? prev.width : w;
+          n.position = { x: prev ? prev.position.x + _w + margin : 0, y: -30 };
+          prev = n;
+        }
+      }
+
+      for (let n of _nodes) {
+        if (n.nodeType === "output") {
+					let _w = prev && prev.width ? prev.width : w;
+          n.position = { x: prev ? prev.position.x + _w + margin : 0, y: 0 };
+        }
+      }
+    }
+    return _nodes;
   });
-
-  //autolayout();
-
-  // edges.update((_edges) => {
-  // const target = existing[existing.length - 2];
-  // if (!target) return _edges;
-  //   const newEdge = {
-  //     id: uuidv4(),
-  //     type: "default",
-  //     source: target.id,
-  //     target: node.id,
-  //   };
-  //   _edges.push(newEdge);
-  //   return _edges;
-  // });
 }
 
 export function removeNode(id) {