chore(examples): cleanup

examples/astro-xyflow/astro.config.mjs

@@ -1,7 +1,8 @@
 import { defineConfig } from 'astro/config';
 import react from '@astrojs/react';
+import svelte from '@astrojs/svelte';
 
 // https://astro.build/config
 export default defineConfig({
-  integrations: [react()],
+  integrations: [react(), svelte()],
 });

examples/astro-xyflow/package.json

@@ -1,5 +1,5 @@
 {
-  "name": "react-ssr",
+  "name": "astro",
   "type": "module",
   "version": "0.0.1",
   "scripts": {
@@ -11,11 +11,14 @@
   },
   "dependencies": {
     "@astrojs/react": "^3.0.2",
+    "@astrojs/svelte": "^4.0.2",
     "@types/react": "^18.2.24",
     "@types/react-dom": "^18.2.8",
     "@xyflow/react": "workspace:^",
+    "@xyflow/svelte": "workspace:^",
     "astro": "^3.2.2",
     "react": "^18.2.0",
-    "react-dom": "^18.2.0"
+    "react-dom": "^18.2.0",
+    "svelte": "^4.2.1"
   }
-}
+}

examples/astro-xyflow/src/components/ReactFlowExample/index.tsx

@@ -0,0 +1,134 @@
+import { useCallback } from 'react';
+import {
+  ReactFlow,
+  addEdge,
+  useEdgesState,
+  useNodesState,
+  Background,
+  Controls,
+  type Connection,
+  type Edge,
+  type Node,
+  Position,
+} from '@xyflow/react';
+
+import CustomNode from './CustomNode';
+
+import '@xyflow/react/dist/style.css';
+
+const nodeDimensions = {
+  width: 100,
+  height: 40,
+};
+
+const handleSize = 1;
+
+const initialNodes: Node[] = [
+  {
+    id: '1',
+    type: 'input',
+    data: { label: 'Node 1' },
+    position: { x: 250, y: 5 },
+    dimensions: nodeDimensions,
+    handles: [
+      {
+        type: 'source',
+        position: Position.Bottom,
+        x: nodeDimensions.width * 0.5,
+        y: nodeDimensions.height,
+        width: 1,
+        height: 1,
+      },
+    ],
+  },
+  {
+    id: '2',
+    data: { label: 'Node 2' },
+    position: { x: 100, y: 100 },
+    dimensions: nodeDimensions,
+    handles: [
+      {
+        type: 'source',
+        position: Position.Bottom,
+        x: nodeDimensions.width * 0.5,
+        y: nodeDimensions.height,
+        width: 1,
+        height: 1,
+      },
+      {
+        type: 'target',
+        position: Position.Top,
+        x: nodeDimensions.width * 0.5,
+        y: 0,
+        width: 1,
+        height: 1,
+      },
+    ],
+  },
+  {
+    id: '3',
+    data: { label: 'Node 3' },
+    position: { x: 400, y: 100 },
+    dimensions: nodeDimensions,
+    handles: [
+      {
+        type: 'source',
+        position: Position.Bottom,
+        x: nodeDimensions.width * 0.5,
+        y: nodeDimensions.height,
+        width: 1,
+        height: 1,
+      },
+      {
+        type: 'target',
+        position: Position.Top,
+        x: nodeDimensions.width * 0.5,
+        y: 0,
+        width: 1,
+        height: 1,
+      },
+    ],
+  },
+  {
+    id: '4',
+    data: { label: 'Node 4' },
+    position: { x: 400, y: 200 },
+    type: 'custom',
+  },
+];
+
+const initialEdges: Edge[] = [
+  { id: 'e1-2', source: '1', target: '2', animated: true },
+  { id: 'e1-3', source: '1', target: '3', animated: true },
+];
+
+const nodeTypes = {
+  custom: CustomNode,
+};
+
+function Flow() {
+  const [nodes, , onNodesChange] = useNodesState(initialNodes);
+  const [edges, setEdges, onEdgesChange] = useEdgesState(initialEdges);
+  const onConnect = useCallback((params: Connection | Edge) => setEdges((eds) => addEdge(params, eds)), [setEdges]);
+
+  return (
+    <div style={{ width: 700, height: 400 }}>
+      <ReactFlow
+        nodes={nodes}
+        onNodesChange={onNodesChange}
+        edges={edges}
+        onEdgesChange={onEdgesChange}
+        onConnect={onConnect}
+        nodeTypes={nodeTypes}
+        fitView
+        width={700}
+        height={400}
+      >
+        <Background />
+        <Controls />
+      </ReactFlow>
+    </div>
+  );
+}
+
+export default Flow;

examples/astro-xyflow/src/components/SvelteFlowExample/index.svelte

