GoJS Org Chart Editor - How to replace parent node by drag and drop


#1

Hi Walter/Simon,

In the above diagram, We have a parent node ‘Lori Jaramillo’ (Mother). How to replace Lori with any other node in ‘Other Parities’ Section by drag and drop.

For example, If I drag and drop ‘George’ from other parties to ‘Lori’ it should not create a child node. It should show a popup saying ‘Would you like to replace parent node?’ if yes then Parent Node (Lori) should be replaced with the dragged child node (‘George’).

Thanks.


#2

This assumes that each node only has one port:

      $(go.Diagram, . . .,
        {
          . . .,
          allowDrop: true,  // for v1.*
          "ExternalObjectsDropped": function(e) {
            var newnode = e.diagram.selection.first();
            if (newnode !== null) {  // a new node was dropped

              // look for any existing node under the mouse pointer at the time of the drop
              var oldnode = e.diagram.findObjectsAt(e.diagram.lastInput.documentPoint,
                function(x) { var p = x.part; return (p instanceof go.Node) ? p : null; },
                function(p) { return p.isSelected ? null : p; }).first();

              if (oldnode !== null) {  // found an existing node?
                // could ask if it's OK to replace the old node . . .

                // disconnect existing links from old node and reconnect with new node
                var links = new go.List().addAll(oldnode.linksConnected);
                links.each(function(link) {
                  if (link.fromNode === oldnode) link.fromNode = newnode;
                  if (link.toNode === oldnode) link.toNode = newnode;
                });

                // remove old node
                e.diagram.remove(oldnode);
              }
            }
          },

#3

Thank you Walter.