Editor: Unified App Config/Play/Publish into single panel in SideBar. (#27775)

editor/js/Editor.js

@@ -747,8 +747,44 @@ Editor.prototype = {
 
 		this.history.redo();
 
+	},
+
+	utils: {
+
+		save: save,
+		saveArrayBuffer: saveArrayBuffer,
+		saveString: saveString
+
 	}
 
 };
 
+const link = document.createElement( 'a' );
+
+function save( blob, filename ) {
+
+	if ( link.href ) {
+
+		URL.revokeObjectURL( link.href );
+
+	}
+
+	link.href = URL.createObjectURL( blob );
+	link.download = filename || 'data.json';
+	link.dispatchEvent( new MouseEvent( 'click' ) );
+
+}
+
+function saveArrayBuffer( buffer, filename ) {
+
+	save( new Blob( [ buffer ], { type: 'application/octet-stream' } ), filename );
+
+}
+
+function saveString( text, filename ) {
+
+	save( new Blob( [ text ], { type: 'text/plain' } ), filename );
+
+}
+
 export { Editor };

editor/js/Menubar.File.js

@@ -1,14 +1,12 @@
-import * as THREE from 'three';
-
-import { zipSync, strToU8 } from 'three/addons/libs/fflate.module.js';
-
 import { UIPanel, UIRow, UIHorizontalRule } from './libs/ui.js';
 
 function MenubarFile( editor ) {
 
-	const config = editor.config;
 	const strings = editor.strings;
 
+	const saveArrayBuffer = editor.utils.saveArrayBuffer;
+	const saveString = editor.utils.saveString;
+
 	const container = new UIPanel();
 	container.setClass( 'menu' );
 
@@ -287,119 +285,6 @@ function MenubarFile( editor ) {
 
 	//
 
-	options.add( new UIHorizontalRule() );
-
-	// Publish
-
-	option = new UIRow();
-	option.setClass( 'option' );
-	option.setTextContent( strings.getKey( 'menubar/file/publish' ) );
-	option.onClick( function () {
-
-		const toZip = {};
-
-		//
-
-		let output = editor.toJSON();
-		output.metadata.type = 'App';
-		delete output.history;
-
-		output = JSON.stringify( output, null, '\t' );
-		output = output.replace( /[\n\t]+([\d\.e\-\[\]]+)/g, '$1' );
-
-		toZip[ 'app.json' ] = strToU8( output );
-
-		//
-
-		const title = config.getKey( 'project/title' );
-
-		const manager = new THREE.LoadingManager( function () {
-
-			const zipped = zipSync( toZip, { level: 9 } );
-
-			const blob = new Blob( [ zipped.buffer ], { type: 'application/zip' } );
-
-			save( blob, ( title !== '' ? title : 'untitled' ) + '.zip' );
-
-		} );
-
-		const loader = new THREE.FileLoader( manager );
-		loader.load( 'js/libs/app/index.html', function ( content ) {
-
-			content = content.replace( '<!-- title -->', title );
-
-			const includes = [];
-
-			content = content.replace( '<!-- includes -->', includes.join( '\n\t\t' ) );
-
-			let editButton = '';
-
-			if ( config.getKey( 'project/editable' ) ) {
-
-				editButton = [
-					'			let button = document.createElement( \'a\' );',
-					'			button.href = \'https://threejs.org/editor/#file=\' + location.href.split( \'/\' ).slice( 0, - 1 ).join( \'/\' ) + \'/app.json\';',
-					'			button.style.cssText = \'position: absolute; bottom: 20px; right: 20px; padding: 10px 16px; color: #fff; border: 1px solid #fff; border-radius: 20px; text-decoration: none;\';',
-					'			button.target = \'_blank\';',
-					'			button.textContent = \'EDIT\';',
-					'			document.body.appendChild( button );',
-				].join( '\n' );
-
-			}
-
-			content = content.replace( '\t\t\t/* edit button */', editButton );
-
-			toZip[ 'index.html' ] = strToU8( content );
-
-		} );
-		loader.load( 'js/libs/app.js', function ( content ) {
-
-			toZip[ 'js/app.js' ] = strToU8( content );
-
-		} );
-		loader.load( '../build/three.module.js', function ( content ) {
-
-			toZip[ 'js/three.module.js' ] = strToU8( content );
-
-		} );
-		loader.load( '../examples/jsm/webxr/VRButton.js', function ( content ) {
-
-			toZip[ 'js/VRButton.js' ] = strToU8( content );
-
-		} );
-
-	} );
-	options.add( option );
-
-	//
-
-	const link = document.createElement( 'a' );
-	function save( blob, filename ) {
-
-		if ( link.href ) {
-
-			URL.revokeObjectURL( link.href );
-
-		}
-
-		link.href = URL.createObjectURL( blob );
-		link.download = filename || 'data.json';
-		link.dispatchEvent( new MouseEvent( 'click' ) );
-
-	}
-
-	function saveArrayBuffer( buffer, filename ) {
-
-		save( new Blob( [ buffer ], { type: 'application/octet-stream' } ), filename );
-
-	}
-
-	function saveString( text, filename ) {
-
-		save( new Blob( [ text ], { type: 'text/plain' } ), filename );
-
-	}
-
 	function getAnimations( scene ) {
 
 		const animations = [];

editor/js/Menubar.Play.js

@@ -1,39 +0,0 @@
-import { UIPanel } from './libs/ui.js';
-
-function MenubarPlay( editor ) {
-
-	const signals = editor.signals;
-	const strings = editor.strings;
-
-	const container = new UIPanel();
-	container.setClass( 'menu' );
-
-	let isPlaying = false;
-
-	const title = new UIPanel();
-	title.setClass( 'title' );
-	title.setTextContent( strings.getKey( 'menubar/play' ) );
-	title.onClick( function () {
-
-		if ( isPlaying === false ) {
-
-			isPlaying = true;
-			title.setTextContent( strings.getKey( 'menubar/play/stop' ) );
-			signals.startPlayer.dispatch();
-
-		} else {
-
-			isPlaying = false;
-			title.setTextContent( strings.getKey( 'menubar/play/play' ) );
-			signals.stopPlayer.dispatch();
-
-		}
-
-	} );
-	container.add( title );
-
-	return container;
-
-}
-
-export { MenubarPlay };

editor/js/Menubar.js

@@ -6,7 +6,6 @@ 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 { MenubarPlay } from './Menubar.Play.js';
 import { MenubarStatus } from './Menubar.Status.js';
 
 function Menubar( editor ) {
@@ -17,7 +16,6 @@ function Menubar( editor ) {
 	container.add( new MenubarFile( editor ) );
 	container.add( new MenubarEdit( editor ) );
 	container.add( new MenubarAdd( editor ) );
-	container.add( new MenubarPlay( editor ) );
 	container.add( new MenubarExamples( editor ) );
 	container.add( new MenubarView( editor ) );
 	container.add( new MenubarHelp( editor ) );

editor/js/Sidebar.Project.App.js

@@ -0,0 +1,169 @@
+import * as THREE from 'three';
+
+import { zipSync, strToU8 } from 'three/addons/libs/fflate.module.js';
+
+import { UIButton, UICheckbox, UIPanel, UIInput, UIRow, UIText } from './libs/ui.js';
+
+function SidebarProjectApp( editor ) {
+
+	const config = editor.config;
+	const signals = editor.signals;
+	const strings = editor.strings;
+
+	const save = editor.utils.save;
+
+	const container = new UIPanel();
+	container.setId( 'app' );
+
+	const headerRow = new UIRow();
+	headerRow.add( new UIText( strings.getKey( 'sidebar/project/app' ).toUpperCase() ) );
+	container.add( headerRow );
+
+	// Title
+
+	const titleRow = new UIRow();
+	const title = new UIInput( config.getKey( 'project/title' ) ).setLeft( '100px' ).setWidth( '150px' ).onChange( function () {
+
+		config.setKey( 'project/title', this.getValue() );
+
+	} );
+
+	titleRow.add( new UIText( strings.getKey( 'sidebar/project/app/title' ) ).setWidth( '90px' ) );
+	titleRow.add( title );
+
+	container.add( titleRow );
+
+	// Editable
+
+	const editableRow = new UIRow();
+	const editable = new UICheckbox( config.getKey( 'project/editable' ) ).setLeft( '100px' ).onChange( function () {
+
+		config.setKey( 'project/editable', this.getValue() );
+
+	} );
+
+	editableRow.add( new UIText( strings.getKey( 'sidebar/project/app/editable' ) ).setWidth( '90px' ) );
+	editableRow.add( editable );
+
+	container.add( editableRow );
+
+	// Play/Stop
+
+	let isPlaying = false;
+
+	const playButton = new UIButton( strings.getKey( 'sidebar/project/app/play' ) );
+	playButton.setWidth( '170px' );
+	playButton.setMarginLeft( '90px' );
+	playButton.setMarginBottom( '10px' );
+	playButton.onClick( function () {
+
+		if ( isPlaying === false ) {
+
+			isPlaying = true;
+			playButton.setTextContent( strings.getKey( 'sidebar/project/app/stop' ) );
+			signals.startPlayer.dispatch();
+
+		} else {
+
+			isPlaying = false;
+			playButton.setTextContent( strings.getKey( 'sidebar/project/app/play' ) );
+			signals.stopPlayer.dispatch();
+
+		}
+
+	} );
+
+	container.add( playButton );
+
+	// Publish
+
+	const publishButton = new UIButton( strings.getKey( 'sidebar/project/app/publish' ) );
+	publishButton.setWidth( '170px' );
+	publishButton.setMarginLeft( '90px' );
+	publishButton.setMarginBottom( '10px' );
+	publishButton.onClick( function () {
+
+		const toZip = {};
+
+		//
+
+		let output = editor.toJSON();
+		output.metadata.type = 'App';
+		delete output.history;
+
+		output = JSON.stringify( output, null, '\t' );
+		output = output.replace( /[\n\t]+([\d\.e\-\[\]]+)/g, '$1' );
+
+		toZip[ 'app.json' ] = strToU8( output );
+
+		//
+
+		const title = config.getKey( 'project/title' );
+
+		const manager = new THREE.LoadingManager( function () {
+
+			const zipped = zipSync( toZip, { level: 9 } );
+
+			const blob = new Blob( [ zipped.buffer ], { type: 'application/zip' } );
+
+			save( blob, ( title !== '' ? title : 'untitled' ) + '.zip' );
+
+		} );
+
+		const loader = new THREE.FileLoader( manager );
+		loader.load( 'js/libs/app/index.html', function ( content ) {
+
+			content = content.replace( '<!-- title -->', title );
+
+			const includes = [];
+
+			content = content.replace( '<!-- includes -->', includes.join( '\n\t\t' ) );
+
+			let editButton = '';
+
+			if ( config.getKey( 'project/editable' ) ) {
+
+				editButton = [
+					'			let button = document.createElement( \'a\' );',
+					'			button.href = \'https://threejs.org/editor/#file=\' + location.href.split( \'/\' ).slice( 0, - 1 ).join( \'/\' ) + \'/app.json\';',
+					'			button.style.cssText = \'position: absolute; bottom: 20px; right: 20px; padding: 10px 16px; color: #fff; border: 1px solid #fff; border-radius: 20px; text-decoration: none;\';',
+					'			button.target = \'_blank\';',
+					'			button.textContent = \'EDIT\';',
+					'			document.body.appendChild( button );',
+				].join( '\n' );
+
+			}
+
+			content = content.replace( '\t\t\t/* edit button */', editButton );
+
+			toZip[ 'index.html' ] = strToU8( content );
+
+		} );
+		loader.load( 'js/libs/app.js', function ( content ) {
+
+			toZip[ 'js/app.js' ] = strToU8( content );
+
+		} );
+		loader.load( '../build/three.module.js', function ( content ) {
+
+			toZip[ 'js/three.module.js' ] = strToU8( content );
+
+		} );
+
+	} );
+	container.add( publishButton );
+
+	// Signals
+
+	signals.editorCleared.add( function () {
+
+		title.setValue( '' );
+		config.setKey( 'project/title', '' );
+
+	} );
+
+	return container;
+
+}
+
+export { SidebarProjectApp };

editor/js/Sidebar.Project.Renderer.js

@@ -12,10 +12,7 @@ function SidebarProjectRenderer( editor ) {
 	let currentRenderer = null;
 
 	const container = new UIPanel();
-
-	const headerRow = new UIRow();
-	headerRow.add( new UIText( strings.getKey( 'sidebar/project/renderer' ).toUpperCase() ) );
-	container.add( headerRow );
+	container.setBorderTop( '0px' );
 
 	// Antialias
 

editor/js/Sidebar.Project.Video.js

@@ -6,6 +6,8 @@ function SidebarProjectVideo( editor ) {
 
 	const strings = editor.strings;
 
+	const save = editor.utils.save;
+
 	const container = new UIPanel();
 	container.setId( 'render' );
 
@@ -120,24 +122,6 @@ function SidebarProjectVideo( editor ) {
 	} );
 	container.add( renderButton );
 
-	// SAVE
-
-	const link = document.createElement( 'a' );
-
-	function save( blob, filename ) {
-
-		if ( link.href ) {
-
-			URL.revokeObjectURL( link.href );
-
-		}
-
-		link.href = URL.createObjectURL( blob );
-		link.download = filename;
-		link.dispatchEvent( new MouseEvent( 'click' ) );
-
-	}
-
 	//
 
 	return container;

editor/js/Sidebar.Project.js

@@ -1,54 +1,19 @@
-import { UIPanel, UIRow, UIInput, UICheckbox, UIText, UISpan } from './libs/ui.js';
+import { UISpan } from './libs/ui.js';
 
+import { SidebarProjectApp } from './Sidebar.Project.App.js';
 /* import { SidebarProjectMaterials } from './Sidebar.Project.Materials.js'; */
 import { SidebarProjectRenderer } from './Sidebar.Project.Renderer.js';
 import { SidebarProjectVideo } from './Sidebar.Project.Video.js';
 
 function SidebarProject( editor ) {
 
-	const config = editor.config;
-	const signals = editor.signals;
-	const strings = editor.strings;
-
 	const container = new UISpan();
 
-	const settings = new UIPanel();
-	settings.setBorderTop( '0' );
-	settings.setPaddingTop( '20px' );
-	container.add( settings );
-
-	// Title
-
-	const titleRow = new UIRow();
-	const title = new UIInput( config.getKey( 'project/title' ) ).setLeft( '100px' ).setWidth( '150px' ).onChange( function () {
-
-		config.setKey( 'project/title', this.getValue() );
-
-	} );
-
-	titleRow.add( new UIText( strings.getKey( 'sidebar/project/title' ) ).setWidth( '90px' ) );
-	titleRow.add( title );
-
-	settings.add( titleRow );
-
-	// Editable
-
-	const editableRow = new UIRow();
-	const editable = new UICheckbox( config.getKey( 'project/editable' ) ).setLeft( '100px' ).onChange( function () {
-
-		config.setKey( 'project/editable', this.getValue() );
-
-	} );
-
-	editableRow.add( new UIText( strings.getKey( 'sidebar/project/editable' ) ).setWidth( '90px' ) );
-	editableRow.add( editable );
-
-	settings.add( editableRow );
-
-	//
+	container.add( new SidebarProjectRenderer( editor ) );
 
 	/* container.add( new SidebarProjectMaterials( editor ) ); */
-	container.add( new SidebarProjectRenderer( editor ) );
+
+	container.add( new SidebarProjectApp( editor ) );
 
 	if ( 'SharedArrayBuffer' in window ) {
 
@@ -56,15 +21,6 @@ function SidebarProject( editor ) {
 
 	}
 
-	// Signals
-
-	signals.editorCleared.add( function () {
-
-		title.setValue( '' );
-		config.setKey( 'project/title', '' );
-
-	} );
-
 	return container;
 
 }

editor/js/Strings.js

@@ -18,7 +18,6 @@ function Strings( config ) {
 			'menubar/file/export/stl': 'Export STL',
 			'menubar/file/export/stl_binary': 'Export STL (Binary)',
 			'menubar/file/export/usdz': 'Export USDZ',
-			'menubar/file/publish': 'Publish',
 
 			'menubar/edit': 'Edit',
 			'menubar/edit/undo': 'Undo (Ctrl+Z)',
@@ -55,10 +54,6 @@ function Strings( config ) {
 
 			'menubar/status/autosave': 'autosave',
 
-			'menubar/play': 'Play',
-			'menubar/play/stop': 'Stop',
-			'menubar/play/play': 'Play',
-
 			'menubar/examples': 'Examples',
 			'menubar/examples/Arkanoid': 'Arkanoid',
 			'menubar/examples/Camera': 'Camera',
@@ -311,15 +306,19 @@ function Strings( config ) {
 			'sidebar/script/remove': 'Remove',
 
 			'sidebar/project': 'Project',
-			'sidebar/project/title': 'Title',
-			'sidebar/project/editable': 'Editable',
-			'sidebar/project/renderer': 'Renderer',
 			'sidebar/project/antialias': 'Antialias',
 			'sidebar/project/shadows': 'Shadows',
-			'sidebar/project/toneMapping': 'Tone mapping',
+			'sidebar/project/toneMapping': 'Tonemapping',
 			'sidebar/project/materials': 'Materials',
 			'sidebar/project/Assign': 'Assign',
 
+			'sidebar/project/app': 'App',
+			'sidebar/project/app/play': 'Play',
+			'sidebar/project/app/stop': 'Stop',
+			'sidebar/project/app/title': 'Title',
+			'sidebar/project/app/editable': 'Editable',
+			'sidebar/project/app/publish': 'Publish',
+
 			'sidebar/project/video': 'Video',
 			'sidebar/project/resolution': 'Resolution',
 			'sidebar/project/duration': 'Duration',
@@ -368,7 +367,6 @@ function Strings( config ) {
 			'menubar/file/export/stl': 'Exporter STL',
 			'menubar/file/export/stl_binary': 'Exporter STL (Binaire)',
 			'menubar/file/export/usdz': 'Exporter USDZ',
-			'menubar/file/publish': 'Publier',
 
 			'menubar/edit': 'Edition',
 			'menubar/edit/undo': 'Annuler (Ctrl+Z)',
@@ -405,10 +403,6 @@ function Strings( config ) {
 
 			'menubar/status/autosave': 'enregistrement automatique',
 
-			'menubar/play': 'Jouer',
-			'menubar/play/stop': 'Arrêter',
-			'menubar/play/play': 'Jouer',
-
 			'menubar/examples': 'Exemples',
 			'menubar/examples/Arkanoid': 'Arkanoid',
 			'menubar/examples/Camera': 'Camera',
@@ -659,15 +653,19 @@ function Strings( config ) {
 			'sidebar/script/remove': 'Supprimer',
 
 			'sidebar/project': 'Projet',
-			'sidebar/project/title': 'Titre',
-			'sidebar/project/editable': 'Modifiable',
-			'sidebar/project/renderer': 'Rendus',
 			'sidebar/project/antialias': 'Anticrénelage',
 			'sidebar/project/shadows': 'Ombres',
 			'sidebar/project/toneMapping': 'Mappage des nuances',
 			'sidebar/project/materials': 'Matériaux',
 			'sidebar/project/Assign': 'Attribuer',
 
+			'sidebar/project/app': 'App',
+			'sidebar/project/app/play': 'Jouer',
+			'sidebar/project/app/stop': 'Arrêter',
+			'sidebar/project/app/title': 'Titre',
+			'sidebar/project/app/editable': 'Modifiable',
+			'sidebar/project/app/publish': 'Publier',
+
 			'sidebar/project/video': 'Video',
 			'sidebar/project/resolution': 'Resolution',
 			'sidebar/project/duration': 'Duration',
@@ -716,7 +714,6 @@ function Strings( config ) {
 			'menubar/file/export/stl': '导出STL',
 			'menubar/file/export/stl_binary': '导出STL(二进制)',
 			'menubar/file/export/usdz': '导出USDZ',
-			'menubar/file/publish': '发布',
 
 			'menubar/edit': '编辑',
 			'menubar/edit/undo': '撤销 (Ctrl+Z)',
@@ -753,10 +750,6 @@ function Strings( config ) {
 
 			'menubar/status/autosave': '自动保存',
 
-			'menubar/play': '启动',
-			'menubar/play/stop': '暂停',
-			'menubar/play/play': '启动',
-
 			'menubar/examples': '示例',
 			'menubar/examples/Arkanoid': '打砖块',
 			'menubar/examples/Camera': ' 摄像机',
@@ -1007,15 +1000,19 @@ function Strings( config ) {
 			'sidebar/script/remove': '删除',
 
 			'sidebar/project': '项目',
-			'sidebar/project/title': '标题',
-			'sidebar/project/editable': '编辑性',
-			'sidebar/project/renderer': '渲染器',
 			'sidebar/project/antialias': '抗锯齿',
 			'sidebar/project/shadows': '阴影',
 			'sidebar/project/toneMapping': '色调映射',
 			'sidebar/project/materials': '材质',
 			'sidebar/project/Assign': '应用',
 
+			'sidebar/project/app': 'App',
+			'sidebar/project/app/play': '启动',
+			'sidebar/project/app/stop': '暂停',
+			'sidebar/project/app/title': '标题',
+			'sidebar/project/app/editable': '编辑性',
+			'sidebar/project/app/publish': '发布',
+
 			'sidebar/project/video': '视频',
 			'sidebar/project/resolution': '分辨率',
 			'sidebar/project/duration': '时长',

editor/js/libs/app/index.html

@@ -22,10 +22,8 @@
 
 			import * as THREE from './js/three.module.js';
 			import { APP } from './js/app.js';
-			import { VRButton } from './js/VRButton.js';
 
 			window.THREE = THREE; // Used by APP Scripts.
-			window.VRButton = VRButton; // Used by APP Scripts.
 
 			var loader = new THREE.FileLoader();
 			loader.load( 'app.json', function ( text ) {

editor/sw.js

@@ -137,7 +137,6 @@ const assets = [
 	'./js/Menubar.File.js',
 	'./js/Menubar.Edit.js',
 	'./js/Menubar.Add.js',
-	'./js/Menubar.Play.js',
 	'./js/Menubar.Examples.js',
 	'./js/Menubar.Help.js',
 	'./js/Menubar.View.js',
@@ -146,8 +145,9 @@ const assets = [
 	'./js/Sidebar.js',
 	'./js/Sidebar.Scene.js',
 	'./js/Sidebar.Project.js',
-	'./js/Sidebar.Project.Materials.js',
 	'./js/Sidebar.Project.Renderer.js',
+	'./js/Sidebar.Project.Materials.js',
+	'./js/Sidebar.Project.App.js',
 	'./js/Sidebar.Project.Video.js',
 	'./js/Sidebar.Settings.js',
 	'./js/Sidebar.Settings.History.js',