feat(website): init
This commit is contained in:
moklick
@@ -0,0 +1,67 @@
|
||||
---
|
||||
title: Prop Types
|
||||
---
|
||||
|
||||
### Basic Props
|
||||
- `elements`: array of [nodes](#nodes) and [edges](#edges) *(required)*
|
||||
- `style`: css properties
|
||||
- `className`: additional class name
|
||||
|
||||
### Flow View
|
||||
- `minZoom`: default: `0.5`
|
||||
- `maxZoom`: default: `2`
|
||||
- `defaultZoom`: default: `1`
|
||||
- `defaultPosition`: default: `[0, 0]`
|
||||
- `snapToGrid`: default: `false`
|
||||
- `snapGrid`: [x, y] array - default: `[16, 16]`
|
||||
- `onlyRenderVisibleNodes`: default: `true`
|
||||
- `translateExtent`: [default `[[-∞, -∞], [+∞, +∞]]`](https://github.com/d3/d3-zoom#zoom_translateExtent)
|
||||
|
||||
### Event Handlers
|
||||
- `onElementClick(event, element)`: called when user clicks node or edge
|
||||
- `onElementsRemove(elements)`: called when user removes node or edge
|
||||
- `onNodeDragStart(event, node)`: node drag start
|
||||
- `onNodeDragStop(event, node)`: node drag stop
|
||||
- `onNodeMouseEnter(event, node)`: node mouse enter
|
||||
- `onNodeMouseMove(event, node)`: node mouse move
|
||||
- `onNodeMouseLeave(event, node)`: node mouse leave
|
||||
- `onNodeContextMenu(event, node)`: node context menu
|
||||
- `onConnect({ source, target })`: called when user connects two nodes
|
||||
- `onConnectStart(event, { nodeId, handleType })`: called when user starts to drag connection line
|
||||
- `onConnectStop(event)`: called when user stops to drag connection line
|
||||
- `onConnectEnd(event)`: called after user stops or connects nodes
|
||||
- `onLoad(reactFlowInstance)`: called after flow is initialized
|
||||
- `onMove(flowTransform)`: called when user is panning or zooming
|
||||
- `onMoveStart(flowTransform)`: called when user starts panning or zooming
|
||||
- `onMoveEnd(flowTransform)`: called when user ends panning or zooming
|
||||
- `onSelectionChange(elements)`: called when user selects one or multiple elements
|
||||
- `onSelectionDragStart(event, nodes)`: called when user starts to drag a selection
|
||||
- `onSelectionDrag(event, nodes)`: called when user drags a selection
|
||||
- `onSelectionDragStop(event, nodes)`: called when user stops to drag a selection
|
||||
- `onSelectionContextMenu(event, nodes)`: called when user does a right-click on a selection
|
||||
- `onPaneClick(event)`: called when user clicks directly on the canvas
|
||||
- `onPaneContextMenu(event)`: called when user does a right-click on the canvas
|
||||
- `onPaneScroll(event)`: called when user scrolls pane (only works when `zoomOnScroll` is set to `false)
|
||||
|
||||
### Interaction
|
||||
- `nodesDraggable`: default: `true`. This applies to all nodes. You can also change the behavior of a specific node with the `draggable` node option
|
||||
- `nodesConnectable`: default: `true`. This applies to all nodes. You can also change the behavior of a specific node with the `connectable` node option
|
||||
- `elementsSelectable`: default: `true`. This applies to all elements. You can also change the behavior of a specific node with the `selectable` node option
|
||||
- `zoomOnScroll`: default: `true`
|
||||
- `zoomOnDoubleClick`: default: `true`
|
||||
- `selectNodesOnDrag`: default: `true`
|
||||
- `paneMoveable`: default: `true` - If set to `false`, panning and zooming is disabled
|
||||
|
||||
### Element Customization
|
||||
- `nodeTypes`: object with [node types](#node-types--custom-nodes)
|
||||
- `edgeTypes`: object with [edge types](#edge-types--custom-edges)
|
||||
- `arrowHeadColor`: default: `#bbb`
|
||||
|
||||
### Connection Line Options
|
||||
- `connectionLineType`: connection line type = `default` (bezier), `straight`, `step`, `smoothstep`
|
||||
- `connectionLineStyle`: connection style as svg attributes
|
||||
- `connectionLineComponent`: [custom connection line component](/example/src/CustomConnectionLine/index.js)
|
||||
|
||||
### Keys
|
||||
- `deleteKeyCode`: default: `8` (delete)
|
||||
- `selectionKeyCode`: default: `16` (shift)
|
||||
@@ -0,0 +1,31 @@
|
||||
---
|
||||
title: Background
|
||||
---
|
||||
|
||||
React Flow comes with two background variants: **dots** and **lines**. You can use it by passing it as a children to the `ReactFlow` component:
|
||||
|
||||
### Usage
|
||||
|
||||
```jsx
|
||||
import ReactFlow, { Background } from 'react-flow-renderer';
|
||||
|
||||
const FlowWithBackground = () => (
|
||||
<ReactFlow elements={elements}>
|
||||
<Background
|
||||
variant="dots"
|
||||
gap={12}
|
||||
size={4}
|
||||
/>
|
||||
</ReactFlow>
|
||||
);
|
||||
```
|
||||
|
||||
|
||||
### Prop Types
|
||||
|
||||
- `variant`: string - has to be 'dots' or 'lines' - default: `dots`
|
||||
- `gap`: number - the gap between the dots or lines - default: `16`
|
||||
- `size`: number - the radius of the dots or the stroke width of the lines - default: `0.5`
|
||||
- `color`: string - the color of the dots or lines - default: `#999` for dots, `#eee` for lines
|
||||
- `style`: css properties
|
||||
- `className`: additional class name
|
||||
@@ -0,0 +1,25 @@
|
||||
---
|
||||
title: Controls
|
||||
---
|
||||
|
||||
The control panel contains a zoom-in, zoom-out, fit-view and a lock/unlock button. You can use it by passing it as a children to the `ReactFlow` component:
|
||||
|
||||
### Usage
|
||||
|
||||
```jsx
|
||||
import ReactFlow, { Controls } from 'react-flow-renderer';
|
||||
|
||||
const FlowWithControls = () => (
|
||||
<ReactFlow elements={elements}>
|
||||
<Controls />
|
||||
</ReactFlow>
|
||||
);
|
||||
```
|
||||
|
||||
### Prop Types
|
||||
|
||||
- `showZoom`: boolean - default: true
|
||||
- `showFitView`: boolean - default: true
|
||||
- `showInteractive`: boolean - default: true
|
||||
- `style`: css properties
|
||||
- `className`: additional class name
|
||||
@@ -0,0 +1,36 @@
|
||||
---
|
||||
title: Mini Map
|
||||
---
|
||||
|
||||
You can use the mini map plugin by passing it as a children to the `ReactFlow` component:
|
||||
|
||||
### Usage
|
||||
|
||||
```jsx
|
||||
import ReactFlow, { MiniMap } from 'react-flow-renderer';
|
||||
|
||||
const FlowWithMiniMap = () => (
|
||||
<ReactFlow elements={elements}>
|
||||
<MiniMap
|
||||
nodeColor={(node) => {
|
||||
switch (node.type) {
|
||||
case 'input': return 'red';
|
||||
case 'default': return '#00ff00';
|
||||
case 'output': return 'rgb(0,0,255)';
|
||||
default: return '#eee';
|
||||
}
|
||||
}}
|
||||
/>
|
||||
</ReactFlow>
|
||||
);
|
||||
```
|
||||
|
||||
|
||||
### Prop Types
|
||||
|
||||
- `nodeColor`: string or function - If you pass a color as a string all nodes will get that color. If you pass a function you can return a color depending on the passed node.
|
||||
- `nodeBorderRadius`: number
|
||||
- `nodeClassName`: string or function for adding an additional class to the nodes inside the mini map
|
||||
- `maskColor`: string
|
||||
- `style`: css properties
|
||||
- `className`: additional class name
|
||||
@@ -0,0 +1,21 @@
|
||||
---
|
||||
title: Provider
|
||||
---
|
||||
|
||||
If you need access to the internal state and action of React Flow outside of the `ReactFlow` component you can wrap it with the `ReactFlowProvider` component:
|
||||
|
||||
```jsx
|
||||
import ReactFlow, { ReactFlowProvider } from 'react-flow-renderer';
|
||||
|
||||
const FlowWithOwnProvider = () => (
|
||||
<ReactFlowProvider>
|
||||
<ReactFlow
|
||||
elements={elements}
|
||||
onElementClick={onElementClick}
|
||||
onConnect={onConnect}
|
||||
/>
|
||||
</ReactFlowProvider>
|
||||
);
|
||||
```
|
||||
|
||||
It is used in the [provider example](example/src/Provider/index.js).
|
||||
@@ -0,0 +1,113 @@
|
||||
---
|
||||
id: edges
|
||||
title: Edges
|
||||
---
|
||||
|
||||
|
||||
React Flow comes with four [edge types](#edge-types--custom-edges) (`default`, `straight`, `step`, `smoothstep`). As the names indicate, the edges differ in the representation. The default type is a bezier edge. You create edges by adding them to your `elements` array of the `ReactFlow` component.
|
||||
|
||||
Edge example:
|
||||
|
||||
```js
|
||||
{
|
||||
id: 'e1-2',
|
||||
type: 'straight',
|
||||
source: '1',
|
||||
target: '2',
|
||||
animated: true,
|
||||
label: 'edge label'
|
||||
}
|
||||
```
|
||||
|
||||
If you wanted to display this edge, you would need a node with id = 1 (source node) and another one with id = 2 (target node).
|
||||
|
||||
## Options
|
||||
|
||||
- `id`: string *(required)*
|
||||
- `source`: string (an id of a node) *(required)*
|
||||
- `target`: string (an id of a node) *(required)*
|
||||
- `type`: 'default' (bezier), 'straight', 'step' and 'smoothedge' or a custom one depending on your implementation
|
||||
- `animated`: boolean
|
||||
- `style`: css properties for the edge line path
|
||||
- `className`: additional class name
|
||||
- `label`: string
|
||||
- `labelStyle`: css properties for the text
|
||||
- `labelShowBg`: boolean - default: `true`
|
||||
- `labelBgStyle`: css properties for the text background
|
||||
- `labelBgPadding`: [number, number] background rectangle padding - default: `[2, 4]`
|
||||
- `labelBgBorderRadius`: number - default 2
|
||||
- `arrowHeadType`: 'arrow' or 'arrowclosed' - defines the arrowhead of the edge
|
||||
- `markerEndId`: custom marker end url - if this is used `arrowHeadType` gets ignored
|
||||
- `isHidden`: if `true`, the edge will not be rendered
|
||||
- `data`: {} you can use this to pass data to your custom edges.
|
||||
|
||||
You can find an example with different edges in the [edges example](https://reactflow.dev/edges).
|
||||
|
||||
## Edge Types & Custom Edges
|
||||
|
||||
The basic edge types are `default` (bezier), `straight`, `step` and `smoothstep`. The default `edgeTypes` object looks like this:
|
||||
|
||||
```javascript
|
||||
{
|
||||
default: BezierEdge,
|
||||
straight: StraightEdge,
|
||||
step: StepEdge,
|
||||
smoothstep: SmoothStepEdge
|
||||
}
|
||||
```
|
||||
|
||||
The keys represent the type names and the values are the edge components.
|
||||
If you want to introduce a new edge type you can pass an `edgeTypes` object to the `ReactFlow` component:
|
||||
|
||||
```javascript
|
||||
edgeTypes={{
|
||||
special: MyCustomEdge
|
||||
}}
|
||||
```
|
||||
|
||||
Now you could use the new type `special` for an edge.
|
||||
The `straight`, `default` and `step` types would still be available unless you overwrote one of them.
|
||||
There is an implementation of a custom edge in the [edges example](/example/src/Edges/index.js).
|
||||
|
||||
## Edge Utils
|
||||
|
||||
There are several utils that help you to create a custom edge. They are used in the [custom edge](/example/src/Edges/CustomEdge.js) example.
|
||||
|
||||
### `getBezierPath`
|
||||
|
||||
Returns the path of a bezier edge.
|
||||
|
||||
`getBezierPath({
|
||||
sourceX,
|
||||
sourceY,
|
||||
sourcePosition = Position.Bottom,
|
||||
targetX,
|
||||
targetY,
|
||||
targetPosition = Position.Top,
|
||||
}: GetBezierPathParams): string`
|
||||
|
||||
### `getSmoothStepPath`
|
||||
|
||||
Returns the path of a smooth step edge. You can set `borderRadius` = `0` to get a step edge path.
|
||||
|
||||
`getSmoothStepPath({
|
||||
sourceX,
|
||||
sourceY,
|
||||
sourcePosition = Position.Bottom,
|
||||
targetX,
|
||||
targetY,
|
||||
targetPosition = Position.Top,
|
||||
borderRadius = 5,
|
||||
}: GetSmoothStepPathParams): string`
|
||||
|
||||
### `getEdgeCenter`
|
||||
|
||||
Returns the center poostion `[centerX, centerY]` of the edge.
|
||||
|
||||
`getEdgeCenter({ sourceX, sourceY, targetX, targetY }: GetCenterParams): [number, number, number, number]`
|
||||
|
||||
### `getMarkerEnd`
|
||||
|
||||
Returns the marker end url for displaying the arrow head.
|
||||
|
||||
`getMarkerEnd(arrowHeadType?: ArrowHeadType, markerEndId?: string): string`
|
||||
@@ -0,0 +1,53 @@
|
||||
---
|
||||
title: Helper Functions
|
||||
---
|
||||
|
||||
If you want to remove a node or connect two nodes with each other you need to pass a function to `onElementsRemove` and `onConnect`. In order to simplify this process there are some helper functions you can use:
|
||||
|
||||
```javascript
|
||||
import ReactFlow, { isNode, isEdge, removeElements, addEdge } from 'react-flow-renderer';
|
||||
```
|
||||
|
||||
### `isEdge`
|
||||
|
||||
Returns `true` if the passed element is an edge.
|
||||
|
||||
`isEdge = (element: Node | Edge): element is Edge`
|
||||
|
||||
### `isNode`
|
||||
|
||||
Returns `true` if the passed element is a node.
|
||||
|
||||
`isNode = (element: Node | Edge): element is Node`
|
||||
|
||||
### `removeElements`
|
||||
|
||||
Returns an array of elements without the ones from `elementsToRemove`. It also removes all incoming/outgoing edges if you just pass one or multiple nodes.
|
||||
|
||||
`removeElements = (elementsToRemove: Elements, elements: Elements): Elements`
|
||||
|
||||
### `addEdge`
|
||||
|
||||
Returns an array with elements with the added edge.
|
||||
|
||||
`addEdge = (edgeParams: Edge, elements: Elements): Elements`
|
||||
|
||||
### `getOutgoers`
|
||||
|
||||
Returns all direct child nodes of the passed node.
|
||||
|
||||
`getOutgoers = (node: Node, elements: Elements): Node[]`
|
||||
|
||||
### `getIncomers`
|
||||
|
||||
Returns all direct incoming nodes of the passed node.
|
||||
|
||||
`getIncomers = (node: Node, elements: Elements): Node[]`
|
||||
|
||||
### `getConnectedEdges`
|
||||
|
||||
Returns all edges that are connected to the passed nodes.
|
||||
|
||||
`getConnectedEdges = (nodes: Node[], edges: Edge[]): Edge[]`
|
||||
|
||||
You can use these function as seen in [this example](/example/src/Overview/index.js#L40-L41) or use your own ones.
|
||||
@@ -0,0 +1,47 @@
|
||||
---
|
||||
title: Internal State and Actions
|
||||
---
|
||||
|
||||
Under the hood React Flow uses [Easy Peasy](https://easy-peasy.now.sh/) for state handling.
|
||||
If you need to access the internal state you can use the `useStoreState` hook inside a child component of the `ReactFlow` component:
|
||||
|
||||
### Internal state
|
||||
|
||||
```jsx
|
||||
import ReactFlow, { useStoreState } from 'react-flow-renderer';
|
||||
|
||||
const NodesDebugger = () => {
|
||||
const nodes = useStoreState(state => state.nodes);
|
||||
|
||||
console.log(nodes);
|
||||
|
||||
return null;
|
||||
}
|
||||
|
||||
const Flow = () => (
|
||||
<ReactFlow elements={elements}>
|
||||
<NodesDebugger />
|
||||
</ReactFlow>
|
||||
);
|
||||
```
|
||||
|
||||
### Internal actions
|
||||
|
||||
You will not need this in most cases but you can also use the internal actions that are defined in the [store](/src/store/index.ts):
|
||||
|
||||
```jsx
|
||||
import React, { useEffect } from 'react';
|
||||
import { useStoreActions } from 'react-flow-renderer'
|
||||
|
||||
const TransformUpdater = ({ x, y, zoom }) => {
|
||||
const setTransform = useStoreActions(actions => actions.setInitTransform);
|
||||
|
||||
useEffect(() => {
|
||||
setTransform({ x, y, k: zoom })
|
||||
}, [x, y, zoom]);
|
||||
|
||||
return null;
|
||||
});
|
||||
```
|
||||
|
||||
If you need more control you can wrap the `ReactFlow` component with the `ReactFlowProvider` component in order to be able to call `useStoreState` and `useStoreActions` outside of the `ReactFlow` component.
|
||||
@@ -0,0 +1,109 @@
|
||||
---
|
||||
id: nodes
|
||||
title: Nodes
|
||||
---
|
||||
|
||||
There are three different [node types](#node-types--custom-nodes) (`default`, `input`, `output`) you can use. The node types differ in the number and types of handles. An input node has only a source handle, a default node has a source and a target and an output node has only a target handle. You create nodes by adding them to the `elements` array of the `ReactFlow` component.
|
||||
|
||||
Node example:
|
||||
|
||||
```js
|
||||
{
|
||||
id: '1',
|
||||
type: 'input',
|
||||
data: { label: 'Node 1' },
|
||||
position: { x: 250, y: 5 }
|
||||
}
|
||||
```
|
||||
|
||||
## Options
|
||||
|
||||
- `id`: string *(required)*
|
||||
- `position`: { x: number, y: number } *(required)*
|
||||
- `data`: {} *(required if you are using a standard type, otherwise depends on your implementation)*
|
||||
- `type`: 'input' | 'output' | 'default' or a custom one you implemented
|
||||
- `style`: css properties
|
||||
- `className`: additional class name
|
||||
- `targetPosition`: 'left' | 'right' | 'top' | 'bottom' handle position - default: 'top'
|
||||
- `sourcePosition`: 'left' | 'right' | 'top' | 'bottom' handle position - default: 'bottom'
|
||||
- `isHidden`: if `true`, the node will not be rendered
|
||||
- `draggable`: boolean - if option is not set, the node is draggable (overwrites general `nodesDraggable` option)
|
||||
- `connectable`: boolean - if option is not set, the node is connectable (overwrites general `nodesConnectable` option)
|
||||
- `selectable`: boolean - if option is not set, the node is selectable (overwrites general `elementsSelectable` option)
|
||||
|
||||
## Node Types & Custom Nodes
|
||||
|
||||
The standard node types are `input`, `default` and `output`. The default node types object looks like this:
|
||||
|
||||
```js
|
||||
{
|
||||
input: InputNode,
|
||||
default: DefaultNode,
|
||||
output: OutputNode
|
||||
}
|
||||
```
|
||||
|
||||
The keys represent the type names and the values are the components that get rendered.
|
||||
If you want to introduce a new type you can pass a `nodeTypes` object to the `ReactFlow` component:
|
||||
|
||||
```js
|
||||
nodeTypes={{
|
||||
special: MyCustomNode
|
||||
}}
|
||||
```
|
||||
|
||||
You can now use the type `special` for a node.
|
||||
The `default`, `input` and `output` types would be still available except you overwrote one of them.
|
||||
There is an example of a custom node implementation in the [custom node example](/example/src/CustomNode).
|
||||
|
||||
## Custom Node Props
|
||||
|
||||
Your custom nodes are wrapped so that the basic functions like dragging or selecting work. Custom nodes receive the following props:
|
||||
|
||||
- `id`: string
|
||||
- `data`: object
|
||||
- `type`: string
|
||||
- `selected`: boolean
|
||||
- `sourcePosition`: string
|
||||
- `targetPosition`: string
|
||||
|
||||
### Prevent dragging
|
||||
|
||||
If you have controls or other elements inside your custom node that should not drag the node you can add the class name `nodrag`.
|
||||
|
||||
## Handle Component
|
||||
|
||||
We export a `Handle` component as a helper for your custom nodes:
|
||||
|
||||
```javascript
|
||||
import { Handle } from 'react-flow-renderer';
|
||||
|
||||
const targetHandleWithValidation = (
|
||||
<Handle
|
||||
type="target"
|
||||
position="left"
|
||||
isValidConnection={(connection) => connection.source === 'some-id'}
|
||||
onConnect={params => console.log('handle onConnect', params)}
|
||||
style={{ background: '#fff' }}
|
||||
/>
|
||||
);
|
||||
```
|
||||
|
||||
### Prop Types
|
||||
|
||||
- `type`: 'source' or 'target'
|
||||
- `id`: string - you only need this when you have multiple source or target handles (otherwise the node id is used)
|
||||
- `position`: 'left', 'right', 'top' or 'bottom' handle position - default: 'top' for type target, 'bottom' for type source
|
||||
- `onConnect`: function that gets triggered on connect
|
||||
- `isValidConnection`: function receives a connection `{ target: 'some-id', source: 'another-id' }` as param, returns a boolean - default: `true`
|
||||
- `style`: css properties
|
||||
- `className`: additional class name
|
||||
|
||||
### Validation
|
||||
|
||||
The handle receives the additional class names `connecting` when the connection line is above the handle and `valid` if the connection is valid. You can find an example which uses these classes [here](/example/src/Validation/index.js).
|
||||
|
||||
### Multiple Handles
|
||||
|
||||
If you need multiple source or target handles you can achieve this by creating a custom node. Normally you just use the id of a node for the `source` or `target` of an edge. If you have multiple source or target handles you need to pass an id to these handles. These ids get then added to the node id, so that you can connect a specific handle. If you have a node with an id = `1` and a handle with an id = `a` you can connect this handle by using the id = `1__a`.
|
||||
You can find an example of how to implement a custom node with multiple handles in the [custom node example](/example/src/CustomNode/ColorSelectorNode.js#L18-L29).
|
||||
@@ -0,0 +1,53 @@
|
||||
---
|
||||
title: Instance
|
||||
---
|
||||
|
||||
You can receive a `reactFlowInstance` by using the `onLoad` callback:
|
||||
|
||||
```javascript
|
||||
import React from 'react';
|
||||
import ReactFlow from 'react-flow-renderer';
|
||||
|
||||
const onLoad = (reactFlowInstance) => {
|
||||
reactFlowInstance.fitView();
|
||||
}
|
||||
|
||||
const BasicFlow = () => <ReactFlow onLoad={onLoad} elements={[]} />;
|
||||
```
|
||||
|
||||
`reactFlowInstance` has the following functions:
|
||||
|
||||
### `project`
|
||||
|
||||
Transforms pixel coordinates to the internal ReactFlow coordinate system.
|
||||
This can be used when you drag nodes (from a side bar for example) and need the position on the pane.
|
||||
|
||||
`project = (position: XYPosition): XYPosition`
|
||||
|
||||
### `fitView`
|
||||
|
||||
Fits view port so that all nodes are inside the view port.
|
||||
|
||||
`fitView = ({ padding }): void`
|
||||
|
||||
### `zoomIn`
|
||||
|
||||
`zoomIn = (): void`
|
||||
|
||||
### `zoomOut`
|
||||
|
||||
`zoomOut = (): void`
|
||||
|
||||
### `zoomTo`
|
||||
|
||||
`zoomTo = (zoomLevel: number): void`
|
||||
|
||||
### `getElements`
|
||||
|
||||
`getElements = (): Elements`
|
||||
|
||||
### `setTransform`
|
||||
|
||||
Sets position and zoom of the pane.
|
||||
|
||||
`setTransform = (transform: FlowTransform): void`
|
||||
Reference in New Issue
Block a user