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

docs(edge-handling): cleanup readme, document source and target handle

Browse Source
This commit is contained in:
moklick
2020-10-29 13:42:02 +01:00
parent e9b4bb4e15
commit 337c047b70
3 changed files with 14 additions and 645 deletions
Download Patch File Download Diff File Expand all files Collapse all files
website/src/markdown/docs/api/edges.md
+2
View File
@@ -24,6 +24,8 @@ If you wanted to display this edge, you would need a node with id = 1 (source no
- `id`: string *(required)*
- `source`: string (an id of a node) *(required)*
- `target`: string (an id of a node) *(required)*
- `sourceHandle`: string (an id of a handle - you only need this when you have multiple handles)
- `targetHandle`: string (an id of a handle - you only need this when you have multiple handles)
- `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
website/src/markdown/docs/api/handle.md
+3 -2
View File
@@ -24,7 +24,7 @@ const targetHandleWithValidation = (
- `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`
- `isValidConnection`: function receives a connection `{ target: 'some-id', source: 'another-id', sourceHandle: 'source handle id or null', targetHandle: 'target handle id or null' }` as param, returns a boolean - default: `true`
- `style`: css properties
- `className`: additional class name
@@ -36,5 +36,6 @@ The handle receives the additional class names `connecting` when the connection
### 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`.
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 can be used by an edge with the `sourceHandle` and `targetHandle` options, 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 node `source=1` and the `sourceHandle=__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).