Panning doesn't work when margins is set.

[kevindecapite]

In trying to prevent the SVG from getting dragged/panned out of sight, I'm using the margins property like this:

panZoom({
            margins: {
                top: 1,
                right: 1,
                bottom: 1,
                left: 1
            },
            zoomMin: .5,
            zoomMax: 10,
            oneFingerPan: true
        });

I would expect that with a number so low, I would only get 1px (or so, depending on zoom level) of the SVG to remain in view when panning to the extreme edge of the available space.

However, whenever this property is set (using any numerical values), panning simply doesn't work at all. Instead, the SVG zooms with the mouse wheel with the anchor point remaining in the upper-left of the screen. Then it cannot be dragged/panned at all.

(For the record, I've also tried using higher numbers (500 all around), and get the same results.)

This is happening on:

• macOS Chrome 80.0.3987.163
• macOS Safari 13.0.5

[Fuzzyma]

Create a jsfiddle or codepen showing your issue please

[kevindecapite]

Here you go:

https://codepen.io/etipaced/pen/WNQvRGM

(I couldn't find the plugin on cdnjs so I just copy-pasted it from my dist/ folder. The JS that creates the SVG and attaches panZoom() is at the bottom of the pen.)

[Fuzzyma]

margins only work with absolute size of the svg set (for now - maybe i got lazy there).
Furthermore there seems to be an issue with the left and top margins. They are off. Dunno why yet. When I wrote it, it was all working and I didnt change anything (maybe I just forgot my weired logic)

[kevindecapite]

I see. I would be willing to spend some time trying to implement this if you can point me in the right direction.

[Fuzzyma]

The source code isnt hard to reason about. Somewhere the math seems to be a bit off. Unfortunately I currently have no ressources left to fix it myself

[med-hedi]

Hello @Fuzzyma i have problem with panZoom i used the margins option to limit the pan area to at least 10px of my SVG still visible, but when i move the svg it disappears from the pan area and I don't see it anymore.
I'm using the margins option like this:
.panZoom({
panning: true,
zoomMin: 0,
zoomMax: 10,
zoomFactor: 1,
margins: {top: 10, left: 10, right: 10, bottom: 10}
});