alighasami/xyflow
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Merge branch 'main' into refactor-testing

Browse Source
This commit is contained in:
Peter
2023-11-02 11:37:00 +01:00
parent 9d386abb2a 351ba3c863
commit 57c5414061
74 changed files with 6234 additions and 2178 deletions
Download Patch File Download Diff File Expand all files Collapse all files

21
examples/astro-xyflow/.gitignore vendored Normal file
View File

@@ -0,0 +1,21 @@
# build output
dist/
# generated types
.astro/
# dependencies
node_modules/
# logs
npm-debug.log*
yarn-debug.log*
yarn-error.log*
pnpm-debug.log*
# environment variables
.env
.env.production
# macOS-specific files
.DS_Store

10
examples/astro-xyflow/README.md Normal file
View File

@@ -0,0 +1,10 @@
# Astro examples
Tiny app for testing React Flow and Svelte Flow with Astro.
## Start local dev server
```sh
pnpm dev
```

8
examples/astro-xyflow/astro.config.mjs Normal file
View File

@@ -0,0 +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(), svelte()],
});

25
examples/astro-xyflow/package.json Normal file
View File

@@ -0,0 +1,25 @@
{
"name": "astro",
"type": "module",
"private": true,
"version": "0.0.1",
"scripts": {
"dev": "astro dev",
"start": "astro dev",
"build": "astro build",
"preview": "astro preview",
"astro": "astro"
},
"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",
"svelte": "^4.2.1"
}
}

0
examples/astro-xyflow/public/.gitkeep Normal file
View File

32
examples/astro-xyflow/src/components/ReactFlowExample/CustomNode.tsx Normal file
View File

@@ -0,0 +1,32 @@
import { memo, type FC, type CSSProperties } from 'react';
import { Handle, Position, type NodeProps } from '@xyflow/react';
const sourceHandleStyleA: CSSProperties = { left: 50 };
const sourceHandleStyleB: CSSProperties = {
right: 50,
left: 'auto',
};
const CustomNode: FC<NodeProps> = ({ data, xPos, yPos }) => {
return (
<>
<Handle type="target" position={Position.Top} />
<div>
<div>
Label: <strong>{data.label}</strong>
</div>
<div>
Position:{' '}
<strong>
{xPos.toFixed(2)},{yPos.toFixed(2)}
</strong>
</div>
</div>
<Handle type="source" position={Position.Bottom} id="a" style={sourceHandleStyleA} />
<Handle type="source" position={Position.Bottom} id="b" style={sourceHandleStyleB} />
</>
);
};
export default memo(CustomNode);

130
examples/astro-xyflow/src/components/ReactFlowExample/index.tsx Normal file
View File

