Editor: Better UX for renaming scripts/effects.

Author: mrdoob

js/Code.js

@@ -19,6 +19,27 @@ function Code( editor ) {
 	container.add( header );
 
 	var title = new UIText().setColor( '#fff' );
+	title.dom.contentEditable = true;
+	title.dom.style.cursor = 'text';
+	title.dom.style.outline = 'none';
+	title.dom.addEventListener( 'keydown', function ( event ) {
+		event.stopPropagation();
+		if ( event.key === 'Enter' ) {
+			event.preventDefault();
+			this.blur();
+		}
+	} );
+	title.dom.addEventListener( 'blur', function ( event ) {
+		event.stopPropagation();
+		if ( currentEffect !== null ) {
+			currentEffect.name = this.textContent;
+			editor.signals.effectRenamed.dispatch( currentEffect );
+		}
+		if ( currentScript !== null ) {
+			currentScript.name = this.textContent;
+			editor.signals.scriptRenamed.dispatch( currentScript );
+		}
+	} );
 	header.add( title );
 
 	var buttonSVG = ( function () {

js/Editor.js

@@ -22,16 +22,17 @@ function Editor() {
 		// scripts
 
 		scriptAdded: new Signal(),
-		scriptSelected: new Signal(),
-		scriptChanged: new Signal(),
 		scriptRemoved: new Signal(),
+		scriptRenamed: new Signal(),
+		scriptChanged: new Signal(),
+		scriptSelected: new Signal(),
 		scriptsCleared: new Signal(),
 
 		// effects
 
 		effectAdded: new Signal(),
-		effectRenamed: new Signal(),
 		effectRemoved: new Signal(),
+		effectRenamed: new Signal(),
 		effectSelected: new Signal(),
 		effectCompiled: new Signal(),
 
@@ -235,7 +236,7 @@ Editor.prototype = {
 
 	createScript: function () {
 
-		this.scripts.push( new Code( { name: '', source: '' } ) );
+		this.scripts.push( new Code( { name: 'Unnamed', source: '' } ) );
 		this.signals.scriptAdded.dispatch();
 
 	},

js/SidebarAnimation.js

@@ -277,28 +277,6 @@ function SidebarAnimation( editor ) {
 		} );
 		row.add( effectsSelect );
 
-		var edit = new UIButton( 'EDIT' ).setMarginLeft( '8px' );
-		edit.onClick( function () {
-
-			editor.selectEffect( selected.effect );
-
-		} );
-		row.add( edit );
-
-
-		var row = new UIRow();
-		row.add( new UIText( 'Name' ).setWidth( '90px' ) );
-		container.add( row );
-
-		var effectName = new UIInput( selected.effect.name );
-		effectName.onChange( function () {
-
-			selected.effect.name = this.getValue();
-			signals.effectRenamed.dispatch( selected.effect );
-
-		} );
-		row.add( effectName );
-
 		//
 
 		var parameters = selected.effect.program.parameters;

js/SidebarProject.js

@@ -216,9 +216,11 @@ function SidebarProject( editor ) {
 	signals.editorCleared.add( update );
 
 	signals.scriptAdded.add( updateScripts );
+	signals.scriptRenamed.add( updateScripts );
 	signals.scriptRemoved.add( updateScripts );
 
 	signals.effectAdded.add( updateEffects );
+	signals.effectRenamed.add( updateEffects );
 	signals.effectRemoved.add( updateEffects );
 
 	return container;