How to disable key listeners on panzoom?

[ingelaro]

How to disable key listeners on panzoom?

[anvaka]

Thanks, for reporting.

Starting from v6.2.0, you can pass a filterKey(e, dx, dy, dz) function into options. If you return true from this function - keyboard events will not be handled by panzoom:

panzoom(container, {
  filterKey: function(/* e, dx, dy, dz */) {
    // don't let panzoom handle this event:
    return true;
  }
});

Here is relevant implementation.

Please let me know if this works

[kraniebrud]

Same her, I am building a website where left and right arrow key, should navigate to next picture unless picture is zoomed.
But I cant retrieve keydown or keypress event. However keyup fires just fine

[kraniebrud]

It seems that I have found myself a workaround, on some interval (very fast) the panzoom instance will move the image to the center. Then on keyup (which works for key event) arrow left and arrow right will change the image to the previous or the next.

so basicly

setInterval( () => { // workaround to deny pan/move when image is not zoomed
  const scale = pz.getTransform().scale
  if(scale == 1) pz.moveTo(0,0)
}, 5)

(what ever element).addEventListener('keyup', (e) => {
  const scale = pz.getTransform().scale
  if(scale > 1) return
  if(e.code == 'ArrowLeft') changeImage(-1)
  if(e.code == 'ArrowRight') changeImage(+1)
})

pz would be the panzoom instance.
Just putting this here in case it would be helpful to someone

[kraniebrud]

Nice,
I might have been wrong about posting on this issue, cause my issue might just only be related and not the same as authors issue.
In my case what I am/was seeking was an solution to when instantiating panzoom, is to able to disable pan when zoom level was at its minimum. Sorry I was not very clear on that.
I had fixed it for mouse, where the work around was that on mousemove and scale was at minimum would bring my panzoom element to move to center using moveTo(0,0) to prevent it from panning.

That was when I realized that I could also move my panzoom element using the arrowkeys, so I would simply do the same for the keydown events only for the arrow keys. And that let me to this issue.

I am sure that your implementation could be useful to someone. For me I will stick to my workaround, since I from my understanding this will prevent keys all together, I hope it makes sense :)

To give an example for what I mean

panzoom(document.getElementById('dias'), {
  maxZoom: 3,
  minZoom: 1,
  minZoomDenyPan: true, // will prevent panning when scale is at its minimum
})

So that when scale is at minZoom it well not be possible to pan the panzoom element with arrow keys nor the mouse and for when using pressing arrow keys, key event will still be exposed (only when at minZoom).
This might just be an scenario that is specific to me and maybe not what this library is intended for, in such case I understand.

I am using it to form a dias image viewer in the browser. where I want to be able to change image prev and next with the keyboard when at minZoom, while still being able to zoom in out with keys and pan when zoomed.
If you see an point to this, I could try to implement it at some point, at the moment I need to get this stuff done, and the workaround is playing very well for me tbh.

PS I am very grateful for this library it is great for what it does!