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.
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(';');
}
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With