How to center diagram to page-view - Angular 7?

Question

Hello,What is the best way to fit (center) the diagram to page? I have some data that I am loading from API, and every time I load this data my diagram is located on the left top corner. I can not show the full diagram, zoom in and out option is not set correctly.I have tried to use fit to page and some layout settings but no luck.Here is a similar example like my, here you can not see full diagram just the part of the diagram:https://stackblitz.com/edit/angular-ksffa1-dwtpf4?file=app.component.tsFit to a page does not help, I should be able to see full diagram, not just part (center part). Can you please give me an example of how to show a full diagram with an overview?I want to center the diagram on create event  if this is possible?Also, if the diagram is empty, what is the best way to add and center the node on button click?Thank you

Suganthi Karuppannan · Answer

Hi Maja,    
   
Please find the below response.   
   




Can you please give me an example of how to show a full diagram with an overview?   

We have created a sample for diagram with an overview. Please refer the below sample link.  
https://stackblitz.com/edit/angular-jypbd7?file=app.component.ts   


I want to center the diagram on create event  if this is possible?   

The “bringIntoView” method is used to bring the bounds of the diagram to the viewport, which part of the diagram is to be viewed to pass the bounds to the method.   
   
Please refer the code snippet in the below table.   
   




public created() {   
       let diagramBounds = document.getElementById(this.diagram.element.id + "content").getBoundingClientRect();   
       var nodeBounds = new Rect(-300, 50, 400, 250);   
       this.diagram.bringIntoView(nodeBounds);   
    }   
   
In the sample, we have given the “bringIntoView” functionality in created event.   
Please find the below sample for your reference.    
Sample: https://stackblitz.com/edit/angular-jypbd7?file=app.component.ts   
   


Also, if the diagram is empty, what is the best way to add and center the node on button click?   

We have created a sample for your requirement. In the sample, we have created an empty diagram, while click a “Add Node” button a new node will be added at the center of the diagram.   
Please refer the sample in below link.https://stackblitz.com/edit/angular-7dj7j3?file=app.component.ts    
  
   
   
 If we misunderstood your requirements, please share more details about your requirement or pictorial representation of your requirement. This will be helpful for us to serve you better.   
   
Regards   
Suganthi K.

MM · Answer

Thank you Suganthi,Some additional questions about adding the multiple nodes on button click. How can I avoid overlapping?Sometimes nodes are overlapping...Also is it possible tho show full diagram, depending on the number of elements, we can set the zoom in or zoom out?For example, if we have 3 elements in the diagram we would like to have to center these elements and zoom property will be 80%,but if we have 30 elements (image below) on the diagram this also needs to be centered and zoom property is set to 20%?Thank you,M

Suganthi Karuppannan · Answer

Hi Maja,       
      
Please find the below response.   
   




Adding the multiple nodes on button click. How can I avoid overlapping?   

We have created a sample for your requirement. In the sample, we create an empty diagram, while clicking the “Add Node” button nodes are added from left to right, if the node bounds is beyond the diagram bound’s width, then change the “offsetY” for the nodes, so nodes will arrange from top to bottom in the diagram without overlapping.Please refer the below sample.https://stackblitz.com/edit/angular-7dj7j3-ozpllk?file=app.component.ts  


Is it possible the show full diagram, depending on the number of elements, we can set the zoom in or zoom out?   

We have created a sample for your requirement. In the sample, while click “Zoom In or Out” button, the diagram will be zoomed in or out based on object’s bounds contains in the diagram.Please refer the below sample.   
https://stackblitz.com/edit/angular-jypbd7?file=app.component.ts  
  
   
Regards,   
Suganthi K.