Merge branch xyflow into svelte-flow-connection-line

examples/react/src/examples/Overview/index.tsx

@@ -223,7 +223,7 @@ const OverviewFlow = () => {
       onEdgeMouseLeave={onEdgeMouseLeave}
       onEdgeDoubleClick={onEdgeDoubleClick}
       fitView
-      fitViewOptions={{ padding: 0.2 }}
+      fitViewOptions={{ padding: 0.1 /*nodes: [{ id: '1' }]*/ }}
       attributionPosition="top-right"
       maxZoom={Infinity}
       onNodesDelete={onNodesDelete}

examples/svelte/src/routes/overview/+page.svelte

@@ -131,8 +131,12 @@
 	{nodeTypes}
 	{edgeTypes}
 	fitView
-	minZoom={0.1}
-	maxZoom={2.5}
+	fitViewOptions={{
+		padding: 0.1,
+		nodes: [{ id: '1' }, { id: '2' }, { id: '3' }]
+	}}
+	minZoom={0}
+	maxZoom={Infinity}
 	selectionMode={SelectionMode.Full}
 	initialViewport={{ x: 100, y: 100, zoom: 2 }}
 	snapGrid={[25, 25]}

examples/svelte/src/routes/validation/+page.svelte

@@ -32,9 +32,21 @@
 	const edges = writable([]);
 
 	const isValidConnection: IsValidConnection = (connection) => connection.target === 'B';
+
+	const defaultEdgeOptions = {
+		animated: true
+	};
 </script>
 
-<SvelteFlow {nodes} {edges} fitView minZoom={0.1} maxZoom={2.5} {isValidConnection}>
+<SvelteFlow
+	{nodes}
+	{edges}
+	fitView
+	minZoom={0.1}
+	maxZoom={2.5}
+	{isValidConnection}
+	{defaultEdgeOptions}
+>
 	<Controls />
 	<Background variant={BackgroundVariant.Dots} />
 </SvelteFlow>