@thanhthbm/scene-editor 0.1.0

package/src/editor/js/Sidebar.Project.Resources.js

@@ -0,0 +1,242 @@
+import { UIPanel, UIText, UITabbedPanel, UIListbox, UIButton } from './libs/ui.js';
+
+import { SetGeometryCommand } from './commands/SetGeometryCommand.js';
+import { SetMaterialCommand } from './commands/SetMaterialCommand.js';
+
+function SidebarProjectResources( editor ) {
+
+	const signals = editor.signals;
+	const strings = editor.strings;
+
+	const container = new UITabbedPanel();
+
+	// Geometries
+
+	const geometriesTab = new UIPanel();
+	geometriesTab.dom.style.borderTop = 'none';
+	const geometriesListbox = new UIListbox();
+	geometriesListbox.dom.style.height = '140px';
+	geometriesListbox.dom.style.resize = 'vertical';
+	geometriesListbox.dom.style.marginBottom = '10px';
+	geometriesTab.add( geometriesListbox );
+
+	const geometriesAssign = new UIButton( strings.getKey( 'sidebar/project/Assign' ) );
+	geometriesTab.add( geometriesAssign );
+
+	const geometriesInfo = new UIText();
+	geometriesInfo.dom.style.float = 'right';
+	geometriesTab.add( geometriesInfo );
+	geometriesAssign.onClick( function () {
+
+		const selectedObject = editor.selected;
+
+		if ( selectedObject !== null && selectedObject.geometry !== undefined ) {
+
+			const selectedId = geometriesListbox.getValue();
+			const geometries = Object.values( editor.geometries );
+			const geometry = geometries.find( g => g.id === parseInt( selectedId ) );
+
+			if ( geometry !== undefined ) {
+
+				editor.execute( new SetGeometryCommand( editor, selectedObject, geometry ) );
+
+			}
+
+		}
+
+	} );
+
+	container.addTab( 'geometries', strings.getKey( 'sidebar/project/geometries' ), geometriesTab );
+
+	// Materials
+
+	const materialsTab = new UIPanel();
+	materialsTab.dom.style.borderTop = 'none';
+	const materialsListbox = new UIListbox();
+	materialsListbox.dom.style.height = '140px';
+	materialsListbox.dom.style.resize = 'vertical';
+	materialsListbox.dom.style.marginBottom = '10px';
+	materialsTab.add( materialsListbox );
+
+	const materialsAssign = new UIButton( strings.getKey( 'sidebar/project/Assign' ) );
+	materialsTab.add( materialsAssign );
+
+	const materialsInfo = new UIText();
+	materialsInfo.dom.style.float = 'right';
+	materialsTab.add( materialsInfo );
+
+	materialsAssign.onClick( function () {
+
+		const selectedObject = editor.selected;
+
+		if ( selectedObject !== null && selectedObject.material !== undefined ) {
+
+			const selectedId = materialsListbox.getValue();
+			const materials = Object.values( editor.materials );
+			const material = materials.find( m => m.id === parseInt( selectedId ) );
+
+			if ( material !== undefined ) {
+
+				editor.execute( new SetMaterialCommand( editor, selectedObject, material ) );
+
+			}
+
+		}
+
+	} );
+
+	container.addTab( 'materials', strings.getKey( 'sidebar/project/materials' ), materialsTab );
+
+	// Textures
+
+	const texturesTab = new UIPanel();
+	texturesTab.dom.style.borderTop = 'none';
+	const texturesListbox = new UIListbox();
+	texturesListbox.dom.style.height = '140px';
+	texturesListbox.dom.style.resize = 'vertical';
+	texturesListbox.dom.style.marginBottom = '10px';
+	texturesTab.add( texturesListbox );
+
+	const texturesInfo = new UIText();
+	texturesInfo.dom.style.float = 'right';
+	texturesTab.add( texturesInfo );
+
+	container.addTab( 'textures', strings.getKey( 'sidebar/project/textures' ), texturesTab );
+
+	container.select( 'geometries' );
+
+	// Signals
+
+	function refreshGeometriesUI() {
+
+		const geometries = Object.values( editor.geometries );
+
+		geometriesListbox.setItems( geometries );
+		geometriesInfo.setValue( geometries.length + ' ' + strings.getKey( 'sidebar/project/geometries' ).toLowerCase() );
+
+	}
+
+	function refreshMaterialsUI() {
+
+		const materials = Object.values( editor.materials );
+
+		materialsListbox.setItems( materials );
+		materialsInfo.setValue( materials.length + ' ' + strings.getKey( 'sidebar/project/materials' ).toLowerCase() );
+
+	}
+
+	function refreshTexturesUI() {
+
+		const textures = [];
+		const types = [];
+		const texturesUsed = new Set();
+
+		const materials = Object.values( editor.materials );
+
+		for ( const material of materials ) {
+
+			for ( const property in material ) {
+
+				const value = material[ property ];
+
+				if ( value !== null && value !== undefined && value.isTexture === true ) {
+
+					if ( texturesUsed.has( value.uuid ) === false ) {
+
+						textures.push( value );
+						types.push( getTextureType( value ) );
+						texturesUsed.add( value.uuid );
+
+					}
+
+				}
+
+			}
+
+		}
+
+		texturesListbox.setItems( textures, types );
+		texturesInfo.setValue( textures.length + ' ' + strings.getKey( 'sidebar/project/textures' ).toLowerCase() );
+
+	}
+
+	function getTextureType( texture ) {
+
+		if ( texture.isCanvasTexture ) return 'CanvasTexture';
+		if ( texture.isVideoTexture ) return 'VideoTexture';
+		if ( texture.isCubeDepthTexture ) return 'CubeDepthTexture';
+		if ( texture.isDepthTexture ) return 'DepthTexture';
+		if ( texture.isCompressedArrayTexture ) return 'CompressedArrayTexture';
+		if ( texture.isCompressedCubeTexture ) return 'CompressedCubeTexture';
+		if ( texture.isCompressedTexture ) return 'CompressedTexture';
+		if ( texture.isCubeTexture ) return 'CubeTexture';
+		if ( texture.isData3DTexture ) return 'Data3DTexture';
+		if ( texture.isDataArrayTexture ) return 'DataArrayTexture';
+		if ( texture.isDataTexture ) return 'DataTexture';
+		if ( texture.isFramebufferTexture ) return 'FramebufferTexture';
+
+		return 'Texture';
+
+	}
+
+	function refreshUI() {
+
+		refreshGeometriesUI();
+		refreshMaterialsUI();
+		refreshTexturesUI();
+
+	}
+
+	let timeout;
+
+	function refreshUIDelayed() {
+
+		clearTimeout( timeout );
+
+		timeout = setTimeout( refreshUI, 100 );
+
+	}
+
+	signals.editorCleared.add( refreshUIDelayed );
+	signals.sceneGraphChanged.add( refreshUIDelayed );
+	signals.geometryChanged.add( refreshUIDelayed );
+	signals.materialAdded.add( refreshUIDelayed );
+	signals.materialChanged.add( refreshUIDelayed );
+	signals.materialRemoved.add( refreshUIDelayed );
+
+	signals.objectSelected.add( function ( object ) {
+
+		if ( object !== null ) {
+
+			const geometries = Object.values( editor.geometries );
+			const materials = Object.values( editor.materials );
+
+			if ( object.geometry !== undefined ) {
+
+				const geometryIndex = geometries.indexOf( object.geometry );
+				geometriesListbox.selectIndex( geometryIndex );
+
+			}
+
+			if ( object.material !== undefined ) {
+
+				const material = Array.isArray( object.material ) ? object.material[ 0 ] : object.material;
+				const materialIndex = materials.indexOf( material );
+				materialsListbox.selectIndex( materialIndex );
+
+			}
+
+		} else {
+
+			geometriesListbox.selectIndex( - 1 );
+			materialsListbox.selectIndex( - 1 );
+
+		}
+
+	} );
+
+	return container;
+
+}
+
+export { SidebarProjectResources };

