Dynamically created nodes are overlapping

@swati.707 wrote:

Hi ,
I am creating nodes dynamically on click event but the newly added nodes are overlapping with the parent node
Please help
function addChild(nodename,event) {
vm.i = vm.i+1;

    var can = event.target;
    var pixelratio = window.PIXELRATIO;
    var bbox = can.getBoundingClientRect();
    var bbw = bbox.width;
    if (bbw === 0) bbw = 0.001;
    var bbh = bbox.height;
    if (bbh === 0) bbh = 0.001;
    var mx = event.clientX - bbox.left * ((400/pixelratio) / bbw);
    var my = event.clientY - bbox.top * ((400/pixelratio) / bbh);
    var point = vm.myDiagram.transformViewToDoc(new go.Point(mx, my));


 vm.myDiagram.startTransaction("add node and link");
 //var newnode = { key: nodename };
 vm.myDiagram.model.addNodeData({ key: vm.myDiagram.model.nodeDataArray[0].key+vm.i , name:nodename , color: "#F0F0F0" , location: point});  // this makes sure the key is unique
 var newlink = { from: vm.myDiagram.model.nodeDataArray[0].key, to: vm.myDiagram.model.nodeDataArray[0].key+vm.i };

vm.myDiagram.model.addLinkData(newlink);
vm.myDiagram.commitTransaction("add node and link");

};

vm.myfun = function () {
var $ = go.GraphObject.make; // We use $ for conciseness, but you can use anything, $, GO, MAKE, etc
var myDiagram = $(go.Diagram, "myDiagramDiv", // create a Diagram for the DIV HTML element
{
initialContentAlignment: go.Spot.Center,
"undoManager.isEnabled": true
});

     myDiagram.nodeTemplate =
     $(go.Node, "Auto",
                            new go.Binding("location", "loc", go.Point.parse).makeTwoWay(go.Point.stringify),
                            $(go.Shape, "Rectangle", new go.Binding("fill", "color"),
                              {
                                portId: "", cursor: "pointer", strokeWidth: 0,
                                fromLinkable: true, toLinkable: true,
                                fromLinkableSelfNode: true, toLinkableSelfNode: true,
                                fromLinkableDuplicates: true, toLinkableDuplicates: true
                              }),
                            $(go.TextBlock, { margin: 8, editable: true },
                              new go.Binding("text", "name").makeTwoWay())
  );

myDiagram.linkTemplate =
$(go.Link,
                            new go.Binding("routing", "routing"),
                            { relinkableFrom: true, relinkableTo: true },
                            //$(go.Shape),
                            $(go.Shape, { toArrow: "", stroke: null, strokeWidth: 0 })

);

var nodeDataArray = [
{ key: 1, name: "RN1", color: "#F0F0F0" },

];
var linkDataArray = [

];

myDiagram.model = new go.GraphLinksModel(nodeDataArray,linkDataArray);

vm. myDiagram = myDiagram;
window.PIXELRATIO = myDiagram.computePixelRatio();

}

}

Posts: 4

Participants: 2

Read full topic