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;
  targetX: number;
  targetY: number;
}