Skip to content

Commit

Permalink
Fix #627 visible-range: compatibility with autorotate
Browse files Browse the repository at this point in the history
  • Loading branch information
@mistic100
mistic100 committed Jan 22, 2022
1 parent d5ec89f commit 0c18d96
Show file tree
Hide file tree
Showing 3 changed files with 56 additions and 76 deletions.
18 changes: 13 additions & 5 deletions src/Viewer.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -233,7 +233,7 @@ export class Viewer extends EventEmitter {
latitude : new Dynamic(null, this.config.defaultLat, -Math.PI / 2, Math.PI / 2),
}, (position) => {
this.dataHelper.sphericalCoordsToVector3(position, this.prop.direction);
this.trigger(EVENTS.POSITION_UPDATED, position);
this.trigger(EVENTS.POSITION_UPDATED, this.dataHelper.cleanPosition(position));
}),
};

Expand Down Expand Up @@ -373,7 +373,7 @@ export class Viewer extends EventEmitter {
* @returns {PSV.Position}
*/
getPosition() {
return this.dynamics.position.current;
return this.dataHelper.cleanPosition(this.dynamics.position.current);
}

/**
Expand Down Expand Up @@ -627,8 +627,14 @@ export class Viewer extends EventEmitter {
* @summary Starts the automatic rotation
* @fires PSV.autorotate
*/
startAutorotate() {
this.__stopAll();
startAutorotate(refresh = false) {
if (refresh && !this.isAutorotateEnabled()) {
return;
}

if (!refresh) {
this.__stopAll();
}

this.dynamics.position.roll({
longitude: this.config.autorotateSpeed < 0,
Expand All @@ -640,7 +646,9 @@ export class Viewer extends EventEmitter {

this.prop.autorotateEnabled = true;

this.trigger(EVENTS.AUTOROTATE, true);
if (!refresh) {
this.trigger(EVENTS.AUTOROTATE, true);
}
}

/**
Expand Down
102 changes: 43 additions & 59 deletions src/plugins/visible-range/index.js
View file
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
import * as THREE from 'three';
import { AbstractPlugin, Animation, CONSTANTS, utils } from '../..';
import { AbstractPlugin, CONSTANTS, utils } from '../..';


/**
Expand Down Expand Up @@ -45,6 +45,7 @@ export class VisibleRangePlugin extends AbstractPlugin {
super.init();

this.psv.on(CONSTANTS.EVENTS.PANORAMA_LOADED, this);
this.psv.on(CONSTANTS.EVENTS.POSITION_UPDATED, this);
this.psv.on(CONSTANTS.EVENTS.ZOOM_UPDATED, this);
this.psv.on(CONSTANTS.CHANGE_EVENTS.GET_ANIMATE_POSITION, this);
this.psv.on(CONSTANTS.CHANGE_EVENTS.GET_ROTATE_POSITION, this);
Expand All @@ -58,6 +59,7 @@ export class VisibleRangePlugin extends AbstractPlugin {
*/
destroy() {
this.psv.off(CONSTANTS.EVENTS.PANORAMA_LOADED, this);
this.psv.off(CONSTANTS.EVENTS.POSITION_UPDATED, this);
this.psv.off(CONSTANTS.EVENTS.ZOOM_UPDATED, this);
this.psv.off(CONSTANTS.CHANGE_EVENTS.GET_ANIMATE_POSITION, this);
this.psv.off(CONSTANTS.CHANGE_EVENTS.GET_ROTATE_POSITION, this);
Expand All @@ -70,31 +72,33 @@ export class VisibleRangePlugin extends AbstractPlugin {
*/
// eslint-disable-next-line consistent-return
handleEvent(e) {
if (e.type === CONSTANTS.CHANGE_EVENTS.GET_ANIMATE_POSITION) {
const { rangedPosition } = this.applyRanges(e.value);
return rangedPosition;
}
else if (e.type === CONSTANTS.CHANGE_EVENTS.GET_ROTATE_POSITION) {
const { rangedPosition, sidesReached } = this.applyRanges(e.value);
switch (e.type) {
case CONSTANTS.CHANGE_EVENTS.GET_ANIMATE_POSITION:
case CONSTANTS.CHANGE_EVENTS.GET_ROTATE_POSITION:
return this.applyRanges(e.value).rangedPosition;

case CONSTANTS.EVENTS.POSITION_UPDATED:
const { sidesReached } = this.applyRanges(e.args[0]);
if ((sidesReached.left || sidesReached.right) && this.psv.isAutorotateEnabled()) {
this.__reverseAutorotate(sidesReached.left, sidesReached.right);
}
break;

if (utils.intersect(['left', 'right'], sidesReached).length > 0 && this.psv.isAutorotateEnabled()) {
this.__reverseAutorotate();
return e.value;
}
case CONSTANTS.EVENTS.PANORAMA_LOADED:
if (this.config.usePanoData) {
this.setRangesFromPanoData();
}
break;

return rangedPosition;
}
else if (e.type === CONSTANTS.EVENTS.PANORAMA_LOADED) {
if (this.config.usePanoData) {
this.setRangesFromPanoData();
}
}
else if (e.type === CONSTANTS.EVENTS.ZOOM_UPDATED) {
const currentPosition = this.psv.getPosition();
const { rangedPosition } = this.applyRanges(currentPosition);
if (currentPosition.longitude !== rangedPosition.longitude || currentPosition.latitude !== rangedPosition.latitude) {
this.psv.rotate(rangedPosition);
}
case CONSTANTS.EVENTS.ZOOM_UPDATED:
const currentPosition = this.psv.getPosition();
const { rangedPosition } = this.applyRanges(currentPosition);
if (currentPosition.longitude !== rangedPosition.longitude || currentPosition.latitude !== rangedPosition.latitude) {
this.psv.rotate(rangedPosition);
}
break;

default:
}
}

Expand Down Expand Up @@ -200,7 +204,7 @@ export class VisibleRangePlugin extends AbstractPlugin {
longitude: position.longitude,
latitude : position.latitude,
};
const sidesReached = [];
const sidesReached = {};

let range;
let offset;
Expand All @@ -216,21 +220,21 @@ export class VisibleRangePlugin extends AbstractPlugin {
if (position.longitude > range[1] && position.longitude < range[0]) {
if (position.longitude > (range[0] / 2 + range[1] / 2)) { // detect which side we are closer too
rangedPosition.longitude = range[0];
sidesReached.push('left');
sidesReached.left = true;
}
else {
rangedPosition.longitude = range[1];
sidesReached.push('right');
sidesReached.right = true;
}
}
}
else if (position.longitude < range[0]) {
rangedPosition.longitude = range[0];
sidesReached.push('left');
sidesReached.left = true;
}
else if (position.longitude > range[1]) {
rangedPosition.longitude = range[1];
sidesReached.push('right');
sidesReached.right = true;
}
}

Expand All @@ -243,11 +247,11 @@ export class VisibleRangePlugin extends AbstractPlugin {

if (position.latitude < range[0]) {
rangedPosition.latitude = range[0];
sidesReached.push('bottom');
sidesReached.bottom = true;
}
else if (position.latitude > range[1]) {
rangedPosition.latitude = range[1];
sidesReached.push('top');
sidesReached.top = true;
}
}

Expand All @@ -258,34 +262,14 @@ export class VisibleRangePlugin extends AbstractPlugin {
* @summary Reverses autorotate direction with smooth transition
* @private
*/
__reverseAutorotate() {
const newSpeed = -this.psv.config.autorotateSpeed;
const range = this.config.longitudeRange;
this.config.longitudeRange = null;

new Animation({
properties: {
speed: { start: this.psv.config.autorotateSpeed, end: 0 },
},
duration : 300,
easing : 'inSine',
onTick : (properties) => {
this.psv.config.autorotateSpeed = properties.speed;
},
})
.then(() => new Animation({
properties: {
speed: { start: 0, end: newSpeed },
},
duration : 300,
easing : 'outSine',
onTick : (properties) => {
this.psv.config.autorotateSpeed = properties.speed;
},
}))
.then(() => {
this.config.longitudeRange = range;
});
__reverseAutorotate(left, right) {
// reverse already ongoing
if (left && this.psv.config.autorotateSpeed > 0 || right && this.psv.config.autorotateSpeed < 0) {
return;
}

this.psv.config.autorotateSpeed = -this.psv.config.autorotateSpeed;
this.psv.startAutorotate(true);
}

}
12 changes: 0 additions & 12 deletions src/utils/misc.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -171,18 +171,6 @@ export function each(object, callback) {
});
}

/**
* @summary Returns the intersection between two arrays
* @memberOf PSV.utils
* @template T
* @param {T[]} array1
* @param {T[]} array2
* @returns {T[]}
*/
export function intersect(array1, array2) {
return array1.filter(value => array2.indexOf(value) !== -1);
}

/**
* @summary Returns if a valu is null or undefined
* @memberOf PSV.utils
Expand Down

0 comments on commit 0c18d96

Please sign in to comment.