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

Zooming for ejs-diagram

I want to enable zooming option for ejs-diagram


The zooming which you provided is as below


It is with ejs-chart

I need to do the same for ejs-diagram


Please help me on this... 

3 Replies

SG Shyam G Syncfusion Team January 21, 2020 06:36 AM UTC

Hi SaiSravya, 

By default, the Zooming is enabled in the diagram. We need not set any properties to enable the zooming in the diagram. To disable the zoom initially, we should remove DiagramConstraints Zoom from the Default. Also, we can use zoomTo method to perform zoom operations at runtime. Please refer to a code example below. 

Code example: 
//disable zoom initially 
public constraints: DiagramConstraints = DiagramConstraints.Default &~DiagramConstraints.Zoom;   

  
//zoom operation at runtime 
ZoomIn() { 
    let zoomOptions: ZoomOptions = { 
      type: "ZoomIn", 
      //Sets the factor by which we can zoom in or zoom out 
      zoomFactor: 0.5 
    } 
    //zoomin the diagram 
    this.diagram.zoomTo(zoomOptions) 
 
  } 
 
  ZoomOut() { 
    let zoomOptions: ZoomOptions = { 
      type: "ZoomOut", 
      //Sets the factor by which we can zoom in or zoom out 
      zoomFactor: 0.5 
    } 
    //zoomout the diagram 
    this.diagram.zoomTo(zoomOptions) 
  } 


Regards, 
Shyam G 



SA SaiSravya January 21, 2020 12:57 PM UTC

Do we need to import [zoomSettings] function to html?


If yes, Please share the details


SG Shyam G Syncfusion Team January 22, 2020 07:14 AM UTC

Hi SaiSravya, 

No, we need not import any function to html. 

Regards, 
Shyam G 


Loader.
Live Chat Icon For mobile
Up arrow icon