refactor: do not ignore close when manually calling the move method

Author: fengyuanchen

CHANGELOG.md

@@ -1,5 +1,9 @@
 # Changelog
 
+## next
+
+- Do not close the viewer when dragging the image on the backdrop (#577).
+
 ## 1.11.1 (Nov 6, 2022)
 
 - Add missing type definitions for `initialCoverage` option and `zoom` and `zoomTo` methods (#571).

src/js/handlers.js

@@ -32,7 +32,7 @@ import {
 
 export default {
   click(event) {
-    const { options, imageData, ignoreCloseOnceMoved } = this;
+    const { options, imageData } = this;
     let { target } = event;
     let action = getData(target, DATA_ACTION);
 
@@ -63,7 +63,7 @@ export default {
         break;
 
       case 'hide':
-        if (ignoreCloseOnceMoved !== true) {
+        if (!this.pointerMoved) {
           this.hide();
         }
         break;
@@ -337,6 +337,8 @@ export default {
     const { options, pointers } = this;
     const { buttons, button } = event;
 
+    this.pointerMoved = false;
+
     if (
       !this.viewed
       || this.showing
@@ -393,6 +395,7 @@ export default {
     }
 
     event.preventDefault();
+    this.pointerMoved = true;
 
     if (event.changedTouches) {
       forEach(event.changedTouches, (touch) => {
@@ -406,9 +409,7 @@ export default {
   },
 
   pointerup(event) {
-    const {
-      options, action, pointers, ignoreCloseOnceMoved,
-    } = this;
+    const { options, action, pointers } = this;
     let pointer;
 
     if (event.changedTouches) {
@@ -421,12 +422,6 @@ export default {
       delete pointers[event.pointerId || 0];
     }
 
-    if (ignoreCloseOnceMoved) {
-      setTimeout(() => {
-        this.ignoreCloseOnceMoved = false;
-      });
-    }
-
     if (!action) {
       return;
     }

src/js/methods.js

@@ -482,7 +482,6 @@ export default {
         imageData.left = x;
         imageData.top = y;
         this.moving = true;
-        this.ignoreCloseOnceMoved = true;
         this.renderImage(() => {
           this.moving = false;
 

src/js/viewer.js

@@ -84,6 +84,7 @@ class Viewer {
     this.viewing = false;
     this.wheeling = false;
     this.zooming = false;
+    this.pointerMoved = false;
     this.id = getUniqueID();
     this.init();
   }