Class EdgeStyle

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

The following example sets the default edge style to ElbowConnector:

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

To write a custom edge style, a function can be added to the EdgeStyle object as follows. In the example below, 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.

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

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

    result.push(pt);
  }
};

The new edge style can 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';

The key of the StyleRegistry entry for the function should be used in the CellState.edgeStyle values, unless GraphView#allowEval is true. In this case, you can also use the 'EdgeStyle.MyStyle'` string for the value in the cell style above.

The custom EdgeStyle can be used for all edges in the graph as follows:

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

It can also be used directly when setting the value of the edgeStyle key in a style of a specific edge as follows:

style.edgeStyle = EdgeStyle.MyStyle;

Constructors

constructor

Properties

BOTTOM BOTTOM_MASK CENTER_MASK dirVectors ElbowConnector EntityRelation inlineRoutePatterns LEFT LEFT_MASK limits Loop MANHATTAN_END_DIRECTIONS MANHATTAN_MAX_ALLOWED_DIRECTION_CHANGE MANHATTAN_MAXIMUM_LOOPS MANHATTAN_PADDING_BOX MANHATTAN_START_DIRECTIONS MANHATTAN_STEP ManhattanConnector orthBuffer OrthConnector orthPointsFallback RIGHT RIGHT_MASK routePatterns SegmentConnector SIDE_MASK SideToSide SOURCE_MASK TARGET_MASK TOP TOP_MASK TopToBottom VERTEX_MASK vertexSeperations wayPoints1

Methods

getJettySize getRoutePattern

Constructors

constructor

Properties

StaticBOTTOM

BOTTOM: number = 8

StaticBOTTOM_MASK

BOTTOM_MASK: number = 256

StaticCENTER_MASK

CENTER_MASK: number = 512

StaticdirVectors

dirVectors: number[][] = ...

StaticElbowConnector

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.

StaticEntityRelation

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.

Param: state

CellState that represents the edge to be updated.

Param: source

CellState that represents the source terminal.

Param: target

CellState that represents the target terminal.

Param: points

List of relative control points.

Param: result

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

StaticinlineRoutePatterns

inlineRoutePatterns: (null | number[])[][] = ...

StaticLEFT

LEFT: number = 1

StaticLEFT_MASK

LEFT_MASK: number = 32

Staticlimits

limits: number[][] = ...

StaticLoop

Loop: EdgeStyleFunction = LoopFunction

Implements a self-reference, aka. loop.

StaticMANHATTAN_END_DIRECTIONS

MANHATTAN_END_DIRECTIONS: DIRECTION[] = ...

StaticMANHATTAN_MAX_ALLOWED_DIRECTION_CHANGE

MANHATTAN_MAX_ALLOWED_DIRECTION_CHANGE: number = 90

StaticMANHATTAN_MAXIMUM_LOOPS

MANHATTAN_MAXIMUM_LOOPS: number = 2000

StaticMANHATTAN_PADDING_BOX

MANHATTAN_PADDING_BOX: Geometry = ...

StaticMANHATTAN_START_DIRECTIONS

MANHATTAN_START_DIRECTIONS: DIRECTION[] = ...

StaticMANHATTAN_STEP

MANHATTAN_STEP: number = 12

StaticManhattanConnector

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.

StaticorthBuffer

orthBuffer: number = 10

StaticOrthConnector

OrthConnector: EdgeStyleFunction = ...

Implements a local orthogonal router between the given cells.

Param: state

CellState that represents the edge to be updated.

Param: sourceScaled

CellState that represents the source terminal.

Param: targetScaled

CellState that represents the target terminal.

Param: controlHints

List of relative control Points.

Param: result

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

StaticorthPointsFallback

orthPointsFallback: boolean = true

StaticRIGHT

RIGHT: number = 4

StaticRIGHT_MASK

RIGHT_MASK: number = 128

StaticroutePatterns

routePatterns: number[][][] = ...

StaticSegmentConnector

SegmentConnector: EdgeStyleFunction = SegmentConnectorFunction

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

Param: state

CellState that represents the edge to be updated.

Param: sourceScaled

CellState that represents the source terminal.

Param: targetScaled

CellState that represents the target terminal.

Param: controlHints

List of relative control points.

Param: result

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

StaticSIDE_MASK

SIDE_MASK: number = 480

StaticSideToSide

SideToSide: EdgeStyleFunction = SideToSideFunction

Implements a vertical elbow edge.

StaticSOURCE_MASK

SOURCE_MASK: number = 1024

StaticTARGET_MASK

TARGET_MASK: number = 2048

StaticTOP

TOP: number = 2

StaticTOP_MASK

TOP_MASK: number = 64

StaticTopToBottom

TopToBottom: EdgeStyleFunction = TopToBottomFunction

Implements a horizontal elbow edge.

StaticVERTEX_MASK

VERTEX_MASK: number = 3072

StaticvertexSeperations

vertexSeperations: any = []

StaticwayPoints1

wayPoints1: number[][] = ...

Methods

StaticgetJettySize

StaticgetRoutePattern

  • getRoutePattern(dir, quad, dx, dy): null | number[]

  • Parameters

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

    Returns null | number[]

Settings

Member Visibility

On This Page

Constructors
Properties
Methods