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

chore(examples): move examples to demo folder

Browse Source
This commit is contained in:
Christopher Möller
2022-07-19 15:12:37 +02:00
parent 97a9d0440f
commit 6733076ab4
86 changed files with 10840 additions and 4710 deletions
Download Patch File Download Diff File Expand all files Collapse all files

0
packages/core/example/.gitignore → examples/demo/.gitignore vendored
View File

0
packages/core/example/README.md → examples/demo/README.md
View File

0
packages/core/example/package-lock.json → examples/demo/package-lock.json generated
View File

9
packages/core/example/package.json → examples/demo/package.json
View File

@@ -3,11 +3,11 @@
"version": "0.1.0",
"private": true,
"dependencies": {
"@react-flow/core": "11.0.0",
"dagre": "^0.8.5",
"localforage": "^1.10.0",
"react": "file:../node_modules/react",
"react-dom": "file:../node_modules/react-dom",
"react-flow-renderer": "file:../",
"react": "^18.2.0",
"react-dom": "^18.2.0",
"react-router-dom": "^6.3.0",
"react-scripts": "5.0.1",
"typescript": "^4.7.4"
@@ -36,8 +36,7 @@
"devDependencies": {
"@types/dagre": "^0.7.47",
"@types/localforage": "0.0.34",
"@types/react": "file:../node_modules/@types/react",
"@types/react-dom": "file:../node_modules/@types/react-dom",
"@types/react-dom": "^18.0.6",
"@types/react-router-dom": "^5.3.3"
}
}

0
packages/core/example/public/_redirects → examples/demo/public/_redirects
View File

0
packages/core/example/public/index.html → examples/demo/public/index.html
View File

0
packages/core/example/public/robots.txt → examples/demo/public/robots.txt
View File

36
packages/core/example/src/Basic/index.tsx → examples/demo/src/Basic/index.tsx
View File

