diff --git a/examples/react-ssr/.gitignore b/examples/astro-xyflow/.gitignore similarity index 100% rename from examples/react-ssr/.gitignore rename to examples/astro-xyflow/.gitignore diff --git a/examples/react-ssr/.vscode/extensions.json b/examples/astro-xyflow/.vscode/extensions.json similarity index 100% rename from examples/react-ssr/.vscode/extensions.json rename to examples/astro-xyflow/.vscode/extensions.json diff --git a/examples/react-ssr/.vscode/launch.json b/examples/astro-xyflow/.vscode/launch.json similarity index 100% rename from examples/react-ssr/.vscode/launch.json rename to examples/astro-xyflow/.vscode/launch.json diff --git a/examples/react-ssr/README.md b/examples/astro-xyflow/README.md similarity index 100% rename from examples/react-ssr/README.md rename to examples/astro-xyflow/README.md diff --git a/examples/react-ssr/astro.config.mjs b/examples/astro-xyflow/astro.config.mjs similarity index 66% rename from examples/react-ssr/astro.config.mjs rename to examples/astro-xyflow/astro.config.mjs index 7986bcae..ffcf8fb7 100644 --- a/examples/react-ssr/astro.config.mjs +++ b/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()], }); diff --git a/examples/react-ssr/package.json b/examples/astro-xyflow/package.json similarity index 73% rename from examples/react-ssr/package.json rename to examples/astro-xyflow/package.json index 71793130..e5ced476 100644 --- a/examples/react-ssr/package.json +++ b/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" } -} \ No newline at end of file +} diff --git a/examples/react-ssr/public/favicon.svg b/examples/astro-xyflow/public/favicon.svg similarity index 100% rename from examples/react-ssr/public/favicon.svg rename to examples/astro-xyflow/public/favicon.svg diff --git a/examples/react-ssr/src/components/Flow/CustomNode.tsx b/examples/astro-xyflow/src/components/ReactFlowExample/CustomNode.tsx similarity index 100% rename from examples/react-ssr/src/components/Flow/CustomNode.tsx rename to examples/astro-xyflow/src/components/ReactFlowExample/CustomNode.tsx diff --git a/examples/astro-xyflow/src/components/ReactFlowExample/index.tsx b/examples/astro-xyflow/src/components/ReactFlowExample/index.tsx new file mode 100644 index 00000000..1bad3481 --- /dev/null +++ b/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 ( +