Editor: Added submenu navigation (#28311)

* add submenu

* rename js variables

* re rename js variables

editor/css/main.css

@@ -367,13 +367,14 @@ select {
 			display: none;
 			padding: 5px 0;
 			background: #eee;
-			width: 150px;
-			max-height: calc(100% - 80px);
+			min-width: 150px;
+			max-height: calc(100vh - 80px);
 			overflow: auto;
 		}
 
 		#menubar .menu:hover .options {
 			display: block;
+			box-shadow: 0 5px 10px -5px #000;
 		}
 
 			#menubar .menu .options hr {
@@ -397,6 +398,11 @@ select {
 					background: transparent;
 				}
 
+				#menubar .submenu-title::after {
+					content: '>';
+					float: right;
+				}
+
 		#menubar .menu .options .inactive {
 			color: #bbb;
 			background-color: transparent;
@@ -533,7 +539,7 @@ select {
 	}
 
 	#menubar .menu .options {
-		max-height: calc(100% - 372px);
+		max-height: calc(100% - 80px);
 	}
 
 	#menubar .menu.right {

editor/js/Menubar.Add.js

@@ -39,6 +39,30 @@ function MenubarAdd( editor ) {
 
 	options.add( new UIHorizontalRule() );
 
+
+	// Mesh (submenu)
+
+	const meshSubmenuTitle = new UIRow().setTextContent( strings.getKey( 'menubar/add/mesh' ) ).addClass( 'option' ).addClass( 'submenu-title' );
+	meshSubmenuTitle.onMouseOver( function () {
+
+		const { top, right } = meshSubmenuTitle.dom.getBoundingClientRect();
+		const { paddingTop } = getComputedStyle( this.dom );
+		meshSubmenu.setLeft( right + 'px' );
+		meshSubmenu.setTop( top - parseFloat( paddingTop ) + 'px' );
+		meshSubmenu.setStyle( 'max-height', [ `calc( 100vh - ${top}px )` ] );
+		meshSubmenu.setDisplay( 'block' );
+
+	} );
+	meshSubmenuTitle.onMouseOut( function () {
+
+		meshSubmenu.setDisplay( 'none' );
+
+	} );
+	options.add( meshSubmenuTitle );
+
+	const meshSubmenu = new UIPanel().setPosition( 'fixed' ).addClass( 'options' ).setDisplay( 'none' );
+	meshSubmenuTitle.add( meshSubmenu );
+
 	// Box
 
 	option = new UIRow();
@@ -53,7 +77,7 @@ function MenubarAdd( editor ) {
 		editor.execute( new AddObjectCommand( editor, mesh ) );
 
 	} );
-	options.add( option );
+	meshSubmenu.add( option );
 
 	// Capsule
 
@@ -70,7 +94,7 @@ function MenubarAdd( editor ) {
 		editor.execute( new AddObjectCommand( editor, mesh ) );
 
 	} );
-	options.add( option );
+	meshSubmenu.add( option );
 
 	// Circle
 
@@ -86,7 +110,7 @@ function MenubarAdd( editor ) {
 		editor.execute( new AddObjectCommand( editor, mesh ) );
 
 	} );
-	options.add( option );
+	meshSubmenu.add( option );
 
 	// Cylinder
 
@@ -102,7 +126,7 @@ function MenubarAdd( editor ) {
 		editor.execute( new AddObjectCommand( editor, mesh ) );
 
 	} );
-	options.add( option );
+	meshSubmenu.add( option );
 
 	// Dodecahedron
 
@@ -118,7 +142,7 @@ function MenubarAdd( editor ) {
 		editor.execute( new AddObjectCommand( editor, mesh ) );
 
 	} );
-	options.add( option );
+	meshSubmenu.add( option );
 
 	// Icosahedron
 
@@ -134,7 +158,7 @@ function MenubarAdd( editor ) {
 		editor.execute( new AddObjectCommand( editor, mesh ) );
 
 	} );
-	options.add( option );
+	meshSubmenu.add( option );
 
 	// Lathe
 
@@ -150,7 +174,7 @@ function MenubarAdd( editor ) {
 		editor.execute( new AddObjectCommand( editor, mesh ) );
 
 	} );
-	options.add( option );
+	meshSubmenu.add( option );
 
 	// Octahedron
 
@@ -166,7 +190,7 @@ function MenubarAdd( editor ) {
 		editor.execute( new AddObjectCommand( editor, mesh ) );
 
 	} );
