Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

How to change edge style on connect without it changing the connection point

Tags:

mxgraph

I'm trying to change the style of an edge when it connects. The style is set by logic dependent on either the source or target vertex. I can change the style just fine by adding a connection listener and using mxCell.setStyle:

graph.connectionHandler.addListener(mxEvent.CONNECT, function (sender, evt)
{
     var edge = evt.getProperty('cell');
     edge.setStyle("...");         
}

While this sets the style to what I specify, for some reason it changes the connection point on the target vertex. For example, if I drag it to 9:00 on the target vertex, after I set the style it will many times move the connection point to 6:00 on the target vertex.

like image 694
DannyP Avatar asked Sep 10 '25 19:09

DannyP


1 Answers

Well after hours of messing with this it finally dawned on me that the style of the new edge contains the information for the connection point so you can't just replace it. I decided to merge the style I wish to set with the default style that's applied to the edge:

graph.connectionHandler.addListener(mxEvent.CONNECT, function (sender, evt){
     var edge = evt.getProperty('cell');
     var style = graph.getCellStyle(edge); //style is in object form
     var newStyle = graph.stylesheet.getCellStyle("edgeStyle=orthogonalEdgeStyle;html=1;rounded=1;jettySize=auto;orthogonalLoop=1;strokeColor=#FFCC00;strokeWidth=4;", style); //Method will merge styles into a new style object.  We must translate to string from here 
     var array = [];
        for (var prop in newStyle)
            array.push(prop + "=" + newStyle[prop]);
        edge.style = array.join(';'); 
}
like image 141
DannyP Avatar answered Sep 14 '25 09:09

DannyP