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();
}
}