Zoom and pan programatically

[lmrisdal]

I'm trying to add some buttons to let users control the zoom level using just a button, but I can't seem to get the zoomTo, panTo and viewportTo functions working.

Like this:

My current attempt is accessing the vflow component using a viewChild, and then running the zoomTo function there, but nothing seems to happen. The viewportChange observable also does not register any changes.

Are these not meant to be run like this?

[artem-mangilev]

Thanks for your issue! See the problem, will be fixed during this week

[artem-mangilev]

Just released 0.6.0, manual zoom/pan should work fine here

64

[lmrisdal]

Awesome, thank you! It works almost perfectly now, only thing is that I would have assumed that the zoom would be centered on the center of the viewport, but it doesn't seem to behave like that. See attached video (I made sure the element was centered in the viewport)

I can try to work around it, but just thought I'd point it out!

https://github.com/artem-mangilev/ngx-vflow/assets/9968658/e6ad9aaf-1450-4822-b72a-f396940db906

[artem-mangilev]

Seems like zoomTo must behave like this by default, will fix it during the weekends

[artem-mangilev]

Could you please share the code snippet of how you manage the manual zoom?

My implementation is:

<button (click)="zoom()">Zoom</button>
<vflow />

  ...

  zoom() {
    const current = this.vflow.viewport().zoom

    this.vflow.zoomTo(current + .3)
  }

...

When user clicks the zoom button, I just get the current level of zoom (from the viewport() signal), add some value to it and pass to zoomTo method of VflowComponent.

https://github.com/artem-mangilev/ngx-vflow/assets/53087914/11d3d9b9-dd59-4478-8649-7a60ae682c06

[lmrisdal]

Huh, my code is exactly like that 😅 And I just tested in a Stackblitz and it does behave like in your video. There must be something else that's off with my solution. I think you can close this issue then. Thanks!

[lmrisdal]

Figured it out now. I forgot to put view="auto" on the vflow component, and had used css instead to increase the size.

[artem-mangilev]

Thanks! Yeah, for now you basically have 2 options: fixed view size with passing [width, height] tuple and auto size when the flow adjusts to its container: https://www.ngx-vflow.org/examples/view-size