mxEdgeStyle

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

Example

var style = stylesheet.getDefaultEdgeStyle();
style[mxConstants.STYLE_EDGE] = mxEdgeStyle.ElbowConnector;

Sets the default edge style to ElbowConnector.

Custom edge style

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

mxEdgeStyle.MyStyle = function(state, source, target, points, result)
{
  if (source != null && target != null)
  {
    var pt = new mxPoint(target.getCenterX(), source.getCenterY());

    if (mxUtils.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 mxStyleRegistry as follows

mxStyleRegistry.putValue('myEdgeStyle', mxEdgeStyle.MyStyle);

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

model.setStyle(edge, 'edgeStyle=myEdgeStyle');

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

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

var style = graph.getStylesheet().getDefaultEdgeStyle();
style[mxConstants.STYLE_EDGE] = mxEdgeStyle.MyStyle;

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

Summary
mxEdgeStyleProvides various edge styles to be used as the values for mxConstants.STYLE_EDGE in a cell style.
Functions
EntityRelationImplements an entity relation style for edges (as used in database schema diagrams).
LoopImplements a self-reference, aka.
ElbowConnectorUses either SideToSide or TopToBottom depending on the horizontal flag in the cell style.
SideToSideImplements a vertical elbow edge.
TopToBottomImplements a horizontal elbow edge.
SegmentConnectorImplements an orthogonal edge style.
OrthConnectorImplements a local orthogonal router between the given cells.

Functions

EntityRelation

EntityRelation: function (state,
source,
target,
points,
result)

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 mxPoints that take into account the terminal’s perimeter and next point on the edge.

Parameters

statemxCellState that represents the edge to be updated.
sourcemxCellState that represents the source terminal.
targetmxCellState that represents the target terminal.
pointsList of relative control points.
resultArray of mxPoints that represent the actual points of the edge.

Loop

Loop: function (state,
source,
target,
points,
result)

Implements a self-reference, aka. loop.

ElbowConnector

ElbowConnector: function (state,
source,
target,
points,
result)

Uses either SideToSide or TopToBottom depending on the horizontal flag in the cell style.  SideToSide is used if horizontal is true or unspecified.  See EntityRelation for a description of the parameters.

SideToSide

SideToSide: function (state,
source,
target,
points,
result)

Implements a vertical elbow edge.  See EntityRelation for a description of the parameters.

TopToBottom

TopToBottom: function(state,
source,
target,
points,
result)

Implements a horizontal elbow edge.  See EntityRelation for a description of the parameters.

SegmentConnector

SegmentConnector: function(state,
source,
target,
hints,
result)

Implements an orthogonal edge style.  Use <mxEdgeSegmentHandler> as an interactive handler for this style.

OrthConnector

OrthConnector: function(state,
source,
target,
points,
result)

Implements a local orthogonal router between the given cells.

Parameters

statemxCellState that represents the edge to be updated.
sourcemxCellState that represents the source terminal.
targetmxCellState that represents the target terminal.
pointsList of relative control points.
resultArray of mxPoints that represent the actual points of the edge.
Defines the key for the edge style.
EntityRelation: function (state,
source,
target,
points,
result)
Implements an entity relation style for edges (as used in database schema diagrams).
Loop: function (state,
source,
target,
points,
result)
Implements a self-reference, aka.
ElbowConnector: function (state,
source,
target,
points,
result)
Uses either SideToSide or TopToBottom depending on the horizontal flag in the cell style.
SideToSide: function (state,
source,
target,
points,
result)
Implements a vertical elbow edge.
TopToBottom: function(state,
source,
target,
points,
result)
Implements a horizontal elbow edge.
SegmentConnector: function(state,
source,
target,
hints,
result)
Implements an orthogonal edge style.
OrthConnector: function(state,
source,
target,
points,
result)
Implements a local orthogonal router between the given cells.
Singleton class that acts as a global converter from string to object values in a style.
mxGraphView.prototype.allowEval
Specifies if string values in cell styles should be evaluated using mxUtils.eval.
Represents the current state of a cell in a given mxGraphView.
Implements a 2-dimensional vector with double precision coordinates.
Close