how to create a counter that collects values from an array to pass as a parameter?

Question

I assign to a button a function that executes an external library method for zooming.

<div *ngIf="isPremium" class="zoom-in" (click)="zoomIn()"><i class="icon-search-plus"></i>>/div>

This method only supports three parameters established by the library itself. Width, height and a third number that performs a zoom increment.

  zoomIn() {
    const $container = $('.container');
    this.instance = panzoom($container[0], {
      smoothScroll: false,
      zoomSpeed: 0.015

    });
    const width = document.querySelector('.container').getBoundingClientRect().width / 2;
    const height = document.querySelector('.container').getBoundingClientRect().height / 2;   
    this.instance.smoothZoom(width, height, 2);

  }

I tried to pass an array of values directly as a third parameter but it returned an error (ERROR Error: zoom requires valid numbers).I understand that the error it returns is because it only allows a single value. How could I pass an array of values instead of the third parameter to perform a progressive zoom increment each time I press my button? thank you in advance for your help

 const width = document.querySelector('.container').getBoundingClientRect().width / 2;
    const height = document.querySelector('.container').getBoundingClientRect().height / 2;  
const possibleZooms = [1.2, 1.4, 1.8, 2]; 
    this.instance.smoothZoom(width, height, possibleZooms); 

Answer 1

Well, define a variable that holds the current zoom value, and increase it every time:

var currentZoom = 0;
zoomIn() {
    const $container = $('.container');
    this.instance = panzoom($container[0], {
      maxZoom: 2,
      minZoom: 0.4,
      smoothScroll: false,
      zoomSpeed: 0.015
      pinchSpeed: 0.015,
      bounds: true,
      boundsPadding: 0.05,
      beforeWheel(e) {
        const shouldIgnore = !e.altKey;
        return shouldIgnore;
      },
      zoomDoubleClickSpeed: 1,
      transformOrigin: {x: 0.5, y: 0.5}
    });
    const width = document.querySelector('.container').getBoundingClientRect().width / 2;
    const height = document.querySelector('.container').getBoundingClientRect().height / 2;   
    this.instance.smoothZoom(width, height, ++currentZoom);
}

I used 0 as the first value, but I don't know if it is like that. Now, every time you press the button, the zoom value increases. If there is a max value for the zoom, you can do:

...
currentZoom = min(maxZoom, currentZoom + 1);
this.instance.smoothZoom(width, height, currentZoom);

This way, when currentZoom is equal to maxZoom , it won't increase anymore.

Now, if you have several objects that can be zoomed in, you need to organise the current state for each one, but I leave that to you.

Hope this helps.