How to set bounds params

[smartcookiemedia]

Hi:

There doesn't seem to be any documentation on how to set a bounding conatiner for the panning.
I would love to just have it pan within the parent element. Is there a way to do this?

I tried to look through the library. This is what I guessed would be the way set the bounds, but it didn't work

bound: {
top:0,
bottom:100,
left:100,
right:100,
}

This would be very helpful if you could inform me.
Thanks!

[cibulka]

The property in config you're looking for is bounds (not "bound").

I was able to lock my panzoom element to the container like this:

const el = document.getElementById('panzoom-wrap');
const dims = el.getBoundingClientRect();
const panzoomInstance = panzoom(el, {
  bounds: {
    top: panzoomElDims.height,
    right: 0,
    bottom: 0,
    left: panzoomElDims.width,
  }
});

Edit: Bounds configuration apply for both panning and zooming. With this configuration you won't be able to zoom at all - which is definitely not the desired outcome for me. :/

Is there any way, how to set bounds only for panning (not for zooming)?

[zekedroid]

bump

Would love to know how to properly set bounds as well 👍

[renekorss]

With my PR it can be achieved with options below:

{
    bounds: true,
    boundsPadding: 1,
    boundsDisabledForZoom: true
}

[smartcookiemedia]

Thanks, I will try it out

[Rim-777]

With my PR it can be achieved with options below:

{
    bounds: true,
    boundsPadding: 1,
    boundsDisabledForZoom: true
}

Is there the way to add bounds for zoomed picture?

[leighkendell]

Just thought I'd share my workaround for this, I played around with setting the bounds but wasn't able to maintain zooming behaviour + bounds. The main issue for me was that I was able to prevent panning past the left edge but not the right.

I ended up using:

  bounds: {
    top: 0,
    right: 0,
    bottom: 0,
    left: 0,
  }

Then added some functionality on the "panend" event to "snap" back to the right edge when panning past it.

const pzEl = document.querySelector('.pz-el');
const pzInstance = panzoom(pzEl, {
  ...
});

// Snap to the max translate value when panning past the end of the "bounds"
pzInstance.on('panend', e => {
  const { x } = e.getTransform();
  const maxTranslate = pzEl.getBoundingClientRect().width - pzEl.clientWidth;

  if (Math.abs(x) >= maxTranslate) {
    e.moveBy(-(x + maxTranslate), 0, true);
  }
});

Still not really ideal, I also tried using the .pause() and .resume() functions in the same scenario but it seems .resume() doesn't restore all previous functionality.

[rbonomo]

Related? #105

[rbonomo]

Currently, the source code needs modification to perform your expected functionality. I've opened a PR for this issue. Take a look into #105 . This example shows panzoom bounded to its parent container using my panzoom branch: https://codepen.io/rbonomo/pen/BexEPR