-	options.add( option );
+	meshSubmenu.add( option );
 
 	// Plane
 
@@ -183,7 +207,7 @@ function MenubarAdd( editor ) {
 		editor.execute( new AddObjectCommand( editor, mesh ) );
 
 	} );
-	options.add( option );
+	meshSubmenu.add( option );
 
 	// Ring
 
@@ -199,7 +223,7 @@ function MenubarAdd( editor ) {
 		editor.execute( new AddObjectCommand( editor, mesh ) );
 
 	} );
-	options.add( option );
+	meshSubmenu.add( option );
 
 	// Sphere
 
@@ -215,7 +239,7 @@ function MenubarAdd( editor ) {
 		editor.execute( new AddObjectCommand( editor, mesh ) );
 
 	} );
-	options.add( option );
+	meshSubmenu.add( option );
 
 	// Sprite
 
@@ -230,7 +254,7 @@ function MenubarAdd( editor ) {
 		editor.execute( new AddObjectCommand( editor, sprite ) );
 
 	} );
-	options.add( option );
+	meshSubmenu.add( option );
 
 	// Tetrahedron
 
@@ -246,7 +270,7 @@ function MenubarAdd( editor ) {
 		editor.execute( new AddObjectCommand( editor, mesh ) );
 
 	} );
-	options.add( option );
+	meshSubmenu.add( option );
 
 	// Torus
 
@@ -262,7 +286,7 @@ function MenubarAdd( editor ) {
 		editor.execute( new AddObjectCommand( editor, mesh ) );
 
 	} );
-	options.add( option );
+	meshSubmenu.add( option );
 
 	// TorusKnot
 
@@ -278,7 +302,7 @@ function MenubarAdd( editor ) {
 		editor.execute( new AddObjectCommand( editor, mesh ) );
 
 	} );
-	options.add( option );
+	meshSubmenu.add( option );
 
 	// Tube
 
@@ -301,7 +325,7 @@ function MenubarAdd( editor ) {
 		editor.execute( new AddObjectCommand( editor, mesh ) );
 
 	} );
-	options.add( option );
+	meshSubmenu.add( option );
 
 	//
 

editor/js/Menubar.File.js

@@ -70,6 +70,29 @@ function MenubarFile( editor ) {
 
 	options.add( new UIHorizontalRule() );
 
+
+	// Export (submenu)
+
+	const fileExportSubmenuTitle = new UIRow().setTextContent( strings.getKey( 'menubar/file/export' ) ).addClass( 'option' ).addClass( 'submenu-title' );
+	fileExportSubmenuTitle.onMouseOver( function () {
+
+		const { top, right } = this.dom.getBoundingClientRect();
+		const { paddingTop } = getComputedStyle( this.dom );
+		fileExportSubmenu.setLeft( right + 'px' );
+		fileExportSubmenu.setTop( top - parseFloat( paddingTop ) + 'px' );
+		fileExportSubmenu.setDisplay( 'block' );
+
+	} );
+	fileExportSubmenuTitle.onMouseOut( function () {
+
+		fileExportSubmenu.setDisplay( 'none' );
+
+	} );
+	options.add( fileExportSubmenuTitle );
+
+	const fileExportSubmenu = new UIPanel().setPosition( 'fixed' ).addClass( 'options' ).setDisplay( 'none' );
+	fileExportSubmenuTitle.add( fileExportSubmenu );
+
 	// Export DRC
 
 	option = new UIRow();
@@ -105,7 +128,7 @@ function MenubarFile( editor ) {
 		saveArrayBuffer( result, 'model.drc' );
 
 	} );
-	options.add( option );
+	fileExportSubmenu.add( option );
 
 	// Export GLB
 
@@ -136,7 +159,7 @@ function MenubarFile( editor ) {
 		}, undefined, { binary: true, animations: optimizedAnimations } );
 
 	} );
-	options.add( option );
+	fileExportSubmenu.add( option );
 
 	// Export GLTF
 
@@ -168,7 +191,7 @@ function MenubarFile( editor ) {
 
 
 	} );
-	options.add( option );
+	fileExportSubmenu.add( option );
 
 	// Export OBJ
 
@@ -193,7 +216,7 @@ function MenubarFile( editor ) {
 		saveString( exporter.parse( object ), 'model.obj' );
 
 	} );
-	options.add( option );
+	fileExportSubmenu.add( option );
 
 	// Export PLY (ASCII)
 