@@ -0,0 +1,46 @@
+<script lang="ts">
+  import { writable } from 'svelte/store';
+  import { SvelteFlow, Controls, Background, BackgroundVariant, Position } from '@xyflow/svelte';
+
+  import '@xyflow/svelte/dist/style.css';
+
+  const nodeDefaults = {
+    sourcePosition: Position.Right,
+    targetPosition: Position.Left,
+    dimensions: {
+      width: 100,
+      height: 40,
+    },
+    handles: [
+      { type: 'source', x: 100, y: 20, position: Position.Right, width: 1, height: 1 },
+      { type: 'target', x: 0, y: 20, position: Position.Left, width: 1, height: 1 },
+    ],
+  };
+
+  const nodes = writable([
+    {
+      id: '0',
+      position: { x: 0, y: 150 },
+      data: { label: 'Node 0' },
+      ...nodeDefaults,
+    },
+    { id: 'A', position: { x: 250, y: 0 }, data: { label: 'A' }, ...nodeDefaults },
+    { id: 'B', position: { x: 250, y: 150 }, data: { label: 'B' }, ...nodeDefaults },
+    { id: 'C', position: { x: 250, y: 300 }, data: { label: 'C' }, ...nodeDefaults },
+  ]);
+
+  const edges = writable([
+    { id: '0A', source: '0', target: 'A', animated: true },
+    { id: '0B', source: '0', target: 'B', animated: true },
+    { id: '0C', source: '0', target: 'C', animated: true },
+  ]);
+
+  const defaultEdgeOptions = {
+    animated: true,
+  };
+</script>
+
+<SvelteFlow {nodes} {edges} fitView {defaultEdgeOptions}>
+  <Controls />
+  <Background variant={BackgroundVariant.Dots} />
+</SvelteFlow>

examples/astro-xyflow/src/pages/index.astro

@@ -1,5 +1,6 @@
 ---
-import Flow from '../components/Flow' 
+import RF from '../components/ReactFlowExample' 
+import SF from '../components/SvelteFlowExample/index.svelte' 
 ---
 
 <html lang="en">
@@ -18,9 +19,14 @@ import Flow from '../components/Flow'
 		</style>
 	</head>
 	<body>
-		<h1>Astro</h1>
+		<h2>Svelte Flow</h2>
 		<div style="height: 400px">
-			<Flow  />
+			<SF />
+		</div>
+
+		<h2>React Flow</h2>
+		<div >
+			<RF />
 		</div>
 	</body>
 </html>

examples/react-ssr/src/components/Flow/index.tsx

@@ -1,71 +0,0 @@
-import { useCallback } from 'react';
-import {
-  ReactFlow,
-  addEdge,
-  useEdgesState,
-  useNodesState,
-  type Connection,
-  type Edge,
-  type Node,
-  type OnNodesChange,
-  ReactFlowProvider,
-} from '@xyflow/react';
-
-import CustomNode from './CustomNode';
-
-import '@xyflow/react/dist/style.css';
-
-const initialNodes: Node[] = [
-  {
-    id: '1',
-    type: 'input',
-    data: { label: 'Node 1' },
-    position: { x: 250, y: 5 },
-  },
-  {
-    id: '2',
-    data: { label: 'Node 2' },
-    position: { x: 100, y: 100 },
-  },
-  {
-    id: '3',
-    data: { label: 'Node 3' },
-    position: { x: 400, y: 100 },
-  },
-  {
-    id: '4',
-    data: { label: 'Node 4' },
-    position: { x: 400, y: 200 },
-    type: 'custom',
-  },
-];
-
-const initialEdges: Edge[] = [
-  { id: 'e1-2', source: '1', target: '2', animated: true },
-  { id: 'e1-3', source: '1', target: '3', animated: true },
-];
-
-const nodeTypes = {
-  custom: CustomNode,
-};
-
-function Flow() {
-  const [nodes, , onNodesChange] = useNodesState(initialNodes);
-  const [edges, setEdges, onEdgesChange] = useEdgesState(initialEdges);
-  const onConnect = useCallback((params: Connection | Edge) => setEdges((eds) => addEdge(params, eds)), [setEdges]);
-
-  return (
-    // <ReactFlowProvider nodes={nodes} edges={edges}>
-    <ReactFlow
-      nodes={nodes}
-      onNodesChange={onNodesChange}
-      edges={edges}
-      onEdgesChange={onEdgesChange}
-      onConnect={onConnect}
-      nodeTypes={nodeTypes}
-    />
-    // </ReactFlowProvider>
-  );
-}
-
-export default Flow;

examples/react/src/examples/Stress/utils.ts

@@ -17,9 +17,11 @@ export function getNodesAndEdges(xElements = 10, yElements = 10): ElementsCollec
       const data = { label: `Node ${nodeId}` };
       const node = {
         id: nodeId.toString(),
-        style: { width: 50, fontSize: 11 },
+        style: { width: 50, height: 30, fontSize: 11 },
         data,
         position,
+        width: 50,
+        height: 30,
       };
       initialNodes.push(node);
 

examples/react/src/examples/Subflow/index.tsx

@@ -204,9 +204,6 @@ const Subflow = () => {
       onNodeDrag={onNodeDrag}
       onNodeDragStop={onNodeDragStop}
       className="react-flow-basic-example"
-      defaultViewport={defaultViewport}
-      minZoom={0.2}
-      maxZoom={4}
       onlyRenderVisibleElements={false}
       nodeTypes={nodeTypes}
       fitView