Fix #624 compass: not working on touch screens

mistic100 · Jan 22, 2022 · d5ec89f · d5ec89f
1 parent 05b1e46
commit d5ec89f
Show file tree

Hide file tree

Showing 3 changed files with 22 additions and 9 deletions.
diff --git a/src/Viewer.js b/src/Viewer.js
@@ -250,7 +250,7 @@ export class Viewer extends EventEmitter {
     this.config.plugins.forEach(([plugin, opts]) => {
       this.plugins[plugin.id] = new plugin(this, opts); // eslint-disable-line new-cap
     });
-    each(this.plugins, plugin => plugin.init());
+    each(this.plugins, plugin => plugin.init?.());
 
     // init buttons
     this.navbar.setButtons(this.config.navbar);
@@ -709,6 +709,7 @@ export class Viewer extends EventEmitter {
 
     const cleanPosition = this.change(CHANGE_EVENTS.GET_ROTATE_POSITION, this.dataHelper.cleanPosition(position));
     this.dynamics.position.setValue(cleanPosition);
+    this.stopAutorotate();
   }
 
   /**

diff --git a/src/plugins/compass/index.js b/src/plugins/compass/index.js
@@ -105,6 +105,9 @@ export class CompassPlugin extends AbstractPlugin {
       this.container.addEventListener('mousemove', this);
       this.container.addEventListener('mousedown', this);
       this.container.addEventListener('mouseup', this);
+      this.container.addEventListener('touchstart', this);
+      this.container.addEventListener('touchmove', this);
+      this.container.addEventListener('touchend', this);
     }
   }
 
@@ -160,24 +163,34 @@ export class CompassPlugin extends AbstractPlugin {
         break;
       case 'mouseenter':
       case 'mousemove':
-        this.prop.mouse = e;
+      case 'touchmove':
+        this.prop.mouse = e.changedTouches?.[0] || e;
         if (this.prop.mouseDown) {
           this.__click();
         }
         else {
           this.__update();
         }
         e.stopPropagation();
+        e.preventDefault();
         break;
       case 'mousedown':
+      case 'touchstart':
         this.prop.mouseDown = true;
         e.stopPropagation();
+        e.preventDefault();
         break;
       case 'mouseup':
-        this.prop.mouse = e;
+      case 'touchend':
+        this.prop.mouse = e.changedTouches?.[0] || e;
         this.prop.mouseDown = false;
         this.__click();
+        if (e.changedTouches) {
+          this.prop.mouse = null;
+          this.__update();
+        }
         e.stopPropagation();
+        e.preventDefault();
         break;
       case 'mouseleave':
         this.prop.mouse = null;

diff --git a/src/services/EventsHandler.js b/src/services/EventsHandler.js
@@ -91,11 +91,11 @@ export class EventsHandler extends AbstractService {
     this.psv.container.addEventListener('mouseenter', this);
     this.psv.container.addEventListener('mousedown', this);
     this.psv.container.addEventListener('mouseleave', this);
+    this.psv.container.addEventListener('mousemove', this);
     window.addEventListener('mouseup', this);
     this.psv.container.addEventListener('touchstart', this);
-    window.addEventListener('touchend', this);
-    this.psv.container.addEventListener('mousemove', this);
     this.psv.container.addEventListener('touchmove', this);
+    window.addEventListener('touchend', this);
     this.psv.container.addEventListener(SYSTEM.mouseWheelEvent, this);
 
     if (SYSTEM.fullscreenEvent) {
@@ -113,11 +113,11 @@ export class EventsHandler extends AbstractService {
     this.psv.container.removeEventListener('mouseenter', this);
     this.psv.container.removeEventListener('mousedown', this);
     this.psv.container.removeEventListener('mouseleave', this);
+    this.psv.container.removeEventListener('mousemove', this);
     window.removeEventListener('mouseup', this);
     this.psv.container.removeEventListener('touchstart', this);
-    window.removeEventListener('touchend', this);
-    this.psv.container.removeEventListener('mousemove', this);
     this.psv.container.removeEventListener('touchmove', this);
+    window.removeEventListener('touchend', this);
     this.psv.container.removeEventListener(SYSTEM.mouseWheelEvent, this);
 
     if (SYSTEM.fullscreenEvent) {
@@ -159,9 +159,9 @@ export class EventsHandler extends AbstractService {
         // @formatter:off
         case 'mousedown':  this.__onMouseDown(evt); break;
         case 'mouseenter': this.__onMouseEnter(evt); break;
-        case 'touchstart': this.__onTouchStart(evt); break;
         case 'mouseleave': this.__onMouseLeave(evt); break;
         case 'mousemove':  this.__onMouseMove(evt); break;
+        case 'touchstart': this.__onTouchStart(evt); break;
         case 'touchmove':  this.__onTouchMove(evt); break;
         case SYSTEM.mouseWheelEvent: this.__onMouseWheel(evt); break;
         // @formatter:on
@@ -486,7 +486,6 @@ export class EventsHandler extends AbstractService {
    * @private
    */
   __startMove(evt) {
-    this.psv.stopAutorotate();
     this.psv.stopAnimation()
       .then(() => {
         this.state.mouseX = evt.clientX;