Panning does not work if I use the margins property

[med-hedi]

Hello i have problem with panZoom i used the margins option to limit the pan area to at least 50px 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: 50, left: 50, right: 50, bottom: 50}
});

Do you have any idea how i can fix it ?

[Fuzzyma]

Unfortunately no. Something went wrong with the margin property. WHen I tested it, it was fine but I get reports that it doesn't work as expected so maybe there is a bug

[med-hedi]

@Fuzzyma thank you for your quick answer, I am going through the code and see if I can find a solution for that, can you explain to me why in the calculation of left, right, top and bottom you divide by the value of the zoom
Code :
var leftLimit = width - left / zoom;
var rightLimit = (right - width) / zoom;
var topLimit = height - top / zoom;
var bottomLimit = (bottom - height) / zoom;

[Fuzzyma]

I wrote this code a while ago but I am pretty certain that dividing by zoom transforms the inner coordinates to outer coordinates.
If you write margin-top: 50, you want 50 units margin no matter how much zoomed in. So you basically transform these 50 units into the coordinate system of the viewbox (feel free to correct me if I am wrong)

[med-hedi]

Thanks for the reply, but the problem that it doesn't work with zoom out, because the svg no longer moves throughout the didie poster area and even the margins are no longer good

[med-hedi]

Salut @Fuzzyma I tried to fix the bug described in my previous post, indeed, following several tests made on different SVG types with different dimensions I added this fix for margins when zoom out.
We lose the correct calculation of margins if the zoomMin is less than 0.5 so I added this ternary in restrictToMargins function

Before :
var top = margins.top,
left = margins.left,
bottom = margins.bottom,
right = margins.right;

After:
var top = zoom > 0.5 ? margins.top : margins.top / 2,
left = zoom > 0.5 ? margins.left : margins.left / 2,
bottom = zoom > 0.5 ? margins.bottom : margins.bottom / 2,
right = zoom > 0.5 ? margins.right : margins.right / 2;

What do you think of this fixed? if you agree I can create a pull request

[Fuzzyma]

Thanks for taking the time.
It looks really random to only change the margin when you hit 0.5 zoom. Doesn't it make way more sense to always adapt to the current zoom? I mean where is this 0.5 coming from?

[med-hedi]

In my example I declared my panzoom like this
.panZoom({
panning: true,
zoomMin: 0.1,
zoomMax: 10,
zoomFactor: 0.3,
margins: {
top: 50, left: 50, right: 50, bottom: 50}
},
});
I noticed that the margins are no longer good when the value of zoom in restrictToMargins function is between 0.1 and 0.5

[Fuzzyma]

Why exactly 0.5? Is it just some guess? An unprecise solution might work for your use-case but most likely not for others.
It seems like you are fixing the effect but not the cause of the issue

[med-hedi]

If this is not the right way to do it, do you have any idea where the problem come from knowing that this necessarily linked to the restrictToMargins function which calculates the values ​​of left, bottom, top and bottom?

[Fuzzyma]

I would set a breakpoint and debug what's going wrong. I still think that the margin has to be divided by the zoom.

[jonenst]

Hi @Fuzzyma, I looked into this a bit more. The current code correctly restricts panzooming to a number of the outer pixels. For example, the top left corner of the svg can never be dragged past $margins.bottom/$margins.right pixels of the top left of the bottom right corner. This works for all zoom levels because the zoom is correctly taken into account in your maths.

However, for my system, I don't want this behavior; instead, I want to restrict panzooming to a number of the inner pixels. That is, the $margins.bottom/$margins.right pixels of the top left part of the image at the initial zoom level can never be panzoomed outside the svg towards the bottom right.

Here are codepens showing the two behaviors:

• current code: https://codepen.io/jonenst/pen/WNGPJja
• what I would like: https://codepen.io/jonenst/pen/VwKgxyW

Here's the code change I had to do to get what I would like to have (not very easy to see in the codepen because I pasted the whole modified svg.panzoom.js file:

-      const leftLimit = width - left / zoom
-      const rightLimit = (right - width) / zoom
-      const topLimit = height - top / zoom
-      const bottomLimit = (bottom - height) / zoom
+      const leftLimit = width - left
+      const rightLimit = right - width / zoom
+      const topLimit = height - top
+      const bottomLimit = bottom - height / zoom
+

I don't know if the margins I want should replace the margins that exist or if they should be separate options. To me, the way I want it feels a lot more natural (using the svg in the 2 pens, one feels arbitrary when zoomed in or out, the other feels natural). But maybe you have use cases where your way is more natural (I'd be interested to know about them out of curiosity)

What do you think ?

[Fuzzyma]

