Editor: Adds New Project submenu (#28325)

* adds New Project submenu

* dont import MenubarExamples

editor/js/Menubar.Examples.js

@@ -1,66 +0,0 @@
-import * as THREE from 'three';
-
-import { UIPanel, UIRow } from './libs/ui.js';
-
-function MenubarExamples( editor ) {
-
-	const strings = editor.strings;
-
-	const container = new UIPanel();
-	container.setClass( 'menu' );
-
-	const title = new UIPanel();
-	title.setClass( 'title' );
-	title.setTextContent( strings.getKey( 'menubar/examples' ) );
-	container.add( title );
-
-	const options = new UIPanel();
-	options.setClass( 'options' );
-	container.add( options );
-
-	// Examples
-
-	const items = [
-		{ title: 'menubar/examples/Arkanoid', file: 'arkanoid.app.json' },
-		{ title: 'menubar/examples/Camera', file: 'camera.app.json' },
-		{ title: 'menubar/examples/Particles', file: 'particles.app.json' },
-		{ title: 'menubar/examples/Pong', file: 'pong.app.json' },
-		{ title: 'menubar/examples/Shaders', file: 'shaders.app.json' }
-	];
-
-	const loader = new THREE.FileLoader();
-
-	for ( let i = 0; i < items.length; i ++ ) {
-
-		( function ( i ) {
-
-			const item = items[ i ];
-
-			const option = new UIRow();
-			option.setClass( 'option' );
-			option.setTextContent( strings.getKey( item.title ) );
-			option.onClick( function () {
-
-				if ( confirm( strings.getKey( 'prompt/file/open' ) ) ) {
-
-					loader.load( 'examples/' + item.file, function ( text ) {
-
-						editor.clear();
-						editor.fromJSON( JSON.parse( text ) );
-
-					} );
-
-				}
-
-			} );
-			options.add( option );
-
-		} )( i );
-
-	}
-
-	return container;
-
-}
-
-export { MenubarExamples };

editor/js/Menubar.File.js

@@ -19,11 +19,31 @@ function MenubarFile( editor ) {
 	options.setClass( 'options' );
 	container.add( options );
 
-	// New
+	// New Project
 
-	let option = new UIRow();
-	option.setClass( 'option' );
-	option.setTextContent( strings.getKey( 'menubar/file/new' ) );
+	const newProjectSubmenuTitle = new UIRow().setTextContent( strings.getKey( 'menubar/file/newProject' ) ).addClass( 'option' ).addClass( 'submenu-title' );
+	newProjectSubmenuTitle.onMouseOver( function () {
+
+		const { top, right } = this.dom.getBoundingClientRect();
+		const { paddingTop } = getComputedStyle( this.dom );
+		newPorjectSubmenu.setLeft( right + 'px' );
+		newPorjectSubmenu.setTop( top - parseFloat( paddingTop ) + 'px' );
+		newPorjectSubmenu.setDisplay( 'block' );
+
+	} );
+	newProjectSubmenuTitle.onMouseOut( function () {
+
+		newPorjectSubmenu.setDisplay( 'none' );
+
+	} );
+	options.add( newProjectSubmenuTitle );
+
+	const newPorjectSubmenu = new UIPanel().setPosition( 'fixed' ).addClass( 'options' ).setDisplay( 'none' );
+	newProjectSubmenuTitle.add( newPorjectSubmenu );
+
+	// New Project / Empty
+
+	let option = new UIRow().setTextContent( strings.getKey( 'menubar/file/newProject/empty' ) ).setClass( 'option' );
 	option.onClick( function () {
 
 		if ( confirm( strings.getKey( 'prompt/file/open' ) ) ) {
@@ -33,7 +53,54 @@ function MenubarFile( editor ) {
 		}
 
 	} );
-	options.add( option );
+	newPorjectSubmenu.add( option );
+
+	//
+
+	newPorjectSubmenu.add( new UIHorizontalRule() );
+
+	// New Project / ...
+
+	const examples = [
+		{ title: 'menubar/file/newProject/Arkanoid', file: 'arkanoid.app.json' },
+		{ title: 'menubar/file/newProject/Camera', file: 'camera.app.json' },
+		{ title: 'menubar/file/newProject/Particles', file: 'particles.app.json' },
+		{ title: 'menubar/file/newProject/Pong', file: 'pong.app.json' },
+		{ title: 'menubar/file/newProject/Shaders', file: 'shaders.app.json' }
+	];
+
+	const loader = new THREE.FileLoader();
+
+	for ( let i = 0; i < examples.length; i ++ ) {
+
+		( function ( i ) {
+
+			const example = examples[ i ];
+
+			const option = new UIRow();
+			option.setClass( 'option' );
+			option.setTextContent( strings.getKey( example.title ) );
+			option.onClick( function () {
+
+				if ( confirm( strings.getKey( 'prompt/file/open' ) ) ) {
+
+					loader.load( 'examples/' + example.file, function ( text ) {
+
+						editor.clear();
+						editor.fromJSON( JSON.parse( text ) );
+
+					} );
+
+				}
+
+			} );
+			newPorjectSubmenu.add( option );
+
+		} )( i );
+
+	}
+
+	options.add( new UIHorizontalRule() );
 
 	// Import
 

editor/js/Menubar.js

@@ -3,7 +3,6 @@ import { UIPanel } from './libs/ui.js';
 import { MenubarAdd } from './Menubar.Add.js';
 import { MenubarEdit } from './Menubar.Edit.js';
 import { MenubarFile } from './Menubar.File.js';
-import { MenubarExamples } from './Menubar.Examples.js';
 import { MenubarView } from './Menubar.View.js';
 import { MenubarHelp } from './Menubar.Help.js';
 import { MenubarStatus } from './Menubar.Status.js';
@@ -16,7 +15,6 @@ function Menubar( editor ) {
 	container.add( new MenubarFile( editor ) );
 	container.add( new MenubarEdit( editor ) );
 	container.add( new MenubarAdd( editor ) );
-	container.add( new MenubarExamples( editor ) );
 	container.add( new MenubarView( editor ) );
 	container.add( new MenubarHelp( editor ) );
 

editor/js/Strings.js

@@ -38,7 +38,13 @@ function Strings( config ) {
 			'command/SetValue': 'Set Value',
 
 			'menubar/file': 'File',
-			'menubar/file/new': 'New',
+			'menubar/file/newProject': 'New Project',
+			'menubar/file/newProject/empty': 'Empty',
+			'menubar/file/newProject/Arkanoid': 'Arkanoid',
+			'menubar/file/newProject/Camera': 'Camera',
+			'menubar/file/newProject/Particles': 'Particles',
+			'menubar/file/newProject/Pong': 'Pong',
+			'menubar/file/newProject/Shaders': 'Shaders',
 			'menubar/file/import': 'Import',
 			'menubar/file/export': 'Export',
 
@@ -83,13 +89,6 @@ function Strings( config ) {
 
 			'menubar/status/autosave': 'autosave',
 
-			'menubar/examples': 'Examples',
-			'menubar/examples/Arkanoid': 'Arkanoid',
-			'menubar/examples/Camera': 'Camera',
-			'menubar/examples/Particles': 'Particles',
-			'menubar/examples/Pong': 'Pong',
-			'menubar/examples/Shaders': 'Shaders',
-
 			'menubar/view': 'View',
 			'menubar/view/fullscreen': 'Fullscreen',
 
@@ -423,7 +422,14 @@ function Strings( config ) {
 			'command/SetValue': 'Définir la valeur',
 
 			'menubar/file': 'Fichier',
-			'menubar/file/new': 'Nouveau',
+			'menubar/file/newProject': 'Nouveau projet',
+			'menubar/file/newProject/empty': 'Vide',
+			'menubar/file/newProject/Arkanoid': 'Arkanoid',
+			'menubar/file/newProject/Camera': 'Camera',
+			'menubar/file/newProject/Particles': 'Particles',
+			'menubar/file/newProject/Pong': 'Pong',
+			'menubar/file/newProject/Shaders': 'Shaders',
+
 			'menubar/file/import': 'Importer',
 			'menubar/file/export': 'Exporter',
 
@@ -468,13 +474,6 @@ function Strings( config ) {
 
 			'menubar/status/autosave': 'enregistrement automatique',
 
-			'menubar/examples': 'Exemples',
-			'menubar/examples/Arkanoid': 'Arkanoid',
-			'menubar/examples/Camera': 'Camera',
-			'menubar/examples/Particles': 'Particles',
-			'menubar/examples/Pong': 'Pong',
-			'menubar/examples/Shaders': 'Shaders',
-
 			'menubar/view': 'View',
 			'menubar/view/fullscreen': 'Fullscreen',
 
@@ -808,7 +807,13 @@ function Strings( config ) {
 			'command/SetValue': '设定值',
 
 			'menubar/file': '文件',
-			'menubar/file/new': '新建',
+			'menubar/file/newProject': '新建项目',
+			'menubar/file/newProject/empty': '空',
+			'menubar/file/newProject/Arkanoid': '打砖块',
+			'menubar/file/newProject/Camera': ' 摄像机',
+			'menubar/file/newProject/Particles': '粒子',
+			'menubar/file/newProject/Pong': '乒乓球',
+			'menubar/file/newProject/Shaders': '着色器',
 			'menubar/file/import': '导入',
 			'menubar/file/export': '导出',
 
@@ -853,13 +858,6 @@ function Strings( config ) {
 
 			'menubar/status/autosave': '自动保存',
 
-			'menubar/examples': '示例',
-			'menubar/examples/Arkanoid': '打砖块',
-			'menubar/examples/Camera': ' 摄像机',
-			'menubar/examples/Particles': '粒子',
-			'menubar/examples/Pong': '乒乓球',
-			'menubar/examples/Shaders': '着色器',
-
 			'menubar/view': '视图',
 			'menubar/view/fullscreen': '全屏',
 
@@ -1193,7 +1191,13 @@ function Strings( config ) {
 			'command/SetValue': '値の設定',
 
 			'menubar/file': 'ファイル',
-			'menubar/file/new': '新規',
+			'menubar/file/newProject': '新規プロジェクト',
+			'menubar/file/newProject/empty': '空',
+			'menubar/file/newProject/Arkanoid': 'ブロック崩し',
+			'menubar/file/newProject/Camera': 'カメラ',
+			'menubar/file/newProject/Particles': 'パーティクル',
+			'menubar/file/newProject/Pong': 'ピンポン',
+			'menubar/file/newProject/Shaders': 'シェーダー',
 			'menubar/file/import': 'インポート',
 			'menubar/file/export': 'エクスポート',
 
@@ -1238,13 +1242,6 @@ function Strings( config ) {
 
 			'menubar/status/autosave': '自動保存',
 
-			'menubar/examples': 'サンプル',
-			'menubar/examples/Arkanoid': 'ブロック崩し',
-			'menubar/examples/Camera': 'カメラ',
-			'menubar/examples/Particles': 'パーティクル',
-			'menubar/examples/Pong': 'ピンポン',
-			'menubar/examples/Shaders': 'シェーダー',
-
 			'menubar/view': '表示',
 			'menubar/view/fullscreen': 'フルスクリーン',