We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy. Image for the cookie policy date

Angular Diagram - Zoom to extents of nodes & connectors after layout

I load nodes and connectors via an HTTPClient call 
Then I use diagram.add( node), diagram.add(connector) to add my nodes connectors 
Then I use 
this.diagram.layout = { type: 'ComplexHierarchicalTree'};
And layout takes place. Nice.

However the nodes/connectors are drawn sort of in the middle of the "diagram" but scrolled down in the browser's window.
I have to scroll down to see them.

  • Is there a way to automatically bring the nodes and connectors into view after layout?
  • Is there a way to calculate the extents of the nodes/connectors after layout has taken place and then zoom the diagram to that extent?

I played with all sorts of combinations of
and could not get the nodes/connectors to show nicely by default on the diagram after layout.

Annoying to have to scroll to see them every time.

There is a     bringIntoView(boundRect): void;
But Id need to know the extents of all nodes/connectors after layout.


7 Replies

SG Shyam G Syncfusion Team January 14, 2020 04:03 AM

Hi Alain, 
  • Is there a way to automatically bring the nodes and connectors into view after layout?
Please use fitToPage method which fits the diagram content within the viewport. We have created a sample in which we have called a fitToPage method at the button click. Could you please check in the below sample? Still if you face any issues, please share us more details such as modify the below sample. 
  • Is there a way to calculate the extents of the nodes/connectors after layout has taken place and then zoom the diagram to that extent?
Could you please elaborate your requirement in detail with the screenshot or video. So that we can validate and provide a solution. 
Shyam G 

AD Alain dEspaignet January 15, 2020 12:01 AM


Thanks for your response. I looked at the sample you sent.
You are calling fitToPage() via a button. I did that at one point too. It did not work.
In any case, I am trying to avoid users having to click to fit page it's not UX friendly.
The idea is the diagram should come into view automatically.

Attached is a video showing the problem.
Actually I had issues uploading the video so I put it up on Youtube instead.


The complete code is attached.

I see you are using dataManager and a node template.
Perhaps I should switch to using that instead of Angular HTTPClient?

Does it not come to the same thing though - just another method of generating nodes.
Is doLayout() synchronous?

Should I perhaps be setting the pageSettings and giving the diagram a size = same as browser window and then set zoom so the diagram is scaled?

The last question that you ask for clarification...
Is there a way to calculate the extents of the nodes/connectors after the layout has taken place and then zoom the diagram to that extent?

It is pretty clear. It is a method of calculating the extents (Rect) of all the nodes and connectors after the layout is complete then zooming to that Rect.
I would do that by iterating through the nodes and calculating the extents.


AD Alain dEspaignet January 15, 2020 12:44 AM


I think the fundamental problem here has to do with using the diagram in an asynchronous way.
All the examples I have seen feed the data to the diagram BEFORE construction.
That is not very realistic and practical.

In your example...

import { DataManager } from '@syncfusion/ej2-data';
import * as Data from './overview-data.json';
Diagram.Inject(DataBinding, HierarchicalTree);

Here, for example, the data is there before the diagram is constructed.

    public data: Object = {
        id: 'Id', parentId: 'ReportingPerson', dataSource: new DataManager((Data as any).data)

In what I am doing the diagram is already created and then I add nodes/connectors to it.
It is not clear if doLayour is synchronous or asynchronous. I assume is it synchronous otherwise it would return a promise.

I could fetch the data in the component constructor (bad practice) but then I would not have a diagram to add nodes to yet since it is not constructed.
What if I dynamically create the diagram after I have the data?

SG Shyam G Syncfusion Team January 15, 2020 09:05 AM

Hi Alain, 
By analyzing your video, we suspect that the issue may be in application level. Could you please host your sample online server and share a link or else could we set up a web meeting to discuss your issue. We have created a simple sample for your reference. In this sample, we have rendered a Hierarchical layout by retrieving the asynchronous data JSON from the database using webAPI. Please refer to a code example and the sample below. 
Code example: 
     public List<HierarchicalTree> Get() 
            DiagramEntities3 entity = new DiagramEntities3(); 
            List<HierarchicalTree> HierarchicalData = entity.HierarchicalTrees.ToList<HierarchicalTree>(); 
            return HierarchicalData; 
ngOnInit(): void { 
     const callback: Ajax = new Ajax( 
        'http://localhost:57270/api/entity/Get', 'GET', false, 'application/json; charset=utf-8' 
      callback.onSuccess = (JsonString: any): void => { 
        let diagramInstance= this; 
        setTimeout( function () { 
          //set an diagram layout 
          diagramInstance.diagram.layout = { 
            type: 'HierarchicalTree', verticalSpacing: 30, horizontalSpacing: 40, 
           enableAnimation: true 
         //get a layout tree from database 
          let parsedData = JSON.parse(JsonString); 
          //set datasource 
          diagramInstance.diagram.dataSourceSettings = { 
            id: 'Name', parentId: 'Category',  
            dataManager: new DataManager(parsedData),  
            doBinding: (nodeModel: NodeModel, data: object, diagram: Diagram) => {  
               nodeModel.shape = { type: 'Basic', shape:'Rectangle' };  
               nodeModel.annotations = [{content: (data as EmployeeInfo).Name}] 
Layout output screenshot: 
Shyam G 

AN Alison Niu January 18, 2021 08:13 PM

hi, I made a simple page, just add nodes and click to fit to page, it isn't working.

Could you tell where is wrong?

steps: click "addnodes" then click "fittopage".


GG Gowtham Gunashekar Syncfusion Team January 19, 2021 07:21 AM

Hi Alain, 
We are validating your requirements and update you with more details on January 21st 2021. 

GG Gowtham Gunashekar Syncfusion Team January 21, 2021 06:48 AM

Hai Alison, 
In our further analysis, the provided diagram has the width as "600px", but you added the node with a size of 4000 X 4500 and tried fitToPage API. We have default zoom support for the zoom factor between 0.2 and 30 in the diagram. By default, the fiToPage API does not zoom less than 0.2 zoomFactor. We recommend the below two ways to overcome this feature. 
  1. You can set minZoom as 0.01 in scrollSettings
public scrollSettings: ScrollSettingsModel = { minZoom: 0.01 }; 
  1. You can enlarge the diagram’s width and height.

Live Chat Icon For mobile
Up arrow icon