Editor: Added Save and Open (#28351)

* add save/open feature

* Update Menubar.File.js

Clean up.

---------

Co-authored-by: Michael Herzog <[email protected]>

editor/js/Menubar.File.js

@@ -101,6 +101,86 @@ function MenubarFile( editor ) {
 
 	}
 
+
+	// Save
+
+	option = new UIRow()
+		.addClass( 'option' )
+		.setTextContent( strings.getKey( 'menubar/file/save' ) )
+		.onClick( function () {
+
+			const json = editor.toJSON();
+			const blob = new Blob( [ JSON.stringify( json ) ], { type: 'application/json' } );
+			editor.utils.save( blob, 'project.json' );
+
+		} );
+
+	options.add( option );
+
+	// Open
+
+	const openProjectForm = document.createElement( 'form' );
+	openProjectForm.style.display = 'none';
+	document.body.appendChild( openProjectForm );
+
+	const openProjectInput = document.createElement( 'input' );
+	openProjectInput.multiple = false;
+	openProjectInput.type = 'file';
+	openProjectInput.accept = '.json';
+	openProjectInput.addEventListener( 'change', async function () {
+
+		const file = openProjectInput.files[ 0 ];
+
+		if ( file === undefined ) return;
+
+		try {
+
+			const json = JSON.parse( await file.text() );
+
+			async function onEditorCleared() {
+
+				await editor.fromJSON( json );
+
+				editor.signals.editorCleared.remove( onEditorCleared );
+
+			}
+
+			editor.signals.editorCleared.add( onEditorCleared );
+
+			editor.clear();
+
+		} catch ( e ) {
+
+			alert( strings.getKey( 'prompt/file/failedToOpenProject' ) );
+			console.error( e );
+
+		} finally {
+
+			form.reset();
+
+		}
+
+	} );
+
+	openProjectForm.appendChild( openProjectInput );
+
+	option = new UIRow()
+		.addClass( 'option' )
+		.setTextContent( strings.getKey( 'menubar/file/open' ) )
+		.onClick( function () {
+
+			if ( confirm( strings.getKey( 'prompt/file/open' ) ) ) {
+
+				openProjectInput.click();
+
+			}
+
+		} );
+
+	options.add( option );
+
+	//
+
 	options.add( new UIHorizontalRule() );
 
 	// Import

editor/js/Strings.js

@@ -7,6 +7,7 @@ function Strings( config ) {
 		en: {
 
 			'prompt/file/open': 'Any unsaved data will be lost. Are you sure?',
+			'prompt/file/failedToOpenProject': 'Failed to open project!',
 			'prompt/file/export/noMeshSelected': 'No Mesh selected!',
 			'prompt/file/export/noObjectSelected': 'No Object selected!',
 			'prompt/script/remove': 'Are you sure?',
@@ -45,6 +46,8 @@ function Strings( config ) {
 			'menubar/file/newProject/Particles': 'Particles',
 			'menubar/file/newProject/Pong': 'Pong',
 			'menubar/file/newProject/Shaders': 'Shaders',
+			'menubar/file/save': 'Save',
+			'menubar/file/open': 'Open',
 			'menubar/file/import': 'Import',
 			'menubar/file/export': 'Export',
 
@@ -391,6 +394,7 @@ function Strings( config ) {
 		fr: {
 
 			'prompt/file/open': 'Toutes les données non enregistrées seront perdues Êtes-vous sûr ?',
+			'prompt/file/failedToOpenProject': 'Échec de l\'ouverture du projet !',
 			'prompt/file/export/noMeshSelected': 'Aucun maillage sélectionné !',
 			'prompt/file/export/noObjectSelected': 'Aucun objet sélectionné !',
 			'prompt/script/remove': 'Es-tu sûr?',
@@ -429,7 +433,8 @@ function Strings( config ) {
 			'menubar/file/newProject/Particles': 'Particles',
 			'menubar/file/newProject/Pong': 'Pong',
 			'menubar/file/newProject/Shaders': 'Shaders',
-
+			'menubar/file/save': 'Save',
+			'menubar/file/open': 'Open',
 			'menubar/file/import': 'Importer',
 			'menubar/file/export': 'Exporter',
 
@@ -776,6 +781,7 @@ function Strings( config ) {
 		zh: {
 
 			'prompt/file/open': '您确定吗？未保存的数据将会丢失。',
+			'prompt/file/failedToOpenProject': '无法打开项目！',
 			'prompt/file/export/noMeshSelected': '未选择网格！',
 			'prompt/file/export/noObjectSelected': '未选择对象！',
 			'prompt/script/remove': '你确定吗？',
@@ -814,6 +820,8 @@ function Strings( config ) {
 			'menubar/file/newProject/Particles': '粒子',
 			'menubar/file/newProject/Pong': '乒乓球',
 			'menubar/file/newProject/Shaders': '着色器',
+			'menubar/file/save': '保存',
+			'menubar/file/open': '打开',
 			'menubar/file/import': '导入',
 			'menubar/file/export': '导出',
 
@@ -1160,6 +1168,7 @@ function Strings( config ) {
 		ja: {
 
 			'prompt/file/open': '保存されていないデータは失われます。 本気ですか？',
+			'prompt/file/failedToOpenProject': 'プロジェクトを開くことができませんでした!',
 			'prompt/file/export/noMeshSelected': 'メッシュが選択されていません!',
 			'prompt/file/export/noObjectSelected': 'オブジェクトが選択されていません!',
 			'prompt/script/remove': '本気ですか？',
@@ -1198,6 +1207,8 @@ function Strings( config ) {
 			'menubar/file/newProject/Particles': 'パーティクル',
 			'menubar/file/newProject/Pong': 'ピンポン',
 			'menubar/file/newProject/Shaders': 'シェーダー',
+			'menubar/file/save': '保存',
+			'menubar/file/open': '開く',
 			'menubar/file/import': 'インポート',
 			'menubar/file/export': 'エクスポート',