title: How to update the graph model efficiently after certain operation in mxgraph?
body: <p>After consecutive drag and drop in mxgraph, the parentInfo is lost for cell.</p>
  <p>Children and Parents for cell are not getting updated after consecutive drag and drop.</p>
  <blockquote>
  <p>Drag and Drop is handled using connect, the logic behind is simple.
  Removing the existing parent connection and establishing new edge
  connection with target node.</p>
  </blockquote>
  <pre><code>mxConnectionHandler.prototype.connect = function(
        source,
        target,
        evt,
        dropTarget
      ) {
        var sourceParentCell = getParentCell(source);
        if (sourceParentCell !== target) {
          graph.getModel().beginUpdate();
          try {
            var edges = graph.getEdgesBetween(sourceParentCell, source);
            _.each(edges, edge =&gt; {
              graph.getModel().remove(edge);
            });
            graph.insertEdge(parent, null, '', target, source);
          } finally {
            graph.getModel().endUpdate();
          }
        }
      };
    }
  </code></pre>
  <p><strong>Here goes the click event handler for the cell which provides information about the cell when clicked along with its immediate parent cell info.</strong></p>
  <pre><code>graph.addListener(mxEvent.CLICK, function(sender, evt) {
        var cell = evt.getProperty('cell');
        if (cell &amp;&amp; cell.id) {
          const nodeData = hierarchialData(graph, cell);
          console.log('cellInfo =&gt; ', JSON.stringify(nodeData));
          console.log(
            'parentInfo =&gt; ',
            JSON.stringify(getParentCell(cell).value)
          );
        }
      });
  </code></pre>
  <p>The above code is working fine for two drags, later the parentInfo is lost and shows the cell itself as its parent.</p>
  <p>Deployed in Heroku here: <a href="https://express-mxgraph.herokuapp.com/" rel="nofollow noreferrer">https://express-mxgraph.herokuapp.com/</a></p>
  <p><strong>Demo:</strong></p>
  <p><a href="https://i.stack.imgur.com/sp4RM.gif" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/sp4RM.gif" alt="enter image description here" /></a></p>
  <p>When it reaches to the node: <code>20-Double click to set name</code>, you will notice its parentInfo is same: <code>20-Double click to set name</code> and not <code>22-Double click to set name</code> and hence the edge construction fails miserably.</p>
  <p>What's going wrong here, am I updating the vertex and edge properly or not?</p>
  <p>Also onload of the url, you may observe the whole graph is dragged towards the mouse move. This also should be avoided.</p>
  <h2>Steps to reproduce:</h2>
  <ul>
  <li><p>Move <code>14-Double click to set name</code> under <code>20-Double click to set name</code></p>
  <p>Click on <code>14-Double click to set name</code>, you will see cellInfo as <code>14-Double click to set name</code> and parentInfo as <code>20-Double click to set name</code> which is correct</p>
  </li>
  <li><p>Now drag <code>20-Double click to set name</code> under <code>22-Double click to set name</code></p>
  <p>Click on <code>20-Double click to set name</code>, CellInfo and ParentInfo both contains <code>20-Double click to set name</code>. ParentInfo actually should contain <code>22-Double click to set name</code>.</p>
  </li>
  <li><p>So the cell <code>20-Double click to set name</code>, it is already in a bad shape and when you now try to connect with <code>18-Double click to set name</code>. The graph breaks</p>
  </li>
  </ul>