From 341a3adf43e56c9b8f8f3aa12d158d613dc1da2b Mon Sep 17 00:00:00 2001
From: WONG KANG BOON <weitochearyeah@hotmail.com>
Date: Tue, 1 Dec 2020 11:52:42 +0800
Subject: [PATCH] feat: add new 'edgeLimit' option

fixed #352
---
 dist/viewer.common.js | 70 +++++++++++++++++++++++++++++++++++++++----
 dist/viewer.esm.js    | 70 +++++++++++++++++++++++++++++++++++++++----
 dist/viewer.js        | 70 +++++++++++++++++++++++++++++++++++++++----
 docs/css/viewer.css   |  2 +-
 docs/index.html       |  6 ++++
 docs/js/viewer.js     | 70 +++++++++++++++++++++++++++++++++++++++----
 src/js/defaults.js    | 12 ++++++++
 src/js/methods.js     | 13 ++++----
 src/js/utilities.js   | 35 ++++++++++++++++++++++
 9 files changed, 318 insertions(+), 30 deletions(-)

diff --git a/dist/viewer.common.js b/dist/viewer.common.js
index 912a27ed..715d7b39 100644
--- a/dist/viewer.common.js
+++ b/dist/viewer.common.js
@@ -5,7 +5,7 @@
  * Copyright 2015-present Chen Fengyuan
  * Released under the MIT license
  *
- * Date: 2020-11-08T05:28:37.365Z
+ * Date: 2020-12-01T01:27:02.286Z
  */
 
 'use strict';
