title: How to readjust mxgraph edges while moving vertices to not look weird?
body: <p>I need to allow users to rearrange a graph and need to re-adjust the edges when they move vertices. Right now I was not yet able to nicely do it.</p>
  
  <p>What I have so far is this:</p>
  
  <p><strong>Graph with edges weirdly adjusted:</strong></p>
  
  <p><img src="https://i.stack.imgur.com/6ZJ6H.png" alt="Graph with edges weirdly adjusted"></p>
  
  <p>But I would like them to be like this:</p>
  
  <p><strong>Graph with edges nicely adjusted:</strong></p>
  
  <p><img src="https://i.stack.imgur.com/tAalQ.png" alt="Graph with edges nicely adjusted"></p>
  
  <p>The XML code to the second diagram is that:</p>
  
  <pre class="lang-xml prettyprint-override"><code>    &lt;mxGraphModel dx="774" dy="824" grid="1" gridSize="10" guides="1" tooltips="1" connect="1" arrows="1" fold="1" page="1" pageScale="1" pageWidth="850" pageHeight="1100"&gt;
        &lt;root&gt;
          &lt;mxCell id="0"/&gt;
          &lt;mxCell id="1" parent="0"/&gt;
          &lt;mxCell id="4" value="" style="edgeStyle=orthogonalEdgeStyle;orthogonalLoop=1;jettySize=auto;html=1;startArrow=classic;startFill=1;targetPerimeterSpacing=8;sourcePerimeterSpacing=8;strokeColor=#aaaaaa;strokeWidth=2;curved=1;" edge="1" parent="1" source="2" target="3"&gt;
            &lt;mxGeometry relative="1" as="geometry"/&gt;
          &lt;/mxCell&gt;
          &lt;mxCell id="2" value="Product" style="rounded=1;whiteSpace=wrap;html=1;fillColor=#f8b241;gradientColor=#e97704;gradientDirection=south;fontStyle=1;fontColor=#FFFFFF;strokeColor=#ea7703;" vertex="1" parent="1"&gt;
            &lt;mxGeometry x="80" y="33" width="116" height="26" as="geometry"/&gt;
          &lt;/mxCell&gt;
          &lt;mxCell id="6" value="" style="edgeStyle=orthogonalEdgeStyle;orthogonalLoop=1;jettySize=auto;html=1;startArrow=classic;startFill=1;targetPerimeterSpacing=8;sourcePerimeterSpacing=8;strokeColor=#aaaaaa;strokeWidth=2;curved=1;" edge="1" parent="1" source="3" target="5"&gt;
            &lt;mxGeometry relative="1" as="geometry"/&gt;
          &lt;/mxCell&gt;
          &lt;mxCell id="10" value="" style="edgeStyle=orthogonalEdgeStyle;orthogonalLoop=1;jettySize=auto;html=1;startArrow=classic;startFill=1;targetPerimeterSpacing=8;sourcePerimeterSpacing=8;strokeColor=#aaaaaa;strokeWidth=2;curved=1;" edge="1" parent="1" source="3" target="9"&gt;
            &lt;mxGeometry relative="1" as="geometry"/&gt;
          &lt;/mxCell&gt;
          &lt;mxCell id="3" value="Order_line" style="rounded=1;whiteSpace=wrap;html=1;fillColor=#f8b241;gradientColor=#e97704;gradientDirection=south;fontStyle=1;fontColor=#FFFFFF;strokeColor=#ea7703;" vertex="1" parent="1"&gt;
            &lt;mxGeometry x="280" y="216" width="116" height="26" as="geometry"/&gt;
          &lt;/mxCell&gt;
          &lt;mxCell id="12" value="" style="edgeStyle=orthogonalEdgeStyle;orthogonalLoop=1;jettySize=auto;html=1;startArrow=classic;startFill=1;targetPerimeterSpacing=8;sourcePerimeterSpacing=8;strokeColor=#aaaaaa;strokeWidth=2;curved=1;" edge="1" parent="1" source="9" target="11"&gt;
            &lt;mxGeometry relative="1" as="geometry"/&gt;
          &lt;/mxCell&gt;
          &lt;mxCell id="9" value="New_1" style="rounded=1;whiteSpace=wrap;html=1;fillColor=#f8b241;gradientColor=#e97704;gradientDirection=south;fontStyle=1;fontColor=#FFFFFF;strokeColor=#ea7703;" vertex="1" parent="1"&gt;
            &lt;mxGeometry x="460" y="190" width="116" height="26" as="geometry"/&gt;
          &lt;/mxCell&gt;
          &lt;mxCell id="14" value="" style="edgeStyle=orthogonalEdgeStyle;orthogonalLoop=1;jettySize=auto;html=1;startArrow=classic;startFill=1;targetPerimeterSpacing=8;sourcePerimeterSpacing=8;strokeColor=#aaaaaa;strokeWidth=2;curved=1;" edge="1" parent="1" source="11" target="13"&gt;
            &lt;mxGeometry relative="1" as="geometry"/&gt;
          &lt;/mxCell&gt;
          &lt;mxCell id="11" value="New_2" style="rounded=1;whiteSpace=wrap;html=1;fillColor=#f8b241;gradientColor=#e97704;gradientDirection=south;fontStyle=1;fontColor=#FFFFFF;strokeColor=#ea7703;" vertex="1" parent="1"&gt;
            &lt;mxGeometry x="530" y="20" width="116" height="26" as="geometry"/&gt;
          &lt;/mxCell&gt;
          &lt;mxCell id="13" value="New_3" style="rounded=1;whiteSpace=wrap;html=1;fillColor=#f8b241;gradientColor=#e97704;gradientDirection=south;fontStyle=1;fontColor=#FFFFFF;strokeColor=#ea7703;" vertex="1" parent="1"&gt;
            &lt;mxGeometry x="680" y="126" width="116" height="26" as="geometry"/&gt;
          &lt;/mxCell&gt;
          &lt;mxCell id="8" value="" style="edgeStyle=orthogonalEdgeStyle;orthogonalLoop=1;jettySize=auto;html=1;startArrow=classic;startFill=1;targetPerimeterSpacing=8;sourcePerimeterSpacing=8;strokeColor=#aaaaaa;strokeWidth=2;curved=1;" edge="1" parent="1" source="5" target="7"&gt;
            &lt;mxGeometry relative="1" as="geometry"/&gt;
          &lt;/mxCell&gt;
          &lt;mxCell id="5" value="Order" style="rounded=1;whiteSpace=wrap;html=1;fillColor=#f8b241;gradientColor=#e97704;gradientDirection=south;fontStyle=1;fontColor=#FFFFFF;strokeColor=#ea7703;" vertex="1" parent="1"&gt;
            &lt;mxGeometry x="80" y="100" width="116" height="26" as="geometry"/&gt;
          &lt;/mxCell&gt;
          &lt;mxCell id="7" value="Customer" style="rounded=1;whiteSpace=wrap;html=1;fillColor=#f8b241;gradientColor=#e97704;gradientDirection=south;fontStyle=1;fontColor=#FFFFFF;strokeColor=#ea7703;" vertex="1" parent="1"&gt;
            &lt;mxGeometry x="10" y="260" width="116" height="26" as="geometry"/&gt;
          &lt;/mxCell&gt;
        &lt;/root&gt;
      &lt;/mxGraphModel&gt;
  </code></pre>
  
  <p>But I am not being able to translate this in TS code :-(</p>
  
  <p>Since I am using it with Angular and TS it is a little tricky to create something in Plunker to help, but what I have is a component that initializes the graph like that:</p>
  
  <pre class="lang-js prettyprint-override"><code>    declare var require: any;
  
      const mx = require('mxgraph')({
        mxImageBasePath: 'assets/mxgraph/images',
        mxBasePath: 'assets/mxgraph',
      });
  
  
      const container = document.getElementById('graphContainer');
      this.graph = new mx.mxGraph(container);
  
  So I start editing it, as you can see here:
  
      try {
        const parent = this.graph.getDefaultParent();
        this.graph.getModel().beginUpdate();
  
        const defaultVertexStyle = this.graph.stylesheet.getDefaultVertexStyle();
        defaultVertexStyle[mx.mxConstants.STYLE_SHAPE] = mx.mxConstants.SHAPE_LABEL;
        defaultVertexStyle[mx.mxConstants.STYLE_PERIMETER] = mx.mxConstants.PERIMETER_RECTANGLE;
        defaultVertexStyle[mx.mxConstants.STYLE_FONTSIZE] = 12;
        defaultVertexStyle[mx.mxConstants.STYLE_FONTFAMILY] = 'Helvetica';
        defaultVertexStyle[mx.mxConstants.STYLE_ALIGN] = mx.mxConstants.ALIGN_CENTER;
        defaultVertexStyle[mx.mxConstants.STYLE_VERTICAL_ALIGN] = mx.mxConstants.ALIGN_MIDDLE;
        defaultVertexStyle[mx.mxConstants.STYLE_FILLCOLOR] = '#f8b241';
        defaultVertexStyle[mx.mxConstants.STYLE_GRADIENTCOLOR] = '#e97704';
        defaultVertexStyle[mx.mxConstants.STYLE_STROKECOLOR] = '#ea7703';
        defaultVertexStyle[mx.mxConstants.STYLE_FONTCOLOR] = '#ffffff';
        defaultVertexStyle[mx.mxConstants.STYLE_FONTSIZE] = 14;
        defaultVertexStyle[mx.mxConstants.STYLE_ROUNDED] = true;
  
        const defaultEdgeStyle = this.graph.stylesheet.getDefaultEdgeStyle();
        defaultEdgeStyle[mx.mxConstants.STYLE_SHAPE] = mx.mxConstants.SHAPE_CONNECTOR;
        defaultEdgeStyle[mx.mxConstants.STYLE_FONTSIZE] = 12;
        defaultEdgeStyle[mx.mxConstants.STYLE_FONTFAMILY] = 'Helvetica';
        defaultEdgeStyle[mx.mxConstants.STYLE_ALIGN] = mx.mxConstants.ALIGN_CENTER;
        defaultEdgeStyle[mx.mxConstants.STYLE_VERTICAL_ALIGN] = mx.mxConstants.ALIGN_MIDDLE;
        defaultEdgeStyle[mx.mxConstants.STYLE_ROUNDED] = 1;
        defaultEdgeStyle[mx.mxConstants.STYLE_STARTARROW] = mx.mxConstants.ARROW_CLASSIC;
        defaultEdgeStyle[mx.mxConstants.STYLE_STARTSIZE] = 8;
        defaultEdgeStyle[mx.mxConstants.STYLE_ENDARROW] = mx.mxConstants.ARROW_CLASSIC;
        defaultEdgeStyle[mx.mxConstants.STYLE_ENDSIZE] = 8;
        defaultEdgeStyle[mx.mxConstants.STYLE_STROKECOLOR] = '#aaaaaa';
  
        let product = graph.insertVertex(parent,'Product','Product',0,0,120,20);
        let orderLine = graph.insertVertex(parent,'Order_Line','Order_Line',0,0,120,20);
        let order = graph.insertVertex(parent,'Order','Order',0,0,120,20);
        let customer = graph.insertVertex(parent,'Customer','Customer',0,0,120,20);
        let new1 = graph.insertVertex(parent,'new1','new1',0,0,120,20);
  
        graph.insertEdge(parent, '1', '', product, orderLine);
        graph.insertEdge(parent, '2', '', orderLine, order);
        graph.insertEdge(parent, '3', '', order, customer);
        graph.insertEdge(parent, '4', '', orderLine, new1);
  
        const layout = new mx.mxHierarchicalLayout(this.graph, mx.mxConstants.DIRECTION_NORTH);
        layout.execute(graph.getDefaultParent());
      } finally {
        this.graph.getModel().endUpdate();
      }
  </code></pre>
  
  <p>And the result is what you see in the first picture above. (<a href="https://i.stack.imgur.com/6ZJ6H.png" rel="nofollow noreferrer">Graph with edges weirdly adjusted</a>)</p>
  
  <p>Can you help me to achieve what we can see in the second picture (<a href="https://i.stack.imgur.com/tAalQ.png" rel="nofollow noreferrer">Graph with edges nicely adjusted</a>), please?</p>
  
  <p><strong>Edit 1:</strong>
  Unfortunately, even if I use the same style we have in the XML file, it is not rearranging the edges like in the demo/showcase, I have tried it already:</p>
  
  <pre class="lang-js prettyprint-override"><code>graph.insertEdge(
                  parent,
                  `${getId()}`,
                  '',
                  source,
                  target, 
   'edgeStyle=orthogonalEdgeStyle;orthogonalLoop=1;jettySize=auto;html=1;startArrow=classic;startFill=1;targetPerimeterSpacing=8;sourcePerimeterSpacing=8;strokeColor=#aaaaaa;strokeWidth=2;curved=1;'
                );
  </code></pre>
  
  <p>Result:
  <a href="https://i.stack.imgur.com/BoXFd.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/BoXFd.png" alt="Even using styles as in XML the result is different"></a></p>
  
  <p><strong>Edit 2:</strong></p>
  
  <p>Although it hasn't worked on my code, on this CodePen it is working: <a href="https://codepen.io/palerique/pen/povEEVY" rel="nofollow noreferrer">https://codepen.io/palerique/pen/povEEVY</a></p>
  
  <p>So now I think that this layout class I am calling can be changing the style and causing this undesired behavior.</p>
  
  <p>Is there a layout class that don't change the edges style?</p>