Allow setting bounds about pinch-zoom

[streamtw]

Bounds can be achieved by adding custom event listeners:

HTML:

<pinch-zoom class="my-pinch-zoom">
  <img>
</pinch-zoom>

Javascript:

const pinchZoom = document.querySelector('.my-pinch-zoom')
pinchZoom.addEventListener('touchend', moveToSafeArea)
pinchZoom.addEventListener('wheel', moveToSafeArea)

Event listener moveToSafeArea will calculate proper position for content, according to width and height of both wrapper and content:

const moveToSafeArea = function () {
  const wrapper = document.querySelector('.my-pinch-zoom')
  const wrapperWidth = wrapper.clientWidth
  const wrapperHeight = wrapper.clientHeight

  const content = wrapper.children[0]
  const contentWidth = content.clientWidth * wrapper.scale
  const contentHeight = content.clientHeight * wrapper.scale

  content.classList.add('moving')

  let safeX
  let safeY

  const safeRangeX = wrapperWidth - contentWidth
  if (safeRangeX > 0) {
    safeX = Math.min(Math.max(wrapper.x, 0), safeRangeX)
  } else {
    safeX = Math.max(Math.min(wrapper.x, 0), safeRangeX)
  }

  const safeRangeY = wrapperHeight - contentHeight
  if (safeRangeY > 0) {
    safeY = Math.min(Math.max(wrapper.y, 0), safeRangeY)
  } else {
    safeY = Math.max(Math.min(wrapper.y, 0), safeRangeY)
  }

  wrapper.setTransform({
    scale: wrapper.scale,
    x: safeX,
    y: safeY
  })

  setTimeout(() => {
    content.classList.remove('moving')
  }, 250)
}

And remember to add a nice bounce animation:

.my-pinch-zoom > .moving {
  transition: all .25s;
}

[jakearchibald]

Yeah, this is a good idea.

[valpet]

It's not only a good idea, it's an excellent idea. I miss this function very much.

[WernerRaath]

@kenchris did you ever find a fix for this? Or should one search for alternatives?