diff --git a/src/Viewer.js b/src/Viewer.js index 733e26329..bceb267dd 100644 --- 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 index 554d531de..2a9c26bb1 100644 --- 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,7 +163,8 @@ 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(); } @@ -168,16 +172,25 @@ export class CompassPlugin extends AbstractPlugin { 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 index 7348098f4..56cbcac7b 100644 --- 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;