@@ -213,7 +236,7 @@ function MenubarFile( editor ) {
 		} );
 
 	} );
-	options.add( option );
+	fileExportSubmenu.add( option );
 
 	// Export PLY (Binary)
 
@@ -233,7 +256,7 @@ function MenubarFile( editor ) {
 		}, { binary: true } );
 
 	} );
-	options.add( option );
+	fileExportSubmenu.add( option );
 
 	// Export STL (ASCII)
 
@@ -249,7 +272,7 @@ function MenubarFile( editor ) {
 		saveString( exporter.parse( editor.scene ), 'model.stl' );
 
 	} );
-	options.add( option );
+	fileExportSubmenu.add( option );
 
 	// Export STL (Binary)
 
@@ -265,7 +288,7 @@ function MenubarFile( editor ) {
 		saveArrayBuffer( exporter.parse( editor.scene, { binary: true } ), 'model-binary.stl' );
 
 	} );
-	options.add( option );
+	fileExportSubmenu.add( option );
 
 	// Export USDZ
 
@@ -281,7 +304,7 @@ function MenubarFile( editor ) {
 		saveArrayBuffer( await exporter.parseAsync( editor.scene ), 'model.usdz' );
 
 	} );
-	options.add( option );
+	fileExportSubmenu.add( option );
 
 	//
 

editor/js/Strings.js

@@ -40,6 +40,7 @@ function Strings( config ) {
 			'menubar/file': 'File',
 			'menubar/file/new': 'New',
 			'menubar/file/import': 'Import',
+			'menubar/file/export': 'Export',
 			'menubar/file/export/drc': 'Export DRC',
 			'menubar/file/export/glb': 'Export GLB',
 			'menubar/file/export/gltf': 'Export GLTF',
@@ -59,6 +60,7 @@ function Strings( config ) {
 
 			'menubar/add': 'Add',
 			'menubar/add/group': 'Group',
+			'menubar/add/mesh': 'Mesh',
 			'menubar/add/plane': 'Plane',
 			'menubar/add/box': 'Box',
 			'menubar/add/capsule': 'Capsule',
@@ -427,6 +429,7 @@ function Strings( config ) {
 			'menubar/file': 'Fichier',
 			'menubar/file/new': 'Nouveau',
 			'menubar/file/import': 'Importer',
+			'menubar/file/export': 'Exporter',
 			'menubar/file/export/drc': 'Exporter DRC',
 			'menubar/file/export/glb': 'Exporter GLB',
 			'menubar/file/export/gltf': 'Exporter GLTF',
@@ -446,6 +449,7 @@ function Strings( config ) {
 
 			'menubar/add': 'Ajouter',
 			'menubar/add/group': 'Groupe',
+			'menubar/add/mesh': 'Maille',
 			'menubar/add/plane': 'Plan',
 			'menubar/add/box': 'Cube',
 			'menubar/add/capsule': 'Capsule',
@@ -814,6 +818,7 @@ function Strings( config ) {
 			'menubar/file': '文件',
 			'menubar/file/new': '新建',
 			'menubar/file/import': '导入',
+			'menubar/file/export': '导出',
 			'menubar/file/export/drc': '导出DRC',
 			'menubar/file/export/glb': '导出GLB',
 			'menubar/file/export/gltf': '导出GLTF',
@@ -833,6 +838,7 @@ function Strings( config ) {
 
 			'menubar/add': '添加',
 			'menubar/add/group': '组',
+			'menubar/add/mesh': '网格',
 			'menubar/add/plane': '平面',
 			'menubar/add/box': '正方体',
 			'menubar/add/capsule': '胶囊',
@@ -1201,6 +1207,7 @@ function Strings( config ) {
 			'menubar/file': 'ファイル',
 			'menubar/file/new': '新規',
 			'menubar/file/import': 'インポート',
+			'menubar/file/export': 'エクスポート',
 			'menubar/file/export/drc': 'エクスポート DRC',
 			'menubar/file/export/glb': 'エクスポート GLB',
 			'menubar/file/export/gltf': 'エクスポート GLTF',
@@ -1220,6 +1227,7 @@ function Strings( config ) {
 
 			'menubar/add': '追加',
 			'menubar/add/group': 'グループ',
+			'menubar/add/mesh': 'メッシュ',
 			'menubar/add/plane': '平面',
 			'menubar/add/box': '直方体',
 			'menubar/add/capsule': 'カプセル',