package/src/editor/js/Sidebar.Project.js

@@ -0,0 +1,21 @@
+import { UISpan } from './libs/ui.js';
+
+import { SidebarProjectApp } from './Sidebar.Project.App.js';
+import { SidebarProjectRenderer } from './Sidebar.Project.Renderer.js';
+import { SidebarProjectResources } from './Sidebar.Project.Resources.js';
+
+function SidebarProject( editor ) {
+
+	const container = new UISpan();
+
+	container.add( new SidebarProjectRenderer( editor ) );
+
+	container.add( new SidebarProjectApp( editor ) );
+
+	container.add( new SidebarProjectResources( editor ) );
+
+	return container;
+
+}
+
+export { SidebarProject };

package/src/editor/js/Sidebar.Properties.js

@@ -0,0 +1,73 @@
+import { UITabbedPanel } from './libs/ui.js';
+
+import { SidebarObject } from './Sidebar.Object.js';
+import { SidebarGeometry } from './Sidebar.Geometry.js';
+import { SidebarMaterial } from './Sidebar.Material.js';
+import { SidebarScript } from './Sidebar.Script.js';
+
+function SidebarProperties( editor ) {
+
+	const strings = editor.strings;
+
+	const container = new UITabbedPanel();
+	container.setId( 'properties' );
+
+	container.addTab( 'objectTab', strings.getKey( 'sidebar/properties/object' ), new SidebarObject( editor ) );
+	container.addTab( 'geometryTab', strings.getKey( 'sidebar/properties/geometry' ), new SidebarGeometry( editor ) );
+	container.addTab( 'materialTab', strings.getKey( 'sidebar/properties/material' ), new SidebarMaterial( editor ) );
+	container.addTab( 'scriptTab', strings.getKey( 'sidebar/properties/script' ), new SidebarScript( editor ) );
+	container.select( 'objectTab' );
+
+	function getTabByTabId( tabs, tabId ) {
+
+		return tabs.find( function ( tab ) {
+
+			return tab.dom.id === tabId;
+
+		} );
+
+	}
+
+	const geometryTab = getTabByTabId( container.tabs, 'geometryTab' );
+	const materialTab = getTabByTabId( container.tabs, 'materialTab' );
+	const scriptTab = getTabByTabId( container.tabs, 'scriptTab' );
+
+	function toggleTabs( object ) {
+
+		container.setHidden( object === null );
+
+		if ( object === null ) return;
+
+		geometryTab.setHidden( ! object.geometry );
+
+		materialTab.setHidden( ! object.material );
+
+		scriptTab.setHidden( object === editor.camera );
+
+		// set active tab
+
+		if ( container.selected === 'geometryTab' ) {
+
+			container.select( geometryTab.isHidden() ? 'objectTab' : 'geometryTab' );
+
+		} else if ( container.selected === 'materialTab' ) {
+
+			container.select( materialTab.isHidden() ? 'objectTab' : 'materialTab' );
+
+		} else if ( container.selected === 'scriptTab' ) {
+
+			container.select( scriptTab.isHidden() ? 'objectTab' : 'scriptTab' );
+
+		}
+
+	}
+
+	editor.signals.objectSelected.add( toggleTabs );
+
+	toggleTabs( editor.selected );
+
+	return container;
+
+}
+
+export { SidebarProperties };