Editor: Add Resources panel to Project sidebar. (#32729)

editor/css/main.css

@@ -121,11 +121,15 @@ textarea, input { outline: none; } /* osx */
 }
 
 .Listbox .ListboxItem {
-	padding: 6px;
+	padding: 4px;
 	color: #666;
 	white-space: nowrap;
 }
 
+.Listbox .ListboxItem:hover {
+	background-color: rgba(0, 0, 0, 0.02);
+}
+
 .Listbox .ListboxItem.active {
 	background-color: rgba(0, 0, 0, 0.04);
 }

editor/js/Sidebar.Project.Resources.js

@@ -0,0 +1,211 @@
+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 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 );
+						texturesUsed.add( value.uuid );
+
+					}
+
+				}
+
+			}
+
+		}
+
+		texturesListbox.setItems( textures );
+		texturesInfo.setValue( textures.length + ' ' + strings.getKey( 'sidebar/project/textures' ).toLowerCase() );
+
+	}
+
+	function refreshUI() {
+
+		refreshGeometriesUI();
+		refreshMaterialsUI();
+		refreshTexturesUI();
+
+	}
+
+	signals.editorCleared.add( refreshUI );
+	signals.sceneGraphChanged.add( refreshUI );
+	signals.geometryChanged.add( refreshGeometriesUI );
+	signals.materialAdded.add( refreshMaterialsUI );
+	signals.materialChanged.add( refreshMaterialsUI );
+	signals.materialRemoved.add( refreshMaterialsUI );
+
+	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 };

editor/js/Sidebar.Project.js

@@ -1,8 +1,8 @@
 import { UISpan } from './libs/ui.js';
 
 import { SidebarProjectApp } from './Sidebar.Project.App.js';
-/* import { SidebarProjectMaterials } from './Sidebar.Project.Materials.js'; */
 import { SidebarProjectRenderer } from './Sidebar.Project.Renderer.js';
+import { SidebarProjectResources } from './Sidebar.Project.Resources.js';
 
 function SidebarProject( editor ) {
 
@@ -10,10 +10,10 @@ function SidebarProject( editor ) {
 
 	container.add( new SidebarProjectRenderer( editor ) );
 
-	/* container.add( new SidebarProjectMaterials( editor ) ); */
-
 	container.add( new SidebarProjectApp( editor ) );
 
+	container.add( new SidebarProjectResources( editor ) );
+
 	return container;
 
 }

editor/js/Strings.js

@@ -354,7 +354,9 @@ function Strings( config ) {
 			'sidebar/project/antialias': 'آنتی الآیس',
 			'sidebar/project/shadows': 'سایه ها',
 			'sidebar/project/toneMapping': 'تون مپینگ',
+			'sidebar/project/geometries': 'هندسه ها',
 			'sidebar/project/materials': 'متریال ها',
+			'sidebar/project/textures': 'تکستچرها',
 			'sidebar/project/Assign': 'اختصاص',
 
 			'sidebar/project/app': 'اپ',
@@ -762,7 +764,9 @@ function Strings( config ) {
 			'sidebar/project/antialias': 'Antialias',
 			'sidebar/project/shadows': 'Shadows',
 			'sidebar/project/toneMapping': 'Tonemapping',
+			'sidebar/project/geometries': 'Geometries',
 			'sidebar/project/materials': 'Materials',
+			'sidebar/project/textures': 'Textures',
 			'sidebar/project/Assign': 'Assign',
 
 			'sidebar/project/app': 'App',
@@ -1171,7 +1175,9 @@ function Strings( config ) {
 			'sidebar/project/antialias': 'Anticrénelage',
 			'sidebar/project/shadows': 'Ombres',
 			'sidebar/project/toneMapping': 'Mappage des nuances',
+			'sidebar/project/geometries': 'Géométries',
 			'sidebar/project/materials': 'Matériaux',
+			'sidebar/project/textures': 'Textures',
 			'sidebar/project/Assign': 'Attribuer',
 
 			'sidebar/project/app': 'App',
@@ -1580,7 +1586,9 @@ function Strings( config ) {
 			'sidebar/project/antialias': '抗锯齿',
 			'sidebar/project/shadows': '阴影',
 			'sidebar/project/toneMapping': '色调映射',
+			'sidebar/project/geometries': '几何体',
 			'sidebar/project/materials': '材质',
+			'sidebar/project/textures': '纹理',
 			'sidebar/project/Assign': '应用',
 
 			'sidebar/project/app': 'App',
@@ -1989,7 +1997,9 @@ function Strings( config ) {
 			'sidebar/project/antialias': 'アンチエイリアス',
 			'sidebar/project/shadows': 'シャドウ',
 			'sidebar/project/toneMapping': 'トーンマッピング',
+			'sidebar/project/geometries': 'ジオメトリ',
 			'sidebar/project/materials': 'マテリアル',
+			'sidebar/project/textures': 'テクスチャ',
 			'sidebar/project/Assign': '割り当て',
 
 			'sidebar/project/app': 'アプリ',
@@ -2397,7 +2407,9 @@ function Strings( config ) {
 			'sidebar/project/antialias': '안티앨리어싱',
 			'sidebar/project/shadows': '그림자',
 			'sidebar/project/toneMapping': '톤 매핑',
+			'sidebar/project/geometries': '지오메트리',
 			'sidebar/project/materials': '머티리얼',
+			'sidebar/project/textures': '텍스처',
 			'sidebar/project/Assign': '할당',
 
 			'sidebar/project/app': '앱',