From 31bedc5f35ff3b50a6f99ede489591cceb0c59d2 Mon Sep 17 00:00:00 2001 From: "Mr.doob" Date: Wed, 1 Nov 2017 14:58:38 -0700 Subject: [PATCH] Editor: Added project title. --- editor/js/Config.js | 4 +- editor/js/Menubar.File.js | 12 ++++-- editor/js/Sidebar.Project.js | 80 ++++++++++++++++++++--------------- editor/js/libs/app/index.html | 6 +-- 4 files changed, 62 insertions(+), 40 deletions(-) diff --git a/editor/js/Config.js b/editor/js/Config.js index 645d90987a..55d05be8d0 100644 --- a/editor/js/Config.js +++ b/editor/js/Config.js @@ -8,13 +8,15 @@ var Config = function ( name ) { 'autosave': true, 'theme': 'css/light.css', + 'project/title': '', + 'project/editable': false, + 'project/renderer': 'WebGLRenderer', 'project/renderer/antialias': true, 'project/renderer/gammaInput': false, 'project/renderer/gammaOutput': false, 'project/renderer/shadows': true, - 'project/editable': false, 'project/vr': false, 'settings/history': false diff --git a/editor/js/Menubar.File.js b/editor/js/Menubar.File.js index 532a450593..1a1e4b7186 100644 --- a/editor/js/Menubar.File.js +++ b/editor/js/Menubar.File.js @@ -14,6 +14,8 @@ Menubar.File = function ( editor ) { // + var config = editor.config; + var container = new UI.Panel(); container.setClass( 'menu' ); @@ -266,15 +268,19 @@ Menubar.File = function ( editor ) { // + var title = config.getKey( 'project/title' ); + var manager = new THREE.LoadingManager( function () { - save( zip.generate( { type: 'blob' } ), 'download.zip' ); + save( zip.generate( { type: 'blob' } ), ( title !== '' ? title : 'untitled' ) + '.zip' ); } ); var loader = new THREE.FileLoader( manager ); loader.load( 'js/libs/app/index.html', function ( content ) { + content = content.replace( '', title ); + var includes = []; if ( vr ) { @@ -287,12 +293,12 @@ Menubar.File = function ( editor ) { var editButton = ''; - if ( editor.config.getKey( 'project/editable' ) ) { + if ( config.getKey( 'project/editable' ) ) { editButton = ` var 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: 7px 10px 6px 10px; color: #fff; border: 1px solid #fff; text-decoration: none;'; + button.style.cssText = 'position: absolute; bottom: 20px; right: 20px; padding: 12px 14px; color: #fff; border: 1px solid #fff; border-radius: 4px; text-decoration: none;'; button.target = '_blank'; button.textContent = 'EDIT'; document.body.appendChild( button ); diff --git a/editor/js/Sidebar.Project.js b/editor/js/Sidebar.Project.js index 2e80443c07..43082b3088 100644 --- a/editor/js/Sidebar.Project.js +++ b/editor/js/Sidebar.Project.js @@ -21,7 +21,49 @@ Sidebar.Project = function ( editor ) { container.setBorderTop( '0' ); container.setPaddingTop( '20px' ); - // class + // Title + + var titleRow = new UI.Row(); + var title = new UI.Input( config.getKey( 'project/title' ) ).setLeft( '100px' ).onChange( function () { + + config.setKey( 'project/title', this.getValue() ); + + } ); + + titleRow.add( new UI.Text( 'Title' ).setWidth( '90px' ) ); + titleRow.add( title ); + + container.add( titleRow ); + + // Editable + + var editableRow = new UI.Row(); + var editable = new UI.Checkbox( config.getKey( 'project/editable' ) ).setLeft( '100px' ).onChange( function () { + + config.setKey( 'project/editable', this.getValue() ); + + } ); + + editableRow.add( new UI.Text( 'Editable' ).setWidth( '90px' ) ); + editableRow.add( editable ); + + container.add( editableRow ); + + // VR + + var vrRow = new UI.Row(); + var vr = new UI.Checkbox( config.getKey( 'project/vr' ) ).setLeft( '100px' ).onChange( function () { + + config.setKey( 'project/vr', this.getValue() ); + + } ); + + vrRow.add( new UI.Text( 'VR' ).setWidth( '90px' ) ); + vrRow.add( vr ); + + container.add( vrRow ); + + // Renderer var options = {}; @@ -55,7 +97,7 @@ Sidebar.Project = function ( editor ) { } - // antialiasing + // Renderer / Antialias var rendererPropertiesRow = new UI.Row().setMarginLeft( '90px' ); @@ -67,7 +109,7 @@ Sidebar.Project = function ( editor ) { } ); rendererPropertiesRow.add( rendererAntialias ); - // shadow + // Renderer / Shadows var rendererShadows = new UI.THREE.Boolean( config.getKey( 'project/renderer/shadows' ), 'shadows' ).onChange( function () { @@ -79,7 +121,7 @@ Sidebar.Project = function ( editor ) { rendererPropertiesRow.add( new UI.Break() ); - // gamma input + // Renderer / Gamma input var rendererGammaInput = new UI.THREE.Boolean( config.getKey( 'project/renderer/gammaInput' ), 'γ input' ).onChange( function () { @@ -89,7 +131,7 @@ Sidebar.Project = function ( editor ) { } ); rendererPropertiesRow.add( rendererGammaInput ); - // gamma output + // Renderer / Gamma output var rendererGammaOutput = new UI.THREE.Boolean( config.getKey( 'project/renderer/gammaOutput' ), 'γ output' ).onChange( function () { @@ -101,34 +143,6 @@ Sidebar.Project = function ( editor ) { container.add( rendererPropertiesRow ); - // Editable - - var editableRow = new UI.Row(); - var editable = new UI.Checkbox( config.getKey( 'project/editable' ) ).setLeft( '100px' ).onChange( function () { - - config.setKey( 'project/editable', this.getValue() ); - - } ); - - editableRow.add( new UI.Text( 'Editable' ).setWidth( '90px' ) ); - editableRow.add( editable ); - - container.add( editableRow ); - - // VR - - var vrRow = new UI.Row(); - var vr = new UI.Checkbox( config.getKey( 'project/vr' ) ).setLeft( '100px' ).onChange( function () { - - config.setKey( 'project/vr', this.getValue() ); - - } ); - - vrRow.add( new UI.Text( 'VR' ).setWidth( '90px' ) ); - vrRow.add( vr ); - - container.add( vrRow ); - // function updateRenderer() { diff --git a/editor/js/libs/app/index.html b/editor/js/libs/app/index.html index 52e10838df..06730a07c5 100644 --- a/editor/js/libs/app/index.html +++ b/editor/js/libs/app/index.html @@ -1,14 +1,14 @@ - three.js + <!-- title -->