Skip to content
This repository has been archived by the owner on Jun 2, 2023. It is now read-only.

Added constants for control buttons and outputs. Added Fix for motion control in iOS 13+ #260

Open
wants to merge 3 commits into
base: master
Choose a base branch
from
Open

Added constants for control buttons and outputs. Added Fix for motion control in iOS 13+ #260

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
be2731e
Added constants for control buttons and outputs
giordanocardillo Oct 15, 2020
4beeed5
Added fix for iOS 13+
giordanocardillo Oct 15, 2020
cd73694
Fixed typo
giordanocardillo Oct 15, 2020
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
23 changes: 22 additions & 1 deletion src/Constants.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -50,4 +50,25 @@ export const CONTROLS = { ORBIT: 0, DEVICEORIENTATION: 1 };
* @property {number} CARDBOARD 2
* @property {number} STEREO 3
*/
export const MODES = { UNKNOWN: 0, NORMAL: 1, CARDBOARD: 2, STEREO: 3 };
export const MODES = { UNKNOWN: 0, NORMAL: 1, CARDBOARD: 2, STEREO: 3 };

/**
* CONTROL_BUTTONS
* @module CONTROL_BUTTONS
* @example PANOLENS.VIEWER.CONTROL_BUTTONS
* @property {string} FULLSCREEN
* @property {string} SETTING
* @property {string} VIDEO
*/
export const CONTROL_BUTTONS = { FULLSCREEN: 'fullscreen', SETTING: 'setting', VIDEO: 'video' };

/**
* OUTPUTS
* @module OUTPUTS
* @example PANOLENS.VIEWER.OUTPUTS
* @property {string} NONE
* @property {string} CONSOLE
* @property {string} OVERLAY
*/
export const OUTPUTS = { NONE: 'none', CONSOLE: 'console', OVERLAY: 'overlay' };

