Skip to main content

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 edge
Type:
(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 edge
Type:
(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 path
Type:
(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 edge
Type:
(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;
sourcePosition?: Position;
targetX: number;
targetY: number;
targetPosition?: Position;
}