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. (Last updated on: June 24, 2019).
Unfortunately, activation email could not send to your email. Please try again.
Syncfusion Feedback

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

Thread ID:

Created:

Updated:

Platform:

Replies:

150615 Jan 13,2020 02:27 PM UTC Jan 21,2021 11:48 AM UTC Angular - EJ 2 7
loading
Tags: Diagram
Alain dEspaignet
Asked On January 13, 2020 02:27 PM UTC

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
pageSettings: PageSettingsMode
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(bound: Rect): void;
But Id need to know the extents of all nodes/connectors after layout.


Thanks


Shyam G [Syncfusion]
Replied On 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 


Alain dEspaignet
Replied On 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



Alain dEspaignet
Replied On 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?




Shyam G [Syncfusion]
Replied On 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 


Alison Niu
Replied On 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

Gowtham Gunashekar [Syncfusion]
Replied On 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 


Gowtham Gunashekar [Syncfusion]
Replied On 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 



CONFIRMATION

This post will be permanently deleted. Are you sure you want to continue?

Sorry, An error occured while processing your request. Please try again later.

Please sign in to access our forum

This page will automatically be redirected to the sign-in page in 10 seconds.

Warning Icon You are using an outdated version of Internet Explorer that may not display all features of this and other websites. Upgrade to Internet Explorer 8 or newer for a better experience.Close Icon

Live Chat Icon For mobile
Live Chat Icon