/**
* @module CreateFullScreenSettings
* @description creates functions for resize of the canvas to fullscreen and restore to default size.
*
* @author [Andrej Hristoliubov]{@link https://anhr.github.io/AboutMe/}
*
* @copyright 2011 Data Arts Team, Google Creative Lab
*
* @license under the Apache License, Version 2.0 (the "License");
* you may not use this file except in compliance with the License.
* You may obtain a copy of the License at
*
* http://www.apache.org/licenses/LICENSE-2.0
*/
//import StereoEffect from 'https://raw.githack.com/anhr/commonNodeJS/master/StereoEffect/StereoEffect.js';
import StereoEffect from './StereoEffect/StereoEffect.js';
/**
* @callback onFullScreenToggle
* @param {boolean} fullScreen false - full screen mode of the canvas.
*/
/**
* @class creates functions for resize of the canvas to fullscreen and restore to default size.
* @param {THREE} THREE [THREE]{@link https://threejs.org/}
* @param {THREE.WebGLRenderer} renderer [WebGLRenderer]{@link https://threejs.org/docs/index.html#api/en/renderers/WebGLRenderer}
* @param {THREE.PerspectiveCamera} camera [PerspectiveCamera]{@link https://threejs.org/docs/index.html#api/en/cameras/PerspectiveCamera}
* @param {object} options the following options are available:
* @param {CanvasMenu} [options.canvasMenu] <a href="../../canvasMenu/jsdoc/index.html" target="_blank">CanvasMenu</a>
* @param {StereoEffect} [options.stereoEffect] <a href="../../StereoEffect/jsdoc/index.html" target="_blank">StereoEffect</a> instance.
* @param {object} [options.fullScreen] followed fullScreen methods available:
* @param {onFullScreenToggle} [options.fullScreen.onFullScreenToggle] user toggled fullscreen mode of the canvas.
*/
function CreateFullScreenSettings( THREE, renderer, camera, options ) {
var fullScreen = false, canvasMenu, stereoEffect;
options.fullScreen = options.fullScreen || {};
if ( options.canvasMenu ) canvasMenu = options.canvasMenu;
if ( options.stereoEffect ) stereoEffect = options.stereoEffect;
renderer.setSize( renderer.domElement.width, renderer.domElement.height );
var style;
/**
* @returns <b>true</b> if <b>canvas</b> is full screen.
*/
this.isFullScreen = function () { return fullScreen; }
/**
* @param {StereoEffect} _stereoEffect <a href="../../StereoEffect/jsdoc/index.html" target="_blank">StereoEffect</a>.
*/
this.setStereoEffect = function ( _stereoEffect ) { stereoEffect = _stereoEffect; }
/**
* Sets the full screen of the canvas.
* @param {boolean} [fullScreen=false] false - full screen of the canvas.
* @param {boolean} [boTimeout=false] true - set fullScreen after 0 msec timeout.
*/
this.setFullScreen = function ( fs = false, boTimeout = false ) {
setTimeout( function () {
//Если на веб странице один MyThree то по умолчанию он на всю страницу.
//Если на веб странице больше одного MyThree то по умолчанию все MyThree не на всю страницу.
//В противном случае если несколько MyThree на всю страницу то они будут накладываться друг на друга
//между ними произойдет путаница
if ( boTimeout && options.fullScreen.arrayContainersLength && ( options.fullScreen.arrayContainersLength() > 1 ) )
fs = true;
const size = new THREE.Vector2();
renderer.getSize( size );
fullScreen = fs;
if ( fullScreen ) {
if ( style !== undefined ) {
//restore size of the canvas
renderer.setSize( style.sizeOriginal.x, style.sizeOriginal.y );
renderer.domElement.style.position = style.position;
renderer.domElement.style.left = style.left;
renderer.domElement.style.top = style.top;
renderer.domElement.style.width = style.width;
renderer.domElement.style.height = style.height;
}
} else {
if ( style === undefined ) {
style = {
sizeOriginal: new THREE.Vector2(),
position: renderer.domElement.style.position,
left: renderer.domElement.style.left,
top: renderer.domElement.style.top,
width: renderer.domElement.style.width,
height: renderer.domElement.style.height,
}
renderer.getSize( style.sizeOriginal );
}
//Full screen of the canvas
renderer.setSize( window.innerWidth, window.innerHeight );
renderer.domElement.style.position = 'fixed';
renderer.domElement.style.left = 0;
renderer.domElement.style.top = 0;
renderer.domElement.style.width = '100%';
renderer.domElement.style.height = '100%';
}
if ( options.fullScreen.onFullScreenToggle !== undefined ) options.fullScreen.onFullScreenToggle( fullScreen );
camera.aspect = size.x / size.y;
camera.updateProjectionMatrix();
fullScreen = !fullScreen;
if ( canvasMenu && canvasMenu.setFullScreenButton ) canvasMenu.setFullScreenButton( fullScreen );
CreateFullScreenSettings.RendererSetSize( renderer, options.canvasMenu );
}, 0 );
}
/**
* User has clicked the "Full Screen" button on the <a href="../../canvasMenu/jsdoc/index.html" target="_blank">CanvasMenu</a>.
* @event
*/
this.onclick = function () {
if (
( stereoEffect !== undefined )
&& ( parseInt( stereoEffect.settings.spatialMultiplex ) !== StereoEffect.spatialMultiplexsIndexs.Mono )
) {
stereoEffect.settings.spatialMultiplex = StereoEffect.spatialMultiplexsIndexs.Mono;
}
this.setFullScreen( fullScreen );
return fullScreen;
}
}
/** @namespace
* @description set size of renderer.
* @param {THREE.WebGLRenderer} renderer [THREE.WebGLRenderer]{@link https://threejs.org/docs/index.html#api/en/renderers/WebGLRenderer}.
* @param {CanvasMenu} canvasMenu <a href="../../canvasMenu/jsdoc/index.html" target="_blank">CanvasMenu</a>
*/
CreateFullScreenSettings.RendererSetSize = function ( renderer, canvasMenu ){
if ( renderer.setSizeOld )
return;
renderer.setSizeOld = renderer.setSize;
renderer.setSize = function ( width, height, updateStyle ) {
renderer.setSizeOld( width, height, updateStyle );
const elCanvas = renderer.domElement, elContainer = elCanvas.parentElement;
setTimeout( function () {
elContainer.style.height = elCanvas.style.height;
elContainer.style.width = elCanvas.style.width;
elContainer.style.left = elCanvas.style.left;
elContainer.style.top = elCanvas.style.top;
elContainer.style.position = elCanvas.style.position;
if ( canvasMenu ) canvasMenu.setSize( width, height );
}, 0 );
};
}
export default CreateFullScreenSettings;