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
this.diagram.fitToPage
pageSettingsPageSettingsMode
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.


Thanks


14 Replies

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

Hi Alain, 
 
Query 
Response 
  • 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. 
 
 
Regards, 
Shyam G 



AD Alain dEspaignet January 15, 2020 05:01 AM UTC

Shyam,

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.

https://youtu.be/VpJTFhZGABs

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.

Thanks




AD Alain dEspaignet January 15, 2020 05:44 AM UTC

Shyam,

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 02:05 PM UTC

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: 
WebAPI 
 
     public List<HierarchicalTree> Get() 
        { 
            DiagramEntities3 entity = new DiagramEntities3(); 
            List<HierarchicalTree> HierarchicalData = entity.HierarchicalTrees.ToList<HierarchicalTree>(); 
            return HierarchicalData; 
        } 
 
Angular 
 
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}] 
           } 
          } 
        },100) 
      }; 
      callback.send().then(); 
  } 
 
 
 
 
Layout output screenshot: 
 
 
Regards, 
Shyam G 



AN Alison Niu January 19, 2021 01:13 AM UTC

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".

https://angular-cpr7be.stackblitz.io


GG Gowtham Gunashekar Syncfusion Team January 19, 2021 12:21 PM UTC

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



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

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.
 
 
Regards 
Gowtham 




RC Robert Calupig August 29, 2022 02:45 PM UTC

Hi Shyam,


Your example in https://stackblitz.com/edit/angular-ksffa1-dwtpf4?file=app.component.ts does not work when calling .fitToPage() if the browser window is in a certain size. Steps to reproduce:
 - Set browser window not to max.
 - Press fitToPage button -> diagram is not resized to fit available space - FAIL
 - Set browser window to max.
 - Press fitToPage button -> diagram is resized to fit available space - SUCCESS
 - Set browser window back to not max.
 - Press fitToPage button -> diagram is not resized to fit available space - FAIL

I am also getting the same result using my code.


Robert



SJ Sivaranjith Jeyabalan Syncfusion Team August 30, 2022 03:08 PM UTC

Hi Robert,

We will validate and update you with more details on September 01, 2022.

Regards,

Sivaranjith



SG Shyam G Syncfusion Team September 1, 2022 02:44 PM UTC

Hi Alain,


The diagram fitToPage method works when we zoom in/out the diagram page not the browser zoom. Could you please share us more details such as video to explain your issue which will help us to investigate further on it.


Regards,

Shyam G



RC Robert Calupig replied to Shyam G September 5, 2022 03:27 AM UTC

Hi Shyam G,


Please see attached video that shows fitToPage() doesn't work if available space of diagram is small.


Robert


Attachment: Angular_Ksffa1_(forked)__StackBlitz__Google_Chrome_20220905_111934_cff0b799.zip


SJ Sivaranjith Jeyabalan Syncfusion Team September 6, 2022 02:28 PM UTC

Hi Robert,


The fitToPage method will zoom the diagram based on the viewport size. The minimum zoom allowed in diagram is 0.2 and maximum zoom is 30. In the video, the diagram size is lesser in the stackblitz and when you call the fitToPage method, the diagram zoom value is lesser than 0.2 and so the fitToPage method doesn't work in this case. Please open the stackblitz in new window and use fitToPage method.


Regards,

Sivaranjith



RC Robert Calupig September 8, 2022 02:30 AM UTC

Hi  Sivaranjith,

Thanks for the reply. I will take note of the size when c

Robert



SJ Sivaranjith Jeyabalan Syncfusion Team September 9, 2022 12:35 PM UTC

Hi Robert,

Please let us know if you need further assistance on this. 

Regards,

Sivaranjith


Loader.
Live Chat Icon For mobile
Up arrow icon