From b8a0fd4e69f4710f9c2bfd2ca1c8d0bc2b39d989 Mon Sep 17 00:00:00 2001
From: Chen Fengyuan <chenfengyuan@outlook.com>
Date: Tue, 8 Dec 2020 20:15:21 +0800
Subject: [PATCH] docs: move the image into view if it is invisible after
 zoomed out

Fix #429
---
 docs/examples/moving-range-limit.html | 56 ++++++++++++++++++++++-----
 1 file changed, 47 insertions(+), 9 deletions(-)

diff --git a/docs/examples/moving-range-limit.html b/docs/examples/moving-range-limit.html
index 6fd4efa..fdfa4e9 100644
--- a/docs/examples/moving-range-limit.html
+++ b/docs/examples/moving-range-limit.html
@@ -54,13 +54,13 @@
   <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;
@@ -68,23 +68,61 @@
           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)
-
             // 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>