Get the coordinates of the viewport

[Unknown]

Hello Syncfusion team,

Is there any way of getting the current viewport coordinates, for example in this case to get the X position starting 0 and ending 700, and the Y position starting 0 and ending 300. I just need those 4 numbers as the viewport changes.

[Gobinath Dhamotharan]

We created a sample to achieve your requirement. We can get current viewport coordinates from diagram scrollSettings. Please refer to the below sample for your reference. 

Code snippet 

  public created() { 

    var ViewPortWidth = this.diagram.scrollSettings.viewPortWidth; 

    var ViewPortheight = this.diagram.scrollSettings.viewPortHeight; 

    console.log('ViewPortWidth = ' + ViewPortWidth); 

    console.log('ViewPortheight = ' + ViewPortheight); 

  } 

 

 

Sample 

https://stackblitz.com/edit/angular-rndfte?file=src%2Fapp.component.ts 

Documentation 

https://helpej2.syncfusion.com/angular/documentation/api/diagram/scrollSettings/#viewportheight 

 

[Unknown]

Thank you for your fast reply but i think i need to reformulate my question

My question was if i can get the top left and right and bottom left and right coordinates that fit in the viewport as i zoom in zoom out and move inside the diagram, basically the numbers on the ruler shown

the top side of the ruler -125 and 75 and left side 0 and 50

[Balasubramanian Manikandan]

Use the getDiagramBounds method to get the diagram viewport bounds. Refer to the below-mentioned code example and sample.

Code Snippet

public zoomIn(){

    this.diagram.zoom(0.5);

    var bounds = this.diagram.getDiagramBounds();

    console.log(bounds);

  }

  public zoomOut(){

    this.diagram.zoom(1.2);

    var bounds1 = this.diagram.getDiagramBounds();

    console.log(bounds1);

  }

Sample

https://stackblitz.com/edit/angular-pkxrgp-9vf1mc?file=app.component.ts,app.component.html