3

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.

DannyP
  • 200
  • 2
  • 10

1 Answers1

6

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(';'); 
}
DannyP
  • 200
  • 2
  • 10
  • Needed to add: ``this.editor.graph.refresh(edge);`` within EditorUI.js function that was used to change the edge style. It was not trigerred by a event as here but needed to refresh in order for the styling to appear. The style was edited just as shown here. – Miroslav Radojević Jan 23 '18 at 16:01