docs(website): texts, docs, examples, favicon, cleanup
This commit is contained in:
moklick
@@ -2,8 +2,14 @@
|
||||
title: Prop Types
|
||||
---
|
||||
|
||||
This is the list of prop types you can pass to the main `ReactFlow` component.
|
||||
|
||||
```jsx
|
||||
import ReactFlow from 'react-flow-renderer';
|
||||
```
|
||||
|
||||
### Basic Props
|
||||
- `elements`: array of [nodes](#nodes) and [edges](#edges) *(required)*
|
||||
- `elements`: array of [nodes](/docs/api/nodes/) and [edges](/docs/api/edges/) *(required)*
|
||||
- `style`: css properties
|
||||
- `className`: additional class name
|
||||
|
||||
@@ -13,7 +19,7 @@ title: Prop Types
|
||||
- `defaultZoom`: default: `1`
|
||||
- `defaultPosition`: default: `[0, 0]`
|
||||
- `snapToGrid`: default: `false`
|
||||
- `snapGrid`: [x, y] array - default: `[16, 16]`
|
||||
- `snapGrid`: [x, y] array - default: `[15, 15]`
|
||||
- `onlyRenderVisibleNodes`: default: `true`
|
||||
- `translateExtent`: [default `[[-∞, -∞], [+∞, +∞]]`](https://github.com/d3/d3-zoom#zoom_translateExtent)
|
||||
|
||||
@@ -55,7 +61,7 @@ title: Prop Types
|
||||
### Element Customization
|
||||
- `nodeTypes`: object with [node types](#node-types--custom-nodes)
|
||||
- `edgeTypes`: object with [edge types](#edge-types--custom-edges)
|
||||
- `arrowHeadColor`: default: `#bbb`
|
||||
- `arrowHeadColor`: default: `#b1b1b7`
|
||||
|
||||
### Connection Line Options
|
||||
- `connectionLineType`: connection line type = `default` (bezier), `straight`, `step`, `smoothstep`
|
||||
|
||||
@@ -26,6 +26,6 @@ const FlowWithBackground = () => (
|
||||
- `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
|
||||
- `color`: string - the color of the dots or lines - default: `#81818a` for dots, `#eee` for lines
|
||||
- `style`: css properties
|
||||
- `className`: additional class name
|
||||
|
||||
@@ -18,4 +18,4 @@ const FlowWithOwnProvider = () => (
|
||||
);
|
||||
```
|
||||
|
||||
It is used in the [provider example](example/src/Provider/index.js).
|
||||
It is used in the [provider example](https://github.com/wbkd/react-flow/blob/main/example/src/Provider/index.js).
|
||||
@@ -0,0 +1,28 @@
|
||||
---
|
||||
title: Edge Types & Custom Edges
|
||||
---
|
||||
|
||||
React Flow comes with four edge types (`default`, `straight`, `step`, `smoothstep`). As the names indicate, the edges differ in the representation. The default type is a bezier edge.
|
||||
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).
|
||||
@@ -0,0 +1,61 @@
|
||||
---
|
||||
title: Edge Utils
|
||||
---
|
||||
|
||||
There are several utils that help you to create a custom edge. They are used in the [custom edge](/examples/custom-edge) example.
|
||||
|
||||
### `getBezierPath`
|
||||
|
||||
Returns the path of a bezier edge.
|
||||
|
||||
```
|
||||
getBezierPath({
|
||||
sourceX,
|
||||
sourceY,
|
||||
sourcePosition = Position.Bottom, // optional
|
||||
targetX,
|
||||
targetY,
|
||||
targetPosition = Position.Top, // optional
|
||||
centerX, // optional
|
||||
centerY, // optional
|
||||
}: 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, // optional
|
||||
targetX,
|
||||
targetY,
|
||||
targetPosition = Position.Top, // optional
|
||||
borderRadius = 5, // optional
|
||||
centerX, // optional
|
||||
centerY, // optional
|
||||
}: GetSmoothStepPathParams): string
|
||||
```
|
||||
|
||||
### `getEdgeCenter`
|
||||
|
||||
Returns the center position and offset `[centerX, centerY, offsetX, offsetY]` 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
|
||||
```
|
||||
@@ -1,10 +1,8 @@
|
||||
---
|
||||
id: edges
|
||||
title: Edges
|
||||
title: Edge Options
|
||||
---
|
||||
|
||||
|
||||
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.
|
||||
You create edges by adding them to your `elements` array of the `ReactFlow` component.
|
||||
|
||||
Edge example:
|
||||
|
||||
@@ -42,72 +40,3 @@ If you wanted to display this edge, you would need a node with id = 1 (source no
|
||||
- `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,38 @@
|
||||
---
|
||||
title: 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](/examples/validation).
|
||||
|
||||
### 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](https://github.com/wbkd/react-flow/blob/main/example/src/CustomNode/ColorSelectorNode.js#L18-L29).
|
||||
@@ -50,4 +50,4 @@ 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.
|
||||
You can use these function as seen in [this example](https://github.com/wbkd/react-flow/blob/main/example/src/Overview/index.js#L119-L120) or use your own ones.
|
||||
|
||||
@@ -27,7 +27,7 @@ const Flow = () => (
|
||||
|
||||
### 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):
|
||||
You will not need this in most cases but you can also use the internal actions that are defined in the [store](https://github.com/wbkd/react-flow/blob/main/src/store/index.ts):
|
||||
|
||||
```jsx
|
||||
import React, { useEffect } from 'react';
|
||||
|
||||
@@ -0,0 +1,41 @@
|
||||
---
|
||||
title: Node Types & Custom Nodes
|
||||
---
|
||||
|
||||
There are three different node types (`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. 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](/examples/custom-node).
|
||||
|
||||
## 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`.
|
||||
@@ -1,9 +1,7 @@
|
||||
---
|
||||
id: nodes
|
||||
title: Nodes
|
||||
title: Node Options
|
||||
---
|
||||
|
||||
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.
|
||||
You create nodes by adding them to the `elements` array of the `ReactFlow` component.
|
||||
|
||||
Node example:
|
||||
|
||||
@@ -30,80 +28,3 @@ Node example:
|
||||
- `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).
|
||||
@@ -15,31 +15,42 @@ const onLoad = (reactFlowInstance) => {
|
||||
const BasicFlow = () => <ReactFlow onLoad={onLoad} elements={[]} />;
|
||||
```
|
||||
|
||||
`reactFlowInstance` has the following functions:
|
||||
The `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.
|
||||
This can be used when you drag nodes (from a side bar for example) and need the internal position on the pane.
|
||||
|
||||
`project = (position: XYPosition): XYPosition`
|
||||
|
||||
**example:**
|
||||
```
|
||||
reactFlowInstance.project({ x: 100, y: 100 });
|
||||
```
|
||||
|
||||
### `fitView`
|
||||
|
||||
Fits view port so that all nodes are inside the view port.
|
||||
Fits the view port so that all nodes are visible
|
||||
|
||||
`fitView = ({ padding }): void`
|
||||
|
||||
### `zoomIn`
|
||||
|
||||
Zoom in
|
||||
|
||||
`zoomIn = (): void`
|
||||
|
||||
### `zoomOut`
|
||||
|
||||
Zoom out
|
||||
|
||||
`zoomOut = (): void`
|
||||
|
||||
### `zoomTo`
|
||||
|
||||
Zooms to the specified zoom level
|
||||
|
||||
`zoomTo = (zoomLevel: number): void`
|
||||
|
||||
### `getElements`
|
||||
@@ -50,4 +61,9 @@ Fits view port so that all nodes are inside the view port.
|
||||
|
||||
Sets position and zoom of the pane.
|
||||
|
||||
`setTransform = (transform: FlowTransform): void`
|
||||
`setTransform = (transform: FlowTransform): void`
|
||||
|
||||
**example:**
|
||||
```
|
||||
reactFlowInstance.setTransform({ x: 100, y: 100, zoom: 1.5 });
|
||||
```
|
||||
Reference in New Issue
Block a user