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;
Copy

To write a custom edge style, create a function 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.

const 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);
  }
};
Copy

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

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

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

style.edgeStyle = 'myEdgeStyle';
Copy

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 'MyStyle'` string for the value in the cell style above.

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

const style = graph.getStylesheet().getDefaultEdgeStyle();
style.edgeStyle = MyStyle;
Copy

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 = MyStyle;
Copy