Editor: Make sure effects names are unique.

mrdoob · mrdoob · commit b8a88f0957f4 · 2025-08-15T08:34:04.000+09:00
diff --git a/css/main.css b/css/main.css
@@ -68,6 +68,10 @@ select.Select {
 	border-radius: 4px;
 }
 
+	select.Select:focus {
+		outline: none;
+	}
+
 .CodeMirror {
 	position: absolute !important;
 	top: 37px;
diff --git a/js/Editor.js b/js/Editor.js
@@ -283,6 +283,8 @@ Editor.prototype = {
 
 	addEffect: function ( effect ) {
 
+		makeNameUnique( this.effects, effect );
+
 		this.effects.push( effect );
 		this.signals.effectAdded.dispatch( effect );
 
@@ -548,6 +550,24 @@ Editor.prototype = {
 
 }
 
+function makeNameUnique( array, item ) {
+
+	if ( array.some( e => e.name === item.name ) ) {
+
+		let counter = 1;
+		let newName = item.name + ' ' + counter;
+		
+		while ( array.some( e => e.name === newName ) ) {
+			counter++;
+			newName = item.name + ' ' + counter;
+		}
+		
+		item.name = newName;
+
+	}
+
+}
+
 function fixLegacyJSON( json ) {
 
 	const scripts = json.scripts;
diff --git a/js/SidebarProject.js b/js/SidebarProject.js
@@ -95,10 +95,13 @@ function SidebarProject( editor ) {
 	container.add( new UIText( 'Effects' ).setTextTransform( 'uppercase' ) );
 	container.add( new UIBreak(), new UIBreak() );
 
-	var effects = new UISelect().setMultiple( true ).setWidth( '280px' ).setMarginBottom( '8px' );
+	var effects = new UISelect().setWidth( '280px' ).setMarginBottom( '8px' );
+	effects.onChange( function () {
+		editor.selectEffect( editor.effects[ this.getValue() ] );
+	} );
 	container.add( effects );
 
-	var cleanEffects = new UIButton( 'Clean Effects' );
+	var cleanEffects = new UIButton( 'Remove unused' );
 	cleanEffects.onClick( function () {
 
 		editor.cleanEffects();
