Facing some issue while adding node on top port of another Node

I am trying to add node to the another node(especially at port “T”) when it’s dropped from the palette.


  myDiagram.addDiagramListener("ExternalObjectsDropped", function (e) {

         var selectedNode = e.diagram.selection.first();
         e.diagram.startTransaction("Add Node"); 
         var selectnewNode= {name: "newNode",figure: "Circle",loc:selectedNode.location};
	 e.diagram.model.addNodeData(selectnewNode);   // adding Node
         e.diagram.commitTransaction("Add Node");
            var selectnewNode = e.diagram.findNodeForData(selectnewNode)

e.diagram.startTransaction("Add Link");
var linkData = { to: selectedNode.data.key, from: selectnewNode.data.key, fromPort: "B", toPort: "T"};
    e.diagram.model.addLinkData(linkData); // Adding Link
e.diagram.commitTransaction("Add Link");
    var selectLink = e.diagram.findLinkForData(linkData)


I have written some logic to move the newly node position to another node(which is dropped from palette) position

I am expecting output like this

But I am getting output like this:

And also that after dropping node and If I clicked button 'MakeNodeOnTop" which will give same output as I expected.

ExternalObejctDropped & MakeNodeOnTop() logic are same but expected output is not coming in ExternalObejctDropped. Can you tell me why?

I have add some example on this:

Your node template, if it has a Binding on Node.location, seems to be setting the new node’s location to be the same as the selected node’s location. Don’t you want to increase the Y coordinate value of the new node’s location?

Yes, In nodetemplate location is two way binded and also I need to incresase the y coordinate of new node location.

But I need to find the new node position based on the port of the dropped node(ex: “T”,“R”,“B”,“L”).
So, I have written logic like:

var portLocation = selectLink.fromPort.getDocumentPoint(go.Spot.Center)
var Length =15
    var point = selectLink.toPort.getDocumentPoint(go.Spot.Center)
    var portDirection = "T"  // Connecting node on another nodes top port 
                                      // for testing I have given port "T". but it will be any port's
var num = portLocation.x;
    var y = portLocation.y;
    if (portDirection == "L") {
            num = point.x - Length;
            y = point.y;
    else if (portDirection == "R") {
            num = point.x + Length;
            y = point.y;
    else if (!(portDirection == "T")) {
	num = point.x;
            y = point.y + Length;
     else {
            num = point.x;           // Moving the newNode on top of old node
            y = point.y - Length;    // Moving the newNode on top of old node with difference of 10

        var point1 = new go.Point(num, y);
        var num1 = portLocation.x;
        var location = selectLink.fromNode.location;
        var actualWidth = num1 - location.x;    // calculating the diff of oldnode x and new node x

        var y1 = portLocation.y;
        location = selectLink.fromNode.location;
        var actualHeight = y1 - location.y;     // calculating the diff of oldnode y and new node y
    selectLink.fromNode.move(new go.Point((num -actualWidth), y-actualHeight ));  //Moving the New Node

But this not working in externalobjectDropped.

Are you trying to position the two ports (of the two nodes) to have the same centers? That reminds me of a different sample, Pipes. If you can understand that code, you might find it useful.

If that’s what you are trying to do, I don’t think you care about the portDirection or Length. You want:

  port1pt == port2pt


  port2pt == node2loc + port2offset


  node2loc == port1pt - port2offset