@@ -310,6 +310,18 @@ var DEFAULTS = {
    */
   url: 'src',
 
+  /**
+   * Enable edge limitation on move.
+   * @type {boolean}
+   */
+  edgeLimit: false,
+
+  /**
+   * Define edge limit ratio based on current image width.
+   * @type {number}
+   */
+  edgeRatio: 0.5,
+
   /**
    * Event shortcuts.
    * @type {Function}
@@ -1015,6 +1027,43 @@ function getPointersCenter(pointers) {
     pageY: pageY
   };
 }
+/**
+ * Limit the image to an edge point.
+ * @param {Viewer} viewer - Viewer Object
+ * @param {number} left - The x-axis coordinate.
+ * @param {number} top - The y-axis coordinate.
+ * @returns {Object} - The result x and y-axis based on edge limitation.
+ */
+
+function edgeThresholdValue(viewer, left, top) {
+  var imageData = viewer.imageData,
+      viewerData = viewer.viewerData,
+      options = viewer.options;
+  var edgeRatio = options.edgeRatio;
+  var widthLimiter = imageData.width * edgeRatio;
+  var heightLimiter = imageData.height * edgeRatio;
+
+  if (left < -widthLimiter) {
+    left = -widthLimiter;
+  }
+
+  if (left > viewerData.width - widthLimiter) {
+    left = viewerData.width - widthLimiter;
+  }
+
+  if (top < -heightLimiter) {
+    top = -heightLimiter;
+  }
+
+  if (top > viewerData.height - heightLimiter) {
+    top = viewerData.height - heightLimiter;
+  }
+
+  return {
+    left: left,
+    top: top
+  };
+}
 
 var render = {
   render: function render() {
@@ -2127,20 +2176,28 @@ var methods = {
    */
   moveTo: function moveTo(x) {
     var y = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : x;
-    var imageData = this.imageData;
+    var imageData = this.imageData,
+        options = this.options;
     x = Number(x);
     y = Number(y);
 
+    var _ref = options.edgeLimit ? edgeThresholdValue(this, x, y) : {
+      left: x,
+      top: y
+    },
+        left = _ref.left,
+        top = _ref.top;
+
     if (this.viewed && !this.played && this.options.movable) {
       var changed = false;
 
-      if (isNumber(x)) {
-        imageData.left = x;
+      if (isNumber(left)) {
+        imageData.left = left;
         changed = true;
       }
 
-      if (isNumber(y)) {
-        imageData.top = y;
+      if (isNumber(top)) {
+        imageData.top = top;
         changed = true;
       }
 
@@ -3343,3 +3400,4 @@ var Viewer = /*#__PURE__*/function () {
 assign(Viewer.prototype, render, events, handlers, methods, others);
 
 module.exports = Viewer;
+//# sourceMappingURL=viewer.common.js.map
diff --git a/dist/viewer.esm.js b/dist/viewer.esm.js
index bef8bd32..f7d44c6d 100644
--- a/dist/viewer.esm.js
+++ b/dist/viewer.esm.js
@@ -5,7 +5,7 @@
  * Copyright 2015-present Chen Fengyuan
  * Released under the MIT license
  *
- * Date: 2020-11-08T05:28:37.365Z
+ * Date: 2020-12-01T01:27:02.286Z
  */
 
 function _typeof(obj) {
@@ -308,6 +308,18 @@ var DEFAULTS = {
    */
   url: 'src',
 
+  /**
+   * Enable edge limitation on move.
+   * @type {boolean}
+   */
+  edgeLimit: false,
+
+  /**
+   * Define edge limit ratio based on current image width.
+   * @type {number}
+   */
+  edgeRatio: 0.5,
+
   /**
    * Event shortcuts.
    * @type {Function}
@@ -1013,6 +1025,43 @@ function getPointersCenter(pointers) {
     pageY: pageY
   };
 }
+/**
+ * Limit the image to an edge point.
+ * @param {Viewer} viewer - Viewer Object
+ * @param {number} left - The x-axis coordinate.
+ * @param {number} top - The y-axis coordinate.
+ * @returns {Object} - The result x and y-axis based on edge limitation.
+ */
+
+function edgeThresholdValue(viewer, left, top) {
+  var imageData = viewer.imageData,
+      viewerData = viewer.viewerData,
+      options = viewer.options;
+  var edgeRatio = options.edgeRatio;
+  var widthLimiter = imageData.width * edgeRatio;
+  var heightLimiter = imageData.height * edgeRatio;
+
+  if (left < -widthLimiter) {
+    left = -widthLimiter;
+  }
+
+  if (left > viewerData.width - widthLimiter) {
+    left = viewerData.width - widthLimiter;
+  }
+
+  if (top < -heightLimiter) {
+    top = -heightLimiter;
+  }
+
+  if (top > viewerData.height - heightLimiter) {
+    top = viewerData.height - heightLimiter;
+  }
+
+  return {
+    left: left,
+    top: top
+  };
+}
 
 var render = {
   render: function render() {
@@ -2125,20 +2174,28 @@ var methods = {
    */
   moveTo: function moveTo(x) {
     var y = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : x;
-    var imageData = this.imageData;
+    var imageData = this.imageData,
+        options = this.options;
     x = Number(x);
     y = Number(y);
 
+    var _ref = options.edgeLimit ? edgeThresholdValue(this, x, y) : {
+      left: x,
+      top: y
+    },
+        left = _ref.left,
+        top = _ref.top;
+
     if (this.viewed && !this.played && this.options.movable) {
       var changed = false;
 
-      if (isNumber(x)) {
-        imageData.left = x;
+      if (isNumber(left)) {
+        imageData.left = left;
         changed = true;
       }
 
-      if (isNumber(y)) {
-        imageData.top = y;
+      if (isNumber(top)) {
+        imageData.top = top;
         changed = true;
       }
 
@@ -3341,3 +3398,4 @@ var Viewer = /*#__PURE__*/function () {
 assign(Viewer.prototype, render, events, handlers, methods, others);
 
 export default Viewer;
+//# sourceMappingURL=viewer.esm.js.map
diff --git a/dist/viewer.js b/dist/viewer.js
index d77ff622..39169000 100644
--- a/dist/viewer.js
+++ b/dist/viewer.js
@@ -5,7 +5,7 @@
  * Copyright 2015-present Chen Fengyuan
  * Released under the MIT license
  *
- * Date: 2020-11-08T05:28:37.365Z
+ * Date: 2020-12-01T01:27:02.286Z
  */
 
 (function (global, factory) {
@@ -314,6 +314,18 @@
      */
     url: 'src',
 
+    /**
+     * Enable edge limitation on move.
+     * @type {boolean}
+     */
+    edgeLimit: false,
+
+    /**
+     * Define edge limit ratio based on current image width.
+     * @type {number}
+     */
+    edgeRatio: 0.5,
+
     /**
      * Event shortcuts.
      * @type {Function}
@@ -1019,6 +1031,43 @@
       pageY: pageY
     };
   }
+  /**
+   * Limit the image to an edge point.
+   * @param {Viewer} viewer - Viewer Object
+   * @param {number} left - The x-axis coordinate.
+   * @param {number} top - The y-axis coordinate.
+   * @returns {Object} - The result x and y-axis based on edge limitation.
+   */
+
+  function edgeThresholdValue(viewer, left, top) {
+    var imageData = viewer.imageData,
+        viewerData = viewer.viewerData,
+        options = viewer.options;
+    var edgeRatio = options.edgeRatio;
+    var widthLimiter = imageData.width * edgeRatio;
+    var heightLimiter = imageData.height * edgeRatio;
+
+    if (left < -widthLimiter) {
+      left = -widthLimiter;
+    }
+
+    if (left > viewerData.width - widthLimiter) {
+      left = viewerData.width - widthLimiter;
+    }
+
+    if (top < -heightLimiter) {
+      top = -heightLimiter;
+    }
+
+    if (top > viewerData.height - heightLimiter) {
+      top = viewerData.height - heightLimiter;
+    }
+
+    return {
+      left: left,
+      top: top
+    };
+  }
 
   var render = {
     render: function render() {
@@ -2131,20 +2180,28 @@
      */
     moveTo: function moveTo(x) {
       var y = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : x;
-      var imageData = this.imageData;
+      var imageData = this.imageData,
+          options = this.options;
       x = Number(x);
       y = Number(y);
 
+      var _ref = options.edgeLimit ? edgeThresholdValue(this, x, y) : {
+        left: x,
+        top: y
+      },
+          left = _ref.left,
+          top = _ref.top;
+
       if (this.viewed && !this.played && this.options.movable) {
         var changed = false;
 
-        if (isNumber(x)) {
-          imageData.left = x;
+        if (isNumber(left)) {
+          imageData.left = left;
           changed = true;
         }
 
-        if (isNumber(y)) {
-          imageData.top = y;
+        if (isNumber(top)) {
+          imageData.top = top;
           changed = true;
         }
 
@@ -3349,3 +3406,4 @@
   return Viewer;
 
 })));
+//# sourceMappingURL=viewer.js.map
diff --git a/docs/css/viewer.css b/docs/css/viewer.css
index a28583e0..b343ac53 100644
--- a/docs/css/viewer.css
+++ b/docs/css/viewer.css
@@ -5,7 +5,7 @@
  * Copyright 2015-present Chen Fengyuan
  * Released under the MIT license
  *
- * Date: 2020-11-08T05:28:32.068Z
+ * Date: 2020-12-01T01:27:02.712Z
  */
 
 .viewer-zoom-in::before,
diff --git a/docs/index.html b/docs/index.html
index 58665419..a433a3f1 100644
--- a/docs/index.html
+++ b/docs/index.html
@@ -209,6 +209,12 @@ <h3>Options</h3>
                   <label for="zoomOnTouch" class="form-check-label">zoomOnTouch</label>
                 </div>
               </li>
+              <li class="list-group-item">
+                <div class="form-check">
+                  <input class="form-check-input" id="edgeLimit" type="checkbox" name="edgeLimit">
+                  <label for="edgeLimit" class="form-check-label">edgeLimit</label>
+                </div>
+              </li>
               <li class="list-group-item">
                 <div class="form-check">
                   <input class="form-check-input" id="zoomOnWheel" type="checkbox" name="zoomOnWheel" checked>
diff --git a/docs/js/viewer.js b/docs/js/viewer.js
index d77ff622..39169000 100644
--- a/docs/js/viewer.js
+++ b/docs/js/viewer.js
@@ -5,7 +5,7 @@
  * Copyright 2015-present Chen Fengyuan
  * Released under the MIT license
  *
- * Date: 2020-11-08T05:28:37.365Z
+ * Date: 2020-12-01T01:27:02.286Z
  */
 
 (function (global, factory) {
@@ -314,6 +314,18 @@
      */
     url: 'src',
 
+    /**
+     * Enable edge limitation on move.
+     * @type {boolean}
+     */
+    edgeLimit: false,
+
+    /**
+     * Define edge limit ratio based on current image width.
+     * @type {number}
+     */
+    edgeRatio: 0.5,
+
     /**
      * Event shortcuts.
      * @type {Function}
@@ -1019,6 +1031,43 @@
       pageY: pageY
     };
   }
+  /**
+   * Limit the image to an edge point.
+   * @param {Viewer} viewer - Viewer Object
+   * @param {number} left - The x-axis coordinate.
+   * @param {number} top - The y-axis coordinate.
+   * @returns {Object} - The result x and y-axis based on edge limitation.
+   */
+
+  function edgeThresholdValue(viewer, left, top) {
+    var imageData = viewer.imageData,
+        viewerData = viewer.viewerData,
+        options = viewer.options;
+    var edgeRatio = options.edgeRatio;
+    var widthLimiter = imageData.width * edgeRatio;
+    var heightLimiter = imageData.height * edgeRatio;
+
+    if (left < -widthLimiter) {
+      left = -widthLimiter;
+    }
+
+    if (left > viewerData.width - widthLimiter) {
+      left = viewerData.width - widthLimiter;
+    }
+
+    if (top < -heightLimiter) {
+      top = -heightLimiter;
+    }
+
+    if (top > viewerData.height - heightLimiter) {
+      top = viewerData.height - heightLimiter;
+    }
+
+    return {
+      left: left,
+      top: top
+    };
+  }
 
   var render = {
     render: function render() {
@@ -2131,20 +2180,28 @@
      */
     moveTo: function moveTo(x) {
       var y = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : x;
-      var imageData = this.imageData;
+      var imageData = this.imageData,
+          options = this.options;
       x = Number(x);
       y = Number(y);
 
+      var _ref = options.edgeLimit ? edgeThresholdValue(this, x, y) : {
+        left: x,
+        top: y
+      },
+          left = _ref.left,
+          top = _ref.top;
+
       if (this.viewed && !this.played && this.options.movable) {
         var changed = false;
 
-        if (isNumber(x)) {
-          imageData.left = x;
+        if (isNumber(left)) {
+          imageData.left = left;
           changed = true;
         }
 
-        if (isNumber(y)) {
-          imageData.top = y;
+        if (isNumber(top)) {
+          imageData.top = top;
           changed = true;
         }
 
@@ -3349,3 +3406,4 @@
   return Viewer;
 
 })));
+//# sourceMappingURL=viewer.js.map
diff --git a/src/js/defaults.js b/src/js/defaults.js
index 9e89b731..bb93a056 100644
--- a/src/js/defaults.js
+++ b/src/js/defaults.js
@@ -220,6 +220,18 @@ export default {
    */
   url: 'src',
 
+  /**
+   * Enable edge limitation on move.
+   * @type {boolean}
+   */
+  edgeLimit: false,
+
+  /**
+   * Define edge limit ratio based on current image width.
+   * @type {number}
+   */
+  edgeRatio: 0.5,
+
   /**
    * Event shortcuts.
    * @type {Function}
diff --git a/src/js/methods.js b/src/js/methods.js
index a09661a1..011090d1 100644
--- a/src/js/methods.js
+++ b/src/js/methods.js
@@ -40,6 +40,7 @@ import {
   removeListener,
   setStyle,
   toggleClass,
+  edgeThresholdValue,
 } from './utilities';
 
 export default {
@@ -406,21 +407,23 @@ export default {
    * @returns {Viewer} this
    */
   moveTo(x, y = x) {
-    const { imageData } = this;
+    const { imageData, options } = this;
 
     x = Number(x);
     y = Number(y);
 
+    const { left, top } = options.edgeLimit ? edgeThresholdValue(this, x, y) : { left: x, top: y };
+
     if (this.viewed && !this.played && this.options.movable) {
       let changed = false;
 
-      if (isNumber(x)) {
-        imageData.left = x;
+      if (isNumber(left)) {
+        imageData.left = left;
         changed = true;
       }
 
-      if (isNumber(y)) {
-        imageData.top = y;
+      if (isNumber(top)) {
+        imageData.top = top;
         changed = true;
       }
 
diff --git a/src/js/utilities.js b/src/js/utilities.js
index bb693823..f0296cd2 100644
--- a/src/js/utilities.js
+++ b/src/js/utilities.js
@@ -675,3 +675,38 @@ export function getPointersCenter(pointers) {
     pageY,
   };
 }
+
+/**
+ * Limit the image to an edge point.
+ * @param {Viewer} viewer - Viewer Object
+ * @param {number} left - The x-axis coordinate.
+ * @param {number} top - The y-axis coordinate.
+ * @returns {Object} - The result x and y-axis based on edge limitation.
+ */
+export function edgeThresholdValue(viewer, left, top) {
+  const { imageData, viewerData, options } = viewer;
+  const { edgeRatio } = options;
+  const widthLimiter = imageData.width * edgeRatio;
+  const heightLimiter = imageData.height * edgeRatio;
+
+  if (left < -(widthLimiter)) {
+    left = -widthLimiter;
+  }
+
+  if (left > (viewerData.width - widthLimiter)) {
+    left = viewerData.width - widthLimiter;
+  }
+
+  if (top < -(heightLimiter)) {
+    top = -heightLimiter;
+  }
+
+  if (top > (viewerData.height - heightLimiter)) {
+    top = viewerData.height - heightLimiter;
+  }
+
+  return {
+    left,
+    top,
+  };
+}