Edge Utils
There are several utils that help you to create a custom edge. Some are used in the custom edge example.
getBezierPath
Description:
Returns the
path
, labelX
, labelY
, offsetX
and offsetY
of a bezier edgeType:
(params: GetBezierPathParams) => [path: string, labelX: number, labelY: number, offsetX: number, offsetY: number]
getSimpleBezierPath
Description:
Returns the
path
, labelX
, labelY
, offsetX
and offsetY
of a simple bezier edgeType:
(params: GetBezierPathParams) => [path: string, labelX: number, labelY: number, offsetX: number, offsetY: number]
getSmoothStepPath
Description:
Returns the
path
, labelX
, labelY
, offsetX
and offsetY
of a smooth step edge. You can set borderRadius = 0
to get a step edge pathType:
(params: GetSmoothStepPathParams) => [path: string, labelX: number, labelY: number, offsetX: number, offsetY: number]
getStraightPath
Description:
Returns the
path
, labelX
, labelY
, offsetX
and offsetY
of a simple bezier edgeType:
(params: GetStraightPathParams) => [path: string, labelX: number, labelY: number, offsetX: number, offsetY: number]
getMarkerEnd
Description:
Returns the marker end url for displaying the arrow head
Type:
(markerType?: MarkerType, markerEndId?: string) => string
Typescript
GetBezierPathParams
type GetBezierPathParams = {
sourceX: number;
sourceY: number;
sourcePosition?: Position;
targetX: number;
targetY: number;
targetPosition?: Position;
curvature?: number;
};
GetSimpleBezierPathParams
type GetSimpleBezierPathParams {
sourceX: number;
sourceY: number;
sourcePosition?: Position;
targetX: number;
targetY: number;
targetPosition?: Position;
}
GetSmoothStepPathParams
type GetSmoothStepPathParams = {
sourceX: number;
sourceY: number;
sourcePosition?: Position;
targetX: number;
targetY: number;
targetPosition?: Position;
borderRadius?: number;
centerX?: number;
centerY?: number;
offset?: number;
};
GetStraightPathParams
type GetStraightPathParams {
sourceX: number;
sourceY: number;
targetX: number;
targetY: number;
}