-
-
-
+
+
+
);
});
diff --git a/website/src/example-flows/CustomNode/index.js b/website/src/example-flows/CustomNode/index.js
index 494aea73..d27cdf1b 100644
--- a/website/src/example-flows/CustomNode/index.js
+++ b/website/src/example-flows/CustomNode/index.js
@@ -1,4 +1,5 @@
import React, { useState, useEffect } from 'react';
+
import ReactFlow, {
isEdge,
removeElements,
@@ -11,15 +12,17 @@ import ColorSelectorNode from './ColorSelectorNode';
import './index.css';
-const onLoad = (reactFlowInstance) =>
+const onLoad = (reactFlowInstance) => {
console.log('flow loaded:', reactFlowInstance);
+ setTimeout(() => reactFlowInstance.fitView(), 1);
+};
const onNodeDragStop = (event, node) => console.log('drag stop', node);
const onElementClick = (event, element) => console.log('click', element);
-const initBgColor = '#f0e742';
+const initBgColor = '#1A192B';
const connectionLineStyle = { stroke: '#fff' };
-const snapGrid = [16, 16];
+const snapGrid = [20, 20];
const nodeTypes = {
selectorNode: ColorSelectorNode,
};
@@ -32,7 +35,7 @@ const CustomNodeFlow = () => {
const onChange = (event) => {
setElements((els) =>
els.map((e) => {
- if (isEdge(e) || e.id !== 'custom-2') {
+ if (isEdge(e) || e.id !== '2') {
return e;
}
@@ -53,52 +56,52 @@ const CustomNodeFlow = () => {
setElements([
{
- id: 'custom-1',
+ id: '1',
type: 'input',
data: { label: 'An input node' },
position: { x: 0, y: 50 },
sourcePosition: 'right',
},
{
- id: 'custom-2',
+ id: '2',
type: 'selectorNode',
data: { onChange: onChange, color: initBgColor },
style: { border: '1px solid #777', padding: 10 },
- position: { x: 250, y: 50 },
+ position: { x: 300, y: 50 },
},
{
- id: 'custom-3',
+ id: '3',
type: 'output',
data: { label: 'Output A' },
- position: { x: 550, y: 25 },
+ position: { x: 650, y: 25 },
targetPosition: 'left',
},
{
- id: 'custom-4',
+ id: '4',
type: 'output',
data: { label: 'Output B' },
- position: { x: 550, y: 100 },
+ position: { x: 650, y: 100 },
targetPosition: 'left',
},
{
- id: 'custom-e1-2',
- source: 'custom-1',
- target: 'custom-2',
+ id: 'e1-2',
+ source: '1',
+ target: '2',
animated: true,
style: { stroke: '#fff' },
},
{
- id: 'custom-e2a-3',
- source: 'custom-2__a',
- target: 'custom-3',
+ id: 'e2a-3',
+ source: '2__a',
+ target: '3',
animated: true,
style: { stroke: '#fff' },
},
{
- id: 'custom-e2b-4',
- source: 'custom-2__b',
- target: 'custom-4',
+ id: 'e2b-4',
+ source: '2__b',
+ target: '4',
animated: true,
style: { stroke: '#fff' },
},
@@ -125,12 +128,17 @@ const CustomNodeFlow = () => {
connectionLineStyle={connectionLineStyle}
snapToGrid={true}
snapGrid={snapGrid}
+ defaultZoom={1.5}
>
{
- if (n.type === 'input') return 'blue';
+ nodeStrokeColor={(n) => {
+ if (n.type === 'input') return '#0041d0';
if (n.type === 'selectorNode') return bgColor;
- if (n.type === 'output') return 'green';
+ if (n.type === 'output') return '#ff0072';
+ }}
+ nodeColor={(n) => {
+ if (n.type === 'selectorNode') return bgColor;
+ return '#fff';
}}
/>
diff --git a/website/src/example-flows/Interaction/index.js b/website/src/example-flows/Interaction/index.js
index 0e6080e9..f9c493e7 100644
--- a/website/src/example-flows/Interaction/index.js
+++ b/website/src/example-flows/Interaction/index.js
@@ -39,6 +39,8 @@ const onElementClick = (event, element) => console.log('click', element);
const onPaneClick = (event) => console.log('onPaneClick', event);
const onPaneScroll = (event) => console.log('onPaneScroll', event);
const onPaneContextMenu = (event) => console.log('onPaneContextMenu', event);
+const onLoad = (reactFlowInstance) =>
+ reactFlowInstance.fitView({ padding: 0.2 });
const InteractionFlow = () => {
const [elements, setElements] = useState(initialElements);
@@ -70,6 +72,7 @@ const InteractionFlow = () => {
onPaneClick={captureZoomClick ? onPaneClick : undefined}
onPaneScroll={captureZoomScroll ? onPaneScroll : undefined}
onPaneContextMenu={captureZoomClick ? onPaneContextMenu : undefined}
+ onLoad={onLoad}
>
diff --git a/website/src/example-flows/Overview/index.js b/website/src/example-flows/Overview/index.js
index 7bfdf62b..07185ca4 100644
--- a/website/src/example-flows/Overview/index.js
+++ b/website/src/example-flows/Overview/index.js
@@ -33,7 +33,7 @@ const onMoveEnd = (transform) => console.log('zoom/move end', transform);
const initialElements = [
{
- id: 'overview-1',
+ id: '1',
type: 'input',
data: {
label: (
@@ -45,7 +45,7 @@ const initialElements = [
position: { x: 250, y: 0 },
},
{
- id: 'overview-2',
+ id: '2',
data: {
label: (
<>
@@ -56,7 +56,7 @@ const initialElements = [
position: { x: 100, y: 100 },
},
{
- id: 'overview-3',
+ id: '3',
data: {
label: (
<>
@@ -73,36 +73,21 @@ const initialElements = [
},
},
{
- id: 'overview-4',
+ id: '4',
position: { x: 250, y: 200 },
data: {
- label: (
- <>
- You can find the docs on{' '}
-
- Github
-
-
- ),
+ label: 'Another default node',
},
},
{
- id: 'overview-5',
+ id: '5',
data: {
- label: (
- <>
- Or check out the other examples
-
- ),
+ label: 'Node id: 5',
},
position: { x: 250, y: 325 },
},
{
- id: 'overview-6',
+ id: '6',
type: 'output',
data: {
label: (
@@ -114,43 +99,38 @@ const initialElements = [
position: { x: 100, y: 480 },
},
{
- id: 'overview-7',
+ id: '7',
type: 'output',
data: { label: 'Another output node' },
position: { x: 400, y: 450 },
},
+ { id: 'e1-2', source: '1', target: '2', label: 'this is an edge label' },
+ { id: 'e1-3', source: '1', target: '3' },
{
- id: 'overview-e1-2',
- source: 'overview-1',
- target: 'overview-2',
- label: 'this is an edge label',
- },
- { id: 'overview-e1-3', source: 'overview-1', target: 'overview-3' },
- {
- id: 'overview-e3-4',
- source: 'overview-3',
- target: 'overview-4',
+ id: 'e3-4',
+ source: '3',
+ target: '4',
animated: true,
label: 'animated edge',
},
{
- id: 'overview-e4-5',
- source: 'overview-4',
- target: 'overview-5',
+ id: 'e4-5',
+ source: '4',
+ target: '5',
arrowHeadType: 'arrowclosed',
label: 'edge with arrow head',
},
{
- id: 'overview-e5-6',
- source: 'overview-5',
- target: 'overview-6',
+ id: 'e5-6',
+ source: '5',
+ target: '6',
type: 'smoothstep',
label: 'smooth step edge',
},
{
- id: 'overview-e5-7',
- source: 'overview-5',
- target: 'overview-7',
+ id: 'e5-7',
+ source: '5',
+ target: '7',
type: 'step',
style: { stroke: '#f6ab6c' },
label: 'a step edge',
@@ -168,8 +148,6 @@ const OverviewFlow = () => {
setElements((els) => removeElements(elementsToRemove, els));
const onConnect = (params) => setElements((els) => addEdge(params, els));
- console.log('render overview');
-
return (
{
connectionLineStyle={connectionLineStyle}
snapToGrid={true}
snapGrid={snapGrid}
- key="overview"
>
{
+ nodeStrokeColor={(n) => {
if (n.style?.background) return n.style.background;
- if (n.type === 'input') return '#9999ff';
- if (n.type === 'output') return '#79c9b7';
- if (n.type === 'default') return '#ff6060';
+ if (n.type === 'input') return '#0041d0';
+ if (n.type === 'output') return '#ff0072';
+ if (n.type === 'default') return '#1a192b';
return '#eee';
}}
+ nodeColor={(n) => {
+ if (n.style?.background) return n.style.background;
+
+ return '#fff';
+ }}
+ borderRadius={2}
/>
diff --git a/website/src/markdown/docs/api/component-props.md b/website/src/markdown/docs/api/component-props.md
index b61a2fe9..9a2af14b 100644
--- a/website/src/markdown/docs/api/component-props.md
+++ b/website/src/markdown/docs/api/component-props.md
@@ -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`
diff --git a/website/src/markdown/docs/api/components/background.md b/website/src/markdown/docs/api/components/background.md
index f22109cb..da687ea3 100644
--- a/website/src/markdown/docs/api/components/background.md
+++ b/website/src/markdown/docs/api/components/background.md
@@ -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
diff --git a/website/src/markdown/docs/api/components/provider.md b/website/src/markdown/docs/api/components/provider.md
index bad87c77..34a710f7 100644
--- a/website/src/markdown/docs/api/components/provider.md
+++ b/website/src/markdown/docs/api/components/provider.md
@@ -18,4 +18,4 @@ const FlowWithOwnProvider = () => (
);
```
-It is used in the [provider example](example/src/Provider/index.js).
\ No newline at end of file
+It is used in the [provider example](https://github.com/wbkd/react-flow/blob/main/example/src/Provider/index.js).
\ No newline at end of file
diff --git a/website/src/markdown/docs/api/edge-types.md b/website/src/markdown/docs/api/edge-types.md
new file mode 100644
index 00000000..879e5941
--- /dev/null
+++ b/website/src/markdown/docs/api/edge-types.md
@@ -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).
diff --git a/website/src/markdown/docs/api/edge-utils.md b/website/src/markdown/docs/api/edge-utils.md
new file mode 100644
index 00000000..af3c6043
--- /dev/null
+++ b/website/src/markdown/docs/api/edge-utils.md
@@ -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
+```
\ No newline at end of file
diff --git a/website/src/markdown/docs/api/edges.md b/website/src/markdown/docs/api/edges.md
index 33ee27d6..a380ca64 100644
--- a/website/src/markdown/docs/api/edges.md
+++ b/website/src/markdown/docs/api/edges.md
@@ -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`
\ No newline at end of file
diff --git a/website/src/markdown/docs/api/handle.md b/website/src/markdown/docs/api/handle.md
new file mode 100644
index 00000000..1cd2cf4f
--- /dev/null
+++ b/website/src/markdown/docs/api/handle.md
@@ -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 = (
+ 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).
\ No newline at end of file
diff --git a/website/src/markdown/docs/api/helper-functions.md b/website/src/markdown/docs/api/helper-functions.md
index 9a18334e..645f314b 100644
--- a/website/src/markdown/docs/api/helper-functions.md
+++ b/website/src/markdown/docs/api/helper-functions.md
@@ -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.
diff --git a/website/src/markdown/docs/api/internal-state-actions.md b/website/src/markdown/docs/api/internal-state-actions.md
index 6870a416..e80c46ec 100644
--- a/website/src/markdown/docs/api/internal-state-actions.md
+++ b/website/src/markdown/docs/api/internal-state-actions.md
@@ -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';
diff --git a/website/src/markdown/docs/api/node-types.md b/website/src/markdown/docs/api/node-types.md
new file mode 100644
index 00000000..5898f1ff
--- /dev/null
+++ b/website/src/markdown/docs/api/node-types.md
@@ -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`.
diff --git a/website/src/markdown/docs/api/nodes.md b/website/src/markdown/docs/api/nodes.md
index dd91758c..fbb5e7c8 100644
--- a/website/src/markdown/docs/api/nodes.md
+++ b/website/src/markdown/docs/api/nodes.md
@@ -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 = (
- 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).
\ No newline at end of file
diff --git a/website/src/markdown/docs/api/react-flow-instance.md b/website/src/markdown/docs/api/react-flow-instance.md
index e8e40ed7..f5dcf1c7 100644
--- a/website/src/markdown/docs/api/react-flow-instance.md
+++ b/website/src/markdown/docs/api/react-flow-instance.md
@@ -15,31 +15,42 @@ const onLoad = (reactFlowInstance) => {
const BasicFlow = () => ;
```
-`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`
\ No newline at end of file
+`setTransform = (transform: FlowTransform): void`
+
+**example:**
+```
+reactFlowInstance.setTransform({ x: 100, y: 100, zoom: 1.5 });
+```
\ No newline at end of file
diff --git a/website/src/markdown/docs/getting-started/index.md b/website/src/markdown/docs/getting-started/index.md
index 8d62a26f..3baf4bc4 100644
--- a/website/src/markdown/docs/getting-started/index.md
+++ b/website/src/markdown/docs/getting-started/index.md
@@ -2,17 +2,23 @@
title: Getting Started
---
-Before you can start to use React Flow you need to install `react-flow-renderer` from npm:
+Before you can start to use React Flow you need to install `react-flow-renderer`:
## Installation
+**npm:**
```bash
npm install react-flow-renderer
```
+**yarn:**
+```bash
+yarn add react-flow-renderer
+```
+
## Usage
-This is a very basic example of how to use React Flow. We are rendering two nodes connected with an edge. There are more advanced examples in the [examples](/examples) section.
+This is a very basic example of how to use React Flow. A flow consists of nodes and edges (or just nodes). Together we call them elements. You can pass a set of elements as a prop to the ReactFlow component. Hereby all elements need unique ids. A node needs a position and a label and an edge needs a source (node id) and a target (node id). This is the most basic for a flow. A simple flow could look like this:
```jsx
import React from 'react';
@@ -30,4 +36,6 @@ const BasicFlow = () => ;
import Flow from './index';
-
\ No newline at end of file
+
+
+You can find more advanced examples in the [examples](reactflow.dev/examples/) section.
diff --git a/website/src/markdown/docs/index.md b/website/src/markdown/docs/index.md
index 3333d8c9..61d562fe 100644
--- a/website/src/markdown/docs/index.md
+++ b/website/src/markdown/docs/index.md
@@ -2,7 +2,7 @@
title: Introduction
---
-React Flow is a library for building node-based graphs. You can easily implement custom node types and it comes with components like a mini-map and graph controls. Feel free to check out the [examples](https://reactflow.dev/) or read the [blog post](https://webkid.io/blog/react-flow-node-based-graph-library/) to get started.
+React Flow is a library for building node-based applications. These can be simple static diagrams or complex node-based editors. You can implement custom node types and edge types and it comes with components like a mini-map and graph controls. Feel free to check out the [examples](https://reactflow.dev/examples/) or read the [blog post](https://webkid.io/blog/react-flow-node-based-graph-library/) to get started.
## Key Features
diff --git a/website/src/pages/examples/edge-types.js b/website/src/pages/examples/edge-types.js
index 56bec9c2..85642e0d 100644
--- a/website/src/pages/examples/edge-types.js
+++ b/website/src/pages/examples/edge-types.js
@@ -7,7 +7,7 @@ import { ReactFlowProvider } from 'react-flow-renderer';
export const frontmatter = {
title: 'Edge Types',
slug: 'edge-types',
- order: 4,
+ order: 11,
};
export default () => {
diff --git a/website/src/pages/examples/hidden.js b/website/src/pages/examples/hidden.js
index 6f1b3a08..76816c3a 100644
--- a/website/src/pages/examples/hidden.js
+++ b/website/src/pages/examples/hidden.js
@@ -7,7 +7,7 @@ import { ReactFlowProvider } from 'react-flow-renderer';
export const frontmatter = {
title: 'Hidden',
slug: 'hidden',
- order: 4,
+ order: 12,
};
export default () => {
diff --git a/website/src/pages/index.js b/website/src/pages/index.js
index 8c7d0bd5..df03a015 100644
--- a/website/src/pages/index.js
+++ b/website/src/pages/index.js
@@ -92,7 +92,7 @@ const Home = () => {
-
Wire your ideas together with React Flow
+
Wire your ideas with React Flow
Highly customizable React.js library for building node-based
editors and diagrams.
@@ -128,7 +128,7 @@ const Home = () => {
@@ -151,8 +151,8 @@ const Home = () => {
them elements. You can pass a set of elements as a prop to the
ReactFlow component. Hereby all elements need unique ids. A node
needs a position and a label and an edge needs a source (node id)
- and a target (node id). This is the most basic set up you need to
- get started. A simple flow could look like this:
+ and a target (node id). This is the most basic for a flow. A simple
+ flow could look like this:
;`}
@@ -187,7 +187,7 @@ const BasicFlow = () => ;`}
diff --git a/website/src/templates/doc-page.js b/website/src/templates/doc-page.js
index b4e31132..4c36da53 100644
--- a/website/src/templates/doc-page.js
+++ b/website/src/templates/doc-page.js
@@ -12,10 +12,24 @@ const docsMenu = [
group: 'API Reference',
items: [
{ title: 'Prop Types' },
- { title: 'Instance' },
- { title: 'Nodes' },
- { title: 'Edges' },
{ title: 'Helper Functions' },
+ {
+ group: 'Nodes',
+ items: [
+ { title: 'Node Options' },
+ { title: 'Node Types & Custom Nodes' },
+ { title: 'Handle Component' },
+ ],
+ },
+ {
+ group: 'Edges',
+ items: [
+ { title: 'Edge Options' },
+ { title: 'Edge Types & Custom Edges' },
+ { title: 'Edge Utils' },
+ ],
+ },
+ { title: 'Instance' },
{ title: 'Internal State and Actions' },
{
group: 'Components',
diff --git a/website/static/favicon.ico b/website/static/favicon.ico
index 85a4d9fa..731acd59 100644
Binary files a/website/static/favicon.ico and b/website/static/favicon.ico differ