Editor: Moved Materials panel to its own file.

editor/js/Sidebar.Project.Materials.js

@@ -0,0 +1,82 @@
+import { UIBreak, UIPanel, UIRow, UIText, UIListbox, UIButton } from './libs/ui.js';
+
+import { SetMaterialCommand } from './commands/SetMaterialCommand.js';
+
+function SidebarProjectMaterials( editor ) {
+
+	var signals = editor.signals;
+	var strings = editor.strings;
+
+	var container = new UIPanel();
+
+	var headerRow = new UIRow();
+	headerRow.add( new UIText( strings.getKey( 'sidebar/project/materials' ).toUpperCase() ) );
+
+	container.add( headerRow );
+
+	var listbox = new UIListbox();
+	container.add( listbox );
+
+	container.add( new UIBreak() );
+
+	var buttonsRow = new UIRow();
+	container.add( buttonsRow );
+
+	var assignMaterial = new UIButton().setLabel( strings.getKey( 'sidebar/project/Assign' ) );
+	assignMaterial.onClick( function () {
+
+		var selectedObject = editor.selected;
+
+		if ( selectedObject !== null ) {
+
+			var oldMaterial = selectedObject.material;
+
+			// only assing materials to objects with a material property (e.g. avoid assigning material to THREE.Group)
+
+			if ( oldMaterial !== undefined ) {
+
+				var material = editor.getMaterialById( parseInt( listbox.getValue() ) );
+
+				if ( material !== undefined ) {
+
+					editor.removeMaterial( oldMaterial );
+					editor.execute( new SetMaterialCommand( editor, selectedObject, material ) );
+					editor.addMaterial( material );
+
+				}
+
+			}
+
+		}
+
+	} );
+	buttonsRow.add( assignMaterial );
+
+	// Signals
+
+	function refreshMaterialBrowserUI() {
+
+		listbox.setItems( Object.values( editor.materials ) );
+
+	}
+
+	signals.objectSelected.add( function ( object ) {
+
+		if ( object !== null ) {
+
+			var index = Object.values( editor.materials ).indexOf( object.material );
+			listbox.selectIndex( index );
+
+		}
+
+	} );
+
+	signals.materialAdded.add( refreshMaterialBrowserUI );
+	signals.materialChanged.add( refreshMaterialBrowserUI );
+	signals.materialRemoved.add( refreshMaterialBrowserUI );
+
+	return container;
+
+}
+
+export { SidebarProjectMaterials };

editor/js/Sidebar.Project.js

@@ -1,13 +1,11 @@
-import { UIPanel, UIRow, UIInput, UICheckbox, UIText, UIListbox, UISpan, UIButton } from './libs/ui.js';
+import { UIPanel, UIRow, UIInput, UICheckbox, UIText, UISpan } from './libs/ui.js';
 
+import { SidebarProjectMaterials } from './Sidebar.Project.Materials.js';
 import { SidebarProjectRenderer } from './Sidebar.Project.Renderer.js';
 
-import { SetMaterialCommand } from './commands/SetMaterialCommand.js';
-
 function SidebarProject( editor ) {
 
 	var config = editor.config;
-	var signals = editor.signals;
 	var strings = editor.strings;
 
 	var container = new UISpan();
@@ -60,91 +58,11 @@ function SidebarProject( editor ) {
 
 	projectsettings.add( vrRow );
 
-	// Renderer
+	//
 
+	container.add( new SidebarProjectMaterials( editor ) );
 	container.add( new SidebarProjectRenderer( editor ) );
 
-	// Materials
-
-	var materials = new UIPanel();
-
-	var headerRow = new UIRow();
-	headerRow.add( new UIText( strings.getKey( 'sidebar/project/materials' ).toUpperCase() ) );
-
-	materials.add( headerRow );
-
-	var listbox = new UIListbox();
-	materials.add( listbox );
-
-	var buttonsRow = new UIRow();
-	buttonsRow.setPadding( '10px 0px' );
-	materials.add( buttonsRow );
-
-	/*
-	var addButton = new UI.Button().setLabel( 'Add' ).setMarginRight( '5px' );
-	addButton.onClick( function () {
-
-		editor.addMaterial( new THREE.MeshStandardMaterial() );
-
-	} );
-	buttonsRow.add( addButton );
-	*/
-
-	var assignMaterial = new UIButton().setLabel( strings.getKey( 'sidebar/project/Assign' ) ).setMargin( '0px 5px' );
-	assignMaterial.onClick( function () {
-
-		var selectedObject = editor.selected;
-
-		if ( selectedObject !== null ) {
-
-			var oldMaterial = selectedObject.material;
-
-			// only assing materials to objects with a material property (e.g. avoid assigning material to THREE.Group)
-
-			if ( oldMaterial !== undefined ) {
-
-				var material = editor.getMaterialById( parseInt( listbox.getValue() ) );
-
-				if ( material !== undefined ) {
-
-					editor.removeMaterial( oldMaterial );
-					editor.execute( new SetMaterialCommand( editor, selectedObject, material ) );
-					editor.addMaterial( material );
-
-				}
-
-			}
-
-		}
-
-	} );
-	buttonsRow.add( assignMaterial );
-
-	container.add( materials );
-
-	// signals
-
-	signals.objectSelected.add( function ( object ) {
-
-		if ( object !== null ) {
-
-			var index = Object.values( editor.materials ).indexOf( object.material );
-			listbox.selectIndex( index );
-
-		}
-
-	} );
-
-	signals.materialAdded.add( refreshMaterialBrowserUI );
-	signals.materialChanged.add( refreshMaterialBrowserUI );
-	signals.materialRemoved.add( refreshMaterialBrowserUI );
-
-	function refreshMaterialBrowserUI() {
-
-		listbox.setItems( Object.values( editor.materials ) );
-
-	}
-
 	return container;
 
 }

editor/sw.js

@@ -132,6 +132,7 @@ const assets = [
 	'./js/Sidebar.js',
 	'./js/Sidebar.Scene.js',
 	'./js/Sidebar.Project.js',
+	'./js/Sidebar.Project.Materials.js',
 	'./js/Sidebar.Project.Renderer.js',
 	'./js/Sidebar.Settings.js',
 	'./js/Sidebar.Settings.Shortcuts.js',