I'm using mxGraph (javascript version) to draw a graph and I need to use radial tree layout for graph layout. Look at this pen
I managed to redefine connection points (anchor points) of each vertex and you can see that by hovering the mouse over any vertex. I assumed that the radial tree layout will connect edges to anchor points of vertices, but this is not happening. Any idea how to make edges connect to anchor points of vertices?
The same code in the Pen is also available below.
<html>
<head>
<title>Anchors example for mxGraph</title>
<script type="text/javascript">
mxBasePath = 'https://jgraph.github.io/mxgraph/javascript/src';
</script>
<!-- Loads and initializes the library -->
<script type="text/javascript" src="https://jgraph.github.io/mxgraph/javascript/src/js/mxClient.js">
</script>
<!-- Example code -->
<script type="text/javascript">
// Overridden to define per-shape connection points
mxGraph.prototype.getAllConnectionConstraints = function(terminal, source)
{
if (terminal != null && terminal.shape != null)
{
if (terminal.shape.stencil != null)
{
if (terminal.shape.stencil.constraints != null)
{
return terminal.shape.stencil.constraints;
}
}
else if (terminal.shape.constraints != null)
{
return terminal.shape.constraints;
}
}
return null;
};
// Defines the default constraints for all shapes
mxShape.prototype.constraints = [new mxConnectionConstraint(new mxPoint(0.25, 0), true),
new mxConnectionConstraint(new mxPoint(0.5, 0), true),
new mxConnectionConstraint(new mxPoint(0.75, 0), true),
new mxConnectionConstraint(new mxPoint(0, 0.25), true),
new mxConnectionConstraint(new mxPoint(0, 0.5), true),
new mxConnectionConstraint(new mxPoint(0, 0.75), true),
new mxConnectionConstraint(new mxPoint(1, 0.25), true),
new mxConnectionConstraint(new mxPoint(1, 0.5), true),
new mxConnectionConstraint(new mxPoint(1, 0.75), true),
new mxConnectionConstraint(new mxPoint(0.25, 1), true),
new mxConnectionConstraint(new mxPoint(0.5, 1), true),
new mxConnectionConstraint(new mxPoint(0.75, 1), true)];
// Edges have no connection points
mxPolyline.prototype.constraints = null;
// Program starts here. Creates a sample graph in the
// DOM node with the specified ID. This function is invoked
// from the onLoad event handler of the document (see below).
function main(container)
{
// Checks if the browser is supported
if (!mxClient.isBrowserSupported())
{
// Displays an error message if the browser is not supported.
mxUtils.error('Browser is not supported!', 200, false);
}
else
{
// Disables the built-in context menu
mxEvent.disableContextMenu(container);
// Creates the graph inside the given container
var graph = new mxGraph(container);
graph.setConnectable(true);
// Enables connect preview for the default edge style
graph.connectionHandler.createEdgeState = function(me)
{
var edge = graph.createEdge(null, null, null, null, null);
return new mxCellState(this.graph.view, edge, this.graph.getCellStyle(edge));
};
// Specifies the default edge style
//graph.getStylesheet().getDefaultEdgeStyle()['edgeStyle'] = 'orthogonalEdgeStyle';
graph.getStylesheet().getDefaultEdgeStyle()[mxConstants.STYLE_EDGE] = mxEdgeStyle.scalePointArray;
// Enables rubberband selection
new mxRubberband(graph);
// Gets the default parent for inserting new cells. This
// is normally the first child of the root (ie. layer 0).
var parent = graph.getDefaultParent();
// Adds cells to the model in a single step
graph.getModel().beginUpdate();
try
{
var v1 = graph.insertVertex(parent, null, 'Hello,', 0, 0, 80, 30);
var v2 = graph.insertVertex(parent, null, 'World!', 0, 0, 80, 30);
var v3 = graph.insertVertex(parent, null, 'Hello,', 0, 0, 80, 30);
var v4 = graph.insertVertex(parent, null, 'World!', 0, 0, 80, 30);
var v5 = graph.insertVertex(parent, null, 'World!', 0, 0, 80, 30);
var v6 = graph.insertVertex(parent, null, 'World!', 0, 0, 80, 30);
var v7 = graph.insertVertex(parent, null, 'World!', 0, 0, 80, 30);
var e1 = graph.insertEdge(parent, null, '', v1, v2);
var e2 = graph.insertEdge(parent, null, '', v1, v3);
var e3 = graph.insertEdge(parent, null, '', v1, v4);
var e4 = graph.insertEdge(parent, null, '', v1, v5);
var e5 = graph.insertEdge(parent, null, '', v1, v6);
var e6 = graph.insertEdge(parent, null, '', v1, v7);
}
finally
{
var radialLayout = new mxRadialTreeLayout(graph);
radialLayout.execute(parent);
// Updates the display
graph.getModel().endUpdate();
}
console.log(v1.geometry);
console.log(v2.geometry);
}
};
</script>
</head>
<!-- Page passes the container for the graph to the program -->
<body onload="main(document.getElementById('graphContainer'))">
<!-- Creates a container for the graph with a grid wallpaper -->
<div id="graphContainer"
style="position:relative;overflow:hidden;width:621px;height:641px;background:url('editors/images/grid.gif');cursor:default;">
</div>
</body>
</html>
You can do that via setting constraints in edge style while adding it:
var e1 = graph.insertEdge(parent, null, '',v1,v2, "entryX=0.25;entryY=0");
that way you can also specify starting point of edge:
var e1 = graph.insertEdge(parent, null, '',v1,v2, "entryX=0.25;entryY=0;exitX=1;exitY=1");
Or after inserting edge you can connect it with specific constraint:
var e2 = graph.insertEdge(parent, null, '', v1, v3);
graph.connectCell(e2,v3,false, mxShape.prototype.constraints[0]);