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

docs(readme): cleanup

Browse Source
This commit is contained in:
Moritz
2020-07-22 21:16:53 +02:00
committed by GitHub
parent e1385649e5
commit 57f9067e33
1 changed files with 11 additions and 11 deletions
Download Patch File Download Diff File Expand all files Collapse all files

22
README.md
View File

@@ -78,7 +78,7 @@ const BasicFlow = () => <ReactFlow elements={elements} />;
- `onlyRenderVisibleNodes`: default: `true`
#### Event Handlers
- `onElementClick(element: Node | Edge)`: called when user clicks node or edge
- `onElementClick(element: Node | Edge)`: called when user clicks node or edge click
- `onElementsRemove(elements: Elements)`: called when user removes node or edge
- `onNodeDragStart(node: Node)`: node drag start
- `onNodeDragStop(node: Node)`: node drag stop
@@ -87,9 +87,9 @@ const BasicFlow = () => <ReactFlow elements={elements} />;
- `onNodeMouseLeave(evt: MouseEvent, node: Node)`: node mouse leave
- `onNodeContextMenu(evt: MouseEvent, node: Node)`: node context menu
- `onConnect({ source, target })`: called when user connects two nodes
- `onLoad(reactFlowInstance)`: called when flow is initialized
- `onLoad(reactFlowInstance)`: called after flow is initialized
- `onMove()`: called when user pans or zooms
- `onSelectionChange(elements: Elements)`: called user selects one or multiple elements
- `onSelectionChange(elements: Elements)`: called when user selects one or multiple elements
#### Interaction
- `nodesDraggable`: default: `true`. This applies to all nodes. You can also change the behavior of a specific node with the `draggable` node option.
@@ -170,9 +170,9 @@ Node example: `{ id: '1', type: 'input', data: { label: 'Node 1' }, position: {
- `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`: if option is not set, the node is draggable (overwrites generel `nodesDraggable` option)
- `connectable`: if option is not set, the node is connectable (overwrites generel `nodesConnectable` option)
- `selectable`: if option is not set, the node is selectable (overwrites generel `elementsSelectable` option)
- `draggable`: boolean - if option is not set, the node is draggable (overwrites generel `nodesDraggable` option)
- `connectable`: boolean - if option is not set, the node is connectable (overwrites generel `nodesConnectable` option)
- `selectable`: boolean - if option is not set, the node is selectable (overwrites generel `elementsSelectable` option)
## Node Types & Custom Nodes
@@ -195,7 +195,7 @@ nodeTypes={{
}}
```
You could now use the type `special` for a node.
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).
@@ -231,7 +231,7 @@ const targetHandleWithValidation = (
### 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
- `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`
@@ -249,11 +249,11 @@ You can find an example of how to implement a custom node with multiple handles
# Edges
React Flow comes with three [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.
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: `{ 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 one with id = 2 (target node).
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
@@ -271,7 +271,7 @@ If you wanted to display this edge, you would need a node with id = 1 (source no
- `markerEndId`: custom marker end url - if this is used `arrowHeadType` gets ignored
- `isHidden`: if `true`, the edge will not be rendered
You can find an example with lots of different edges in the [edges example](https://reactflow.dev/edges).
You can find an example with different edges in the [edges example](https://reactflow.dev/edges).
### Edge Types & Custom Edges