fix(zoom): update comments related to zoom origin behavior

This commit refines the comments for clarity regarding the zoom origin behavior when using zoom and zoomTo functions. Additionally, the project has been rebuilt. Closes fengyuanchen#562
SusieWen777 · Oct 20, 2023 · a666cfe · a666cfe
1 parent 0e9b4b2
commit a666cfe
Show file tree

Hide file tree

Showing 8 changed files with 119 additions and 27 deletions.
diff --git 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: 2023-09-17T03:16:38.052Z
+ * Date: 2023-10-20T00:16:37.130Z
  */
 
 'use strict';
@@ -1199,13 +1199,24 @@ var render = {
 
 var events = {
   bind: function bind() {
+    var _this = this;
     var options = this.options,
       viewer = this.viewer,
       canvas = this.canvas;
     var document = this.element.ownerDocument;
     addListener(viewer, EVENT_CLICK, this.onClick = this.click.bind(this));
     addListener(viewer, EVENT_DRAG_START, this.onDragStart = this.dragstart.bind(this));
-    addListener(canvas, EVENT_POINTER_DOWN, this.onPointerDown = this.pointerdown.bind(this));
+    // Use the new event binding to replace the original binding.
+    addListener(canvas, EVENT_POINTER_DOWN, function (event) {
+      _this.lastPointerPosition = {
+        x: event.pageX,
+        y: event.pageY
+      };
+      // Then call the original event handler function.
+      if (_this.pointerdown) {
+        _this.pointerdown(event);
+      }
+    });
     addListener(document, EVENT_POINTER_MOVE, this.onPointerMove = this.pointermove.bind(this));
     addListener(document, EVENT_POINTER_UP, this.onPointerUp = this.pointerup.bind(this));
     addListener(document, EVENT_KEY_DOWN, this.onKeyDown = this.keydown.bind(this));
@@ -2239,6 +2250,16 @@ var methods = {
       naturalWidth = imageData.naturalWidth,
       naturalHeight = imageData.naturalHeight;
     ratio = Math.max(0, ratio);
+
+    // After determining the zoom ratio, check if a pivot has already been provided. 
+    // If not, and we have the last pointerdown position, use it to set the pivot.
+    if (!pivot && this.lastPointerPosition) {
+      var offset = getOffset(this.viewer);
+      pivot = {
+        x: this.lastPointerPosition.x - offset.left,
+        y: this.lastPointerPosition.y - offset.top
+      };
+    }
     if (isNumber(ratio) && this.viewed && !this.played && (_zoomable || options.zoomable)) {
       if (!_zoomable) {
         var minZoomRatio = Math.max(0.01, options.minZoomRatio);
@@ -2280,15 +2301,15 @@ var methods = {
       }
       this.zooming = true;
       if (_originalEvent) {
-        var offset = getOffset(this.viewer);
+        var _offset = getOffset(this.viewer);
         var center = pointers && Object.keys(pointers).length > 0 ? getPointersCenter(pointers) : {
           pageX: _originalEvent.pageX,
           pageY: _originalEvent.pageY
         };
 
         // Zoom from the triggering point of the event
-        imageData.x -= offsetWidth * ((center.pageX - offset.left - x) / width);
-        imageData.y -= offsetHeight * ((center.pageY - offset.top - y) / height);
+        imageData.x -= offsetWidth * ((center.pageX - _offset.left - x) / width);
+        imageData.y -= offsetHeight * ((center.pageY - _offset.top - y) / height);
       } else if (isPlainObject(pivot) && isNumber(pivot.x) && isNumber(pivot.y)) {
         imageData.x -= offsetWidth * ((pivot.x - x) / width);
         imageData.y -= offsetHeight * ((pivot.y - y) / height);
@@ -2966,6 +2987,7 @@ var Viewer = /*#__PURE__*/function () {
     this.zooming = false;
     this.pointerMoved = false;
     this.id = getUniqueID();
+    this.lastPointerPosition = null; // Initialize the lastPointerPosition attribute
     this.init();
   }
   _createClass(Viewer, [{

diff --git a/dist/viewer.css b/dist/viewer.css
@@ -5,7 +5,7 @@
  * Copyright 2015-present Chen Fengyuan
  * Released under the MIT license
  *
- * Date: 2023-09-17T03:16:35.830Z
+ * Date: 2023-10-20T00:16:34.903Z
  */
 
 .viewer-zoom-in::before, .viewer-zoom-out::before, .viewer-one-to-one::before, .viewer-reset::before, .viewer-prev::before, .viewer-play::before, .viewer-next::before, .viewer-rotate-left::before, .viewer-rotate-right::before, .viewer-flip-horizontal::before, .viewer-flip-vertical::before, .viewer-fullscreen::before, .viewer-fullscreen-exit::before, .viewer-close::before {

diff --git 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: 2023-09-17T03:16:38.052Z
+ * Date: 2023-10-20T00:16:37.130Z
  */
 
 function ownKeys(e, r) {
@@ -1197,13 +1197,24 @@ var render = {
 
 var events = {
   bind: function bind() {
+    var _this = this;
     var options = this.options,
       viewer = this.viewer,
       canvas = this.canvas;
     var document = this.element.ownerDocument;
     addListener(viewer, EVENT_CLICK, this.onClick = this.click.bind(this));
     addListener(viewer, EVENT_DRAG_START, this.onDragStart = this.dragstart.bind(this));
-    addListener(canvas, EVENT_POINTER_DOWN, this.onPointerDown = this.pointerdown.bind(this));
+    // Use the new event binding to replace the original binding.
+    addListener(canvas, EVENT_POINTER_DOWN, function (event) {
+      _this.lastPointerPosition = {
+        x: event.pageX,
+        y: event.pageY
+      };
+      // Then call the original event handler function.
+      if (_this.pointerdown) {
+        _this.pointerdown(event);
+      }
+    });
     addListener(document, EVENT_POINTER_MOVE, this.onPointerMove = this.pointermove.bind(this));
     addListener(document, EVENT_POINTER_UP, this.onPointerUp = this.pointerup.bind(this));
     addListener(document, EVENT_KEY_DOWN, this.onKeyDown = this.keydown.bind(this));
@@ -2237,6 +2248,16 @@ var methods = {
       naturalWidth = imageData.naturalWidth,
       naturalHeight = imageData.naturalHeight;
     ratio = Math.max(0, ratio);
+
+    // After determining the zoom ratio, check if a pivot has already been provided. 
+    // If not, and we have the last pointerdown position, use it to set the pivot.
+    if (!pivot && this.lastPointerPosition) {
+      var offset = getOffset(this.viewer);
+      pivot = {
+        x: this.lastPointerPosition.x - offset.left,
+        y: this.lastPointerPosition.y - offset.top
+      };
+    }
     if (isNumber(ratio) && this.viewed && !this.played && (_zoomable || options.zoomable)) {
       if (!_zoomable) {
         var minZoomRatio = Math.max(0.01, options.minZoomRatio);
@@ -2278,15 +2299,15 @@ var methods = {
       }
       this.zooming = true;
       if (_originalEvent) {
-        var offset = getOffset(this.viewer);
+        var _offset = getOffset(this.viewer);
         var center = pointers && Object.keys(pointers).length > 0 ? getPointersCenter(pointers) : {
           pageX: _originalEvent.pageX,
           pageY: _originalEvent.pageY
         };
 
         // Zoom from the triggering point of the event
-        imageData.x -= offsetWidth * ((center.pageX - offset.left - x) / width);
-        imageData.y -= offsetHeight * ((center.pageY - offset.top - y) / height);
+        imageData.x -= offsetWidth * ((center.pageX - _offset.left - x) / width);
+        imageData.y -= offsetHeight * ((center.pageY - _offset.top - y) / height);
       } else if (isPlainObject(pivot) && isNumber(pivot.x) && isNumber(pivot.y)) {
         imageData.x -= offsetWidth * ((pivot.x - x) / width);
         imageData.y -= offsetHeight * ((pivot.y - y) / height);
@@ -2964,6 +2985,7 @@ var Viewer = /*#__PURE__*/function () {
     this.zooming = false;
     this.pointerMoved = false;
     this.id = getUniqueID();
+    this.lastPointerPosition = null; // Initialize the lastPointerPosition attribute
     this.init();
   }
   _createClass(Viewer, [{

diff --git a/dist/viewer.js b/dist/viewer.js
@@ -5,7 +5,7 @@
  * Copyright 2015-present Chen Fengyuan
  * Released under the MIT license
  *
- * Date: 2023-09-17T03:16:38.052Z
+ * Date: 2023-10-20T00:16:37.130Z
  */
 
 (function (global, factory) {
@@ -1203,13 +1203,24 @@
 
   var events = {
     bind: function bind() {
+      var _this = this;
       var options = this.options,
         viewer = this.viewer,
         canvas = this.canvas;
       var document = this.element.ownerDocument;
       addListener(viewer, EVENT_CLICK, this.onClick = this.click.bind(this));
       addListener(viewer, EVENT_DRAG_START, this.onDragStart = this.dragstart.bind(this));
-      addListener(canvas, EVENT_POINTER_DOWN, this.onPointerDown = this.pointerdown.bind(this));
+      // Use the new event binding to replace the original binding.
+      addListener(canvas, EVENT_POINTER_DOWN, function (event) {
+        _this.lastPointerPosition = {
+          x: event.pageX,
+          y: event.pageY
+        };
+        // Then call the original event handler function.
+        if (_this.pointerdown) {
+          _this.pointerdown(event);
+        }
+      });
       addListener(document, EVENT_POINTER_MOVE, this.onPointerMove = this.pointermove.bind(this));
       addListener(document, EVENT_POINTER_UP, this.onPointerUp = this.pointerup.bind(this));
       addListener(document, EVENT_KEY_DOWN, this.onKeyDown = this.keydown.bind(this));
@@ -2243,6 +2254,16 @@
         naturalWidth = imageData.naturalWidth,
         naturalHeight = imageData.naturalHeight;
       ratio = Math.max(0, ratio);
+
+      // After determining the zoom ratio, check if a pivot has already been provided. 
+      // If not, and we have the last pointerdown position, use it to set the pivot.
+      if (!pivot && this.lastPointerPosition) {
+        var offset = getOffset(this.viewer);
+        pivot = {
+          x: this.lastPointerPosition.x - offset.left,
+          y: this.lastPointerPosition.y - offset.top
+        };
+      }
       if (isNumber(ratio) && this.viewed && !this.played && (_zoomable || options.zoomable)) {
         if (!_zoomable) {
           var minZoomRatio = Math.max(0.01, options.minZoomRatio);
@@ -2284,15 +2305,15 @@
         }
         this.zooming = true;
         if (_originalEvent) {
-          var offset = getOffset(this.viewer);
+          var _offset = getOffset(this.viewer);
           var center = pointers && Object.keys(pointers).length > 0 ? getPointersCenter(pointers) : {
             pageX: _originalEvent.pageX,
             pageY: _originalEvent.pageY
           };
 
           // Zoom from the triggering point of the event
-          imageData.x -= offsetWidth * ((center.pageX - offset.left - x) / width);
-          imageData.y -= offsetHeight * ((center.pageY - offset.top - y) / height);
+          imageData.x -= offsetWidth * ((center.pageX - _offset.left - x) / width);
+          imageData.y -= offsetHeight * ((center.pageY - _offset.top - y) / height);
         } else if (isPlainObject(pivot) && isNumber(pivot.x) && isNumber(pivot.y)) {
           imageData.x -= offsetWidth * ((pivot.x - x) / width);
           imageData.y -= offsetHeight * ((pivot.y - y) / height);
@@ -2970,6 +2991,7 @@
       this.zooming = false;
       this.pointerMoved = false;
       this.id = getUniqueID();
+      this.lastPointerPosition = null; // Initialize the lastPointerPosition attribute
       this.init();
     }
     _createClass(Viewer, [{

diff --git 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: 2023-09-17T03:16:38.052Z
+ * Date: 2023-10-20T00:16:37.130Z
  */
 
 (function (global, factory) {
@@ -1203,13 +1203,24 @@
 
   var events = {
     bind: function bind() {
+      var _this = this;
       var options = this.options,
         viewer = this.viewer,
         canvas = this.canvas;
       var document = this.element.ownerDocument;
       addListener(viewer, EVENT_CLICK, this.onClick = this.click.bind(this));
       addListener(viewer, EVENT_DRAG_START, this.onDragStart = this.dragstart.bind(this));
-      addListener(canvas, EVENT_POINTER_DOWN, this.onPointerDown = this.pointerdown.bind(this));
+      // Use the new event binding to replace the original binding.
+      addListener(canvas, EVENT_POINTER_DOWN, function (event) {
+        _this.lastPointerPosition = {
+          x: event.pageX,
+          y: event.pageY
+        };
+        // Then call the original event handler function.
+        if (_this.pointerdown) {
+          _this.pointerdown(event);
+        }
+      });
       addListener(document, EVENT_POINTER_MOVE, this.onPointerMove = this.pointermove.bind(this));
       addListener(document, EVENT_POINTER_UP, this.onPointerUp = this.pointerup.bind(this));
       addListener(document, EVENT_KEY_DOWN, this.onKeyDown = this.keydown.bind(this));
@@ -2243,6 +2254,16 @@
         naturalWidth = imageData.naturalWidth,
         naturalHeight = imageData.naturalHeight;
       ratio = Math.max(0, ratio);
+
+      // After determining the zoom ratio, check if a pivot has already been provided. 
+      // If not, and we have the last pointerdown position, use it to set the pivot.
+      if (!pivot && this.lastPointerPosition) {
+        var offset = getOffset(this.viewer);
+        pivot = {
+          x: this.lastPointerPosition.x - offset.left,
+          y: this.lastPointerPosition.y - offset.top
+        };
+      }
       if (isNumber(ratio) && this.viewed && !this.played && (_zoomable || options.zoomable)) {
         if (!_zoomable) {
           var minZoomRatio = Math.max(0.01, options.minZoomRatio);
@@ -2284,15 +2305,15 @@
         }
         this.zooming = true;
         if (_originalEvent) {
-          var offset = getOffset(this.viewer);
+          var _offset = getOffset(this.viewer);
           var center = pointers && Object.keys(pointers).length > 0 ? getPointersCenter(pointers) : {
             pageX: _originalEvent.pageX,
             pageY: _originalEvent.pageY
           };
 
           // Zoom from the triggering point of the event
-          imageData.x -= offsetWidth * ((center.pageX - offset.left - x) / width);
-          imageData.y -= offsetHeight * ((center.pageY - offset.top - y) / height);
+          imageData.x -= offsetWidth * ((center.pageX - _offset.left - x) / width);
+          imageData.y -= offsetHeight * ((center.pageY - _offset.top - y) / height);
         } else if (isPlainObject(pivot) && isNumber(pivot.x) && isNumber(pivot.y)) {
           imageData.x -= offsetWidth * ((pivot.x - x) / width);
           imageData.y -= offsetHeight * ((pivot.y - y) / height);
@@ -2970,6 +2991,7 @@
       this.zooming = false;
       this.pointerMoved = false;
       this.id = getUniqueID();
+      this.lastPointerPosition = null; // Initialize the lastPointerPosition attribute
       this.init();
     }
     _createClass(Viewer, [{

diff --git a/src/js/events.js b/src/js/events.js
@@ -21,14 +21,17 @@ export default {
 
     addListener(viewer, EVENT_CLICK, (this.onClick = this.click.bind(this)));
     addListener(viewer, EVENT_DRAG_START, (this.onDragStart = this.dragstart.bind(this)));
-    // addListener(canvas, EVENT_POINTER_DOWN, (this.onPointerDown = this.pointerdown.bind(this)));
-    addListener(canvas, EVENT_POINTER_DOWN, (this.onPointerDown = function (event) {
+    // Use the new event binding to replace the original binding.
+    addListener(canvas, EVENT_POINTER_DOWN, (event) => {
       this.lastPointerPosition = {
         x: event.pageX,
         y: event.pageY
       };
-      this.pointerdown.bind(this)(event);
-    }));    
+      // Then call the original event handler function.
+      if (this.pointerdown) {
+        this.pointerdown(event);
+      }
+    });
     addListener(document, EVENT_POINTER_MOVE, (this.onPointerMove = this.pointermove.bind(this)));
     addListener(document, EVENT_POINTER_UP, (this.onPointerUp = this.pointerup.bind(this)));
     addListener(document, EVENT_KEY_DOWN, (this.onKeyDown = this.keydown.bind(this)));

diff --git a/src/js/methods.js b/src/js/methods.js
@@ -717,7 +717,8 @@ export default {
 
     ratio = Math.max(0, ratio);
 
-    // 在确定了缩放比率后，我们检查是否已经提供了一个pivot。如果没有，并且我们有最后一个pointerdown的位置，我们使用它来设置pivot。
+    // After determining the zoom ratio, check if a pivot has already been provided. 
+    // If not, and we have the last pointerdown position, use it to set the pivot.
     if (!pivot && this.lastPointerPosition) {
       const offset = getOffset(this.viewer);
       pivot = {

diff --git a/src/js/viewer.js b/src/js/viewer.js
@@ -86,7 +86,7 @@ class Viewer {
     this.zooming = false;
     this.pointerMoved = false;
     this.id = getUniqueID();
-    this.lastPointerPosition = null;  // 初始化 lastPointerPosition 属性
+    this.lastPointerPosition = null;  // Initialize the lastPointerPosition attribute
     this.init();
   }