Zooming in with keyboard moves the centered image to right

Question

This is continuation from this post

When i click and zoom in the image it pushes the centered image to the right how can I force it zoom and not move to right

const element = document.querySelector('.image-inner-wrapper');

const zoomLevels = [0.1, 0.25, 0.5, 0.75, 1, 1.25, 1.5, 1.75, 2, 2.5, 3];
let currentZoomLevel = zoomLevels[4];
const text = document.querySelector('#text');

let panZoomController = panzoom(element, {
  autoCenter: true,
  beforeWheel: function(e) {
    // allow wheel-zoom Disabled
    return true;
  }
});

const setText = (input) => {
  text.innerText = input;
};

const zoom = () => {
  const isSmooth = false;
  const scale = currentZoomLevel;
  if (scale) {
    const transform = panZoomController.getTransform();
    const deltaX = transform.x;
    const deltaY = transform.y;
    const offsetX = scale + deltaX;
    const offsetY = scale + deltaY;

    if (isSmooth) {
      panZoomController.smoothZoom(0, 0, scale);
    } else {
      panZoomController.zoomAbs(offsetX, offsetY, scale);
    }
  }
};


const zoomIn = () => {
  const idx = zoomLevels.indexOf(currentZoomLevel);

  // If next element exists
  if (typeof zoomLevels[idx + 1] !== 'undefined') {
    currentZoomLevel = zoomLevels[idx + 1];
  }

  if (currentZoomLevel === 1) {
    panZoomController.moveTo(0, 0);
    panZoomController.zoomAbs(0, 0, 1);
  } else {
    zoom();
  }
  setText(currentZoomLevel * 100 + '%');

};

const zoomOut = () => {
  const idx = zoomLevels.indexOf(currentZoomLevel);

  //if previous element exists
  if (typeof zoomLevels[idx - 1] !== 'undefined') {
    currentZoomLevel = zoomLevels[idx - 1];
  }


  if (currentZoomLevel === 1) {
    panZoomController.moveTo(0, 0);
    panZoomController.zoomAbs(0, 0, 1);
  } else {
    zoom();
  }

  setText(currentZoomLevel * 100 + '%');
};

.overflow-hidden {
  overflow: hidden !important;
  border: 3px solid red;
}

img {
  display: table;
  margin: 0 auto;
}

<div class="overflow-hidden">

  <div class="image-inner-wrapper">
    <img src="https://www.probytes.net/wp-content/uploads/2018/01/5-1.png">

  </div>

</div>




<br/>
<button onclick="zoomOut()">-</button>
<span id="text">100%</span>
<button onclick="zoomIn()">+</button>


<script src="https://unpkg.com/panzoom@8.1.0/dist/panzoom.min.js"></script>

score 2 · Accepted Answer · edited Aug 08 '19 at 17:30

I believe the trick here is to get the new width of the element, divide it by two, and set that as the offsetX coordinate

Under the zoom() function...

    const offsetX = element.offsetWidth / 2;

const element = document.querySelector('.image-inner-wrapper');

const zoomLevels = [0.1, 0.25, 0.5, 0.75, 1, 1.25, 1.5, 1.75, 2, 2.5, 3];
let currentZoomLevel = zoomLevels[4];
const text = document.querySelector('#text');

let panZoomController = panzoom(element, {
  beforeWheel: function(e) {
    // allow wheel-zoom Disabled
    return true;
  }
});

const setText = (input) => {
  text.innerText = input;
};

const zoom = () => {
  console.log(element.offsetWidth);
  const isSmooth = false;
  const scale = currentZoomLevel;
  if (scale) {
    const transform = panZoomController.getTransform();
    const deltaX = transform.x;
    const deltaY = transform.y;
    const offsetX = element.offsetWidth / 2;
    const offsetY = scale + deltaY;

    if (isSmooth) {
      panZoomController.smoothZoom(0, 0, scale);
    } else {
      panZoomController.zoomAbs(offsetX, offsetY, scale);
    }
  }
};


const zoomIn = () => {
  const idx = zoomLevels.indexOf(currentZoomLevel);

  // If next element exists
  if (typeof zoomLevels[idx + 1] !== 'undefined') {
    currentZoomLevel = zoomLevels[idx + 1];
  }

  if (currentZoomLevel === 1) {
    panZoomController.moveTo(0, 0);
    panZoomController.zoomAbs(0, 0, 1);
  } else {
    zoom();
  }
  setText(currentZoomLevel * 100 + '%');

};

const zoomOut = () => {
  const idx = zoomLevels.indexOf(currentZoomLevel);

  //if previous element exists
  if (typeof zoomLevels[idx - 1] !== 'undefined') {
    currentZoomLevel = zoomLevels[idx - 1];
  }


  if (currentZoomLevel === 1) {
    panZoomController.moveTo(0, 0);
    panZoomController.zoomAbs(0, 0, 1);
  } else {
    zoom();
  }

  setText(currentZoomLevel * 100 + '%');
};

.overflow-hidden {
  overflow: hidden !important;
  border: 3px solid red;
}

img {
  display: table;
  margin: 0 auto;
}

<div class="overflow-hidden">

  <div class="image-inner-wrapper">
    <img src="https://www.probytes.net/wp-content/uploads/2018/01/5-1.png">

  </div>

</div>




<br/>
<button onclick="zoomOut()">-</button>
<span id="text">100%</span>
<button onclick="zoomIn()">+</button>


<script src="https://unpkg.com/panzoom@8.1.0/dist/panzoom.min.js"></script>

If you need vertical centering, the same logic should apply to the offsetY...get the new height, and half it. PS -- if the pen appears slightly off-center when zoomed in, it's because there is some white-space on the right side of the provided image. — James Allen, Aug 08 '19 at 16:57

Zooming in with keyboard moves the centered image to right

1 Answers1