Center all nodes inside diagram, center on selected nodes, and programatically select node

[Benjamin Davenport]

Hello,

1. I am creating a diagram (nodes/connectors/annotations) programmatically (through .ts) and want to be able to center those nodes inside the diagram bounds. As I don't know how many nodes ahead of time, this would need to happen at run time. Is there a way to make all the added nodes fit within the bounds of the diagram (which is also dynamic in the sense that it has a percentage width rather than a hard coded pixel value).  
2. Along with the above, is there a way to center/zoom to a selected node?
3. And finally, how to select a node programmatically? 

Thanks!

[Aravind Ravi]

Hi Benjamin, 

Please find the response for queries in below table 

I am creating a diagram (nodes/connectors/annotations) programmatically (through .ts) and want to be able to center those nodes inside the diagram bounds. As I don't know how many nodes ahead of time, this would need to happen at run time. Is there a way to make all the added nodes fit within the bounds of the diagram (which is also dynamic in the sense that it has a percentage width rather than a hard coded pixel value).	By using the scroll settings we can able to get the diagram viewport width. So by using view port width we can set offsetx for the node. So it looks like node gets renders in the center of the diagram bounds.  public addNode() {      //Create a node object with size      let node: NodeModel = { height: 50, width: 100 };       //check node offset lesser than diagram viewportwidth      let offsetX: number = this.diagram.scrollSettings.viewPortWidth / 2;      if (this.offsetX < this.diagram.scrollSettings.viewPortWidth) {        node.offsetX = offsetX;        node.offsetY = this.offsetY;        //add a node at runtime        this.diagram.add(node);        this.offsetY = this.offsetY + 75;             }    }
Along with the above, is there a way to center/zoom to a selected node?	By default, in the diagram we can able to zoom in or zoom out the diagram. We does not able to zoom the particular node in diagram. Please find the below code snippet for how to zoom in or zoom out the diagram.  //ZoomIn option is used to zoom in the diagram  let zoomin: ZoomOptions = { type: 'ZoomIn', zoomFactor: 0.2 };             this.diagram.zoomTo(zoomin);  //ZoomOut option is used to zoom out the diagram   let zoomout: ZoomOptions = { type: 'ZoomOut', zoomFactor: 0.2 };              this.diagram.zoomTo(zoomout);  Sample: https://ej2.syncfusion.com/angular/demos/#/material/diagram/radial-tree
And finally, how to select a node programmatically?	By using diagram public API method select we can able to select a particular node in the diagram programmatically.  this.diagram.select([this.diagram.nodes[0]]);

Sample: https://stackblitz.com/edit/angular-naist2-ztp2rj?file=app.component.ts 

We have created a KB to add nodes without overlapping each other. Please refer to below KB 

KB: https://www.syncfusion.com/kb/11064/how-to-automatically-arrange-nodes-without-overlapping-in-angular-diagram 

Regards 

Aravind Ravi