how to zoom out ejs-diagram for complex hirerachical tree so that all the nodes and links are visible on click of any button.

Question

Hi,Initially we have contain zoom level for ejs-diagram svg, so how we can zoom out to max level in the ejs-diagram for complex hierarchical tree to get all the nodes and links visible in that given div frame. Additionally when I am trying to remove the style imports from syncfusion. And click on export button we can zoom out the ejs-diagram to view all the current nodes and links in given div frame. But while adding the below style imports the downloadImage function is ending in infinite while loop./* syncfusion CSS */@import "../node_modules/@syncfusion/ej2-diagrams/styles/material.css";@import '../node_modules/@syncfusion/ej2-angular-diagrams/styles/material.css';@import "../node_modules/@syncfusion/ej2-angular-base/styles/material.css";@import "../node_modules/@syncfusion/ej2-angular-popups/styles/material.css"; So how we can achieve the zoom out to max level to view all the nodes and links.Attaching the folder for the same. Attachment: zoom_out_a6765904.zip

Vivisa Ganesan · Answer

Hi,To ensure all nodes and connectors are visible within
viewport, invoke the `diagram.fitToPage` method in the created event. These
styles are the dependent styles of the diagram component so you need to refer
them. Please refer the sample and corresponding code snippet below:Code-snippet:

public created(): void {
      
     this.diagram.fitToPage();
   
    }

Regards,VivisaAttachment: myangularapp_67e210db.zip