101 changes: 56 additions & 45 deletions src/viewer/Viewer.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -370,7 +370,7 @@ Viewer.prototype = Object.assign( Object.create( THREE.EventDispatcher.prototype

// Assign and enter panorama
(this.panorama = pano).onEnter();

}

},
Expand All @@ -385,7 +385,18 @@ Viewer.prototype = Object.assign( Object.create( THREE.EventDispatcher.prototype

if ( event.method && this[ event.method ] ) {

this[ event.method ]( event.data );
// Fix for iOS 13+ - Must request permission to access device motion
if (event.method === 'enableControl' && event.data === 1 && DeviceMotionEvent && typeof DeviceMotionEvent.requestPermission === 'function') {

DeviceOrientationEvent.requestPermission().then((response) => {
if (response === 'granted') {
this[event.method](event.data);
}
});

} else {
this[event.method](event.data);
}

}

Expand Down Expand Up @@ -442,12 +453,12 @@ Viewer.prototype = Object.assign( Object.create( THREE.EventDispatcher.prototype
item = ControlMenuItem.subMenu.children[ 2 ];

break;

default:

item = ControlMenuItem.subMenu.children[ 1 ];

break;
break;

}

Expand All @@ -469,7 +480,7 @@ Viewer.prototype = Object.assign( Object.create( THREE.EventDispatcher.prototype
case MODES.STEREO:

item = ModeMenuItem.subMenu.children[ 3 ];

break;

default:
Expand Down Expand Up @@ -513,7 +524,7 @@ Viewer.prototype = Object.assign( Object.create( THREE.EventDispatcher.prototype

this.effect = this.StereoEffect;
this.enableReticleControl();

break;

default:
Expand Down Expand Up @@ -791,7 +802,7 @@ Viewer.prototype = Object.assign( Object.create( THREE.EventDispatcher.prototype

/**
* Update video play button
* @param {boolean} paused
* @param {boolean} paused
* @memberOf Viewer
* @instance
*/
Expand Down Expand Up @@ -829,7 +840,7 @@ Viewer.prototype = Object.assign( Object.create( THREE.EventDispatcher.prototype
this.hideVideoWidget.call( this );

}

}.bind( this ) );

}
Expand Down Expand Up @@ -1074,7 +1085,7 @@ Viewer.prototype = Object.assign( Object.create( THREE.EventDispatcher.prototype
},

/**
* Add reticle
* Add reticle
* @memberOf Viewer
* @instance
*/
Expand Down Expand Up @@ -1225,12 +1236,12 @@ Viewer.prototype = Object.assign( Object.create( THREE.EventDispatcher.prototype

const isAndroid = /(android)/i.test(window.navigator.userAgent);

const adjustWidth = isAndroid
? Math.min(document.documentElement.clientWidth, window.innerWidth || 0)
const adjustWidth = isAndroid
? Math.min(document.documentElement.clientWidth, window.innerWidth || 0)
: Math.max(document.documentElement.clientWidth, window.innerWidth || 0);

const adjustHeight = isAndroid
? Math.min(document.documentElement.clientHeight, window.innerHeight || 0)
const adjustHeight = isAndroid
? Math.min(document.documentElement.clientHeight, window.innerHeight || 0)
: Math.max(document.documentElement.clientHeight, window.innerHeight || 0);

width = expand ? adjustWidth : this.container.clientWidth;
Expand Down Expand Up @@ -1331,7 +1342,7 @@ Viewer.prototype = Object.assign( Object.create( THREE.EventDispatcher.prototype

/**
* On mouse down
* @param {MouseEvent} event
* @param {MouseEvent} event
* @memberOf Viewer
* @instance
*/
Expand All @@ -1348,7 +1359,7 @@ Viewer.prototype = Object.assign( Object.create( THREE.EventDispatcher.prototype

/**
* On mouse move
* @param {MouseEvent} event
* @param {MouseEvent} event
* @memberOf Viewer
* @instance
*/
Expand All @@ -1362,7 +1373,7 @@ Viewer.prototype = Object.assign( Object.create( THREE.EventDispatcher.prototype

/**
* On mouse up
* @param {MouseEvent} event
* @param {MouseEvent} event
* @memberOf Viewer
* @instance
*/
Expand All @@ -1372,15 +1383,15 @@ Viewer.prototype = Object.assign( Object.create( THREE.EventDispatcher.prototype

this.userMouse.type = 'mouseup';

const type = ( this.userMouse.x >= event.clientX - this.options.clickTolerance
const type = ( this.userMouse.x >= event.clientX - this.options.clickTolerance
&& this.userMouse.x <= event.clientX + this.options.clickTolerance
&& this.userMouse.y >= event.clientY - this.options.clickTolerance
&& this.userMouse.y <= event.clientY + this.options.clickTolerance )
|| ( event.changedTouches
&& this.userMouse.y <= event.clientY + this.options.clickTolerance )
|| ( event.changedTouches
&& this.userMouse.x >= event.changedTouches[0].clientX - this.options.clickTolerance
&& this.userMouse.x <= event.changedTouches[0].clientX + this.options.clickTolerance
&& this.userMouse.x <= event.changedTouches[0].clientX + this.options.clickTolerance
&& this.userMouse.y >= event.changedTouches[0].clientY - this.options.clickTolerance
&& this.userMouse.y <= event.changedTouches[0].clientY + this.options.clickTolerance )
&& this.userMouse.y <= event.changedTouches[0].clientY + this.options.clickTolerance )
? 'click' : undefined;

// Event should happen on canvas
Expand All @@ -1391,7 +1402,7 @@ Viewer.prototype = Object.assign( Object.create( THREE.EventDispatcher.prototype
if ( event.changedTouches && event.changedTouches.length === 1 ) {

onTarget = this.onTap( { clientX: event.changedTouches[0].clientX, clientY: event.changedTouches[0].clientY }, type );

} else {

onTarget = this.onTap( event, type );
Expand All @@ -1400,9 +1411,9 @@ Viewer.prototype = Object.assign( Object.create( THREE.EventDispatcher.prototype

this.userMouse.type = 'none';

if ( onTarget ) {
if ( onTarget ) {

return;
return;

}

Expand All @@ -1428,8 +1439,8 @@ Viewer.prototype = Object.assign( Object.create( THREE.EventDispatcher.prototype

/**
* On tap eveny frame
* @param {MouseEvent} event
* @param {string} type
* @param {MouseEvent} event
* @param {string} type
* @memberOf Viewer
* @instance
*/
Expand All @@ -1443,17 +1454,17 @@ Viewer.prototype = Object.assign( Object.create( THREE.EventDispatcher.prototype

this.raycaster.setFromCamera( this.raycasterPoint, this.camera );

// Return if no panorama
if ( !this.panorama ) {
// Return if no panorama
if ( !this.panorama ) {

return;
return;

}

// output infospot information
if ( event.type !== 'mousedown' && this.touchSupported || this.OUTPUT_INFOSPOT ) {
if ( event.type !== 'mousedown' && this.touchSupported || this.OUTPUT_INFOSPOT ) {

this.outputPosition();
this.outputPosition();

}

Expand Down Expand Up @@ -1609,13 +1620,13 @@ Viewer.prototype = Object.assign( Object.create( THREE.EventDispatcher.prototype
if ( intersect && intersect instanceof Infospot ) {

this.infospot = intersect;

if ( type === 'click' ) {

return true;

}


} else if ( this.infospot ) {

Expand All @@ -1636,13 +1647,13 @@ Viewer.prototype = Object.assign( Object.create( THREE.EventDispatcher.prototype

}

}
}

},

/**
* Get converted intersect
* @param {array} intersects
* @param {array} intersects
* @memberOf Viewer
* @instance
*/
Expand Down Expand Up @@ -1714,7 +1725,7 @@ Viewer.prototype = Object.assign( Object.create( THREE.EventDispatcher.prototype

/**
* On key down
* @param {KeyboardEvent} event
* @param {KeyboardEvent} event
* @memberOf Viewer
* @instance
*/
Expand All @@ -1730,7 +1741,7 @@ Viewer.prototype = Object.assign( Object.create( THREE.EventDispatcher.prototype

/**
* On key up
* @param {KeyboardEvent} event
* @param {KeyboardEvent} event
* @memberOf Viewer
* @instance
*/
Expand All @@ -1754,10 +1765,10 @@ Viewer.prototype = Object.assign( Object.create( THREE.EventDispatcher.prototype
this.control.update();

this.scene.traverse( function( child ){
if ( child instanceof Infospot
&& child.element
&& ( this.hoverObject === child
|| child.element.style.display !== 'none'
if ( child instanceof Infospot
&& child.element
&& ( this.hoverObject === child
|| child.element.style.display !== 'none'
|| (child.element.left && child.element.left.style.display !== 'none')
|| (child.element.right && child.element.right.style.display !== 'none') ) ) {
if ( this.checkSpriteInViewport( child ) ) {
Expand All @@ -1766,7 +1777,7 @@ Viewer.prototype = Object.assign( Object.create( THREE.EventDispatcher.prototype
} else {
child.onDismiss();
}

}
}.bind( this ) );

Expand All @@ -1785,7 +1796,7 @@ Viewer.prototype = Object.assign( Object.create( THREE.EventDispatcher.prototype
this.renderer.clear();
this.effect.render( this.scene, this.camera );
this.effect.render( this.sceneReticle, this.camera );


} else {

Expand Down Expand Up @@ -1989,7 +2000,7 @@ Viewer.prototype = Object.assign( Object.create( THREE.EventDispatcher.prototype

this.dispose();
this.render();
window.cancelAnimationFrame( this.requestAnimationId );
window.cancelAnimationFrame( this.requestAnimationId );

},

Expand Down Expand Up @@ -2109,7 +2120,7 @@ Viewer.prototype = Object.assign( Object.create( THREE.EventDispatcher.prototype
*/
appendControlItem: function ( option ) {

const item = this.widget.createCustomItem( option );
const item = this.widget.createCustomItem( option );

if ( option.group === 'video' ) {

Expand Down