@thanhthbm/scene-editor 0.1.0

package/src/editor/js/Menubar.Status.js

@@ -0,0 +1,51 @@
+import * as THREE from 'three';
+
+import { UIPanel, UIText } from './libs/ui.js';
+import { UIBoolean } from './libs/ui.three.js';
+
+function MenubarStatus( editor ) {
+
+	const strings = editor.strings;
+
+	const container = new UIPanel();
+	container.setClass( 'menu right' );
+
+	const autosave = new UIBoolean( editor.config.getKey( 'autosave' ), strings.getKey( 'menubar/status/autosave' ) );
+	autosave.text.setColor( '#888' );
+	autosave.onChange( function () {
+
+		const value = this.getValue();
+
+		editor.config.setKey( 'autosave', value );
+
+		if ( value === true ) {
+
+			editor.signals.sceneGraphChanged.dispatch();
+
+		}
+
+	} );
+	container.add( autosave );
+
+	editor.signals.savingStarted.add( function () {
+
+		autosave.text.setTextDecoration( 'underline' );
+
+	} );
+
+	editor.signals.savingFinished.add( function () {
+
+		autosave.text.setTextDecoration( 'none' );
+
+	} );
+
+	const version = new UIText( 'r' + THREE.REVISION );
+	version.setClass( 'title' );
+	version.setOpacity( 0.5 );
+	container.add( version );
+
+	return container;
+
+}
+
+export { MenubarStatus };

package/src/editor/js/Menubar.View.js

@@ -0,0 +1,193 @@
+import { UIHorizontalRule, UIPanel, UIRow } from './libs/ui.js';
+
+function MenubarView( editor ) {
+
+	const signals = editor.signals;
+	const strings = editor.strings;
+
+	const container = new UIPanel();
+	container.setClass( 'menu' );
+
+	const title = new UIPanel();
+	title.setClass( 'title' );
+	title.setTextContent( strings.getKey( 'menubar/view' ) );
+	container.add( title );
+
+	const options = new UIPanel();
+	options.setClass( 'options' );
+	container.add( options );
+
+	// Helpers
+
+	const states = {
+
+		gridHelper: true,
+		cameraHelpers: true,
+		lightHelpers: true,
+		skeletonHelpers: true
+
+	};
+
+	// Grid Helper
+
+	let option = new UIRow().addClass( 'option' ).addClass( 'toggle' ).setTextContent( strings.getKey( 'menubar/view/gridHelper' ) ).onClick( function () {
+
+		states.gridHelper = ! states.gridHelper;
+
+		this.toggleClass( 'toggle-on', states.gridHelper );
+
+		signals.showHelpersChanged.dispatch( states );
+
+	} ).toggleClass( 'toggle-on', states.gridHelper );
+
+	options.add( option );
+
+	// Camera Helpers
+
+	option = new UIRow().addClass( 'option' ).addClass( 'toggle' ).setTextContent( strings.getKey( 'menubar/view/cameraHelpers' ) ).onClick( function () {
+
+		states.cameraHelpers = ! states.cameraHelpers;
+
+		this.toggleClass( 'toggle-on', states.cameraHelpers );
+
+		signals.showHelpersChanged.dispatch( states );
+
+	} ).toggleClass( 'toggle-on', states.cameraHelpers );
+
+	options.add( option );
+
+	// Light Helpers
+
+	option = new UIRow().addClass( 'option' ).addClass( 'toggle' ).setTextContent( strings.getKey( 'menubar/view/lightHelpers' ) ).onClick( function () {
+
+		states.lightHelpers = ! states.lightHelpers;
+
+		this.toggleClass( 'toggle-on', states.lightHelpers );
+
+		signals.showHelpersChanged.dispatch( states );
+
+	} ).toggleClass( 'toggle-on', states.lightHelpers );
+
+	options.add( option );
+
+	// Skeleton Helpers
+
+	option = new UIRow().addClass( 'option' ).addClass( 'toggle' ).setTextContent( strings.getKey( 'menubar/view/skeletonHelpers' ) ).onClick( function () {
+
+		states.skeletonHelpers = ! states.skeletonHelpers;
+
+		this.toggleClass( 'toggle-on', states.skeletonHelpers );
+
+		signals.showHelpersChanged.dispatch( states );
+
+	} ).toggleClass( 'toggle-on', states.skeletonHelpers );
+
+	options.add( option );
+
+	// new helpers are visible by default, the global visibility state
+	// of helpers is managed in this component. every time a helper is added,
+	// we request a viewport updated by firing the showHelpersChanged signal.
+
+	signals.helperAdded.add( function () {
+
+		signals.showHelpersChanged.dispatch( states );
+
+	} );
+
+	//
+
+	options.add( new UIHorizontalRule() );
+
+	// Fullscreen
+
+	option = new UIRow();
+	option.setClass( 'option' );
+	option.setTextContent( strings.getKey( 'menubar/view/fullscreen' ) );
+	option.onClick( function () {
+
+		if ( document.fullscreenElement === null ) {
+
+			document.documentElement.requestFullscreen();
+
+		} else if ( document.exitFullscreen ) {
+
+			document.exitFullscreen();
+
+		}
+
+		// Safari
+
+		if ( document.webkitFullscreenElement === null ) {
+
+			document.documentElement.webkitRequestFullscreen();
+
+		} else if ( document.webkitExitFullscreen ) {
+
+			document.webkitExitFullscreen();
+
+		}
+
+	} );
+	options.add( option );
+
+	// XR (Work in progress)
+
+	if ( 'xr' in navigator ) {
+
+		if ( 'offerSession' in navigator.xr ) {
+
+			signals.offerXR.dispatch( 'immersive-ar' );
+
+		} else {
+
+			navigator.xr.isSessionSupported( 'immersive-ar' )
+				.then( function ( supported ) {
+
+					if ( supported ) {
+
+						const option = new UIRow();
+						option.setClass( 'option' );
+						option.setTextContent( 'AR' );
+						option.onClick( function () {
+
+							signals.enterXR.dispatch( 'immersive-ar' );
+
+						} );
+						options.add( option );
+
+					} else {
+
+						navigator.xr.isSessionSupported( 'immersive-vr' )
+							.then( function ( supported ) {
+
+								if ( supported ) {
+
+									const option = new UIRow();
+									option.setClass( 'option' );
+									option.setTextContent( 'VR' );
+									option.onClick( function () {
+
+										signals.enterXR.dispatch( 'immersive-vr' );
+
+									} );
+									options.add( option );
+
+								}
+
+							} );
+
+					}
+
+				} );
+
+		}
+
+	}
+
+	//
+
+	return container;
+
+}
+
+export { MenubarView };

