Provides various edge styles to be used as the values for edgeStyle in a cell style.

Example:

let style = stylesheet.getDefaultEdgeStyle();
style.edgeStyle = EdgeStyle.ElbowConnector;

Sets the default edge style to ElbowConnector.

Custom edge style:

To write a custom edge style, a function must be added to the EdgeStyle object as follows:

EdgeStyle.MyStyle = (state, source, target, points, result)=>
{
if (source != null && target != null)
{
let pt = new Point(target.getCenterX(), source.getCenterY());

if (Utils.contains(source, pt.x, pt.y))
{
pt.y = source.y + source.height;
}

result.push(pt);
}
};

In the above example, a right angle is created using a point on the horizontal center of the target vertex and the vertical center of the source vertex. The code checks if that point intersects the source vertex and makes the edge straight if it does. The point is then added into the result array, which acts as the return value of the function.

The new edge style should then be registered in the StyleRegistry as follows:

StyleRegistry.putValue('myEdgeStyle', EdgeStyle.MyStyle);

The custom edge style above can now be used in a specific edge as follows:

style.edgeStyle = 'myEdgeStyle';

Note that the key of the StyleRegistry entry for the function should be used in string values, unless GraphView#allowEval is true, in which case you can also use EdgeStyle.MyStyle for the value in the cell style above.

Or it can be used for all edges in the graph as follows:

let style = graph.getStylesheet().getDefaultEdgeStyle();
style.edgeStyle = EdgeStyle.MyStyle;

Note that the object can be used directly when programmatically setting the value, but the key in the StyleRegistry should be used when setting the value via a key, value pair in a cell style.

Constructors

Properties

BOTTOM: number = 8
BOTTOM_MASK: number = 256
CENTER_MASK: number = 512
dirVectors: number[][] = ...
ElbowConnector: EdgeStyleFunction = ElbowConnectorFunction

Uses either SideToSide or TopToBottom depending on the horizontal flag in the cell style. SideToSide is used if horizontal is true or unspecified.

EntityRelation: EdgeStyleFunction = EntityRelationFunction

Implements an entity relation style for edges (as used in database schema diagrams). At the time the function is called, the result array contains a placeholder (null) for the first absolute point, that is, the point where the edge and source terminal are connected. The implementation of the style then adds all intermediate waypoints except for the last point, that is, the connection point between the edge and the target terminal. The first ant the last point in the result array are then replaced with Point that take into account the terminal's perimeter and next point on the edge.

CellState that represents the edge to be updated.

CellState that represents the source terminal.

CellState that represents the target terminal.

List of relative control points.

Array of Point that represent the actual points of the edge.

inlineRoutePatterns: (null | number[])[][] = ...
LEFT: number = 1
LEFT_MASK: number = 32
limits: number[][] = ...
Loop: EdgeStyleFunction = LoopFunction

Implements a self-reference, aka. loop.

MANHATTAN_END_DIRECTIONS: DIRECTION[] = ...
MANHATTAN_MAX_ALLOWED_DIRECTION_CHANGE: number = 90
MANHATTAN_MAXIMUM_LOOPS: number = 2000
MANHATTAN_PADDING_BOX: Geometry = ...
MANHATTAN_START_DIRECTIONS: DIRECTION[] = ...
MANHATTAN_STEP: number = 12
ManhattanConnector: EdgeStyleFunction = ...

ManhattanConnector code is based on code from https://github.com/mwangm/mxgraph-manhattan-connector

Implements router to find the shortest route that avoids cells using manhattan distance as metric.

orthBuffer: number = 10
OrthConnector: EdgeStyleFunction = ...

Implements a local orthogonal router between the given cells.

CellState that represents the edge to be updated.

CellState that represents the source terminal.

CellState that represents the target terminal.

List of relative control Points.

Array of Points that represent the actual points of the edge.

orthPointsFallback: boolean = true
RIGHT: number = 4
RIGHT_MASK: number = 128
routePatterns: number[][][] = ...
SegmentConnector: EdgeStyleFunction = SegmentConnectorFunction

Implements an orthogonal edge style. Use EdgeSegmentHandler as an interactive handler for this style.

CellState that represents the edge to be updated.

CellState that represents the source terminal.

CellState that represents the target terminal.

List of relative control points.

Array of Point that represent the actual points of the edge.

SIDE_MASK: number = 480
SideToSide: EdgeStyleFunction = SideToSideFunction

Implements a vertical elbow edge.

SOURCE_MASK: number = 1024
TARGET_MASK: number = 2048
TOP: number = 2
TOP_MASK: number = 64
TopToBottom: EdgeStyleFunction = TopToBottomFunction

Implements a horizontal elbow edge.

VERTEX_MASK: number = 3072
vertexSeperations: any = []
wayPoints1: number[][] = ...

Methods

  • Parameters

    • dir: number[]
    • quad: number
    • dx: number
    • dy: number

    Returns null | number[]