I like yours way more and I tend to think that this is how it was intended to work in the first place :D

[jonenst]

Great @Fuzzyma !

I just realized 2 things:
first, the code change can be made more simple (and more logical):

const leftLimit = width - left
const rightLimit = right - box.width
const topLimit = height - top
const bottomLimit = bottom - box.height

or (I like this better) with comments and zeroes added for symmetry (we could even put a simple ascii art drawing here..):

const leftLimit = (width - left) - 0;  // limit the right side of the svg (width) minus margin (left) to the left side of the box (0)
const rightLimit = (0 + right) - box.width; // limit the left side of the svg (0) plus margin (right) to the right side of the box (box.width) 
const topLimit = (height - top) - 0;  // limit the bottom side of the svg (height) minus top margin to the top side of the box (0)
const bottomLimit = (0 + bottom) - box.height; // limit the top side of the svg (0) plus bottom margin to the bottom side of the box (box.height) 

• second, in this computation, we use the width and height of the outer svg element to get a proxy for the inner coordinates of the point in the svg to be restricted. Ideally we would use the inner coordinates directly, maybe by getting them from the initial viewbox ? (or is there another way ?) see this codepen for when the outer svg element has different width/height than the svg content: https://codepen.io/jonenst/pen/oNzVKxg
  In this codepen, we want symetric margins, but setting them all to 100px doesn't do what we want (the green square doesn't behave the same on all sides) (left example). Instead, with the current code, we must add an offset only for top and left to translate from the size of the outer div to the size of the content. (right example)

So should we make the margins dependant on the initial viewbox width/height, instead of the svg outer width/height ?

Having said that, how do you want to proceed ?

[Fuzzyma]

Lets introduce some terms here:

• the coordinate system of the screen that you are used to is measured in px
• the coordinate system of the SVG is measured in userspace which are not px. Instead I like to call it user units or similar.

It depends on what you call the margin. Is your margin measured in pixels or in user units?

If its measured in pixels, what you actually wanna do is, take the 4 corners of the svg in px (0,0 400,0 400,400 0,400), apply the margin (-200,-200 600,-200 600,600 -200,00) and multiply them by the current zoom to transform them into userspace.
This will give you the min and max points of the viewbox and you can easily restrict it.

However, if the margin is measured in user units (which makes more sense and that's what you have atm), you have to save the initial viewbox as you said. Then you can multiply the margins by the zoom from initial viewbox to current viewbox and calculate the limits:

panZoom ({margin}) {

  const viewbox = this.viewbox()

  const restrictToMargins = box => {
    if (!margins) return box

    const { width, height } = box

    let{ top, left, bottom, right } = margins
    const zoom =  viewbox.width / width

    top *= zom
    left *= zoom
    bottom *= zoom
    right *= zoom    

    const leftLimit = (width - left) - 0;  // limit the right side of the svg (width) minus margin (left) to the left side of the box (0)
    const rightLimit = (0 + right) - width; // limit the left side of the svg (0) plus margin (right) to the right side of the box (box.width) 
    const topLimit = (height - top) - 0;  // limit the bottom side of the svg (height) minus top margin to the top side of the box (0)
    const bottomLimit = (0 + bottom) - height; // limit the top side of the svg (0) plus bottom margin to the bottom side of the box (box.height) 

    box.x = Math.min(leftLimit, Math.max(rightLimit, box.x))
    box.y = Math.min(topLimit, Math.max(bottomLimit, box.y))
    return box
  }
}

Yeah, I guess I just repeated what you said :D

[jonenst]

I tested your code and it doesn't work for me ?
This is what works for the previous cases for me:
(we are only comparing the current viewbox to the initial viewbox so it makes sense that we don't have to compute the zoom factor?)

panZoom ({margin}) {
  const viewbox = this.viewbox()

  const restrictToMargins = box => {
    if (!margins) return box

    const { width, height } = box

    let{ top, left, bottom, right } = margins

    const leftLimit = (viewbox.width - left) - 0;  // limit the right side of the svg (viewbox.width) minus margin (left) to the left side of the box (0)
    const rightLimit = (0 + right) - width; // limit the left side of the svg (0) plus margin (right) to the right side of the box (width) 
    const topLimit = (viewbox.height - top) - 0;  // limit the bottom side of the svg (viewbox.height) minus top margin to the top side of the box (0)
    const bottomLimit = (0 + bottom) - height; // limit the top side of the svg (0) plus bottom margin to the bottom side of the box (height) 

    box.x = Math.min(leftLimit, Math.max(rightLimit, box.x))
    box.y = Math.min(topLimit, Math.max(bottomLimit, box.y))
    return box
  }
}