@@ -0,0 +1,130 @@
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 nodeSize = {
width: 100,
height: 40,
};
const initialNodes: Node[] = [
{
id: '1',
type: 'input',
data: { label: 'Node 1' },
position: { x: 250, y: 5 },
size: nodeSize,
handles: [
{
type: 'source',
position: Position.Bottom,
x: nodeSize.width * 0.5,
y: nodeSize.height,
},
],
},
{
id: '2',
data: { label: 'Node 2' },
position: { x: 100, y: 100 },
size: nodeSize,
handles: [
{
type: 'source',
position: Position.Bottom,
x: nodeSize.width * 0.5,
y: nodeSize.height,
width: 1,
height: 1,
},
{
type: 'target',
position: Position.Top,
x: nodeSize.width * 0.5,
y: 0,
width: 1,
height: 1,
},
],
},
{
id: '3',
data: { label: 'Node 3' },
position: { x: 400, y: 100 },
size: nodeSize,
handles: [
{
type: 'source',
position: Position.Bottom,
x: nodeSize.width * 0.5,
y: nodeSize.height,
width: 1,
height: 1,
},
{
type: 'target',
position: Position.Top,
x: nodeSize.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;

86
examples/astro-xyflow/src/components/SvelteFlowExample/index.svelte Normal file
View File

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

1
examples/astro-xyflow/src/env.d.ts vendored Normal file
View File

@@ -0,0 +1 @@
/// <reference types="astro/client" />

27
examples/astro-xyflow/src/pages/index.astro Normal file
View File

@@ -0,0 +1,27 @@
---
import ReactFlowApp from '../components/ReactFlowExample'
import SvelteFlowApp from '../components/SvelteFlowExample/index.svelte'
---
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width" />
<meta name="generator" content={Astro.generator} />
<title>Astro example for React Flow and Svelte Flow</title>
<style>
html, body {
margin:0;
font-family: sans-serif;
}
</style>
</head>
<body>
<h2>Svelte Flow</h2>
<SvelteFlowApp />
<h2>React Flow</h2>
<ReactFlowApp />
</body>
</html>

7
examples/astro-xyflow/tsconfig.json Normal file
View File

@@ -0,0 +1,7 @@
{
"extends": "astro/tsconfigs/strict",
"compilerOptions": {
"jsx": "react-jsx",
"jsxImportSource": "react"
}
}

3
examples/react/src/examples/DragNDrop/index.tsx
View File

@@ -66,7 +66,7 @@ const DnDFlow = () => {
return (
<div className={styles.dndflow}>
<ReactFlowProvider>
<ReactFlowProvider nodes={initialNodes} edges={[]}>
<div className={styles.wrapper}>
<ReactFlow
nodes={nodes}
@@ -77,7 +77,6 @@ const DnDFlow = () => {
onInit={onInit}
onDrop={onDrop}
onDragOver={onDragOver}
nodeOrigin={nodeOrigin}
>
<Controls />
</ReactFlow>

4
examples/react/src/examples/Stress/utils.ts
View File

@@ -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);

3
examples/react/src/examples/Subflow/index.tsx
View File

@@ -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

40
examples/svelte/src/routes/examples/customnode/+page.svelte
View File

@@ -23,28 +23,6 @@
const bgColor = writable('#1A192B');
const onChange: ChangeEventHandler<HTMLInputElement> = (event) => {
nodes.update((nds) =>
nds.map((node) => {
if (node.type !== 'colorNode') {
return node;
}
const color = (event.target as HTMLInputElement)?.value;
bgColor.set(color);
return {
...node,
data: {
...node.data,
color
}
};
})
);
};
const nodes = writable<Node[]>([
{
id: '1',
@@ -56,17 +34,9 @@
{
id: '2',
type: 'colorNode',
data: { onChange: onChange, color: $bgColor },
style: 'border: 1px solid #777; padding: 10px',
data: { colorStore: bgColor },
position: { x: 250, y: 50 }
},
{
id: '2a',
type: 'colorNode',
data: { onChange: onChange, color: $bgColor },
style: 'border: 1px solid #777; padding: 10px',
position: { x: 250, y: 520 }
},
{
id: '3',
type: 'output',
@@ -115,7 +85,7 @@
{nodes}
{edges}
{nodeTypes}
style="--bgcolor: {$bgColor}"
style="--background-color: {$bgColor}"
fitView
on:connect={onConnect}
>
@@ -123,9 +93,3 @@
<Background variant={BackgroundVariant.Dots} />
<MiniMap />
</SvelteFlow>
<style>
:global(.svelte-flow) {
background: var(--bgcolor);
}
</style>

45
examples/svelte/src/routes/examples/customnode/CustomNode.svelte
View File

@@ -1,21 +1,40 @@
<script lang="ts">
import type { Writable } from 'svelte/store';
import { Handle, Position, type NodeProps } from '@xyflow/svelte';
type $$Props = NodeProps;
export let data: { color: string; onChange: () => void } = { color: '#111', onChange: () => {} };
export let data: { colorStore: Writable<string> };
const { colorStore } = data;
</script>
<Handle type="target" position={Position.Left} on:connect />
<div>
Custom Color Picker Node: <strong>{data.color}</strong>
<div class="custom">
<Handle type="target" position={Position.Left} on:connect />
<div>
Custom Color Picker Node: <strong>{$colorStore}</strong>
</div>
<input
class="nodrag"
type="color"
on:input={(evt) => colorStore.set(evt.currentTarget.value)}
value={$colorStore}
/>
<Handle type="source" position={Position.Right} id="a" style="top: 20px;" on:connect />
<Handle
type="source"
position={Position.Right}
id="b"
style="top: auto; bottom: 10px;"
on:connect
/>
</div>
<input class="nodrag" type="color" on:input={data.onChange} value={data.color} />
<Handle type="source" position={Position.Right} id="a" style="top: 10px;" on:connect />
<Handle
type="source"
position={Position.Right}
id="b"
style="top: auto; bottom: 10px;"
on:connect
/>
<style>
.custom {
background-color: white;
padding: 10px;
border: 1px solid #777;
border-radius: 20px;
}
</style>

12
examples/svelte/src/routes/examples/usesvelteflow/Sidebar.svelte
View File

@@ -1,5 +1,5 @@
<script lang="ts">
import { useSvelteFlow } from '@xyflow/svelte';
import { useNodes, useSvelteFlow } from '@xyflow/svelte';
const {
zoomIn,
@@ -10,8 +10,10 @@
setViewport,
getViewport,
viewport,
nodes
toObject
} = useSvelteFlow();
const nodes = useNodes();
</script>
<aside>
@@ -23,6 +25,12 @@
<button on:click={() => setCenter(0, 0)}>setCenter 0, 0</button>
<button on:click={() => setViewport({ x: 100, y: 100, zoom: 2 })}>setViewport</button>
<button on:click={() => console.log(getViewport())}>getViewport</button>
<button
on:click={() => {
const { nodes, edges, viewport } = toObject();
console.log(nodes, edges, viewport);
}}>toObject</button
>
<div class="label">Nodes:</div>
{#each $nodes as node (node.id)}