Editor: Added Add / Light submenu.

mrdoob · May 7, 2024 · cf29a58 · cf29a58
1 parent c857c1e
commit cf29a58
Show file tree

Hide file tree

Showing 2 changed files with 56 additions and 32 deletions.
diff --git a/editor/js/Menubar.Add.js b/editor/js/Menubar.Add.js
@@ -327,15 +327,35 @@ function MenubarAdd( editor ) {
 	} );
 	meshSubmenu.add( option );
 
-	//
+	// Light
 
-	options.add( new UIHorizontalRule() );
+	const lightSubmenuTitle = new UIRow().setTextContent( strings.getKey( 'menubar/add/light' ) ).addClass( 'option' ).addClass( 'submenu-title' );
+	lightSubmenuTitle.onMouseOver( function () {
+
+		const { top, right } = lightSubmenuTitle.dom.getBoundingClientRect();
+		const { paddingTop } = getComputedStyle( this.dom );
+
+		lightSubmenu.setLeft( right + 'px' );
+		lightSubmenu.setTop( top - parseFloat( paddingTop ) + 'px' );
+		lightSubmenu.setStyle( 'max-height', [ `calc( 100vh - ${top}px )` ] );
+		lightSubmenu.setDisplay( 'block' );
+
+	} );
+	lightSubmenuTitle.onMouseOut( function () {
+
+		lightSubmenu.setDisplay( 'none' );
+
+	} );
+	options.add( lightSubmenuTitle );
+
+	const lightSubmenu = new UIPanel().setPosition( 'fixed' ).addClass( 'options' ).setDisplay( 'none' );
+	lightSubmenuTitle.add( lightSubmenu );
 
 	// AmbientLight
 
 	option = new UIRow();
 	option.setClass( 'option' );
-	option.setTextContent( strings.getKey( 'menubar/add/ambientlight' ) );
+	option.setTextContent( strings.getKey( 'menubar/add/light/ambient' ) );
 	option.onClick( function () {
 
 		const color = 0x222222;
@@ -346,13 +366,13 @@ function MenubarAdd( editor ) {
 		editor.execute( new AddObjectCommand( editor, light ) );
 
 	} );
-	options.add( option );
+	lightSubmenu.add( option );
 
 	// DirectionalLight
 
 	option = new UIRow();
 	option.setClass( 'option' );
-	option.setTextContent( strings.getKey( 'menubar/add/directionallight' ) );
+	option.setTextContent( strings.getKey( 'menubar/add/light/directional' ) );
 	option.onClick( function () {
 
 		const color = 0xffffff;
@@ -367,13 +387,13 @@ function MenubarAdd( editor ) {
 		editor.execute( new AddObjectCommand( editor, light ) );
 
 	} );
-	options.add( option );
+	lightSubmenu.add( option );
 
 	// HemisphereLight
 
 	option = new UIRow();
 	option.setClass( 'option' );
-	option.setTextContent( strings.getKey( 'menubar/add/hemispherelight' ) );
+	option.setTextContent( strings.getKey( 'menubar/add/light/hemisphere' ) );
 	option.onClick( function () {
 
 		const skyColor = 0x00aaff;
@@ -388,13 +408,13 @@ function MenubarAdd( editor ) {
 		editor.execute( new AddObjectCommand( editor, light ) );
 
 	} );
-	options.add( option );
+	lightSubmenu.add( option );
 
 	// PointLight
 
 	option = new UIRow();
 	option.setClass( 'option' );
-	option.setTextContent( strings.getKey( 'menubar/add/pointlight' ) );
+	option.setTextContent( strings.getKey( 'menubar/add/light/point' ) );
 	option.onClick( function () {
 
 		const color = 0xffffff;
@@ -407,13 +427,13 @@ function MenubarAdd( editor ) {
 		editor.execute( new AddObjectCommand( editor, light ) );
 
 	} );
-	options.add( option );
+	lightSubmenu.add( option );
 
 	// SpotLight
 
 	option = new UIRow();
 	option.setClass( 'option' );
-	option.setTextContent( strings.getKey( 'menubar/add/spotlight' ) );
+	option.setTextContent( strings.getKey( 'menubar/add/light/spot' ) );
 	option.onClick( function () {
 
 		const color = 0xffffff;
@@ -431,7 +451,7 @@ function MenubarAdd( editor ) {
 		editor.execute( new AddObjectCommand( editor, light ) );
 
 	} );
-	options.add( option );
+	lightSubmenu.add( option );
 
 	//
 

diff --git a/editor/js/Strings.js b/editor/js/Strings.js
@@ -70,11 +70,12 @@ function Strings( config ) {
 			'menubar/add/mesh/lathe': 'Lathe',
 			'menubar/add/mesh/sprite': 'Sprite',
 
-			'menubar/add/pointlight': 'PointLight',
-			'menubar/add/spotlight': 'SpotLight',
-			'menubar/add/directionallight': 'DirectionalLight',
-			'menubar/add/hemispherelight': 'HemisphereLight',
-			'menubar/add/ambientlight': 'AmbientLight',
+			'menubar/add/light': 'Light',
+			'menubar/add/light/ambient': 'Ambient',
+			'menubar/add/light/directional': 'Directional',
+			'menubar/add/light/hemisphere': 'Hemisphere',
+			'menubar/add/light/point': 'Point',
+			'menubar/add/light/spot': 'Spot',
 
 			'menubar/add/perspectivecamera': 'PerspectiveCamera',
 			'menubar/add/orthographiccamera': 'OrthographicCamera',
@@ -453,11 +454,12 @@ function Strings( config ) {
 			'menubar/add/mesh/lathe': 'Tour',
 			'menubar/add/mesh/sprite': 'Sprite',
 
-			'menubar/add/pointlight': 'Lumière ponctuelle',
-			'menubar/add/spotlight': 'Projecteur',
-			'menubar/add/directionallight': 'Lumière directionnelle',
-			'menubar/add/hemispherelight': 'Lumière hémisphérique',
-			'menubar/add/ambientlight': 'Lumière ambiante',
+			'menubar/add/light': 'Lumière',
+			'menubar/add/light/ambient': 'Ambiante',
+			'menubar/add/light/directional': 'Directionnelle',
+			'menubar/add/light/hemisphere': 'Hémisphérique',
+			'menubar/add/light/point': 'Ponctuelle',
+			'menubar/add/light/spot': 'Projecteur',
 
 			'menubar/add/perspectivecamera': 'Caméra perspective',
 			'menubar/add/orthographiccamera': 'Caméra orthographique',
@@ -836,11 +838,12 @@ function Strings( config ) {
 			'menubar/add/mesh/lathe': '酒杯',
 			'menubar/add/mesh/sprite': '精灵',
 
-			'menubar/add/pointlight': '点光源',
-			'menubar/add/spotlight': '聚光灯',
-			'menubar/add/directionallight': '平行光',
-			'menubar/add/hemispherelight': '半球光',
-			'menubar/add/ambientlight': '环境光',
+			'menubar/add/light': 'Light',
+			'menubar/add/light/ambient': '环境光',
+			'menubar/add/light/directional': '平行光',
+			'menubar/add/light/hemisphere': '半球光',
+			'menubar/add/light/point': '点光源',
+			'menubar/add/light/spot': '聚光灯',
 
 			'menubar/add/perspectivecamera': '透视相机',
 			'menubar/add/orthographiccamera': '正交相机',
@@ -1219,11 +1222,12 @@ function Strings( config ) {
 			'menubar/add/mesh/lathe': '旋盤形',
 			'menubar/add/mesh/sprite': 'スプライト',
 
-			'menubar/add/pointlight': 'ポイントライト',
-			'menubar/add/spotlight': 'スポットライト',
-			'menubar/add/directionallight': 'ディレクショナルライト',
-			'menubar/add/hemispherelight': 'ヘミスフィアライト',
-			'menubar/add/ambientlight': 'アンビエントライト',
+			'menubar/add/light': 'Light',
+			'menubar/add/light/ambient': 'アンビエントライト',
+			'menubar/add/light/directional': 'ディレクショナルライト',
+			'menubar/add/light/hemisphere': 'ヘミスフィアライト',
+			'menubar/add/light/point': 'ポイントライト',
+			'menubar/add/light/spot': 'スポットライト',
 
 			'menubar/add/perspectivecamera': '透視投影カメラ',
 			'menubar/add/orthographiccamera': '平行投影カメラ',