Zooming for ejs-diagram

[SaiSravya]

I want to enable zooming option for ejs-diagram

The zooming which you provided is as below

https://ej2.syncfusion.com/angular/documentation/chart/zooming/

It is with ejs-chart

I need to do the same for ejs-diagram

Please help me on this... 

[Shyam G]

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 

[SaiSravya]

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

If yes, Please share the details

[Shyam G]

Hi SaiSravya, 

No, we need not import any function to html. 

Regards, 

Shyam G