package/src/editor/js/Menubar.js

@@ -0,0 +1,29 @@
+import { UIPanel } from './libs/ui.js';
+
+import { MenubarAdd } from './Menubar.Add.js';
+import { MenubarEdit } from './Menubar.Edit.js';
+import { MenubarFile } from './Menubar.File.js';
+import { MenubarView } from './Menubar.View.js';
+import { MenubarRender } from './Menubar.Render.js';
+import { MenubarHelp } from './Menubar.Help.js';
+import { MenubarStatus } from './Menubar.Status.js';
+
+function Menubar( editor ) {
+
+	const container = new UIPanel();
+	container.setId( 'menubar' );
+
+	container.add( new MenubarFile( editor ) );
+	container.add( new MenubarEdit( editor ) );
+	container.add( new MenubarAdd( editor ) );
+	container.add( new MenubarView( editor ) );
+	container.add( new MenubarRender( editor ) );
+	container.add( new MenubarHelp( editor ) );
+
+	container.add( new MenubarStatus( editor ) );
+
+	return container;
+
+}
+
+export { Menubar };

package/src/editor/js/Player.js

@@ -0,0 +1,53 @@
+import { UIPanel } from './libs/ui.js';
+import { APP } from './libs/app.js';
+
+function Player( editor ) {
+
+	const signals = editor.signals;
+
+	const container = new UIPanel();
+	container.setId( 'player' );
+	container.setPosition( 'absolute' );
+	container.setDisplay( 'none' );
+
+	//
+
+	const player = new APP.Player();
+	container.dom.appendChild( player.dom );
+
+	window.addEventListener( 'resize', function () {
+
+		player.setSize( container.dom.clientWidth, container.dom.clientHeight );
+
+	} );
+
+	signals.windowResize.add( function () {
+
+		player.setSize( container.dom.clientWidth, container.dom.clientHeight );
+
+	} );
+
+	signals.startPlayer.add( async function () {
+
+		container.setDisplay( '' );
+
+		await player.load( editor.toJSON() );
+		player.setSize( container.dom.clientWidth, container.dom.clientHeight );
+		player.play();
+
+	} );
+
+	signals.stopPlayer.add( function () {
+
+		container.setDisplay( 'none' );
+
+		player.stop();
+		player.dispose();
+
+	} );
+
+	return container;
+
+}
+
+export { Player };

package/src/editor/js/Resizer.js

@@ -0,0 +1,65 @@
+import { UIElement } from './libs/ui.js';
+
+function Resizer( editor ) {
+
+	const signals = editor.signals;
+
+	const dom = document.createElement( 'div' );
+	dom.id = 'resizer';
+
+	function onPointerDown( event ) {
+
+		if ( event.isPrimary === false ) return;
+
+		dom.ownerDocument.addEventListener( 'pointermove', onPointerMove );
+		dom.ownerDocument.addEventListener( 'pointerup', onPointerUp );
+
+	}
+
+	function onPointerUp( event ) {
+
+		if ( event.isPrimary === false ) return;
+
+		dom.ownerDocument.removeEventListener( 'pointermove', onPointerMove );
+		dom.ownerDocument.removeEventListener( 'pointerup', onPointerUp );
+
+	}
+
+	function onPointerMove( event ) {
+
+		// PointerEvent's movementX/movementY are 0 in WebKit
+
+		if ( event.isPrimary === false ) return;
+
+		const offsetWidth = document.body.offsetWidth;
+		const clientX = event.clientX;
+
+		const cX = clientX < 0 ? 0 : clientX > offsetWidth ? offsetWidth : clientX;
+
+		const x = Math.max( 335, offsetWidth - cX ); // .TabbedPanel min-width: 335px
+
+		dom.style.right = x + 'px';
+
+		document.getElementById( 'sidebar' ).style.width = x + 'px';
+		document.getElementById( 'player' ).style.right = x + 'px';
+		document.getElementById( 'script' ).style.right = x + 'px';
+		document.getElementById( 'viewport' ).style.right = x + 'px';
+		document.getElementById( 'animation' ).style.right = x + 'px';
+		document.getElementById( 'animation-resizer' ).style.right = x + 'px';
+
+		// Center toolbar in viewport area
+		const toolbar = document.getElementById( 'toolbar' );
+		const viewportWidth = offsetWidth - x;
+		toolbar.style.left = ( viewportWidth / 2 ) + 'px';
+
+		signals.windowResize.dispatch();
+
+	}
+
+	dom.addEventListener( 'pointerdown', onPointerDown );
+
+	return new UIElement( dom );
+
+}
+
+export { Resizer };