Custom Element Types
Incorporating layout algorithms into your React Flow application is essential for organizing nodes and edges effectively. These algorithms ensure that edges connect at various points on node borders, providing a comprehensive representation of your data flow. Additionally, they can arrange labels for both nodes and edges to enhance clarity.
Integrating the Custom Types
If your flow utilizes default node and edge types, seamlessly integrate our custom components as new defaults.
import { MultiHandleNode, PolylineEdge } from '@yworks/yfiles-layout-reactflow'
const edgeTypes = {
default: PolylineEdge
}
const nodeTypes = {
default: MultiHandleNode
}
For already customized nodes, you can wrap them with the withMultiHandles
higher-order component (HOC) to enable
placement of labels and multiple handles, enhancing their flexibility.
import { withMultiHandles } from '@yworks/yfiles-layout-reactflow'
import CustomNode from './CustomNode'
const nodeTypes = {
custom: withMultiHandles(CustomNode)
}
Customized edges can be adjusted using the getPolylinePath
function. It integrates similarly to React Flow functions
like getBezierPath, allowing it to replace these functions
to support polyline edges.
import { BaseEdge, EdgeProps } from 'reactflow'
import { getPolylinePath } from '@yworks/yfiles-layout-reactflow'
export function CustomEdge(props: EdgeProps) {
const [edgePath] = getPolylinePath({
sourceX: props.sourceX,
sourceY: props.sourceY,
targetX: props.targetX,
targetY: props.targetY,
bends: props.data?.yData?.bends ?? []
})
return ( <BaseEdge path={edgePath} {...props} /> )
}
Once you have prepared your graph, you can run a layout algorithm on it.