Skip to main content

EdgeStyles

info

The examples in this page use TypeScript; adapt them if you write JavaScript.

What is an EdgeStyle?​

An EdgeStyle is a function that calculates the precise points along an edge, ensuring it follows a specific layout pattern - such as maintaining orthogonal segments or forming an "elbow" shape. It can also implement sophisticated routing algorithms like the ManhattanConnector, which finds the shortest path between vertices while avoiding obstacles, using manhattan distance as its metric.

An EdgeStyle is configured within the style properties of the Cell that relates to the Edge.
By default, an edge EdgeStyle is unset.

note

All EdgeStyles provided by maxGraph are automatically registered in the EdgeStyleRegistry when a Graph instance is created. For more details, see the Global Configuration documentation.
To check the list of registered EdgeStyles, refer to the registerDefaultStyleElements function.

info

The EdgeStyleRegistry is a new registry introduced in version 0.20.0 to manage edge styles.

Edge styles were previously managed by the StyleRegistry, which has then been removed.

How to Use a Specific EdgeStyle​

info

For more details about the usage of EdgeStyles, see the documentation of CellStateStyle.edgeStyle.

maxGraph provides various edgeStyle functions under the EdgeStyle namespace to be used in the style property of an Edge as the value of CellStateStyle.edgeStyle.

The following example uses the built-in ElbowConnector which is registered by default under the elbowEdgeStyle key in EdgeStyleRegistry:

style.edgeStyle = 'elbowEdgeStyle';
tip

The CellStateStyle.edgeStyle type guides you on how to set the EdgeStyle value when configuring the value with a string.

It is possible to configure the default EdgeStyle for all edges in the Graph, for example to use SegmentConnector (registered by default under the segmentEdgeStyle key in the EdgeStyleRegistry), as follows:

const style = stylesheet.getDefaultEdgeStyle();
style.edgeStyle = 'segmentEdgeStyle';

Custom EdgeStyle​

Creating a Custom EdgeStyle​

An EdgeStyle is a function matching the EdgeStyleFunction type. 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: EdgeStyleFunction = (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 EdgeStyleRegistry as follows:

const edgeStyleMetadata = {
  handlerKind: 'segment',
  isOrthogonal: true,
};
EdgeStyleRegistry.add('myEdgeStyle', MyStyle, edgeStyleMetadata);
warning

When registering the EdgeStyle, be sure to register it in the EdgeStyleRegistry with correct EdgeStyleMetaData. Some maxGraph features depend on the EdgeStyleMetaData to work correctly.

Using a Custom EdgeStyle​

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

style.edgeStyle = 'myEdgeStyle';

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

const style = graph.getStylesheet().getDefaultEdgeStyle();
style.edgeStyle = 'myEdgeStyle';

Example of custom EdgeStyle​

See the Wires story in the Storybook demo: