Editor: Added Add / Camera submenu.

mrdoob · May 8, 2024 · c5ae348 · c5ae348
1 parent 65c4c27
commit c5ae348
Show file tree

Hide file tree

Showing 2 changed files with 40 additions and 16 deletions.
diff --git a/editor/js/Menubar.Add.js b/editor/js/Menubar.Add.js
@@ -453,15 +453,35 @@ function MenubarAdd( editor ) {
 	} );
 	lightSubmenu.add( option );
 
-	//
+	// Camera
 
-	options.add( new UIHorizontalRule() );
+	const cameraSubmenuTitle = new UIRow().setTextContent( strings.getKey( 'menubar/add/camera' ) ).addClass( 'option' ).addClass( 'submenu-title' );
+	cameraSubmenuTitle.onMouseOver( function () {
+
+		const { top, right } = cameraSubmenuTitle.dom.getBoundingClientRect();
+		const { paddingTop } = getComputedStyle( this.dom );
+
+		cameraSubmenu.setLeft( right + 'px' );
+		cameraSubmenu.setTop( top - parseFloat( paddingTop ) + 'px' );
+		cameraSubmenu.setStyle( 'max-height', [ `calc( 100vh - ${top}px )` ] );
+		cameraSubmenu.setDisplay( 'block' );
+
+	} );
+	cameraSubmenuTitle.onMouseOut( function () {
 
-	// OrthographicCamera
+		cameraSubmenu.setDisplay( 'none' );
+
+	} );
+	options.add( cameraSubmenuTitle );
+
+	const cameraSubmenu = new UIPanel().setPosition( 'fixed' ).addClass( 'options' ).setDisplay( 'none' );
+	cameraSubmenuTitle.add( cameraSubmenu );
+
+	// Camera / Orthographic
 
 	option = new UIRow();
 	option.setClass( 'option' );
-	option.setTextContent( strings.getKey( 'menubar/add/orthographiccamera' ) );
+	option.setTextContent( strings.getKey( 'menubar/add/camera/orthographic' ) );
 	option.onClick( function () {
 
 		const aspect = editor.camera.aspect;
@@ -471,13 +491,13 @@ function MenubarAdd( editor ) {
 		editor.execute( new AddObjectCommand( editor, camera ) );
 
 	} );
-	options.add( option );
+	cameraSubmenu.add( option );
 
-	// PerspectiveCamera
+	// Camera / Perspective
 
 	option = new UIRow();
 	option.setClass( 'option' );
-	option.setTextContent( strings.getKey( 'menubar/add/perspectivecamera' ) );
+	option.setTextContent( strings.getKey( 'menubar/add/camera/perspective' ) );
 	option.onClick( function () {
 
 		const camera = new THREE.PerspectiveCamera();
@@ -486,7 +506,7 @@ function MenubarAdd( editor ) {
 		editor.execute( new AddObjectCommand( editor, camera ) );
 
 	} );
-	options.add( option );
+	cameraSubmenu.add( option );
 
 	return container;
 

diff --git a/editor/js/Strings.js b/editor/js/Strings.js
@@ -77,8 +77,9 @@ function Strings( config ) {
 			'menubar/add/light/point': 'Point',
 			'menubar/add/light/spot': 'Spot',
 
-			'menubar/add/perspectivecamera': 'PerspectiveCamera',
-			'menubar/add/orthographiccamera': 'OrthographicCamera',
+			'menubar/add/camera': 'Camera',
+			'menubar/add/camera/perspective': 'Perspective',
+			'menubar/add/camera/orthographic': 'Orthographic',
 
 			'menubar/status/autosave': 'autosave',
 
@@ -461,8 +462,9 @@ function Strings( config ) {
 			'menubar/add/light/point': 'Ponctuelle',
 			'menubar/add/light/spot': 'Projecteur',
 
-			'menubar/add/perspectivecamera': 'Caméra perspective',
-			'menubar/add/orthographiccamera': 'Caméra orthographique',
+			'menubar/add/camera': 'Caméra',
+			'menubar/add/camera/perspective': 'Perspective',
+			'menubar/add/camera/orthographic': 'Orthographique',
 
 			'menubar/status/autosave': 'enregistrement automatique',
 
@@ -845,8 +847,9 @@ function Strings( config ) {
 			'menubar/add/light/point': '点光源',
 			'menubar/add/light/spot': '聚光灯',
 
-			'menubar/add/perspectivecamera': '透视相机',
-			'menubar/add/orthographiccamera': '正交相机',
+			'menubar/add/camera': 'Camera',
+			'menubar/add/camera/perspective': '透视相机',
+			'menubar/add/camera/orthographic': '正交相机',
 
 			'menubar/status/autosave': '自动保存',
 
@@ -1229,8 +1232,9 @@ function Strings( config ) {
 			'menubar/add/light/point': 'ポイント',
 			'menubar/add/light/spot': 'スポット',
 
-			'menubar/add/perspectivecamera': '透視投影カメラ',
-			'menubar/add/orthographiccamera': '平行投影カメラ',
+			'menubar/add/camera': 'カメラ',
+			'menubar/add/camera/perspective': '透視投影',
+			'menubar/add/camera/orthographic': '平行投影',
 
 			'menubar/status/autosave': '自動保存',