threepipe
Version:
A modern 3D viewer framework built on top of three.js, written in TypeScript, designed to make creating high-quality, modular, and extensible 3D experiences on the web simple and enjoyable.
120 lines • 5.12 kB
JavaScript
var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
return c > 3 && r && Object.defineProperty(target, key, r), r;
};
import { uiButton, uiFolderContainer } from 'uiconfig.js';
import { AViewerPluginSync } from '../../viewer';
/**
* Full Screen Plugin
*
* A simple plugin that provides functions to {@link enter}, {@link exit}, {@link toggle} full screen mode and check if the viewer is in full screen mode with {@link isFullScreen}.
*
* Implementation from:
* https://stackoverflow.com/questions/50568474/how-to-enter-fullscreen-in-three-js
*
* @todo: try out some lib like https://github.com/sindresorhus/screenfull for proper cross browser support
* @category Plugins
*/
let FullScreenPlugin = class FullScreenPlugin extends AViewerPluginSync {
constructor() {
super();
this.toJSON = undefined;
this.enabled = true;
this._lastSize = ['100%', '100%'];
this._lastFsElement = null;
this._fsChangeHandler = (_) => {
if (this.isFullScreen()) {
/* Run code when going to fs mode */
this.dispatchEvent({ type: 'enter' });
}
else {
/* Run code when going back from fs mode */
const elem = this._lastFsElement || this._viewer?.canvas;
if (elem) {
elem.style.width = this._lastSize[0];
elem.style.height = this._lastSize[1];
}
document.removeEventListener('webkitfullscreenchange', this._fsChangeHandler, false);
document.removeEventListener('mozfullscreenchange', this._fsChangeHandler, false);
document.removeEventListener('fullscreenchange', this._fsChangeHandler, false);
document.removeEventListener('MSFullscreenChange', this._fsChangeHandler, false);
this.dispatchEvent({ type: 'exit' });
}
};
this.enter = this.enter.bind(this);
this.exit = this.exit.bind(this);
}
async enter(element) {
if (this.isFullScreen())
return;
const elem = element || this._viewer?.canvas;
if (!elem)
return;
this._lastFsElement = elem;
if (document.addEventListener) {
document.addEventListener('webkitfullscreenchange', this._fsChangeHandler, false);
document.addEventListener('mozfullscreenchange', this._fsChangeHandler, false);
document.addEventListener('fullscreenchange', this._fsChangeHandler, false);
document.addEventListener('MSFullscreenChange', this._fsChangeHandler, false);
}
this._lastSize = [elem.style.width, elem.style.height];
elem.style.width = '100%';
elem.style.height = '100%';
if (elem.requestFullscreen) {
return elem.requestFullscreen();
}
else if (elem.mozRequestFullScreen) { /* Firefox */
return elem.mozRequestFullScreen();
}
else if (elem.webkitRequestFullscreen) { /* Chrome, Safari & Opera */
return elem.webkitRequestFullscreen();
}
else if (elem.msRequestFullscreen) { /* IE/Edge */
return elem.msRequestFullscreen();
}
}
async exit() {
if (document.exitFullscreen) {
return document.exitFullscreen();
}
else if (document.mozCancelFullScreen) { /* Firefox */
return document.mozCancelFullScreen();
}
else if (document.webkitExitFullscreen) { /* Chrome, Safari and Opera */
return document.webkitExitFullscreen();
}
else if (document.msExitFullscreen) { /* IE/Edge */
return document.msExitFullscreen();
}
}
async toggle(element) {
if (this.isFullScreen()) {
return this.exit();
}
else {
return this.enter(element);
}
}
isFullScreen() {
return document.webkitIsFullScreen ||
document.mozFullScreen ||
document.msFullscreenElement !== undefined;
}
};
FullScreenPlugin.PluginType = 'FullScreenPlugin';
__decorate([
uiButton('Enter FullScreen', { sendArgs: false })
], FullScreenPlugin.prototype, "enter", null);
__decorate([
uiButton('Exit FullScreen', { sendArgs: false })
], FullScreenPlugin.prototype, "exit", null);
__decorate([
uiButton('Toggle FullScreen', { sendArgs: false })
], FullScreenPlugin.prototype, "toggle", null);
FullScreenPlugin = __decorate([
uiFolderContainer('Full Screen')
], FullScreenPlugin);
export { FullScreenPlugin };
//# sourceMappingURL=FullScreenPlugin.js.map