docs: move the image into view if it is invisible after zoomed out

Fix #429

docs/examples/moving-range-limit.html

@@ -54,37 +54,75 @@ <h1>Moving range limit</h1>
  <script>
  window.addEventListener('DOMContentLoaded', function () {
  var galley = document.getElementById('galley');
+ var maxOffsetPercentage = 0.9;
  var viewer = new Viewer(galley, {
  url: 'data-original',
  backdrop: 'static',
  move: function (event) {
  var viewerData = viewer.viewerData;
  var imageData = viewer.imageData;
- var maxOffsetPercentage = 0.9;
  var maxOffsetHorizontal = viewerData.width * maxOffsetPercentage;
  var maxOffsetVertical = viewerData.height * maxOffsetPercentage;
  var detail = event.detail;
  var left = detail.x;
  var top = detail.y;
  var right = viewerData.width - (left + imageData.width);
  var bottom = viewerData.height - (top + imageData.height);
-
- if (
- // Move up
- (detail.y < detail.oldY && bottom > 0 && bottom > maxOffsetVertical)
-
- // Move down
- || (detail.y > detail.oldY && top > 0 && top > maxOffsetVertical)
 
+ if (
  // Move left
- || (detail.x < detail.oldX && right > 0 && right > maxOffsetHorizontal)
+ (detail.x < detail.oldX && right > 0 && right > maxOffsetHorizontal)
 
  // Move right
  || (detail.x > detail.oldX && left > 0 && left > maxOffsetHorizontal)
+
+ // Move up
+ || (detail.y < detail.oldY && bottom > 0 && bottom > maxOffsetVertical)
+
+ // Move down
+ || (detail.y > detail.oldY && top > 0 && top > maxOffsetVertical)
  ) {
  event.preventDefault();
  }
  },
+ zoomed: function (event) {
+ var detail = event.detail;
+
+ // Zoom out
+ if (detail.ratio < detail.oldRatio) {
+ var viewerData = viewer.viewerData;
+ var imageData = viewer.imageData;
+ var maxOffsetHorizontal = viewerData.width * maxOffsetPercentage;
+ var maxOffsetVertical = viewerData.height * maxOffsetPercentage;
+ var left = imageData.x;
+ var top = imageData.y;
+ var right = viewerData.width - (left + imageData.width);
+ var bottom = viewerData.height - (top + imageData.height);
+ var x = 0;
+ var y = 0;
+
+ if (right > 0 && right > maxOffsetHorizontal) {
+ x = maxOffsetHorizontal - right;
+ }
+
+ if (left > 0 && left > maxOffsetHorizontal) {
+ x = maxOffsetHorizontal - left;
+ }
+
+ if (bottom > 0 && bottom > maxOffsetVertical) {
+ y = bottom - maxOffsetVertical;
+ }
+
+ if (top > 0 && top > maxOffsetVertical) {
+ y = top - maxOffsetVertical;
+ }
+
+ // Move the image into view if it is invisible
+ if (x !== 0 || y !== 0) {
+ viewer.move(x, y);
+ }
+ }
+ },
  });
  });
  </script>