How to apply zooming and paning feature on diagram?

[Siddharth Kulat]

Hello,

We are creating some sample map using the Diagram feature in the angular. We want zoom and panning feature in the diagram. We have created diagram like below,

In the drawshape.component.html

<ejs-diagram #diagram id="diagram" width="100%" height="700px" [snapSettings]='snapSettings' [getConnectorDefaults]='connDefaults' [getNodeDefaults]='getNodeDefaults' dragEnter='dragEnter' (created)="diagramCreate($event)" [constraints]='diagramConstraints'> </ejs-diagram>

And in the drawshape.component.ts file,

ngOnInit(): void {

       this.diagramConstraints = DiagramConstraints.PageEditable | DiagramConstraints.Zoom & ~DiagramConstraints.Pan;

    },

What changes need to be done in the code? Please suggest. Thank you.

[Ramya Thirugnanam]

Hi Siddharth,  

 

Thanks for contacting Syncfusion support. 

 

Please set DiagramTools as ZoomPan to activate pan tool in diagram. Please refer to the below code example, sample and help documentation.  

 

Code example:  

App.component.html  

  <ejs-diagram #diagram id="diagram" width="100%" height="499px"  [tool]='tool'>  

            </ejs-diagram>  

 

App.component.ts  

public tool: DiagramTools = DiagramTools.ZoomPan;  

 

 

 

Sample: https://stackblitz.com/edit/angular-3nczxw-i93vh5?file=app.component.ts  

 

Help documentation: https://ej2.syncfusion.com/angular/documentation/diagram/tools/?no-cache=1#tool-selection  

 

Regards,  

Ramya T 

[Siddharth Kulat]

Hello Sir,

Thanks for the update. Actually we want the achieve the functionality using the button click. I am attaching the image of the required functionality. Do you have any sample code for that?

PFA,

Thank You

[Ramya Thirugnanam]

Hi Siddharth,  

 

We have modified a sample to activated pan tool in button click. Please refer to the code example and sample below.  

 

Code example:  

  

<div>   

  <button id="changeTool" (click)="changeTool()"> changeTool </button>  

</div>  

 

changeTool(): void {  

      //set ZoomPan tool  

       this.diagram.tool =  DiagramTools.ZoomPan;  

       this.diagram.dataBind();  

     }  

 

 

Sample: https://stackblitz.com/edit/angular-3nczxw-ybnfpc?file=app.component.ts 

 

Help documentation link: https://help.syncfusion.com/js/diagram/commands#zoom 

 

Regards, 

Ramya T