@@ -7,17 +7,39 @@ import ReactFlow, {
Node,
Edge,
useReactFlow,
} from 'react-flow-renderer';
} from '@react-flow/core';
const onNodeDrag = (_: MouseEvent, node: Node) => console.log('drag', node);
const onNodeDragStop = (_: MouseEvent, node: Node) => console.log('drag stop', node);
const onNodeDragStop = (_: MouseEvent, node: Node) =>
console.log('drag stop', node);
const onNodeClick = (_: MouseEvent, node: Node) => console.log('click', node);
const initialNodes: Node[] = [
{ id: '1', type: 'input', data: { label: 'Node 1' }, position: { x: 250, y: 5 }, className: 'light' },
{ id: '2', data: { label: 'Node 2' }, position: { x: 100, y: 100 }, className: 'light' },
{ id: '3', data: { label: 'Node 3' }, position: { x: 400, y: 100 }, className: 'light' },
{ id: '4', data: { label: 'Node 4' }, position: { x: 400, y: 200 }, className: 'light' },
{
id: '1',
type: 'input',
data: { label: 'Node 1' },
position: { x: 250, y: 5 },
className: 'light',
},
{
id: '2',
data: { label: 'Node 2' },
position: { x: 100, y: 100 },
className: 'light',
},
{
id: '3',
data: { label: 'Node 3' },
position: { x: 400, y: 100 },
className: 'light',
},
{
id: '4',
data: { label: 'Node 4' },
position: { x: 400, y: 200 },
className: 'light',
},
];
const initialEdges: Edge[] = [
@@ -63,7 +85,7 @@ const BasicFlow = () => {
onNodeClick={onNodeClick}
onNodeDragStop={onNodeDragStop}
onNodeDrag={onNodeDrag}
className="react-flow-basic-example"
className='react-flow-basic-example'
minZoom={0.2}
maxZoom={4}
fitView

31
packages/core/example/src/ControlledUncontrolled/index.tsx → examples/demo/src/ControlledUncontrolled/index.tsx
View File

@@ -7,13 +7,34 @@ import ReactFlow, {
ReactFlowProvider,
useNodesState,
useEdgesState,
} from 'react-flow-renderer';
} from '@react-flow/core';
const defaultNodes: Node[] = [
{ id: '1', type: 'input', data: { label: 'Node 1' }, position: { x: 250, y: 5 }, className: 'light' },
{ id: '2', data: { label: 'Node 2' }, position: { x: 100, y: 100 }, className: 'light' },
{ id: '3', data: { label: 'Node 3' }, position: { x: 400, y: 100 }, className: 'light' },
{ id: '4', data: { label: 'Node 4' }, position: { x: 400, y: 200 }, className: 'light' },
{
id: '1',
type: 'input',
data: { label: 'Node 1' },
position: { x: 250, y: 5 },
className: 'light',
},
{
id: '2',
data: { label: 'Node 2' },
position: { x: 100, y: 100 },
className: 'light',
},
{
id: '3',
data: { label: 'Node 3' },
position: { x: 400, y: 100 },
className: 'light',
},
{
id: '4',
data: { label: 'Node 4' },
position: { x: 400, y: 200 },
className: 'light',
},
];
const defaultEdges: Edge[] = [

31
examples/demo/src/CustomConnectionLine/ConnectionLine.tsx Normal file
View File

@@ -0,0 +1,31 @@
import React, { FC } from 'react';
import { ConnectionLineComponentProps } from '@react-flow/core';
const ConnectionLine: FC<ConnectionLineComponentProps> = ({
sourceX,
sourceY,
targetX,
targetY,
}) => {
return (
<g>
<path
fill='none'
stroke='#222'
strokeWidth={1.5}
className='animated'
d={`M${sourceX},${sourceY} C ${sourceX} ${targetY} ${sourceX} ${targetY} ${targetX},${targetY}`}
/>
<circle
cx={targetX}
cy={targetY}
fill='#fff'
r={3}
stroke='#222'
strokeWidth={1.5}
/>
</g>
);
};
export default ConnectionLine;

16
packages/core/example/src/CustomConnectionLine/index.tsx → examples/demo/src/CustomConnectionLine/index.tsx
View File

@@ -8,17 +8,27 @@ import ReactFlow, {
Edge,
useNodesState,
useEdgesState,
} from 'react-flow-renderer';
} from '@react-flow/core';
import ConnectionLine from './ConnectionLine';
const initialNodes: Node[] = [{ id: '1', type: 'default', data: { label: 'Node 1' }, position: { x: 250, y: 5 } }];
const initialNodes: Node[] = [
{
id: '1',
type: 'default',
data: { label: 'Node 1' },
position: { x: 250, y: 5 },
},
];
const initialEdges: Edge[] = [];
const ConnectionLineFlow = () => {
const [nodes, , onNodesChange] = useNodesState(initialNodes);
const [edges, setEdges, onEdgesChange] = useEdgesState(initialEdges);
const onConnect = useCallback((params: Connection | Edge) => setEdges((eds) => addEdge(params, eds)), [setEdges]);
const onConnect = useCallback(
(params: Connection | Edge) => setEdges((eds) => addEdge(params, eds)),
[setEdges]
);
return (
<ReactFlow

61
examples/demo/src/CustomNode/ColorSelectorNode.tsx Normal file
View File

@@ -0,0 +1,61 @@
import React, { memo, FC, CSSProperties } from 'react';
import {
Handle,
Position,
NodeProps,
Connection,
Edge,
} from '@react-flow/core';
const targetHandleStyle: CSSProperties = { background: '#555' };
const sourceHandleStyleA: CSSProperties = { ...targetHandleStyle, top: 10 };
const sourceHandleStyleB: CSSProperties = {
...targetHandleStyle,
bottom: 10,
top: 'auto',
};
const onConnect = (params: Connection | Edge) =>
console.log('handle onConnect', params);
const ColorSelectorNode: FC<NodeProps> = ({ data, isConnectable }) => {
return (
<>
<Handle
type='target'
position={Position.Left}
style={targetHandleStyle}
onConnect={onConnect}
/>
<div>
Custom Color Picker Node: <strong>{data.color}</strong>
</div>
<input
className='nodrag'
type='color'
onChange={data.onChange}
defaultValue={data.color}
/>
<Handle
type='source'
position={Position.Right}
id='a'
style={sourceHandleStyleA}
isConnectable={isConnectable}
onMouseDown={(e) => {
console.log('You trigger mousedown event', e);
}}
/>
<Handle
type='source'
position={Position.Right}
id='b'
style={sourceHandleStyleB}
isConnectable={isConnectable}
/>
</>
);
};
export default memo(ColorSelectorNode);

35
packages/core/example/src/CustomNode/index.tsx → examples/demo/src/CustomNode/index.tsx
View File

@@ -12,7 +12,7 @@ import ReactFlow, {
Connection,
useNodesState,
useEdgesState,
} from 'react-flow-renderer';
} from '@react-flow/core';
import ColorSelectorNode from './ColorSelectorNode';
@@ -20,7 +20,8 @@ const onInit = (reactFlowInstance: ReactFlowInstance) => {
console.log('flow loaded:', reactFlowInstance);
reactFlowInstance.fitView();
};
const onNodeDragStop = (_: MouseEvent, node: Node) => console.log('drag stop', node);
const onNodeDragStop = (_: MouseEvent, node: Node) =>
console.log('drag stop', node);
const onNodeClick = (_: MouseEvent, node: Node) => console.log('click', node);
const initBgColor = '#1A192B';
@@ -93,14 +94,36 @@ const CustomNodeFlow = () => {
]);
setEdges([
{ id: 'e1-2', source: '1', target: '2', animated: true, style: { stroke: '#fff' } },
{ id: 'e2a-3', source: '2', sourceHandle: 'a', target: '3', animated: true, style: { stroke: '#fff' } },
{ id: 'e2b-4', source: '2', sourceHandle: 'b', target: '4', animated: true, style: { stroke: '#fff' } },
{
id: 'e1-2',
source: '1',
target: '2',
animated: true,
style: { stroke: '#fff' },
},
{
id: 'e2a-3',
source: '2',
sourceHandle: 'a',
target: '3',
animated: true,
style: { stroke: '#fff' },
},
{
id: 'e2b-4',
source: '2',
sourceHandle: 'b',
target: '4',
animated: true,
style: { stroke: '#fff' },
},
]);
}, []);
const onConnect = (connection: Connection) =>
setEdges((eds) => addEdge({ ...connection, animated: true, style: { stroke: '#fff' } }, eds));
setEdges((eds) =>
addEdge({ ...connection, animated: true, style: { stroke: '#fff' } }, eds)
);
return (
<ReactFlow

38
packages/core/example/src/DefaultNodes/index.tsx → examples/demo/src/DefaultNodes/index.tsx
View File

@@ -5,13 +5,34 @@ import ReactFlow, {
Node,
Edge,
ReactFlowProvider,
} from 'react-flow-renderer';
} from '@react-flow/core';
const defaultNodes: Node[] = [
{ id: '1', type: 'input', data: { label: 'Node 1' }, position: { x: 250, y: 5 }, className: 'light' },
{ id: '2', data: { label: 'Node 2' }, position: { x: 100, y: 100 }, className: 'light' },
{ id: '3', data: { label: 'Node 3' }, position: { x: 400, y: 100 }, className: 'light' },
{ id: '4', data: { label: 'Node 4' }, position: { x: 400, y: 200 }, className: 'light' },
{
id: '1',
type: 'input',
data: { label: 'Node 1' },
position: { x: 250, y: 5 },
className: 'light',
},
{
id: '2',
data: { label: 'Node 2' },
position: { x: 100, y: 100 },
className: 'light',
},
{
id: '3',
data: { label: 'Node 3' },
position: { x: 400, y: 100 },
className: 'light',
},
{
id: '4',
data: { label: 'Node 4' },
position: { x: 400, y: 200 },
className: 'light',
},
];
const defaultEdges: Edge[] = [
@@ -55,7 +76,12 @@ const DefaultNodes = () => {
};
return (
<ReactFlow defaultNodes={defaultNodes} defaultEdges={defaultEdges} defaultEdgeOptions={defaultEdgeOptions} fitView>
<ReactFlow
defaultNodes={defaultNodes}
defaultEdges={defaultEdges}
defaultEdgeOptions={defaultEdgeOptions}
fitView
>
<Background variant={BackgroundVariant.Lines} />
<div style={{ position: 'absolute', right: 10, top: 10, zIndex: 4 }}>

18
packages/core/example/src/DragHandle/DragHandleNode.tsx → examples/demo/src/DragHandle/DragHandleNode.tsx
View File

@@ -1,8 +1,15 @@
import { memo, FC } from 'react';
import { Handle, Position, NodeProps, Connection, Edge } from 'react-flow-renderer';
import {
Handle,
Position,
NodeProps,
Connection,
Edge,
} from '@react-flow/core';
const onConnect = (params: Connection | Edge) => console.log('handle onConnect', params);
const onConnect = (params: Connection | Edge) =>
console.log('handle onConnect', params);
const labelStyle = {
display: 'flex',
@@ -21,11 +28,12 @@ const dragHandleStyle = {
const ColorSelectorNode: FC<NodeProps> = () => {
return (
<>
<Handle type="target" position={Position.Left} onConnect={onConnect} />
<Handle type='target' position={Position.Left} onConnect={onConnect} />
<div style={labelStyle}>
Only draggable here → <span className="custom-drag-handle" style={dragHandleStyle} />
Only draggable here →{' '}
<span className='custom-drag-handle' style={dragHandleStyle} />
</div>
<Handle type="source" position={Position.Right} />
<Handle type='source' position={Position.Right} />
</>
);
};

7
packages/core/example/src/DragHandle/index.tsx → examples/demo/src/DragHandle/index.tsx
View File

@@ -1,5 +1,10 @@
import { MouseEvent } from 'react';
import ReactFlow, { Node, Edge, useNodesState, useEdgesState } from 'react-flow-renderer';
import ReactFlow, {
Node,
Edge,
useNodesState,
useEdgesState,
} from '@react-flow/core';
import DragHandleNode from './DragHandleNode';

0
packages/core/example/src/DragNDrop/Sidebar.tsx → examples/demo/src/DragNDrop/Sidebar.tsx
View File

0
packages/core/example/src/DragNDrop/dnd.css → examples/demo/src/DragNDrop/dnd.css
View File

26
packages/core/example/src/DragNDrop/index.tsx → examples/demo/src/DragNDrop/index.tsx
View File

@@ -9,13 +9,20 @@ import ReactFlow, {
Node,
useNodesState,
useEdgesState,
} from 'react-flow-renderer';
} from '@react-flow/core';
import Sidebar from './Sidebar';
import './dnd.css';
const initialNodes: Node[] = [{ id: '1', type: 'input', data: { label: 'input node' }, position: { x: 250, y: 5 } }];
const initialNodes: Node[] = [
{
id: '1',
type: 'input',
data: { label: 'input node' },
position: { x: 250, y: 5 },
},
];
const onDragOver = (event: DragEvent) => {
event.preventDefault();
@@ -26,11 +33,13 @@ let id = 0;
const getId = () => `dndnode_${id++}`;
const DnDFlow = () => {
const [reactFlowInstance, setReactFlowInstance] = useState<ReactFlowInstance>();
const [reactFlowInstance, setReactFlowInstance] =
useState<ReactFlowInstance>();
const [nodes, setNodes, onNodesChange] = useNodesState(initialNodes);
const [edges, setEdges, onEdgesChange] = useEdgesState([]);
const onConnect = (params: Connection | Edge) => setEdges((eds) => addEdge(params, eds));
const onConnect = (params: Connection | Edge) =>
setEdges((eds) => addEdge(params, eds));
const onInit = (rfi: ReactFlowInstance) => setReactFlowInstance(rfi);
const onDrop = (event: DragEvent) => {
@@ -38,7 +47,10 @@ const DnDFlow = () => {
if (reactFlowInstance) {
const type = event.dataTransfer.getData('application/reactflow');
const position = reactFlowInstance.project({ x: event.clientX, y: event.clientY - 40 });
const position = reactFlowInstance.project({
x: event.clientX,
y: event.clientY - 40,
});
const newNode: Node = {
id: getId(),
type,
@@ -51,9 +63,9 @@ const DnDFlow = () => {
};
return (
<div className="dndflow">
<div className='dndflow'>
<ReactFlowProvider>
<div className="reactflow-wrapper">
<div className='reactflow-wrapper'>
<ReactFlow
nodes={nodes}
edges={edges}

9
packages/core/example/src/EdgeTypes/index.tsx → examples/demo/src/EdgeTypes/index.tsx
View File

@@ -12,7 +12,7 @@ import ReactFlow, {
Edge,
useNodesState,
useEdgesState,
} from 'react-flow-renderer';
} from '@react-flow/core';
import { getElements } from './utils';
const onInit = (reactFlowInstance: ReactFlowInstance) => {
@@ -28,7 +28,8 @@ const deleteKeyCode = ['AltLeft+KeyD', 'Backspace'];
const EdgeTypesFlow = () => {
const [nodes, , onNodesChange] = useNodesState(initialNodes);
const [edges, setEdges, onEdgesChange] = useEdgesState(initialEdges);
const onConnect = (params: Connection | Edge) => setEdges((eds) => addEdge(params, eds));
const onConnect = (params: Connection | Edge) =>
setEdges((eds) => addEdge(params, eds));
return (
<ReactFlow
@@ -40,10 +41,10 @@ const EdgeTypesFlow = () => {
onConnect={onConnect}
minZoom={0.2}
zoomOnScroll={false}
selectionKeyCode="a+s"
selectionKeyCode='a+s'
multiSelectionKeyCode={multiSelectionKeyCode}
deleteKeyCode={deleteKeyCode}
zoomActivationKeyCode="z"
zoomActivationKeyCode='z'
>
<MiniMap />
<Controls />

19
packages/core/example/src/EdgeTypes/utils.ts → examples/demo/src/EdgeTypes/utils.ts
View File

@@ -1,4 +1,4 @@
import { Edge, Node, Position } from 'react-flow-renderer';
import { Edge, Node, Position } from '@react-flow/core';
const nodeWidth = 80;
const nodeGapWidth = nodeWidth * 2;
@@ -54,16 +54,27 @@ const getNodeId = (): string => (id++).toString();
export function getElements(): { nodes: Node[]; edges: Edge[] } {
const initialElements = { nodes: [] as Node[], edges: [] as Edge[] };
for (let sourceTargetIndex = 0; sourceTargetIndex < sourceTargetPositions.length; sourceTargetIndex++) {
for (
let sourceTargetIndex = 0;
sourceTargetIndex < sourceTargetPositions.length;
sourceTargetIndex++
) {
const currSourceTargetPos = sourceTargetPositions[sourceTargetIndex];
for (let edgeTypeIndex = 0; edgeTypeIndex < edgeTypes.length; edgeTypeIndex++) {
for (
let edgeTypeIndex = 0;
edgeTypeIndex < edgeTypes.length;
edgeTypeIndex++
) {
const currEdgeType = edgeTypes[edgeTypeIndex];
for (let offsetIndex = 0; offsetIndex < offsets.length; offsetIndex++) {
const currOffset = offsets[offsetIndex];
const style = { ...nodeStyle, background: nodeColors[sourceTargetIndex][edgeTypeIndex] };
const style = {
...nodeStyle,
background: nodeColors[sourceTargetIndex][edgeTypeIndex],
};
const sourcePosition = {
x: offsetIndex * nodeWidth * 4,
y: edgeTypeIndex * 300 + sourceTargetIndex * edgeTypes.length * 300,

40
examples/demo/src/Edges/CustomEdge.tsx Normal file
View File

@@ -0,0 +1,40 @@
import { FC } from 'react';
import { EdgeProps, getBezierPath } from '@react-flow/core';
const CustomEdge: FC<EdgeProps> = ({
id,
sourceX,
sourceY,
targetX,
targetY,
sourcePosition,
targetPosition,
data,
}) => {
const edgePath = getBezierPath({
sourceX,
sourceY,
sourcePosition,
targetX,
targetY,
targetPosition,
});
return (
<>
<path id={id} className='react-flow__edge-path' d={edgePath} />
<text>
<textPath
href={`#${id}`}
style={{ fontSize: '12px' }}
startOffset='50%'
textAnchor='middle'
>
{data.text}
</textPath>
</text>
</>
);
};
export default CustomEdge;

18
packages/core/example/src/Edges/CustomEdge2.tsx → examples/demo/src/Edges/CustomEdge2.tsx
View File

@@ -1,5 +1,10 @@
import { FC } from 'react';
import { EdgeProps, getBezierPath, EdgeText, getBezierEdgeCenter } from 'react-flow-renderer';
import {
EdgeProps,
getBezierPath,
EdgeText,
getBezierEdgeCenter,
} from '@react-flow/core';
const CustomEdge: FC<EdgeProps> = ({
id,
@@ -11,7 +16,14 @@ const CustomEdge: FC<EdgeProps> = ({
targetPosition,
data,
}) => {
const edgePath = getBezierPath({ sourceX, sourceY, sourcePosition, targetX, targetY, targetPosition });
const edgePath = getBezierPath({
sourceX,
sourceY,
sourcePosition,
targetX,
targetY,
targetPosition,
});
const [centerX, centerY] = getBezierEdgeCenter({
sourceX,
sourceY,
@@ -21,7 +33,7 @@ const CustomEdge: FC<EdgeProps> = ({
return (
<>
<path id={id} className="react-flow__edge-path" d={edgePath} />
<path id={id} className='react-flow__edge-path' d={edgePath} />
<EdgeText
x={centerX}
y={centerY}

100
packages/core/example/src/Edges/index.tsx → examples/demo/src/Edges/index.tsx
View File

@@ -12,21 +12,32 @@ import ReactFlow, {
ReactFlowInstance,
useEdgesState,
useNodesState,
} from 'react-flow-renderer';
} from '@react-flow/core';
import CustomEdge from './CustomEdge';
import CustomEdge2 from './CustomEdge2';
const onInit = (reactFlowInstance: ReactFlowInstance) => reactFlowInstance.fitView();
const onNodeDragStop = (_: MouseEvent, node: Node) => console.log('drag stop', node);
const onInit = (reactFlowInstance: ReactFlowInstance) =>
reactFlowInstance.fitView();
const onNodeDragStop = (_: MouseEvent, node: Node) =>
console.log('drag stop', node);
const onNodeClick = (_: MouseEvent, node: Node) => console.log('click', node);
const onEdgeClick = (_: MouseEvent, edge: Edge) => console.log('click', edge);
const onEdgeDoubleClick = (_: MouseEvent, edge: Edge) => console.log('dblclick', edge);
const onEdgeMouseEnter = (_: MouseEvent, edge: Edge) => console.log('enter', edge);
const onEdgeMouseMove = (_: MouseEvent, edge: Edge) => console.log('move', edge);
const onEdgeMouseLeave = (_: MouseEvent, edge: Edge) => console.log('leave', edge);
const onEdgeDoubleClick = (_: MouseEvent, edge: Edge) =>
console.log('dblclick', edge);
const onEdgeMouseEnter = (_: MouseEvent, edge: Edge) =>
console.log('enter', edge);
const onEdgeMouseMove = (_: MouseEvent, edge: Edge) =>
console.log('move', edge);
const onEdgeMouseLeave = (_: MouseEvent, edge: Edge) =>
console.log('leave', edge);
const initialNodes: Node[] = [
{ id: '1', type: 'input', data: { label: 'Input 1' }, position: { x: 250, y: 0 } },
{
id: '1',
type: 'input',
data: { label: 'Input 1' },
position: { x: 250, y: 0 },
},
{ id: '2', data: { label: 'Node 2' }, position: { x: 150, y: 100 } },
{ id: '2a', data: { label: 'Node 2a' }, position: { x: 0, y: 180 } },
{ id: '2b', data: { label: 'Node 2b' }, position: { x: -40, y: 300 } },
@@ -34,15 +45,47 @@ const initialNodes: Node[] = [
{ id: '4', data: { label: 'Node 4' }, position: { x: 400, y: 300 } },
{ id: '3a', data: { label: 'Node 3a' }, position: { x: 150, y: 300 } },
{ id: '5', data: { label: 'Node 5' }, position: { x: 250, y: 400 } },
{ id: '6', type: 'output', data: { label: 'Output 6' }, position: { x: 50, y: 550 } },
{ id: '7', type: 'output', data: { label: 'Output 7' }, position: { x: 250, y: 550 } },
{ id: '8', type: 'output', data: { label: 'Output 8' }, position: { x: 525, y: 600 } },
{ id: '9', type: 'output', data: { label: 'Output 9' }, position: { x: 675, y: 500 } },
{
id: '6',
type: 'output',
data: { label: 'Output 6' },
position: { x: 50, y: 550 },
},
{
id: '7',
type: 'output',
data: { label: 'Output 7' },
position: { x: 250, y: 550 },
},
{
id: '8',
type: 'output',
data: { label: 'Output 8' },
position: { x: 525, y: 600 },
},
{
id: '9',
type: 'output',
data: { label: 'Output 9' },
position: { x: 675, y: 500 },
},
];
const initialEdges: Edge[] = [
{ id: 'e1-2', source: '1', target: '2', label: 'bezier edge (default)', className: 'normal-edge' },
{ id: 'e2-2a', source: '2', target: '2a', type: 'smoothstep', label: 'smoothstep edge' },
{
id: 'e1-2',
source: '1',
target: '2',
label: 'bezier edge (default)',
className: 'normal-edge',
},
{
id: 'e2-2a',
source: '2',
target: '2a',
type: 'smoothstep',
label: 'smoothstep edge',
},
{
id: 'e2a-2b',
source: '2a',
@@ -51,9 +94,29 @@ const initialEdges: Edge[] = [
label: 'simple bezier edge',
},
{ id: 'e2-3', source: '2', target: '3', type: 'step', label: 'step edge' },
{ id: 'e3-4', source: '3', target: '4', type: 'straight', label: 'straight edge' },
{ id: 'e3-3a', source: '3', target: '3a', type: 'straight', label: 'label only edge', style: { stroke: 'none' } },
{ id: 'e3-5', source: '4', target: '5', animated: true, label: 'animated styled edge', style: { stroke: 'red' } },
{
id: 'e3-4',
source: '3',
target: '4',
type: 'straight',
label: 'straight edge',
},
{
id: 'e3-3a',
source: '3',
target: '3a',
type: 'straight',
label: 'label only edge',
style: { stroke: 'none' },
},
{
id: 'e3-5',
source: '4',
target: '5',
animated: true,
label: 'animated styled edge',
style: { stroke: 'red' },
},
{
id: 'e5-7',
source: '5',
@@ -121,7 +184,8 @@ const edgeTypes: EdgeTypes = {
const EdgesFlow = () => {
const [nodes, , onNodesChange] = useNodesState(initialNodes);
const [edges, setEdges, onEdgesChange] = useEdgesState(initialEdges);
const onConnect = (params: Connection | Edge) => setEdges((eds) => addEdge(params, eds));
const onConnect = (params: Connection | Edge) =>
setEdges((eds) => addEdge(params, eds));
return (
<ReactFlow

25
packages/core/example/src/Empty/index.tsx → examples/demo/src/Empty/index.tsx
View File

@@ -11,25 +11,36 @@ import ReactFlow, {
useNodesState,
useEdgesState,
ReactFlowInstance,
} from 'react-flow-renderer';
} from '@react-flow/core';
const onInit = (reactFlowInstance: ReactFlowInstance) => console.log('flow loaded:', reactFlowInstance);
const onInit = (reactFlowInstance: ReactFlowInstance) =>
console.log('flow loaded:', reactFlowInstance);
const onNodeClick = (_: MouseEvent, node: Node) => console.log('click', node);
const onNodeDragStop = (_: MouseEvent, node: Node) => console.log('drag stop', node);
const onNodeDragStop = (_: MouseEvent, node: Node) =>
console.log('drag stop', node);
const buttonStyle: CSSProperties = { position: 'absolute', left: 10, top: 10, zIndex: 4 };
const buttonStyle: CSSProperties = {
position: 'absolute',
left: 10,
top: 10,
zIndex: 4,
};
const EmptyFlow = () => {
const [nodes, setNodes, onNodesChange] = useNodesState([]);
const [edges, setEdges, onEdgesChange] = useEdgesState([]);
const onConnect = (params: Connection | Edge) => setEdges((els) => addEdge(params, els));
const onConnect = (params: Connection | Edge) =>
setEdges((els) => addEdge(params, els));
const addRandomNode = () => {
const nodeId = (nodes.length + 1).toString();
const newNode: Node = {
id: nodeId,
data: { label: `Node: ${nodeId}` },
position: { x: Math.random() * window.innerWidth, y: Math.random() * window.innerHeight },
position: {
x: Math.random() * window.innerWidth,
y: Math.random() * window.innerHeight,
},
};
setNodes((nds) => nds.concat(newNode));
};
@@ -49,7 +60,7 @@ const EmptyFlow = () => {
<Controls />
<Background variant={BackgroundVariant.Lines} />
<button type="button" onClick={addRandomNode} style={buttonStyle}>
<button type='button' onClick={addRandomNode} style={buttonStyle}>
add node
</button>
</ReactFlow>

23
packages/core/example/src/FloatingEdges/FloatingConnectionLine.tsx → examples/demo/src/FloatingEdges/FloatingConnectionLine.tsx
View File

@@ -1,5 +1,9 @@
import { FC } from 'react';
import { getBezierPath, ConnectionLineComponentProps, Node } from 'react-flow-renderer';
import {
getBezierPath,
ConnectionLineComponentProps,
Node,
} from '@react-flow/core';
import { getEdgeParams } from './utils';
@@ -33,8 +37,21 @@ const FloatingConnectionLine: FC<ConnectionLineComponentProps> = ({
return (
<g>
<path fill="none" stroke="#222" strokeWidth={1.5} className="animated" d={d} />
<circle cx={targetX} cy={targetY} fill="#fff" r={3} stroke="#222" strokeWidth={1.5} />
<path
fill='none'
stroke='#222'
strokeWidth={1.5}
className='animated'
d={d}
/>
<circle
cx={targetX}
cy={targetY}
fill='#fff'
r={3}
stroke='#222'
strokeWidth={1.5}
/>
</g>
);
};

31
packages/core/example/src/FloatingEdges/FloatingEdge.tsx → examples/demo/src/FloatingEdges/FloatingEdge.tsx
View File

@@ -1,5 +1,10 @@
import { FC, useMemo, CSSProperties } from 'react';
import { EdgeProps, useStore, getBezierPath, ReactFlowState } from 'react-flow-renderer';
import {
EdgeProps,
useStore,
getBezierPath,
ReactFlowState,
} from '@react-flow/core';
import { getEdgeParams } from './utils';
@@ -8,14 +13,23 @@ const nodeSelector = (s: ReactFlowState) => s.nodeInternals;
const FloatingEdge: FC<EdgeProps> = ({ id, source, target, style }) => {
const nodeInternals = useStore(nodeSelector);
const sourceNode = useMemo(() => nodeInternals.get(source), [source, nodeInternals]);
const targetNode = useMemo(() => nodeInternals.get(target), [target, nodeInternals]);
const sourceNode = useMemo(
() => nodeInternals.get(source),
[source, nodeInternals]
);
const targetNode = useMemo(
() => nodeInternals.get(target),
[target, nodeInternals]
);
if (!sourceNode || !targetNode) {
return null;
}
const { sx, sy, tx, ty, sourcePos, targetPos } = getEdgeParams(sourceNode, targetNode);
const { sx, sy, tx, ty, sourcePos, targetPos } = getEdgeParams(
sourceNode,
targetNode
);
const d = getBezierPath({
sourceX: sx,
@@ -27,8 +41,13 @@ const FloatingEdge: FC<EdgeProps> = ({ id, source, target, style }) => {
});
return (
<g className="react-flow__connection">
<path id={id} className="react-flow__edge-path" d={d} style={style as CSSProperties} />
<g className='react-flow__connection'>
<path
id={id}
className='react-flow__edge-path'
d={d}
style={style as CSSProperties}
/>
</g>
);
};

7
packages/core/example/src/FloatingEdges/index.tsx → examples/demo/src/FloatingEdges/index.tsx
View File

@@ -8,7 +8,7 @@ import ReactFlow, {
Connection,
useNodesState,
useEdgesState,
} from 'react-flow-renderer';
} from '@react-flow/core';
import './style.css';
@@ -16,7 +16,8 @@ import FloatingEdge from './FloatingEdge';
import FloatingConnectionLine from './FloatingConnectionLine';
import { createElements } from './utils';
const onInit = (reactFlowInstance: ReactFlowInstance) => reactFlowInstance.fitView();
const onInit = (reactFlowInstance: ReactFlowInstance) =>
reactFlowInstance.fitView();
const { nodes: initialNodes, edges: initialEdges } = createElements();
@@ -33,7 +34,7 @@ const FloatingEdges = () => {
}, []);
return (
<div className="floatingedges">
<div className='floatingedges'>
<ReactFlow
nodes={nodes}
edges={edges}

0
packages/core/example/src/FloatingEdges/style.css → examples/demo/src/FloatingEdges/style.css
View File

7
packages/core/example/src/FloatingEdges/utils.ts → examples/demo/src/FloatingEdges/utils.ts
View File

@@ -1,8 +1,11 @@
import { Position, XYPosition, Node, Edge } from 'react-flow-renderer';
import { Position, XYPosition, Node, Edge } from '@react-flow/core';
// this helper function returns the intersection point
// of the line between the center of the intersectionNode and the target node
function getNodeIntersection(intersectionNode: Node, targetNode: Node): XYPosition {
function getNodeIntersection(
intersectionNode: Node,
targetNode: Node
): XYPosition {
// https://math.stackexchange.com/questions/1724792/an-algorithm-for-finding-the-intersection-point-between-a-center-of-vision-and-a
const {

39
packages/core/example/src/Hidden/index.tsx → examples/demo/src/Hidden/index.tsx
View File

@@ -10,13 +10,34 @@ import ReactFlow, {
Node,
useNodesState,
useEdgesState,
} from 'react-flow-renderer';
} from '@react-flow/core';
const initialNodes: Node[] = [
{ id: '1', type: 'input', hidden: true, data: { label: 'Node 1' }, position: { x: 250, y: 5 } },
{ id: '2', hidden: true, data: { label: 'Node 2' }, position: { x: 100, y: 100 } },
{ id: '3', hidden: true, data: { label: 'Node 3' }, position: { x: 400, y: 100 } },
{ id: '4', hidden: true, data: { label: 'Node 4' }, position: { x: 400, y: 200 } },
{
id: '1',
type: 'input',
hidden: true,
data: { label: 'Node 1' },
position: { x: 250, y: 5 },
},
{
id: '2',
hidden: true,
data: { label: 'Node 2' },
position: { x: 100, y: 100 },
},
{
id: '3',
hidden: true,
data: { label: 'Node 3' },
position: { x: 400, y: 100 },
},
{
id: '4',
hidden: true,
data: { label: 'Node 4' },
position: { x: 400, y: 200 },
},
];
const initialEdges: Edge[] = [
@@ -64,14 +85,14 @@ const HiddenFlow = () => {
<div style={{ position: 'absolute', left: 10, top: 10, zIndex: 4 }}>
<div>
<label htmlFor="ishidden">
<label htmlFor='ishidden'>
isHidden
<input
id="ishidden"
type="checkbox"
id='ishidden'
type='checkbox'
checked={isHidden}
onChange={(event) => setIsHidden(event.target.checked)}
className="react-flow__ishidden"
className='react-flow__ishidden'
/>
</label>
</div>

144
packages/core/example/src/Interaction/index.tsx → examples/demo/src/Interaction/index.tsx
View File

@@ -10,10 +10,15 @@ import ReactFlow, {
Viewport,
useNodesState,
useEdgesState,
} from 'react-flow-renderer';
} from '@react-flow/core';
const initialNodes: Node[] = [
{ id: '1', type: 'input', data: { label: 'Node 1' }, position: { x: 250, y: 5 } },
{
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 } },
@@ -24,19 +29,27 @@ const initialEdges: Edge[] = [
{ id: 'e1-3', source: '1', target: '3' },
];
const onNodeDragStart = (_: ReactMouseEvent, node: Node) => console.log('drag start', node);
const onNodeDragStop = (_: ReactMouseEvent, node: Node) => console.log('drag stop', node);
const onNodeClick = (_: ReactMouseEvent, node: Node) => console.log('click', node);
const onEdgeClick = (_: ReactMouseEvent, edge: Edge) => console.log('click', edge);
const onPaneClick = (event: ReactMouseEvent) => console.log('onPaneClick', event);
const onNodeDragStart = (_: ReactMouseEvent, node: Node) =>
console.log('drag start', node);
const onNodeDragStop = (_: ReactMouseEvent, node: Node) =>
console.log('drag stop', node);
const onNodeClick = (_: ReactMouseEvent, node: Node) =>
console.log('click', node);
const onEdgeClick = (_: ReactMouseEvent, edge: Edge) =>
console.log('click', edge);
const onPaneClick = (event: ReactMouseEvent) =>
console.log('onPaneClick', event);
const onPaneScroll = (event?: WheelEvent) => console.log('onPaneScroll', event);
const onPaneContextMenu = (event: ReactMouseEvent) => console.log('onPaneContextMenu', event);
const onMoveEnd = (_: TouchEvent | MouseEvent, viewport: Viewport) => console.log('onMoveEnd', viewport);
const onPaneContextMenu = (event: ReactMouseEvent) =>
console.log('onPaneContextMenu', event);
const onMoveEnd = (_: TouchEvent | MouseEvent, viewport: Viewport) =>
console.log('onMoveEnd', viewport);
const InteractionFlow = () => {
const [nodes, , onNodesChange] = useNodesState(initialNodes);
const [edges, setEdges, onEdgesChange] = useEdgesState(initialEdges);
const onConnect = (params: Connection | Edge) => setEdges((els) => addEdge(params, els));
const onConnect = (params: Connection | Edge) =>
setEdges((els) => addEdge(params, els));
const [isSelectable, setIsSelectable] = useState<boolean>(false);
const [isDraggable, setIsDraggable] = useState<boolean>(false);
@@ -44,12 +57,15 @@ const InteractionFlow = () => {
const [zoomOnScroll, setZoomOnScroll] = useState<boolean>(false);
const [zoomOnPinch, setZoomOnPinch] = useState<boolean>(false);
const [panOnScroll, setPanOnScroll] = useState<boolean>(false);
const [panOnScrollMode, setPanOnScrollMode] = useState<PanOnScrollMode>(PanOnScrollMode.Free);
const [panOnScrollMode, setPanOnScrollMode] = useState<PanOnScrollMode>(
PanOnScrollMode.Free
);
const [zoomOnDoubleClick, setZoomOnDoubleClick] = useState<boolean>(false);
const [panOnDrag, setPanOnDrag] = useState<boolean>(true);
const [captureZoomClick, setCaptureZoomClick] = useState<boolean>(false);
const [captureZoomScroll, setCaptureZoomScroll] = useState<boolean>(false);
const [captureElementClick, setCaptureElementClick] = useState<boolean>(false);
const [captureElementClick, setCaptureElementClick] =
useState<boolean>(false);
return (
<ReactFlow
@@ -81,149 +97,151 @@ const InteractionFlow = () => {
<div style={{ position: 'absolute', left: 10, top: 10, zIndex: 4 }}>
<div>
<label htmlFor="draggable">
<label htmlFor='draggable'>
nodesDraggable
<input
id="draggable"
type="checkbox"
id='draggable'
type='checkbox'
checked={isDraggable}
onChange={(event) => setIsDraggable(event.target.checked)}
className="react-flow__draggable"
className='react-flow__draggable'
/>
</label>
</div>
<div>
<label htmlFor="connectable">
<label htmlFor='connectable'>
nodesConnectable
<input
id="connectable"
type="checkbox"
id='connectable'
type='checkbox'
checked={isConnectable}
onChange={(event) => setIsConnectable(event.target.checked)}
className="react-flow__connectable"
className='react-flow__connectable'
/>
</label>
</div>
<div>
<label htmlFor="selectable">
<label htmlFor='selectable'>
elementsSelectable
<input
id="selectable"
type="checkbox"
id='selectable'
type='checkbox'
checked={isSelectable}
onChange={(event) => setIsSelectable(event.target.checked)}
className="react-flow__selectable"
className='react-flow__selectable'
/>
</label>
</div>
<div>
<label htmlFor="zoomonscroll">
<label htmlFor='zoomonscroll'>
zoomOnScroll
<input
id="zoomonscroll"
type="checkbox"
id='zoomonscroll'
type='checkbox'
checked={zoomOnScroll}
onChange={(event) => setZoomOnScroll(event.target.checked)}
className="react-flow__zoomonscroll"
className='react-flow__zoomonscroll'
/>
</label>
</div>
<div>
<label htmlFor="zoomonpinch">
<label htmlFor='zoomonpinch'>
zoomOnPinch
<input
id="zoomonpinch"
type="checkbox"
id='zoomonpinch'
type='checkbox'
checked={zoomOnPinch}
onChange={(event) => setZoomOnPinch(event.target.checked)}
className="react-flow__zoomonpinch"
className='react-flow__zoomonpinch'
/>
</label>
</div>
<div>
<label htmlFor="panonscroll">
<label htmlFor='panonscroll'>
panOnScroll
<input
id="panonscroll"
type="checkbox"
id='panonscroll'
type='checkbox'
checked={panOnScroll}
onChange={(event) => setPanOnScroll(event.target.checked)}
className="react-flow__panonscroll"
className='react-flow__panonscroll'
/>
</label>
</div>
<div>
<label htmlFor="panonscrollmode">
<label htmlFor='panonscrollmode'>
panOnScrollMode
<select
id="panonscrollmode"
id='panonscrollmode'
value={panOnScrollMode}
onChange={(event) => setPanOnScrollMode(event.target.value as PanOnScrollMode)}
className="react-flow__panonscrollmode"
onChange={(event) =>
setPanOnScrollMode(event.target.value as PanOnScrollMode)
}
className='react-flow__panonscrollmode'
>
<option value="free">free</option>
<option value="horizontal">horizontal</option>
<option value="vertical">vertical</option>
<option value='free'>free</option>
<option value='horizontal'>horizontal</option>
<option value='vertical'>vertical</option>
</select>
</label>
</div>
<div>
<label htmlFor="zoomondbl">
<label htmlFor='zoomondbl'>
zoomOnDoubleClick
<input
id="zoomondbl"
type="checkbox"
id='zoomondbl'
type='checkbox'
checked={zoomOnDoubleClick}
onChange={(event) => setZoomOnDoubleClick(event.target.checked)}
className="react-flow__zoomondbl"
className='react-flow__zoomondbl'
/>
</label>
</div>
<div>
<label htmlFor="panondrag">
<label htmlFor='panondrag'>
panOnDrag
<input
id="panondrag"
type="checkbox"
id='panondrag'
type='checkbox'
checked={panOnDrag}
onChange={(event) => setPanOnDrag(event.target.checked)}
className="react-flow__panondrag"
className='react-flow__panondrag'
/>
</label>
</div>
<div>
<label htmlFor="capturezoompaneclick">
<label htmlFor='capturezoompaneclick'>
capture onPaneClick
<input
id="capturezoompaneclick"
type="checkbox"
id='capturezoompaneclick'
type='checkbox'
checked={captureZoomClick}
onChange={(event) => setCaptureZoomClick(event.target.checked)}
className="react-flow__capturezoompaneclick"
className='react-flow__capturezoompaneclick'
/>
</label>
</div>
<div>
<label htmlFor="capturezoompanescroll">
<label htmlFor='capturezoompanescroll'>
capture onPaneScroll
<input
id="capturezoompanescroll"
type="checkbox"
id='capturezoompanescroll'
type='checkbox'
checked={captureZoomScroll}
onChange={(event) => setCaptureZoomScroll(event.target.checked)}
className="react-flow__capturezoompanescroll"
className='react-flow__capturezoompanescroll'
/>
</label>
</div>
<div>
<label htmlFor="captureelementclick">
<label htmlFor='captureelementclick'>
capture onElementClick
<input
id="captureelementclick"
type="checkbox"
id='captureelementclick'
type='checkbox'
checked={captureElementClick}
onChange={(event) => setCaptureElementClick(event.target.checked)}
className="react-flow__captureelementclick"
className='react-flow__captureelementclick'
/>
</label>
</div>

16
packages/core/example/src/Layouting/index.tsx → examples/demo/src/Layouting/index.tsx
View File

@@ -10,7 +10,7 @@ import ReactFlow, {
useEdgesState,
MarkerType,
EdgeMarker,
} from 'react-flow-renderer';
} from '@react-flow/core';
import dagre from 'dagre';
import initialItems from './initial-elements';
@@ -56,7 +56,10 @@ const LayoutFlow = () => {
node.sourcePosition = isHorizontal ? Position.Right : Position.Bottom;
// we need to pass a slightly different position in order to notify react flow about the change
// @TODO how can we change the position handling so that we dont need this hack?
node.position = { x: nodeWithPosition.x + Math.random() / 1000, y: nodeWithPosition.y };
node.position = {
x: nodeWithPosition.x + Math.random() / 1000,
y: nodeWithPosition.y,
};
return node;
});
@@ -73,14 +76,17 @@ const LayoutFlow = () => {
eds.map((e) => ({
...e,
markerEnd: {
type: (e.markerEnd as EdgeMarker)?.type === MarkerType.Arrow ? MarkerType.ArrowClosed : MarkerType.Arrow,
type:
(e.markerEnd as EdgeMarker)?.type === MarkerType.Arrow
? MarkerType.ArrowClosed
: MarkerType.Arrow,
},
}))
);
};
return (
<div className="layoutflow">
<div className='layoutflow'>
<ReactFlowProvider>
<ReactFlow
nodes={nodes}
@@ -93,7 +99,7 @@ const LayoutFlow = () => {
>
<Controls />
</ReactFlow>
<div className="controls">
<div className='controls'>
<button onClick={() => onLayout('TB')} style={{ marginRight: 10 }}>
vertical layout
</button>

135
examples/demo/src/Layouting/initial-elements.ts Normal file
View File

@@ -0,0 +1,135 @@
import { Node, Edge, XYPosition, MarkerType } from '@react-flow/core';
const position: XYPosition = { x: 0, y: 0 };
const nodes: Node[] = [
{
id: '1',
type: 'input',
data: { label: 'input' },
position,
},
{
id: '2',
data: { label: 'node 2' },
position,
},
{
id: '2a',
data: { label: 'node 2a' },
position,
},
{
id: '2b',
data: { label: 'node 2b' },
position,
},
{
id: '2c',
data: { label: 'node 2c' },
position,
},
{
id: '2d',
data: { label: 'node 2d' },
position,
},
{
id: '3',
data: { label: 'node 3' },
position,
},
{
id: '4',
data: { label: 'node 4' },
position,
},
{
id: '5',
data: { label: 'node 5' },
position,
},
{
id: '6',
type: 'output',
data: { label: 'output' },
position,
},
{
id: '7',
type: 'output',
data: { label: 'output' },
position: { x: 400, y: 450 },
},
];
const edges: Edge[] = [
{
id: 'e12',
source: '1',
target: '2',
type: 'smoothstep',
markerEnd: { type: MarkerType.Arrow },
},
{
id: 'e13',
source: '1',
target: '3',
type: 'smoothstep',
markerEnd: { type: MarkerType.Arrow },
},
{
id: 'e22a',
source: '2',
target: '2a',
type: 'smoothstep',
markerEnd: { type: MarkerType.Arrow },
},
{
id: 'e22b',
source: '2',
target: '2b',
type: 'smoothstep',
markerEnd: { type: MarkerType.Arrow },
},
{
id: 'e22c',
source: '2',
target: '2c',
type: 'smoothstep',
markerEnd: { type: MarkerType.Arrow },
},
{
id: 'e2c2d',
source: '2c',
target: '2d',
type: 'smoothstep',
markerEnd: { type: MarkerType.Arrow },
},
{
id: 'e45',
source: '4',
target: '5',
type: 'smoothstep',
markerEnd: { type: MarkerType.Arrow },
},
{
id: 'e56',
source: '5',
target: '6',
type: 'smoothstep',
markerEnd: { type: MarkerType.Arrow },
},
{
id: 'e57',
source: '5',
target: '7',
type: 'smoothstep',
markerEnd: { type: MarkerType.Arrow },
},
];
const nodesAndEdges = { nodes, edges };
export default nodesAndEdges;

0
packages/core/example/src/Layouting/layouting.css → examples/demo/src/Layouting/layouting.css
View File

48
packages/core/example/src/MultiFlows/index.tsx → examples/demo/src/MultiFlows/index.tsx
View File

@@ -10,19 +10,46 @@ import ReactFlow, {
useNodesState,
useEdgesState,
MarkerType,
} from 'react-flow-renderer';
} from '@react-flow/core';
import './multiflows.css';
const initialNodes: Node[] = [
{ id: '1', type: 'input', data: { label: 'Node 1' }, position: { x: 250, y: 5 }, className: 'light' },
{ id: '2', data: { label: 'Node 2' }, position: { x: 100, y: 100 }, className: 'light' },
{ id: '3', data: { label: 'Node 3' }, position: { x: 400, y: 100 }, className: 'light' },
{ id: '4', data: { label: 'Node 4' }, position: { x: 400, y: 200 }, className: 'light' },
{
id: '1',
type: 'input',
data: { label: 'Node 1' },
position: { x: 250, y: 5 },
className: 'light',
},
{
id: '2',
data: { label: 'Node 2' },
position: { x: 100, y: 100 },
className: 'light',
},
{
id: '3',
data: { label: 'Node 3' },
position: { x: 400, y: 100 },
className: 'light',
},
{
id: '4',
data: { label: 'Node 4' },
position: { x: 400, y: 200 },
className: 'light',
},
];
const initialEdges: Edge[] = [
{ id: 'e1-2', source: '1', target: '2', animated: true, markerEnd: { type: MarkerType.Arrow } },
{
id: 'e1-2',
source: '1',
target: '2',
animated: true,
markerEnd: { type: MarkerType.Arrow },
},
{ id: 'e1-3', source: '1', target: '3' },
];
@@ -30,7 +57,8 @@ const Flow: FC<{ id: string }> = ({ id }) => {
const [nodes, , onNodesChange] = useNodesState(initialNodes);
const [edges, setEdges, onEdgesChange] = useEdgesState(initialEdges);
const onConnect = (params: Edge | Connection) => setEdges((eds) => addEdge(params, eds));
const onConnect = (params: Edge | Connection) =>
setEdges((eds) => addEdge(params, eds));
return (
<ReactFlowProvider>
@@ -49,9 +77,9 @@ const Flow: FC<{ id: string }> = ({ id }) => {
};
const MultiFlows: FC = () => (
<div className="react-flow__example-multiflows">
<Flow id="flow-a" />
<Flow id="flow-b" />
<div className='react-flow__example-multiflows'>
<Flow id='flow-a' />
<Flow id='flow-b' />
</div>
);

0
packages/core/example/src/MultiFlows/multiflows.css → examples/demo/src/MultiFlows/multiflows.css
View File

33
packages/core/example/src/NestedNodes/index.tsx → examples/demo/src/NestedNodes/index.tsx
View File

@@ -11,14 +11,21 @@ import ReactFlow, {
Edge,
ReactFlowInstance,
Connection,
} from 'react-flow-renderer';
} from '@react-flow/core';
const onNodeDragStop = (_: MouseEvent, node: Node) => console.log('drag stop', node);
const onNodeDragStop = (_: MouseEvent, node: Node) =>
console.log('drag stop', node);
const onNodeClick = (_: MouseEvent, node: Node) => console.log('click', node);
const onEdgeClick = (_: MouseEvent, edge: Edge) => console.log('click', edge);
const initialNodes: Node[] = [
{ id: '1', type: 'input', data: { label: 'Node 1' }, position: { x: 250, y: 5 }, className: 'light' },
{
id: '1',
type: 'input',
data: { label: 'Node 1' },
position: { x: 250, y: 5 },
className: 'light',
},
{
id: '2',
data: { label: 'Node 2' },
@@ -32,7 +39,12 @@ const initialNodes: Node[] = [
position: { x: 10, y: 50 },
parentNode: '2',
},
{ id: '3', data: { label: 'Node 3' }, position: { x: 320, y: 100 }, className: 'light' },
{
id: '3',
data: { label: 'Node 3' },
position: { x: 320, y: 100 },
className: 'light',
},
{
id: '4',
data: { label: 'Node 4' },
@@ -53,7 +65,11 @@ const initialNodes: Node[] = [
data: { label: 'Node 4b' },
position: { x: 15, y: 120 },
className: 'light',
style: { backgroundColor: 'rgba(255, 0, 255, 0.7)', height: 150, width: 270 },
style: {
backgroundColor: 'rgba(255, 0, 255, 0.7)',
height: 150,
width: 270,
},
parentNode: '4',
},
{
@@ -91,7 +107,10 @@ const NestedFlow = () => {
const onConnect = useCallback((connection: Connection) => {
setEdges((eds) => addEdge(connection, eds));
}, []);
const onInit = useCallback((reactFlowInstance: ReactFlowInstance) => setRfInstance(reactFlowInstance), []);
const onInit = useCallback(
(reactFlowInstance: ReactFlowInstance) => setRfInstance(reactFlowInstance),
[]
);
const updatePos = () => {
setNodes((nds) => {
@@ -138,7 +157,7 @@ const NestedFlow = () => {
onEdgeClick={onEdgeClick}
onConnect={onConnect}
onNodeDragStop={onNodeDragStop}
className="react-flow-basic-example"
className='react-flow-basic-example'
defaultZoom={1.5}
minZoom={0.2}
maxZoom={4}

16
packages/core/example/src/NodeTypeChange/index.tsx → examples/demo/src/NodeTypeChange/index.tsx
View File

@@ -8,7 +8,7 @@ import ReactFlow, {
Edge,
useNodesState,
useEdgesState,
} from 'react-flow-renderer';
} from '@react-flow/core';
const initialNodes: Node[] = [
{
@@ -28,14 +28,22 @@ const initialNodes: Node[] = [
},
];
const initialEdges: Edge[] = [{ id: 'e1-2', source: '1', type: 'smoothstep', target: '2', animated: true }];
const initialEdges: Edge[] = [
{ id: 'e1-2', source: '1', type: 'smoothstep', target: '2', animated: true },
];
const buttonStyle: CSSProperties = { position: 'absolute', right: 10, top: 30, zIndex: 4 };
const buttonStyle: CSSProperties = {
position: 'absolute',
right: 10,
top: 30,
zIndex: 4,
};
const NodeTypeChangeFlow = () => {
const [nodes, setNodes, onNodesChange] = useNodesState(initialNodes);
const [edges, setEdges, onEdgesChange] = useEdgesState(initialEdges);
const onConnect = (params: Connection | Edge) => setEdges((eds) => addEdge(params, eds));
const onConnect = (params: Connection | Edge) =>
setEdges((eds) => addEdge(params, eds));
const changeType = () => {
setNodes((nds) =>
nds.map((node) => {

17
packages/core/example/src/NodeTypesObjectChange/index.tsx → examples/demo/src/NodeTypesObjectChange/index.tsx
View File

@@ -10,7 +10,7 @@ import ReactFlow, {
NodeTypes,
useNodesState,
useEdgesState,
} from 'react-flow-renderer';
} from '@react-flow/core';
const initialNodes: Node[] = [
{
@@ -30,9 +30,17 @@ const initialNodes: Node[] = [
},
];
const buttonStyle: CSSProperties = { position: 'absolute', right: 10, top: 30, zIndex: 4 };
const buttonStyle: CSSProperties = {
position: 'absolute',
right: 10,
top: 30,
zIndex: 4,
};
const nodeStyles: CSSProperties = { padding: '10px 15px', border: '1px solid #ddd' };
const nodeStyles: CSSProperties = {
padding: '10px 15px',
border: '1px solid #ddd',
};
const NodeA: FC<NodeProps> = () => {
return <div style={nodeStyles}>A</div>;
@@ -59,7 +67,8 @@ const NodeTypeChangeFlow = () => {
const [nodeTypesId, setNodeTypesId] = useState<string>('a');
const [nodes, setNodes, onNodesChange] = useNodesState(initialNodes);
const [edges, setEdges, onEdgesChange] = useEdgesState([]);
const onConnect = (params: Connection | Edge) => setEdges((eds) => addEdge(params, eds));
const onConnect = (params: Connection | Edge) =>
setEdges((eds) => addEdge(params, eds));
const changeType = () => setNodeTypesId((nt) => (nt === 'a' ? 'b' : 'a'));
return (

116
packages/core/example/src/Overview/index.tsx → examples/demo/src/Overview/index.tsx
View File

@@ -1,4 +1,8 @@
import { MouseEvent as ReactMouseEvent, CSSProperties, useCallback } from 'react';
import {
MouseEvent as ReactMouseEvent,
CSSProperties,
useCallback,
} from 'react';
import ReactFlow, {
addEdge,
MiniMap,
@@ -13,36 +17,55 @@ import ReactFlow, {
useNodesState,
useEdgesState,
OnSelectionChangeParams,
} from 'react-flow-renderer';
} from '@react-flow/core';
const onNodeDragStart = (_: ReactMouseEvent, node: Node, nodes: Node[]) => console.log('drag start', node, nodes);
const onNodeDrag = (_: ReactMouseEvent, node: Node, nodes: Node[]) => console.log('drag', node, nodes);
const onNodeDragStop = (_: ReactMouseEvent, node: Node, nodes: Node[]) => console.log('drag stop', node, nodes);
const onNodeDoubleClick = (_: ReactMouseEvent, node: Node) => console.log('node double click', node);
const onPaneClick = (event: ReactMouseEvent) => console.log('pane click', event);
const onPaneScroll = (event?: ReactMouseEvent) => console.log('pane scroll', event);
const onPaneContextMenu = (event: ReactMouseEvent) => console.log('pane context menu', event);
const onSelectionDrag = (_: ReactMouseEvent, nodes: Node[]) => console.log('selection drag', nodes);
const onSelectionDragStart = (_: ReactMouseEvent, nodes: Node[]) => console.log('selection drag start', nodes);
const onSelectionDragStop = (_: ReactMouseEvent, nodes: Node[]) => console.log('selection drag stop', nodes);
const onNodeDragStart = (_: ReactMouseEvent, node: Node, nodes: Node[]) =>
console.log('drag start', node, nodes);
const onNodeDrag = (_: ReactMouseEvent, node: Node, nodes: Node[]) =>
console.log('drag', node, nodes);
const onNodeDragStop = (_: ReactMouseEvent, node: Node, nodes: Node[]) =>
console.log('drag stop', node, nodes);
const onNodeDoubleClick = (_: ReactMouseEvent, node: Node) =>
console.log('node double click', node);
const onPaneClick = (event: ReactMouseEvent) =>
console.log('pane click', event);
const onPaneScroll = (event?: ReactMouseEvent) =>
console.log('pane scroll', event);
const onPaneContextMenu = (event: ReactMouseEvent) =>
console.log('pane context menu', event);
const onSelectionDrag = (_: ReactMouseEvent, nodes: Node[]) =>
console.log('selection drag', nodes);
const onSelectionDragStart = (_: ReactMouseEvent, nodes: Node[]) =>
console.log('selection drag start', nodes);
const onSelectionDragStop = (_: ReactMouseEvent, nodes: Node[]) =>
console.log('selection drag stop', nodes);
const onSelectionContextMenu = (event: ReactMouseEvent, nodes: Node[]) => {
event.preventDefault();
console.log('selection context menu', nodes);
};
const onNodeClick = (_: ReactMouseEvent, node: Node) => console.log('node click:', node);
const onNodeClick = (_: ReactMouseEvent, node: Node) =>
console.log('node click:', node);
const onSelectionChange = ({ nodes, edges }: OnSelectionChangeParams) => console.log('selection change', nodes, edges);
const onSelectionChange = ({ nodes, edges }: OnSelectionChangeParams) =>
console.log('selection change', nodes, edges);
const onInit = (reactFlowInstance: ReactFlowInstance) => {
console.log('pane ready:', reactFlowInstance);
};
const onMoveStart = (_: MouseEvent | TouchEvent, viewport: Viewport) => console.log('zoom/move start', viewport);
const onMoveEnd = (_: MouseEvent | TouchEvent, viewport: Viewport) => console.log('zoom/move end', viewport);
const onEdgeContextMenu = (_: ReactMouseEvent, edge: Edge) => console.log('edge context menu', edge);
const onEdgeMouseEnter = (_: ReactMouseEvent, edge: Edge) => console.log('edge mouse enter', edge);
const onEdgeMouseMove = (_: ReactMouseEvent, edge: Edge) => console.log('edge mouse move', edge);
const onEdgeMouseLeave = (_: ReactMouseEvent, edge: Edge) => console.log('edge mouse leave', edge);
const onEdgeDoubleClick = (_: ReactMouseEvent, edge: Edge) => console.log('edge double click', edge);
const onMoveStart = (_: MouseEvent | TouchEvent, viewport: Viewport) =>
console.log('zoom/move start', viewport);
const onMoveEnd = (_: MouseEvent | TouchEvent, viewport: Viewport) =>
console.log('zoom/move end', viewport);
const onEdgeContextMenu = (_: ReactMouseEvent, edge: Edge) =>
console.log('edge context menu', edge);
const onEdgeMouseEnter = (_: ReactMouseEvent, edge: Edge) =>
console.log('edge mouse enter', edge);
const onEdgeMouseMove = (_: ReactMouseEvent, edge: Edge) =>
console.log('edge mouse move', edge);
const onEdgeMouseLeave = (_: ReactMouseEvent, edge: Edge) =>
console.log('edge mouse leave', edge);
const onEdgeDoubleClick = (_: ReactMouseEvent, edge: Edge) =>
console.log('edge double click', edge);
const onNodesDelete = (nodes: Node[]) => console.log('nodes delete', nodes);
const onEdgesDelete = (edges: Edge[]) => console.log('edges delete', edges);
@@ -80,7 +103,12 @@ const initialNodes: Node[] = [
),
},
position: { x: 400, y: 100 },
style: { background: '#D6D5E6', color: '#333', border: '1px solid #222138', width: 180 },
style: {
background: '#D6D5E6',
color: '#333',
border: '1px solid #222138',
width: 180,
},
},
{
id: '4',
@@ -89,7 +117,11 @@ const initialNodes: Node[] = [
label: (
<>
You can find the docs on{' '}
<a href="https://github.com/wbkd/react-flow" target="_blank" rel="noopener noreferrer">
<a
href='https://github.com/wbkd/react-flow'
target='_blank'
rel='noopener noreferrer'
>
Github
</a>
</>
@@ -119,15 +151,32 @@ const initialNodes: Node[] = [
},
position: { x: 100, y: 480 },
},
{ id: '7', type: 'output', data: { label: 'Another output node' }, position: { x: 400, y: 450 } },
{
id: '7',
type: 'output',
data: { label: 'Another output node' },
position: { x: 400, y: 450 },
},
];
const initialEdges: Edge[] = [
{ id: 'e1-2', source: '1', target: '2', label: 'this is an edge label' },
{ id: 'e1-3', source: '1', target: '3' },
{ id: 'e3-4', source: '3', target: '4', animated: true, label: 'animated edge' },
{
id: 'e3-4',
source: '3',
target: '4',
animated: true,
label: 'animated edge',
},
{ id: 'e4-5', source: '4', target: '5', label: 'edge with arrow head' },
{ id: 'e5-6', source: '5', target: '6', type: 'smoothstep', label: 'smooth step edge' },
{
id: 'e5-6',
source: '5',
target: '6',
type: 'smoothstep',
label: 'smooth step edge',
},
{
id: 'e5-7',
source: '5',
@@ -161,7 +210,10 @@ const nodeColor = (n: Node): string => {
const OverviewFlow = () => {
const [nodes, , onNodesChange] = useNodesState(initialNodes);
const [edges, setEdges, onEdgesChange] = useEdgesState(initialEdges);
const onConnect = useCallback((params: Connection | Edge) => setEdges((eds) => addEdge(params, eds)), [setEdges]);
const onConnect = useCallback(
(params: Connection | Edge) => setEdges((eds) => addEdge(params, eds)),
[setEdges]
);
return (
<ReactFlow
@@ -196,14 +248,18 @@ const OverviewFlow = () => {
onEdgeDoubleClick={onEdgeDoubleClick}
fitView
fitViewOptions={{ padding: 0.2 }}
attributionPosition="top-right"
attributionPosition='top-right'
maxZoom={Infinity}
onNodesDelete={onNodesDelete}
onEdgesDelete={onEdgesDelete}
>
<MiniMap nodeStrokeColor={nodeStrokeColor} nodeColor={nodeColor} nodeBorderRadius={2} />
<MiniMap
nodeStrokeColor={nodeStrokeColor}
nodeColor={nodeColor}
nodeBorderRadius={2}
/>
<Controls />
<Background color="#aaa" gap={25} />
<Background color='#aaa' gap={25} />
</ReactFlow>
);
};

21
packages/core/example/src/Provider/Sidebar.tsx → examples/demo/src/Provider/Sidebar.tsx
View File

@@ -1,4 +1,4 @@
import { useStore, useStoreApi } from 'react-flow-renderer';
import { useStore, useStoreApi } from '@react-flow/core';
const Sidebar = () => {
const store = useStoreApi();
@@ -12,21 +12,24 @@ const Sidebar = () => {
return (
<aside>
<div className="description">
This is an example of how you can access the internal state outside of the ReactFlow component.
<div className='description'>
This is an example of how you can access the internal state outside of
the ReactFlow component.
</div>
<div className="title">Zoom & pan transform</div>
<div className="transform">
[{transform[0].toFixed(2)}, {transform[1].toFixed(2)}, {transform[2].toFixed(2)}]
<div className='title'>Zoom & pan transform</div>
<div className='transform'>
[{transform[0].toFixed(2)}, {transform[1].toFixed(2)},{' '}
{transform[2].toFixed(2)}]
</div>
<div className="title">Nodes</div>
<div className='title'>Nodes</div>
{Array.from(nodeInternals).map(([, node]) => (
<div key={node.id}>
Node {node.id} - x: {node.position.x.toFixed(2)}, y: {node.position.y.toFixed(2)}
Node {node.id} - x: {node.position.x.toFixed(2)}, y:{' '}
{node.position.y.toFixed(2)}
</div>
))}
<div className="selectall">
<div className='selectall'>
<button onClick={selectAll}>select all nodes</button>
</div>
</aside>

19
packages/core/example/src/Provider/index.tsx → examples/demo/src/Provider/index.tsx
View File

@@ -10,17 +10,23 @@ import ReactFlow, {
useNodesState,
useEdgesState,
ReactFlowInstance,
} from 'react-flow-renderer';
} from '@react-flow/core';
import Sidebar from './Sidebar';
import './provider.css';
const onNodeClick = (_: MouseEvent, node: Node) => console.log('click', node);
const onInit = (reactFlowInstance: ReactFlowInstance) => console.log('pane ready:', reactFlowInstance);
const onInit = (reactFlowInstance: ReactFlowInstance) =>
console.log('pane ready:', reactFlowInstance);
const initialNodes: Node[] = [
{ id: '1', type: 'input', data: { label: 'Node 1' }, position: { x: 250, y: 5 } },
{
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 } },
@@ -34,13 +40,14 @@ const initialEdges: Edge[] = [
const ProviderFlow = () => {
const [nodes, , onNodesChange] = useNodesState(initialNodes);
const [edges, setEdges, onEdgesChange] = useEdgesState(initialEdges);
const onConnect = (params: Edge | Connection) => setEdges((els) => addEdge(params, els));
const onConnect = (params: Edge | Connection) =>
setEdges((els) => addEdge(params, els));
return (
<div className="providerflow">
<div className='providerflow'>
<ReactFlowProvider>
<Sidebar />
<div className="reactflow-wrapper">
<div className='reactflow-wrapper'>
<ReactFlow
nodes={nodes}
edges={edges}

0
packages/core/example/src/Provider/provider.css → examples/demo/src/Provider/provider.css
View File

18
packages/core/example/src/SaveRestore/Controls.tsx → examples/demo/src/SaveRestore/Controls.tsx
View File

@@ -1,5 +1,10 @@
import React, { memo, useCallback, Dispatch, FC } from 'react';
import { useReactFlow, Edge, Node, ReactFlowJsonObject } from 'react-flow-renderer';
import {
useReactFlow,
Edge,
Node,
ReactFlowJsonObject,
} from '@react-flow/core';
import localforage from 'localforage';
localforage.config({
@@ -26,7 +31,9 @@ const Controls: FC<ControlsProps> = ({ setNodes, setEdges }) => {
const onRestore = useCallback(() => {
const restoreFlow = async () => {
const flow: ReactFlowJsonObject | null = await localforage.getItem(flowKey);
const flow: ReactFlowJsonObject | null = await localforage.getItem(
flowKey
);
if (flow) {
const { x, y, zoom } = flow.viewport;
@@ -44,13 +51,16 @@ const Controls: FC<ControlsProps> = ({ setNodes, setEdges }) => {
const newNode = {
id: `random_node-${getNodeId()}`,
data: { label: 'Added node' },
position: { x: Math.random() * window.innerWidth - 100, y: Math.random() * window.innerHeight },
position: {
x: Math.random() * window.innerWidth - 100,
y: Math.random() * window.innerHeight,
},
};
setNodes((nds) => nds.concat(newNode));
}, [setNodes]);
return (
<div className="save__controls">
<div className='save__controls'>
<button onClick={onSave}>save</button>
<button onClick={onRestore}>restore</button>
<button onClick={onAdd}>add node</button>

7
packages/core/example/src/SaveRestore/index.tsx → examples/demo/src/SaveRestore/index.tsx
View File

@@ -7,7 +7,7 @@ import ReactFlow, {
Edge,
useNodesState,
useEdgesState,
} from 'react-flow-renderer';
} from '@react-flow/core';
import Controls from './Controls';
@@ -23,7 +23,10 @@ const initialEdges: Edge[] = [{ id: 'e1-2', source: '1', target: '2' }];
const SaveRestore = () => {
const [nodes, setNodes, onNodesChange] = useNodesState(initialNodes);
const [edges, setEdges, onEdgesChange] = useEdgesState(initialEdges);
const onConnect = useCallback((params: Connection | Edge) => setEdges((eds) => addEdge(params, eds)), [setEdges]);
const onConnect = useCallback(
(params: Connection | Edge) => setEdges((eds) => addEdge(params, eds)),
[setEdges]
);
return (
<ReactFlowProvider>

0
packages/core/example/src/SaveRestore/save.css → examples/demo/src/SaveRestore/save.css
View File

9
packages/core/example/src/Stress/index.tsx → examples/demo/src/Stress/index.tsx
View File

@@ -12,11 +12,16 @@ import ReactFlow, {
addEdge,
applyEdgeChanges,
EdgeChange,
} from 'react-flow-renderer';
} from '@react-flow/core';
import { getNodesAndEdges } from './utils';
const buttonWrapperStyles: CSSProperties = { position: 'absolute', right: 10, top: 10, zIndex: 4 };
const buttonWrapperStyles: CSSProperties = {
position: 'absolute',
right: 10,
top: 10,
zIndex: 4,
};
const onInit = (reactFlowInstance: ReactFlowInstance) => {
reactFlowInstance.fitView();

13
packages/core/example/src/Stress/utils.ts → examples/demo/src/Stress/utils.ts
View File

@@ -1,11 +1,14 @@
import { Node, Edge } from 'react-flow-renderer';
import { Node, Edge } from '@react-flow/core';
type ElementsCollection = {
nodes: Node[];
edges: Edge[];
};
export function getNodesAndEdges(xElements: number = 10, yElements: number = 10): ElementsCollection {
export function getNodesAndEdges(
xElements: number = 10,
yElements: number = 10
): ElementsCollection {
const initialNodes = [];
const initialEdges: Edge[] = [];
let nodeId = 1;
@@ -24,7 +27,11 @@ export function getNodesAndEdges(xElements: number = 10, yElements: number = 10)
initialNodes.push(node);
if (recentNodeId && nodeId <= xElements * yElements) {
initialEdges.push({ id: `${x}-${y}`, source: recentNodeId.toString(), target: nodeId.toString() });
initialEdges.push({
id: `${x}-${y}`,
source: recentNodeId.toString(),
target: nodeId.toString(),
});
}
recentNodeId = nodeId;

6
packages/core/example/src/Subflow/DebugNode.tsx → examples/demo/src/Subflow/DebugNode.tsx
View File

@@ -1,6 +1,6 @@
import { memo, FC, CSSProperties } from 'react';
import { Handle, NodeProps, Position } from 'react-flow-renderer';
import { Handle, NodeProps, Position } from '@react-flow/core';
const infoStyle: CSSProperties = { fontSize: 11 };
const idStyle: CSSProperties = {
@@ -14,12 +14,12 @@ const idStyle: CSSProperties = {
const DebugNode: FC<NodeProps> = ({ zIndex, xPos, yPos, id }) => {
return (
<>
<Handle type="target" position={Position.Top} />
<Handle type='target' position={Position.Top} />
<div style={idStyle}>{id}</div>
<div style={infoStyle}>
x:{Math.round(xPos || 0)} y:{Math.round(yPos || 0)} z:{zIndex}
</div>
<Handle type="source" position={Position.Bottom} />
<Handle type='source' position={Position.Bottom} />
</>
);
};

54
packages/core/example/src/Subflow/index.tsx → examples/demo/src/Subflow/index.tsx
View File

@@ -12,11 +12,13 @@ import ReactFlow, {
MarkerType,
useNodesState,
useEdgesState,
} from 'react-flow-renderer';
} from '@react-flow/core';
import DebugNode from './DebugNode';
const onNodeDrag = (_: MouseEvent, node: Node, nodes: Node[]) => console.log('drag', node, nodes);
const onNodeDragStop = (_: MouseEvent, node: Node, nodes: Node[]) => console.log('drag stop', node, nodes);
const onNodeDrag = (_: MouseEvent, node: Node, nodes: Node[]) =>
console.log('drag', node, nodes);
const onNodeDragStop = (_: MouseEvent, node: Node, nodes: Node[]) =>
console.log('drag stop', node, nodes);
const onNodeClick = (_: MouseEvent, node: Node) => console.log('click', node);
const onEdgeClick = (_: MouseEvent, edge: Edge) => console.log('click', edge);
@@ -33,7 +35,11 @@ const initialNodes: Node[] = [
data: { label: 'Node 4' },
position: { x: 100, y: 200 },
className: 'light',
style: { backgroundColor: 'rgba(255,50, 50, 0.5)', width: 500, height: 300 },
style: {
backgroundColor: 'rgba(255,50, 50, 0.5)',
width: 500,
height: 300,
},
},
{
id: '4a',
@@ -51,7 +57,11 @@ const initialNodes: Node[] = [
data: { label: 'Node 4b' },
position: { x: 100, y: 60 },
className: 'light',
style: { backgroundColor: 'rgba(50, 50, 255, 0.5)', height: 200, width: 300 },
style: {
backgroundColor: 'rgba(50, 50, 255, 0.5)',
height: 200,
width: 300,
},
parentNode: '4',
},
{
@@ -93,8 +103,18 @@ const initialNodes: Node[] = [
parentNode: '5',
expandParent: true,
},
{ id: '2', data: { label: 'Node 2' }, position: { x: 100, y: 100 }, className: 'light' },
{ id: '3', data: { label: 'Node 3' }, position: { x: 400, y: 100 }, className: 'light' },
{
id: '2',
data: { label: 'Node 2' },
position: { x: 100, y: 100 },
className: 'light',
},
{
id: '3',
data: { label: 'Node 3' },
position: { x: 400, y: 100 },
className: 'light',
},
];
const initialEdges: Edge[] = [
@@ -102,7 +122,13 @@ const initialEdges: Edge[] = [
id: 'e1-2',
source: '1',
target: '2',
markerEnd: { type: MarkerType.Arrow, strokeWidth: 2, width: 15, height: 15, color: '#f00' },
markerEnd: {
type: MarkerType.Arrow,
strokeWidth: 2,
width: 15,
height: 15,
color: '#f00',
},
},
{ id: 'e1-3', source: '1', target: '3' },
{ id: 'e3-4', source: '3', target: '4', zIndex: 100 },
@@ -121,8 +147,14 @@ const Subflow = () => {
const [nodes, setNodes, onNodesChange] = useNodesState(initialNodes);
const [edges, setEdges, onEdgesChange] = useEdgesState(initialEdges);
const onConnect = useCallback((connection: Connection) => setEdges((eds) => addEdge(connection, eds)), [setEdges]);
const onInit = useCallback((reactFlowInstance: ReactFlowInstance) => setRfInstance(reactFlowInstance), []);
const onConnect = useCallback(
(connection: Connection) => setEdges((eds) => addEdge(connection, eds)),
[setEdges]
);
const onInit = useCallback(
(reactFlowInstance: ReactFlowInstance) => setRfInstance(reactFlowInstance),
[]
);
const updatePos = () => {
setNodes((nds) => {
@@ -172,7 +204,7 @@ const Subflow = () => {
onConnect={onConnect}
onNodeDrag={onNodeDrag}
onNodeDragStop={onNodeDragStop}
className="react-flow-basic-example"
className='react-flow-basic-example'
defaultZoom={1.5}
minZoom={0.2}
maxZoom={4}

80
packages/core/example/src/Switch/index.tsx → examples/demo/src/Switch/index.tsx
View File

@@ -1,14 +1,43 @@
import { MouseEvent } from 'react';
import ReactFlow, { addEdge, Node, Connection, Edge, useNodesState, useEdgesState } from 'react-flow-renderer';
import ReactFlow, {
addEdge,
Node,
Connection,
Edge,
useNodesState,
useEdgesState,
} from '@react-flow/core';
const onNodeDragStop = (_: MouseEvent, node: Node) => console.log('drag stop', node);
const onNodeDragStop = (_: MouseEvent, node: Node) =>
console.log('drag stop', node);
const onNodeClick = (_: MouseEvent, node: Node) => console.log('click', node);
const nodesA: Node[] = [
{ id: '1a', type: 'input', data: { label: 'Node 1' }, position: { x: 250, y: 5 }, className: 'light' },
{ id: '2a', data: { label: 'Node 2' }, position: { x: 100, y: 100 }, className: 'light' },
{ id: '3a', data: { label: 'Node 3' }, position: { x: 400, y: 100 }, className: 'light' },
{ id: '4a', data: { label: 'Node 4' }, position: { x: 400, y: 200 }, className: 'light' },
{
id: '1a',
type: 'input',
data: { label: 'Node 1' },
position: { x: 250, y: 5 },
className: 'light',
},
{
id: '2a',
data: { label: 'Node 2' },
position: { x: 100, y: 100 },
className: 'light',
},
{
id: '3a',
data: { label: 'Node 3' },
position: { x: 400, y: 100 },
className: 'light',
},
{
id: '4a',
data: { label: 'Node 4' },
position: { x: 400, y: 200 },
className: 'light',
},
];
const edgesA: Edge[] = [
@@ -17,11 +46,37 @@ const edgesA: Edge[] = [
];
const nodesB: Node[] = [
{ id: 'inputb', type: 'input', data: { label: 'Input' }, position: { x: 300, y: 5 }, className: 'light' },
{ id: '1b', data: { label: 'Node 1' }, position: { x: 0, y: 100 }, className: 'light' },
{ id: '2b', data: { label: 'Node 2' }, position: { x: 200, y: 100 }, className: 'light' },
{ id: '3b', data: { label: 'Node 3' }, position: { x: 400, y: 100 }, className: 'light' },
{ id: '4b', data: { label: 'Node 4' }, position: { x: 600, y: 100 }, className: 'light' },
{
id: 'inputb',
type: 'input',
data: { label: 'Input' },
position: { x: 300, y: 5 },
className: 'light',
},
{
id: '1b',
data: { label: 'Node 1' },
position: { x: 0, y: 100 },
className: 'light',
},
{
id: '2b',
data: { label: 'Node 2' },
position: { x: 200, y: 100 },
className: 'light',
},
{
id: '3b',
data: { label: 'Node 3' },
position: { x: 400, y: 100 },
className: 'light',
},
{
id: '4b',
data: { label: 'Node 4' },
position: { x: 600, y: 100 },
className: 'light',
},
];
const edgesB: Edge[] = [
@@ -35,7 +90,8 @@ const BasicFlow = () => {
const [nodes, setNodes, onNodesChange] = useNodesState(nodesA);
const [edges, setEdges, onEdgesChange] = useEdgesState(edgesA);
const onConnect = (params: Connection | Edge) => setEdges((eds) => addEdge(params, eds));
const onConnect = (params: Connection | Edge) =>
setEdges((eds) => addEdge(params, eds));
return (
<ReactFlow

19
packages/core/example/src/TouchDevice/index.tsx → examples/demo/src/TouchDevice/index.tsx
View File

@@ -7,7 +7,7 @@ import ReactFlow, {
Position,
Connection,
addEdge,
} from 'react-flow-renderer';
} from '@react-flow/core';
import './touch-device.css';
@@ -33,11 +33,20 @@ const initialEdges: Edge[] = [];
const TouchDeviceFlow = () => {
const [nodes, , onNodesChange] = useNodesState(initialNodes);
const [edges, setEdges, onEdgesChange] = useEdgesState(initialEdges);
const onConnect = useCallback((connection: Connection) => setEdges((eds) => addEdge(connection, eds)), [setEdges]);
const onConnect = useCallback(
(connection: Connection) => setEdges((eds) => addEdge(connection, eds)),
[setEdges]
);
const onConnectStart = useCallback(() => console.log('connect start'), []);
const onConnectStop = useCallback(() => console.log('connect end'), []);
const onClickConnectStart = useCallback(() => console.log('click connect start'), []);
const onClickConnectStop = useCallback(() => console.log('click connect end'), []);
const onClickConnectStart = useCallback(
() => console.log('click connect start'),
[]
);
const onClickConnectStop = useCallback(
() => console.log('click connect end'),
[]
);
return (
<ReactFlow
@@ -50,7 +59,7 @@ const TouchDeviceFlow = () => {
onConnectStop={onConnectStop}
onClickConnectStart={onClickConnectStart}
onClickConnectStop={onClickConnectStop}
className="touchdevice-flow"
className='touchdevice-flow'
/>
);
};

0
packages/core/example/src/TouchDevice/touch-device.css → examples/demo/src/TouchDevice/touch-device.css
View File

22
examples/demo/src/Undirectional/CustomNode.tsx Normal file
View File

@@ -0,0 +1,22 @@
import React, { memo, FC, CSSProperties } from 'react';
import { Handle, Position, NodeProps } from '@react-flow/core';
const nodeStyles: CSSProperties = {
padding: '10px 15px',
border: '1px solid #ddd',
};
const CustomNode: FC<NodeProps> = ({ id }) => {
return (
<div style={nodeStyles}>
<div>node {id}</div>
<Handle type='source' id='left' position={Position.Left} />
<Handle type='source' id='right' position={Position.Right} />
<Handle type='source' id='top' position={Position.Top} />
<Handle type='source' id='bottom' position={Position.Bottom} />
</div>
);
};
export default memo(CustomNode);

5
packages/core/example/src/Undirectional/index.tsx → examples/demo/src/Undirectional/index.tsx
View File

@@ -13,7 +13,7 @@ import ReactFlow, {
updateEdge,
useNodesState,
useEdgesState,
} from 'react-flow-renderer';
} from '@react-flow/core';
import CustomNode from './CustomNode';
const initialNodes: Node[] = [
@@ -183,7 +183,8 @@ const UpdateNodeInternalsFlow = () => {
const [nodes, setNodes, onNodesChange] = useNodesState(initialNodes);
const [edges, setEdges, onEdgesChange] = useEdgesState(initialEdges);
const onConnect = (params: Edge | Connection) => setEdges((els) => addEdge(params, els));
const onConnect = (params: Edge | Connection) =>
setEdges((els) => addEdge(params, els));
const { project } = useReactFlow();
const onEdgeUpdate = (oldEdge: Edge, newConnection: Connection) =>
setEdges((els) => updateEdge(oldEdge, newConnection, els));

2
packages/core/example/src/UpdatableEdge/index.tsx → examples/demo/src/UpdatableEdge/index.tsx
View File

@@ -12,7 +12,7 @@ import ReactFlow, {
NodeChange,
EdgeChange,
HandleType,
} from 'react-flow-renderer';
} from '@react-flow/core';
const initialNodes: Node[] = [
{

24
packages/core/example/src/UpdateNode/index.tsx → examples/demo/src/UpdateNode/index.tsx
View File

@@ -1,5 +1,10 @@
import { useEffect, useState } from 'react';
import ReactFlow, { Node, Edge, useNodesState, useEdgesState } from 'react-flow-renderer';
import ReactFlow, {
Node,
Edge,
useNodesState,
useEdgesState,
} from '@react-flow/core';
import './updatenode.css';
@@ -70,16 +75,23 @@ const UpdateNode = () => {
onNodesChange={onNodesChange}
onEdgesChange={onEdgesChange}
>
<div className="updatenode__controls">
<div className='updatenode__controls'>
<label>label:</label>
<input value={nodeName} onChange={(evt) => setNodeName(evt.target.value)} />
<input
value={nodeName}
onChange={(evt) => setNodeName(evt.target.value)}
/>
<label className="updatenode__bglabel">background:</label>
<label className='updatenode__bglabel'>background:</label>
<input value={nodeBg} onChange={(evt) => setNodeBg(evt.target.value)} />
<div className="updatenode__checkboxwrapper">
<div className='updatenode__checkboxwrapper'>
<label>hidden:</label>
<input type="checkbox" checked={nodeHidden} onChange={(evt) => setNodeHidden(evt.target.checked)} />
<input
type='checkbox'
checked={nodeHidden}
onChange={(evt) => setNodeHidden(evt.target.checked)}
/>
</div>
</div>
</ReactFlow>

0
packages/core/example/src/UpdateNode/updatenode.css → examples/demo/src/UpdateNode/updatenode.css
View File

2
packages/core/example/src/UseKeyPress/index.tsx → examples/demo/src/UseKeyPress/index.tsx
View File

@@ -1,4 +1,4 @@
import { useKeyPress } from 'react-flow-renderer';
import { useKeyPress } from '@react-flow/core';
const UseKeyPressComponent = () => {
const metaPressed = useKeyPress(['Meta']);

48
packages/core/example/src/UseReactFlow/index.tsx → examples/demo/src/UseReactFlow/index.tsx
View File

@@ -11,13 +11,34 @@ import ReactFlow, {
Edge,
useNodesState,
useEdgesState,
} from 'react-flow-renderer';
} from '@react-flow/core';
const initialNodes: Node[] = [
{ id: '1', type: 'input', data: { label: 'Node 1' }, position: { x: 250, y: 5 }, className: 'light' },
{ id: '2', data: { label: 'Node 2' }, position: { x: 100, y: 100 }, className: 'light' },
{ id: '3', data: { label: 'Node 3' }, position: { x: 400, y: 100 }, className: 'light' },
{ id: '4', data: { label: 'Node 4' }, position: { x: 400, y: 200 }, className: 'light' },
{
id: '1',
type: 'input',
data: { label: 'Node 1' },
position: { x: 250, y: 5 },
className: 'light',
},
{
id: '2',
data: { label: 'Node 2' },
position: { x: 100, y: 100 },
className: 'light',
},
{
id: '3',
data: { label: 'Node 3' },
position: { x: 400, y: 100 },
className: 'light',
},
{
id: '4',
data: { label: 'Node 4' },
position: { x: 400, y: 200 },
className: 'light',
},
];
const initialEdges: Edge[] = [
@@ -32,7 +53,8 @@ const getId = () => `${id++}`;
const UseZoomPanHelperFlow = () => {
const [nodes, setNodes, onNodesChange] = useNodesState(initialNodes);
const [edges, setEdges, onEdgesChange] = useEdgesState(initialEdges);
const onConnect = (params: Connection | Edge) => setEdges((eds) => addEdge(params, eds));
const onConnect = (params: Connection | Edge) =>
setEdges((eds) => addEdge(params, eds));
const {
project,
setCenter,
@@ -48,7 +70,10 @@ const UseZoomPanHelperFlow = () => {
const onPaneClick = useCallback(
(evt: MouseEvent) => {
const projectedPosition = project({ x: evt.clientX, y: evt.clientY - 40 });
const projectedPosition = project({
x: evt.clientX,
y: evt.clientY - 40,
});
setNodes((nds) =>
nds.concat({
@@ -92,7 +117,10 @@ const UseZoomPanHelperFlow = () => {
addEdges({ id: 'e3-4', source: '3', target: '4' });
}, [addEdges]);
const onResetNodes = useCallback(() => setNodesHook(initialNodes), [setNodesHook]);
const onResetNodes = useCallback(
() => setNodesHook(initialNodes),
[setNodesHook]
);
return (
<ReactFlow
@@ -110,7 +138,9 @@ const UseZoomPanHelperFlow = () => {
<div style={{ position: 'absolute', left: 0, top: 0, zIndex: 100 }}>
<button onClick={() => zoomIn({ duration: 1200 })}>zoomIn</button>
<button onClick={() => zoomOut({ duration: 0 })}>zoomOut</button>
<button onClick={() => fitView({ duration: 1200, padding: 0.3 })}>fitView</button>
<button onClick={() => fitView({ duration: 1200, padding: 0.3 })}>
fitView
</button>
<button onClick={onAddNode}>add node</button>
<button onClick={onResetNodes}>reset nodes</button>
<button onClick={logNodes}>useNodes</button>

6
packages/core/example/src/UseUpdateNodeInternals/CustomNode.tsx → examples/demo/src/UseUpdateNodeInternals/CustomNode.tsx
View File

@@ -1,5 +1,5 @@
import React, { memo, FC, useMemo, CSSProperties } from 'react';
import { Handle, Position, NodeProps } from 'react-flow-renderer';
import { Handle, Position, NodeProps } from '@react-flow/core';
const nodeStyles: CSSProperties = { padding: 10, border: '1px solid #ddd' };
@@ -11,7 +11,7 @@ const CustomNode: FC<NodeProps> = ({ data }) => {
return (
<Handle
key={handleId}
type="source"
type='source'
position={Position.Right}
id={handleId}
style={{ top: 10 * i + data.handlePosition * 10 }}
@@ -23,7 +23,7 @@ const CustomNode: FC<NodeProps> = ({ data }) => {
return (
<div style={nodeStyles}>
<Handle type="target" position={Position.Left} />
<Handle type='target' position={Position.Left} />
<div>output handle count: {data.handleCount}</div>
{handles}
</div>

39
packages/core/example/src/UseUpdateNodeInternals/index.tsx → examples/demo/src/UseUpdateNodeInternals/index.tsx
View File

@@ -12,7 +12,7 @@ import ReactFlow, {
Position,
useNodesState,
useEdgesState,
} from 'react-flow-renderer';
} from '@react-flow/core';
import CustomNode from './CustomNode';
const initialHandleCount = 1;
@@ -21,12 +21,21 @@ const initialNodes: Node[] = [
{
id: '1',
type: 'custom',
data: { label: 'Node 1', handleCount: initialHandleCount, handlePosition: 0 },
data: {
label: 'Node 1',
handleCount: initialHandleCount,
handlePosition: 0,
},
position: { x: 250, y: 5 },
},
];
const buttonWrapperStyles: CSSProperties = { position: 'absolute', right: 10, top: 10, zIndex: 10 };
const buttonWrapperStyles: CSSProperties = {
position: 'absolute',
right: 10,
top: 10,
zIndex: 10,
};
const nodeTypes: NodeTypes = {
custom: CustomNode,
@@ -38,7 +47,8 @@ const getId = (): string => `${id++}`;
const UpdateNodeInternalsFlow = () => {
const [nodes, setNodes, onNodesChange] = useNodesState(initialNodes);
const [edges, setEdges, onEdgesChange] = useEdgesState([]);
const onConnect = (params: Edge | Connection) => setEdges((els) => addEdge(params, els));
const onConnect = (params: Edge | Connection) =>
setEdges((els) => addEdge(params, els));
const updateNodeInternals = useUpdateNodeInternals();
const { project } = useReactFlow();
@@ -60,7 +70,13 @@ const UpdateNodeInternalsFlow = () => {
const toggleHandleCount = useCallback(() => {
setNodes((nds) =>
nds.map((node) => {
return { ...node, data: { ...node.data, handleCount: node.data?.handleCount === 1 ? 2 : 1 } };
return {
...node,
data: {
...node.data,
handleCount: node.data?.handleCount === 1 ? 2 : 1,
},
};
})
);
}, [setNodes]);
@@ -68,12 +84,21 @@ const UpdateNodeInternalsFlow = () => {
const toggleHandlePosition = useCallback(() => {
setNodes((nds) =>
nds.map((node) => {
return { ...node, data: { ...node.data, handlePosition: node.data?.handlePosition === 0 ? 1 : 0 } };
return {
...node,
data: {
...node.data,
handlePosition: node.data?.handlePosition === 0 ? 1 : 0,
},
};
})
);
}, [setNodes]);
const updateNode = useCallback(() => updateNodeInternals('1'), [updateNodeInternals]);
const updateNode = useCallback(
() => updateNodeInternals('1'),
[updateNodeInternals]
);
return (
<ReactFlow

22
packages/core/example/src/Validation/index.tsx → examples/demo/src/Validation/index.tsx
View File

@@ -11,7 +11,7 @@ import ReactFlow, {
useNodesState,
useEdgesState,
OnConnectStartParams,
} from 'react-flow-renderer';
} from '@react-flow/core';
import './validation.css';
@@ -27,15 +27,27 @@ const isValidConnection = (connection: Connection) => connection.target === 'B';
const CustomInput: FC<NodeProps> = () => (
<>
<div>Only connectable with B</div>
<Handle type="source" position={Position.Right} isValidConnection={isValidConnection} />
<Handle
type='source'
position={Position.Right}
isValidConnection={isValidConnection}
/>
</>
);
const CustomNode: FC<NodeProps> = ({ id }) => (
<>
<Handle type="target" position={Position.Left} isValidConnection={isValidConnection} />
<Handle
type='target'
position={Position.Left}
isValidConnection={isValidConnection}
/>
<div>{id}</div>
<Handle type="source" position={Position.Right} isValidConnection={isValidConnection} />
<Handle
type='source'
position={Position.Right}
isValidConnection={isValidConnection}
/>
</>
);
@@ -81,7 +93,7 @@ const ValidationFlow = () => {
onEdgesChange={onEdgesChange}
onConnect={onConnect}
selectNodesOnDrag={false}
className="validationflow"
className='validationflow'
nodeTypes={nodeTypes}
onConnectStart={onConnectStart}
onConnectEnd={onConnectEnd}

0
packages/core/example/src/Validation/validation.css → examples/demo/src/Validation/validation.css
View File

0
packages/core/example/src/index.css → examples/demo/src/index.css
View File

0
packages/core/example/src/index.tsx → examples/demo/src/index.tsx
View File

0
packages/core/example/src/react-app-env.d.ts → examples/demo/src/react-app-env.d.ts vendored
View File

0
packages/core/example/tsconfig.json → examples/demo/tsconfig.json
View File

1
examples/nextjs/package.json
View File

@@ -11,7 +11,6 @@
"dependencies": {
"@preconstruct/next": "^4.0.0",
"@react-flow/core": "11.0.0",
"@react-flow/themes": "11.0.0",
"next": "12.2.2",
"react": "18.2.0",
"react-dom": "18.2.0"

1
examples/nextjs/pages/index.js
View File

@@ -1,5 +1,4 @@
import ReactFlow from '@react-flow/core';
import '@react-flow/themes/dark';
export default function Home() {
return (

2
package.json
View File

@@ -1,6 +1,6 @@
{
"name": "react-flow",
"version": "1.0.0",
"version": "11.0.0",
"description": "A highly customizable React library for building node-based editors and interactive flow charts",
"repository": "git@github.com:wbkd/react-flow.git",
"license": "MIT",

19
packages/core/example/src/CustomConnectionLine/ConnectionLine.tsx
View File

@@ -1,19 +0,0 @@
import React, { FC } from 'react';
import { ConnectionLineComponentProps } from 'react-flow-renderer';
const ConnectionLine: FC<ConnectionLineComponentProps> = ({ sourceX, sourceY, targetX, targetY, toX, toY }) => {
return (
<g>
<path
fill="none"
stroke="#222"
strokeWidth={1.5}
className="animated"
d={`M${sourceX},${sourceY} C ${sourceX} ${targetY} ${sourceX} ${targetY} ${targetX},${targetY}`}
/>
<circle cx={toX} cy={toY} fill="#fff" r={3} stroke="#222" strokeWidth={1.5} />
</g>
);
};
export default ConnectionLine;

34
packages/core/example/src/CustomNode/ColorSelectorNode.tsx
View File

@@ -1,34 +0,0 @@
import React, { memo, FC, CSSProperties } from 'react';
import { Handle, Position, NodeProps, Connection, Edge } from 'react-flow-renderer';
const targetHandleStyle: CSSProperties = { background: '#555' };
const sourceHandleStyleA: CSSProperties = { ...targetHandleStyle, top: 10 };
const sourceHandleStyleB: CSSProperties = { ...targetHandleStyle, bottom: 10, top: 'auto' };
const onConnect = (params: Connection | Edge) => console.log('handle onConnect', params);
const ColorSelectorNode: FC<NodeProps> = ({ data, isConnectable }) => {
return (
<>
<Handle type="target" position={Position.Left} style={targetHandleStyle} onConnect={onConnect} />
<div>
Custom Color Picker Node: <strong>{data.color}</strong>
</div>
<input className="nodrag" type="color" onChange={data.onChange} defaultValue={data.color} />
<Handle
type="source"
position={Position.Right}
id="a"
style={sourceHandleStyleA}
isConnectable={isConnectable}
onMouseDown={(e) => {
console.log('You trigger mousedown event', e);
}}
/>
<Handle type="source" position={Position.Right} id="b" style={sourceHandleStyleB} isConnectable={isConnectable} />
</>
);
};
export default memo(ColorSelectorNode);

28
packages/core/example/src/Edges/CustomEdge.tsx
View File

@@ -1,28 +0,0 @@
import { FC } from 'react';
import { EdgeProps, getBezierPath } from 'react-flow-renderer';
const CustomEdge: FC<EdgeProps> = ({
id,
sourceX,
sourceY,
targetX,
targetY,
sourcePosition,
targetPosition,
data,
}) => {
const edgePath = getBezierPath({ sourceX, sourceY, sourcePosition, targetX, targetY, targetPosition });
return (
<>
<path id={id} className="react-flow__edge-path" d={edgePath} />
<text>
<textPath href={`#${id}`} style={{ fontSize: '12px' }} startOffset="50%" textAnchor="middle">
{data.text}
</textPath>
</text>
</>
);
};
export default CustomEdge;

76
packages/core/example/src/Layouting/initial-elements.ts
View File

@@ -1,76 +0,0 @@
import { Node, Edge, XYPosition, MarkerType } from 'react-flow-renderer';
const position: XYPosition = { x: 0, y: 0 };
const nodes: Node[] = [
{
id: '1',
type: 'input',
data: { label: 'input' },
position,
},
{
id: '2',
data: { label: 'node 2' },
position,
},
{
id: '2a',
data: { label: 'node 2a' },
position,
},
{
id: '2b',
data: { label: 'node 2b' },
position,
},
{
id: '2c',
data: { label: 'node 2c' },
position,
},
{
id: '2d',
data: { label: 'node 2d' },
position,
},
{
id: '3',
data: { label: 'node 3' },
position,
},
{
id: '4',
data: { label: 'node 4' },
position,
},
{
id: '5',
data: { label: 'node 5' },
position,
},
{
id: '6',
type: 'output',
data: { label: 'output' },
position,
},
{ id: '7', type: 'output', data: { label: 'output' }, position: { x: 400, y: 450 } },
];
const edges: Edge[] = [
{ id: 'e12', source: '1', target: '2', type: 'smoothstep', markerEnd: { type: MarkerType.Arrow } },
{ id: 'e13', source: '1', target: '3', type: 'smoothstep', markerEnd: { type: MarkerType.Arrow } },
{ id: 'e22a', source: '2', target: '2a', type: 'smoothstep', markerEnd: { type: MarkerType.Arrow } },
{ id: 'e22b', source: '2', target: '2b', type: 'smoothstep', markerEnd: { type: MarkerType.Arrow } },
{ id: 'e22c', source: '2', target: '2c', type: 'smoothstep', markerEnd: { type: MarkerType.Arrow } },
{ id: 'e2c2d', source: '2c', target: '2d', type: 'smoothstep', markerEnd: { type: MarkerType.Arrow } },
{ id: 'e45', source: '4', target: '5', type: 'smoothstep', markerEnd: { type: MarkerType.Arrow } },
{ id: 'e56', source: '5', target: '6', type: 'smoothstep', markerEnd: { type: MarkerType.Arrow } },
{ id: 'e57', source: '5', target: '7', type: 'smoothstep', markerEnd: { type: MarkerType.Arrow } },
];
const nodesAndEdges = { nodes, edges };
export default nodesAndEdges;

19
packages/core/example/src/Undirectional/CustomNode.tsx
View File

@@ -1,19 +0,0 @@
import React, { memo, FC, CSSProperties } from 'react';
import { Handle, Position, NodeProps } from 'react-flow-renderer';
const nodeStyles: CSSProperties = { padding: '10px 15px', border: '1px solid #ddd' };
const CustomNode: FC<NodeProps> = ({ id }) => {
return (
<div style={nodeStyles}>
<div>node {id}</div>
<Handle type="source" id="left" position={Position.Left} />
<Handle type="source" id="right" position={Position.Right} />
<Handle type="source" id="top" position={Position.Top} />
<Handle type="source" id="bottom" position={Position.Bottom} />
</div>
);
};
export default memo(CustomNode);

7
packages/minimap/package.json Normal file
View File

@@ -0,0 +1,7 @@
{
"name": "@react-flow/minimap",
"version": "11.0.0",
"description": "A minimap component for usage with React Flow",
"main": "index.js",
"license": "MIT"
}

4
packages/themes/dark/package.json
View File

@@ -1,4 +0,0 @@
{
"main": "dist/react-flow-themes-dark.cjs.js",
"module": "dist/react-flow-themes-dark.esm.js"
}

4
packages/themes/light/package.json
View File

@@ -1,4 +0,0 @@
{
"main": "dist/react-flow-themes-light.cjs.js",
"module": "dist/react-flow-themes-light.esm.js"
}

17
packages/themes/package.json
View File

@@ -1,17 +0,0 @@
{
"name": "@react-flow/themes",
"version": "11.0.0",
"description": "Themes for React Flow",
"license": "MIT",
"scripts": {
"build": "yarn build:darktheme && yarn build:lighttheme",
"build:darktheme": "mkdir -p ./dark/dist && cp ./src/react-flow-dark.css ./dark/dist/react-flow-dark.css",
"build:lighttheme": "mkdir -p ./light/dist && cp ./src/react-flow-light.css ./dark/dist/react-flow-light.css"
},
"preconstruct": {
"entrypoints": [
"dark.js",
"light.js"
]
}
}

1
packages/themes/src/dark.js
View File

@@ -1 +0,0 @@
import './react-flow-dark.css';

1
packages/themes/src/light.js
View File

@@ -1 +0,0 @@
import './react-flow-light.css';

3
packages/themes/src/react-flow-dark.css
View File

@@ -1,3 +0,0 @@
.react-flow {
background-color: black;
}

3
packages/themes/src/react-flow-light.css
View File

@@ -1,3 +0,0 @@
.react-flow {
background-color: red;
}

13763
yarn.lock
View File

File diff suppressed because it is too large Load Diff