spoint 0.1.0 → 0.1.10

package/client/editor/js/Sidebar.Scene.js

@@ -0,0 +1,585 @@
+import * as THREE from 'three';
+
+import { UIPanel, UIBreak, UIRow, UIColor, UISelect, UIText, UINumber } from './libs/ui.js';
+import { UIOutliner, UITexture } from './libs/ui.three.js';
+
+function SidebarScene( editor ) {
+
+	const signals = editor.signals;
+	const strings = editor.strings;
+
+	const container = new UIPanel();
+	container.setBorderTop( '0' );
+	container.setPaddingTop( '20px' );
+
+	// outliner
+
+	const nodeStates = new WeakMap();
+
+	function buildOption( object, draggable ) {
+
+		const option = document.createElement( 'div' );
+		option.draggable = draggable;
+		option.innerHTML = buildHTML( object );
+		option.value = object.id;
+
+		// opener
+
+		if ( nodeStates.has( object ) ) {
+
+			const state = nodeStates.get( object );
+
+			const opener = document.createElement( 'span' );
+			opener.classList.add( 'opener' );
+
+			if ( object.children.length > 0 ) {
+
+				opener.classList.add( state ? 'open' : 'closed' );
+
+			}
+
+			opener.addEventListener( 'click', function () {
+
+				nodeStates.set( object, nodeStates.get( object ) === false ); // toggle
+				refreshUI();
+
+			} );
+
+			option.insertBefore( opener, option.firstChild );
+
+		}
+
+		return option;
+
+	}
+
+	function getMaterialName( material ) {
+
+		if ( Array.isArray( material ) ) {
+
+			const array = [];
+
+			for ( let i = 0; i < material.length; i ++ ) {
+
+				array.push( material[ i ].name );
+
+			}
+
+			return array.join( ',' );
+
+		}
+
+		return material.name;
+
+	}
+
+	function escapeHTML( html ) {
+
+		return html
+			.replace( /&/g, '&amp;' )
+			.replace( /"/g, '&quot;' )
+			.replace( /'/g, '&#39;' )
+			.replace( /</g, '&lt;' )
+			.replace( />/g, '&gt;' );
+
+	}
+
+	function getObjectType( object ) {
+
+		if ( object.isScene ) return 'Scene';
+		if ( object.isCamera ) return 'Camera';
+		if ( object.isLight ) return 'Light';
+		if ( object.isMesh ) return 'Mesh';
+		if ( object.isLine ) return 'Line';
+		if ( object.isPoints ) return 'Points';
+
+		return 'Object3D';
+
+	}
+
+	function buildHTML( object ) {
+
+		let html = `<span class="type ${ getObjectType( object ) }"></span> ${ escapeHTML( object.name ) }`;
+
+		if ( object.isMesh ) {
+
+			const geometry = object.geometry;
+			const material = object.material;
+
+			html += ` <span class="type Geometry"></span> ${ escapeHTML( geometry.name ) }`;
+			html += ` <span class="type Material"></span> ${ escapeHTML( getMaterialName( material ) ) }`;
+
+		}
+
+		html += getScript( object.uuid );
+
+		return html;
+
+	}
+
+	function getScript( uuid ) {
+
+		if ( editor.scripts[ uuid ] === undefined ) return '';
+
+		if ( editor.scripts[ uuid ].length === 0 ) return '';
+
+		return ' <span class="type Script"></span>';
+
+	}
+
+	let ignoreObjectSelectedSignal = false;
+
+	const outliner = new UIOutliner( editor );
+	outliner.setId( 'outliner' );
+	outliner.onChange( function () {
+
+		ignoreObjectSelectedSignal = true;
+
+		editor.selectById( parseInt( outliner.getValue() ) );
+
+		ignoreObjectSelectedSignal = false;
+
+	} );
+	outliner.onDblClick( function () {
+
+		editor.focusById( parseInt( outliner.getValue() ) );
+
+	} );
+	container.add( outliner );
+	container.add( new UIBreak() );
+
+	// background
+
+	const backgroundRow = new UIRow();
+
+	const backgroundType = new UISelect().setOptions( {
+
+		'None': '',
+		'Color': 'Color',
+		'Texture': 'Texture',
+		'Equirectangular': 'Equirect'
+
+	} ).setWidth( '150px' );
+	backgroundType.onChange( function () {
+
+		onBackgroundChanged();
+		refreshBackgroundUI();
+
+	} );
+
+	backgroundRow.add( new UIText( strings.getKey( 'sidebar/scene/background' ) ).setClass( 'Label' ) );
+	backgroundRow.add( backgroundType );
+
+	const backgroundColor = new UIColor().setValue( '#000000' ).setMarginLeft( '8px' ).onInput( onBackgroundChanged );
+	backgroundRow.add( backgroundColor );
+
+	const backgroundTexture = new UITexture( editor ).setMarginLeft( '8px' ).onChange( onBackgroundChanged );
+	backgroundTexture.setDisplay( 'none' );
+	backgroundRow.add( backgroundTexture );
+
+	const backgroundEquirectangularTexture = new UITexture( editor ).setMarginLeft( '8px' ).onChange( onBackgroundChanged );
+	backgroundEquirectangularTexture.setDisplay( 'none' );
+	backgroundRow.add( backgroundEquirectangularTexture );
+
+	container.add( backgroundRow );
+
+	const backgroundEquirectRow = new UIRow();
+	backgroundEquirectRow.setDisplay( 'none' );
+	backgroundEquirectRow.setMarginLeft( '120px' );
+
+	const backgroundBlurriness = new UINumber( 0 ).setWidth( '40px' ).setRange( 0, 1 ).onChange( onBackgroundChanged );
+	backgroundEquirectRow.add( backgroundBlurriness );
+
+	const backgroundIntensity = new UINumber( 1 ).setWidth( '40px' ).setRange( 0, Infinity ).onChange( onBackgroundChanged );
+	backgroundEquirectRow.add( backgroundIntensity );
+
+	const backgroundRotation = new UINumber( 0 ).setWidth( '40px' ).setRange( - 180, 180 ).setStep( 10 ).setNudge( 0.1 ).setUnit( '°' ).onChange( onBackgroundChanged );
+	backgroundEquirectRow.add( backgroundRotation );
+
+	container.add( backgroundEquirectRow );
+
+	function onBackgroundChanged() {
+
+		signals.sceneBackgroundChanged.dispatch(
+			backgroundType.getValue(),
+			backgroundColor.getHexValue(),
+			backgroundTexture.getValue(),
+			backgroundEquirectangularTexture.getValue(),
+			backgroundBlurriness.getValue(),
+			backgroundIntensity.getValue(),
+			backgroundRotation.getValue()
+		);
+
+	}
+
+	function refreshBackgroundUI() {
+
+		const type = backgroundType.getValue();
+
+		backgroundType.setWidth( type === 'None' ? '150px' : '110px' );
+		backgroundColor.setDisplay( type === 'Color' ? '' : 'none' );
+		backgroundTexture.setDisplay( type === 'Texture' ? '' : 'none' );
+		backgroundEquirectangularTexture.setDisplay( type === 'Equirectangular' ? '' : 'none' );
+		backgroundEquirectRow.setDisplay( type === 'Equirectangular' ? '' : 'none' );
+
+	}
+
+	// environment
+
+	const environmentRow = new UIRow();
+
+	const environmentType = new UISelect().setOptions( {
+
+		'None': '',
+		'Background': 'Background',
+		'Equirectangular': 'Equirect',
+		'ModelViewer': 'ModelViewer'
+
+	} ).setWidth( '150px' );
+	environmentType.setValue( 'None' );
+	environmentType.onChange( function () {
+
+		onEnvironmentChanged();
+		refreshEnvironmentUI();
+
+	} );
+
+	environmentRow.add( new UIText( strings.getKey( 'sidebar/scene/environment' ) ).setClass( 'Label' ) );
+	environmentRow.add( environmentType );
+
+	const environmentEquirectangularTexture = new UITexture( editor ).setMarginLeft( '8px' ).onChange( onEnvironmentChanged );
+	environmentEquirectangularTexture.setDisplay( 'none' );
+	environmentRow.add( environmentEquirectangularTexture );
+
+	container.add( environmentRow );
+
+	function onEnvironmentChanged() {
+
+		signals.sceneEnvironmentChanged.dispatch(
+			environmentType.getValue(),
+			environmentEquirectangularTexture.getValue()
+		);
+
+	}
+
+	function refreshEnvironmentUI() {
+
+		const type = environmentType.getValue();
+
+		environmentType.setWidth( type !== 'Equirectangular' ? '150px' : '110px' );
+		environmentEquirectangularTexture.setDisplay( type === 'Equirectangular' ? '' : 'none' );
+
+	}
+
+	// fog
+
+	function onFogChanged() {
+
+		signals.sceneFogChanged.dispatch(
+			fogType.getValue(),
+			fogColor.getHexValue(),
+			fogNear.getValue(),
+			fogFar.getValue(),
+			fogDensity.getValue()
+		);
+
+	}
+
+	function onFogSettingsChanged() {
+
+		signals.sceneFogSettingsChanged.dispatch(
+			fogType.getValue(),
+			fogColor.getHexValue(),
+			fogNear.getValue(),
+			fogFar.getValue(),
+			fogDensity.getValue()
+		);
+
+	}
+
+	const fogTypeRow = new UIRow();
+	const fogType = new UISelect().setOptions( {
+
+		'None': '',
+		'Fog': 'Linear',
+		'FogExp2': 'Exponential'
+
+	} ).setWidth( '150px' );
+	fogType.onChange( function () {
+
+		onFogChanged();
+		refreshFogUI();
+
+	} );
+
+	fogTypeRow.add( new UIText( strings.getKey( 'sidebar/scene/fog' ) ).setClass( 'Label' ) );
+	fogTypeRow.add( fogType );
+
+	container.add( fogTypeRow );
+
+	// fog color
+
+	const fogPropertiesRow = new UIRow();
+	fogPropertiesRow.setDisplay( 'none' );
+	fogPropertiesRow.setMarginLeft( '120px' );
+	container.add( fogPropertiesRow );
+
+	const fogColor = new UIColor().setValue( '#aaaaaa' );
+	fogColor.onInput( onFogSettingsChanged );
+	fogPropertiesRow.add( fogColor );
+
+	// fog near
+
+	const fogNear = new UINumber( 0.1 ).setWidth( '40px' ).setRange( 0, Infinity ).onChange( onFogSettingsChanged );
+	fogPropertiesRow.add( fogNear );
+
+	// fog far
+
+	const fogFar = new UINumber( 50 ).setWidth( '40px' ).setRange( 0, Infinity ).onChange( onFogSettingsChanged );
+	fogPropertiesRow.add( fogFar );
+
+	// fog density
+
+	const fogDensity = new UINumber( 0.05 ).setWidth( '40px' ).setRange( 0, 0.1 ).setStep( 0.001 ).setPrecision( 3 ).onChange( onFogSettingsChanged );
+	fogPropertiesRow.add( fogDensity );
+
+	//
+
+	function refreshUI() {
+
+		const camera = editor.camera;
+		const scene = editor.scene;
+
+		const options = [];
+
+		options.push( buildOption( camera, false ) );
+		options.push( buildOption( scene, false ) );
+
+		( function addObjects( objects, pad ) {
+
+			for ( let i = 0, l = objects.length; i < l; i ++ ) {
+
+				const object = objects[ i ];
+
+				if ( nodeStates.has( object ) === false ) {
+
+					nodeStates.set( object, false );
+
+				}
+
+				const option = buildOption( object, true );
+				option.style.paddingLeft = ( pad * 18 ) + 'px';
+				options.push( option );
+
+				if ( nodeStates.get( object ) === true ) {
+
+					addObjects( object.children, pad + 1 );
+
+				}
+
+			}
+
+		} )( scene.children, 0 );
+
+		outliner.setOptions( options );
+
+		if ( editor.selected !== null ) {
+
+			outliner.setValue( editor.selected.id );
+
+		}
+
+		if ( scene.background ) {
+
+			if ( scene.background.isColor ) {
+
+				backgroundType.setValue( 'Color' );
+				backgroundColor.setHexValue( scene.background.getHex() );
+
+			} else if ( scene.background.isTexture ) {
+
+				if ( scene.background.mapping === THREE.EquirectangularReflectionMapping ) {
+
+					backgroundType.setValue( 'Equirectangular' );
+					backgroundEquirectangularTexture.setValue( scene.background );
+					backgroundBlurriness.setValue( scene.backgroundBlurriness );
+					backgroundIntensity.setValue( scene.backgroundIntensity );
+
+				} else {
+
+					backgroundType.setValue( 'Texture' );
+					backgroundTexture.setValue( scene.background );
+
+				}
+
+			}
+
+		} else {
+
+			backgroundType.setValue( 'None' );
+			backgroundTexture.setValue( null );
+			backgroundEquirectangularTexture.setValue( null );
+
+		}
+
+		if ( scene.environment ) {
+
+			if ( scene.background && scene.background.isTexture && scene.background.uuid === scene.environment.uuid ) {
+
+				environmentType.setValue( 'Background' );
+
+			} else if ( scene.environment.mapping === THREE.EquirectangularReflectionMapping ) {
+
+				environmentType.setValue( 'Equirectangular' );
+				environmentEquirectangularTexture.setValue( scene.environment );
+
+			} else if ( scene.environment.isRenderTargetTexture === true ) {
+
+				environmentType.setValue( 'ModelViewer' );
+
+			}
+
+		} else {
+
+			environmentType.setValue( 'None' );
+			environmentEquirectangularTexture.setValue( null );
+
+		}
+
+		if ( scene.fog ) {
+
+			fogColor.setHexValue( scene.fog.color.getHex() );
+
+			if ( scene.fog.isFog ) {
+
+				fogType.setValue( 'Fog' );
+				fogNear.setValue( scene.fog.near );
+				fogFar.setValue( scene.fog.far );
+
+			} else if ( scene.fog.isFogExp2 ) {
+
+				fogType.setValue( 'FogExp2' );
+				fogDensity.setValue( scene.fog.density );
+
+			}
+
+		} else {
+
+			fogType.setValue( 'None' );
+
+		}
+
+		refreshBackgroundUI();
+		refreshEnvironmentUI();
+		refreshFogUI();
+
+	}
+
+	function refreshFogUI() {
+
+		const type = fogType.getValue();
+
+		fogPropertiesRow.setDisplay( type === 'None' ? 'none' : '' );
+		fogNear.setDisplay( type === 'Fog' ? '' : 'none' );
+		fogFar.setDisplay( type === 'Fog' ? '' : 'none' );
+		fogDensity.setDisplay( type === 'FogExp2' ? '' : 'none' );
+
+	}
+
+	refreshUI();
+
+	// events
+
+	signals.editorCleared.add( refreshUI );
+
+	signals.sceneGraphChanged.add( refreshUI );
+
+	signals.refreshSidebarEnvironment.add( refreshUI );
+
+	signals.objectChanged.add( function ( object ) {
+
+		const options = outliner.options;
+
+		for ( let i = 0; i < options.length; i ++ ) {
+
+			const option = options[ i ];
+
+			if ( option.value === object.id ) {
+
+				const openerElement = option.querySelector( ':scope > .opener' );
+
+				const openerHTML = openerElement ? openerElement.outerHTML : '';
+
+				option.innerHTML = openerHTML + buildHTML( object );
+
+				return;
+
+			}
+
+		}
+
+	} );
+
+	signals.scriptAdded.add( function () {
+
+		if ( editor.selected !== null ) signals.objectChanged.dispatch( editor.selected );
+
+	} );
+
+	signals.scriptRemoved.add( function () {
+
+		if ( editor.selected !== null ) signals.objectChanged.dispatch( editor.selected );
+
+	} );
+
+
+	signals.objectSelected.add( function ( object ) {
+
+		if ( ignoreObjectSelectedSignal === true ) return;
+
+		if ( object !== null && object.parent !== null ) {
+
+			let needsRefresh = false;
+			let parent = object.parent;
+
+			while ( parent !== editor.scene ) {
+
+				if ( nodeStates.get( parent ) !== true ) {
+
+					nodeStates.set( parent, true );
+					needsRefresh = true;
+
+				}
+
+				parent = parent.parent;
+
+			}
+
+			if ( needsRefresh ) refreshUI();
+
+			outliner.setValue( object.id );
+
+		} else {
+
+			outliner.setValue( null );
+
+		}
+
+	} );
+
+	signals.sceneBackgroundChanged.add( function () {
+
+		if ( environmentType.getValue() === 'Background' ) {
+
+			onEnvironmentChanged();
+			refreshEnvironmentUI();
+
+		}
+
+	} );
+
+	return container;
+
+}
+
+export { SidebarScene };

package/client/editor/js/Sidebar.Script.js

@@ -0,0 +1,129 @@
+import { UIPanel, UIBreak, UIButton, UIRow, UIInput } from './libs/ui.js';
+
+import { AddScriptCommand } from './commands/AddScriptCommand.js';
+import { SetScriptValueCommand } from './commands/SetScriptValueCommand.js';
+import { RemoveScriptCommand } from './commands/RemoveScriptCommand.js';
+
+function SidebarScript( editor ) {
+
+	const strings = editor.strings;
+
+	const signals = editor.signals;
+
+	const container = new UIPanel();
+	container.setBorderTop( '0' );
+	container.setPaddingTop( '20px' );
+	container.setDisplay( 'none' );
+
+	//
+
+	const scriptsContainer = new UIRow();
+	container.add( scriptsContainer );
+
+	const newScript = new UIButton( strings.getKey( 'sidebar/script/new' ) );
+	newScript.onClick( function () {
+
+		const script = { name: '', source: 'function update( event ) {}' };
+		editor.execute( new AddScriptCommand( editor, editor.selected, script ) );
+
+	} );
+	container.add( newScript );
+
+	/*
+	let loadScript = new UI.Button( 'Load' );
+	loadScript.setMarginLeft( '4px' );
+	container.add( loadScript );
+	*/
+
+	//
+
+	function update() {
+
+		scriptsContainer.clear();
+		scriptsContainer.setDisplay( 'none' );
+
+		const object = editor.selected;
+
+		if ( object === null ) {
+
+			return;
+
+		}
+
+		const scripts = editor.scripts[ object.uuid ];
+
+		if ( scripts !== undefined && scripts.length > 0 ) {
+
+			scriptsContainer.setDisplay( 'block' );
+
+			for ( let i = 0; i < scripts.length; i ++ ) {
+
+				( function ( object, script ) {
+
+					const name = new UIInput( script.name ).setWidth( '130px' ).setFontSize( '12px' );
+					name.onChange( function () {
+
+						editor.execute( new SetScriptValueCommand( editor, editor.selected, script, 'name', this.getValue() ) );
+
+					} );
+					scriptsContainer.add( name );
+
+					const edit = new UIButton( strings.getKey( 'sidebar/script/edit' ) );
+					edit.setMarginLeft( '4px' );
+					edit.onClick( function () {
+
+						signals.editScript.dispatch( object, script );
+
+					} );
+					scriptsContainer.add( edit );
+
+					const remove = new UIButton( strings.getKey( 'sidebar/script/remove' ) );
+					remove.setMarginLeft( '4px' );
+					remove.onClick( function () {
+
+						if ( confirm( strings.getKey( 'prompt/script/remove' ) ) ) {
+
+							editor.execute( new RemoveScriptCommand( editor, editor.selected, script ) );
+
+						}
+
+					} );
+					scriptsContainer.add( remove );
+
+					scriptsContainer.add( new UIBreak() );
+
+				} )( object, scripts[ i ] );
+
+			}
+
+		}
+
+	}
+
+	// signals
+
+	signals.objectSelected.add( function ( object ) {
+
+		if ( object !== null && editor.camera !== object ) {
+
+			container.setDisplay( 'block' );
+
+			update();
+
+		} else {
+
+			container.setDisplay( 'none' );
+
+		}
+
+	} );
+
+	signals.scriptAdded.add( update );
+	signals.scriptRemoved.add( update );
+	signals.scriptChanged.add( update );
+
+	return container;
+
+}
+
+export { SidebarScript };