add appearance submenu (#28421)

Author: ycw

editor/css/main.css

@@ -414,6 +414,21 @@ select {
 					background: transparent;
 				}
 
+				#menubar .menu .options .option.toggle::before {
+
+					content: ' ';
+					display: inline-block;
+					width: 16px;
+
+				}
+
+				#menubar .menu .options .option.toggle-on::before {
+
+					content: '✓';
+					font-size: 12px;
+
+				}
+
 				#menubar .submenu-title::after {
 					content: '⏵';
 					float: right;
@@ -427,6 +442,8 @@ select {
 			cursor: not-allowed;
 		}
 
+		
+
 #sidebar {
 	position: absolute;
 	right: 0;

editor/js/Editor.js

@@ -82,7 +82,6 @@ function Editor() {
 
 		windowResize: new Signal(),
 
-		showGridChanged: new Signal(),
 		showHelpersChanged: new Signal(),
 		refreshSidebarObject3D: new Signal(),
 		refreshSidebarEnvironment: new Signal(),

editor/js/Menubar.View.js

@@ -1,4 +1,4 @@
-import { UIPanel, UIRow } from './libs/ui.js';
+import { UIHorizontalRule, UIPanel, UIRow } from './libs/ui.js';
 
 function MenubarView( editor ) {
 
@@ -19,7 +19,7 @@ function MenubarView( editor ) {
 
 	// Fullscreen
 
-	const option = new UIRow();
+	let option = new UIRow();
 	option.setClass( 'option' );
 	option.setTextContent( strings.getKey( 'menubar/view/fullscreen' ) );
 	option.onClick( function () {
@@ -103,6 +103,100 @@ function MenubarView( editor ) {
 
 	}
 
+	//
+
+	options.add( new UIHorizontalRule() );
+
+	// Appearance
+
+	const appearanceStates = {
+
+		gridHelper: true,
+		cameraHelpers: true,
+		lightHelpers: true,
+		skeletonHelpers: true
+
+	};
+
+	const appearanceSubmenuTitle = new UIRow().setTextContent( 'Appearance' ).addClass( 'option' ).addClass( 'submenu-title' );
+	appearanceSubmenuTitle.onMouseOver( function () {
+
+		const { top, right } = appearanceSubmenuTitle.dom.getBoundingClientRect();
+		const { paddingTop } = getComputedStyle( this.dom );
+		appearanceSubmenu.setLeft( right + 'px' );
+		appearanceSubmenu.setTop( top - parseFloat( paddingTop ) + 'px' );
+		appearanceSubmenu.setStyle( 'max-height', [ `calc( 100vh - ${top}px )` ] );
+		appearanceSubmenu.setDisplay( 'block' );
+
+	} );
+	appearanceSubmenuTitle.onMouseOut( function () {
+
+		appearanceSubmenu.setDisplay( 'none' );
+
+	} );
+	options.add( appearanceSubmenuTitle );
+
+	const appearanceSubmenu = new UIPanel().setPosition( 'fixed' ).addClass( 'options' ).setDisplay( 'none' );
+	appearanceSubmenuTitle.add( appearanceSubmenu );
+
+	// Appearance / Grid Helper
+
+	option = new UIRow().addClass( 'option' ).addClass( 'toggle' ).setTextContent( 'Grid Helper' ).onClick( function () {
+
+		appearanceStates.gridHelper = ! appearanceStates.gridHelper;
+
+		this.toggleClass( 'toggle-on', appearanceStates.gridHelper );
+
+		signals.showHelpersChanged.dispatch( appearanceStates );
+
+	} ).toggleClass( 'toggle-on', appearanceStates.gridHelper );
+
+	appearanceSubmenu.add( option );
+
+	// Appearance / Camera Helpers
+
+	option = new UIRow().addClass( 'option' ).addClass( 'toggle' ).setTextContent( 'Camera Helpers' ).onClick( function () {
+
+		appearanceStates.cameraHelpers = ! appearanceStates.cameraHelpers;
+
+		this.toggleClass( 'toggle-on', appearanceStates.cameraHelpers );
+
+		signals.showHelpersChanged.dispatch( appearanceStates );
+
+	} ).toggleClass( 'toggle-on', appearanceStates.cameraHelpers );
+
+	appearanceSubmenu.add( option );
+
+	// Appearance / Light Helpers
+
+	option = new UIRow().addClass( 'option' ).addClass( 'toggle' ).setTextContent( 'Light Helpers' ).onClick( function () {
+
+		appearanceStates.lightHelpers = ! appearanceStates.lightHelpers;
+
+		this.toggleClass( 'toggle-on', appearanceStates.lightHelpers );
+
+		signals.showHelpersChanged.dispatch( appearanceStates );
+
+	} ).toggleClass( 'toggle-on', appearanceStates.lightHelpers );
+
+	appearanceSubmenu.add( option );
+
+	// Appearance / Skeleton Helpers
+
+	option = new UIRow().addClass( 'option' ).addClass( 'toggle' ).setTextContent( 'Skeleton Helpers' ).onClick( function () {
+
+		appearanceStates.skeletonHelpers = ! appearanceStates.skeletonHelpers;
+
+		this.toggleClass( 'toggle-on', appearanceStates.skeletonHelpers );
+
+		signals.showHelpersChanged.dispatch( appearanceStates );
+
+	} ).toggleClass( 'toggle-on', appearanceStates.skeletonHelpers );
+
+	appearanceSubmenu.add( option );
+
+	//
+
 	return container;
 
 }

editor/js/Viewport.Controls.js

@@ -1,37 +1,15 @@
 import { UIPanel, UISelect } from './libs/ui.js';
-import { UIBoolean } from './libs/ui.three.js';
 
 function ViewportControls( editor ) {
 
 	const signals = editor.signals;
-	const strings = editor.strings;
 
 	const container = new UIPanel();
 	container.setPosition( 'absolute' );
 	container.setRight( '10px' );
 	container.setTop( '10px' );
 	container.setColor( '#ffffff' );
 
-	// grid
-
-	const gridCheckbox = new UIBoolean( true, strings.getKey( 'viewport/controls/grid' ) );
-	gridCheckbox.onChange( function () {
-
-		signals.showGridChanged.dispatch( this.getValue() );
-
-	} );
-	container.add( gridCheckbox );
-
-	// helpers
-
-	const helpersCheckbox = new UIBoolean( true, strings.getKey( 'viewport/controls/helpers' ) );
-	helpersCheckbox.onChange( function () {
-
-		signals.showHelpersChanged.dispatch( this.getValue() );
-
-	} );
-	container.add( helpersCheckbox );
-
 	// camera
 
 	const cameraSelect = new UISelect();

editor/js/Viewport.js

@@ -697,18 +697,56 @@ function Viewport( editor ) {
 
 	} );
 
-	signals.showGridChanged.add( function ( value ) {
+	signals.showHelpersChanged.add( function ( appearanceStates ) {
 
-		grid.visible = value;
+		grid.visible = appearanceStates.gridHelper;
 
-		render();
+		sceneHelpers.traverse( function ( object ) {
 
-	} );
+			switch ( object.type ) {
+
+				case 'CameraHelper':
+
+				{
+
+					object.visible = appearanceStates.cameraHelpers;
+					break;
+
+				}
+
+				case 'PointLightHelper':
+				case 'DirectionalLightHelper':
+				case 'SpotLightHelper':
+				case 'HemisphereLightHelper':
+
+				{
+
+					object.visible = appearanceStates.lightHelpers;
+					break;
+
+				}
 
-	signals.showHelpersChanged.add( function ( value ) {
+				case 'SkeletonHelper':
+
+				{
+
+					object.visible = appearanceStates.skeletonHelpers;
+					break;
+
+				}
+
+				default:
+
+				{
+
+					// not a helper, skip.
+
+				}
+
+			}
+
+		} );
 
-		sceneHelpers.visible = value;
-		transformControls.enabled = value;
 
 		render();
 

editor/js/libs/ui.js

@@ -98,6 +98,14 @@ class UIElement {
 
 	}
 
+	toggleClass( name, toggle ) {
+
+		this.dom.classList.toggle( name, toggle );
+
+		return this;
+
+	}
+
 	setStyle( style, array ) {
 
 		for ( let i = 0; i < array.length; i ++ ) {