improved editor UI - selection lists and bug fixes

removed comments

Hooked up texture parameters

Added comments

editor/js/Editor.js

@@ -997,25 +997,25 @@ Editor.prototype = {
     var name = geometry.name;
 
     if ( geometry instanceof THREE.PlaneGeometry )
-      geometry = this.createGeometry( 'plane', parameters );
+      geometry = this.createGeometry( 'Plane', parameters );
 
     if ( geometry instanceof THREE.CubeGeometry )
-      geometry = this.createGeometry( 'cube', parameters );
+      geometry = this.createGeometry( 'Cube', parameters );
 
     if ( geometry instanceof THREE.CylinderGeometry )
-      geometry = this.createGeometry( 'cylinder', parameters );
+      geometry = this.createGeometry( 'Cylinder', parameters );
 
     if ( geometry instanceof THREE.SphereGeometry )
-      geometry = this.createGeometry( 'sphere', parameters );
+      geometry = this.createGeometry( 'Sphere', parameters );
 
     if ( geometry instanceof THREE.IcosahedronGeometry )
-      geometry = this.createGeometry( 'icosahedron', parameters );
+      geometry = this.createGeometry( 'Icosahedron', parameters );
 
     if ( geometry instanceof THREE.TorusGeometry )
-      geometry = this.createGeometry( 'torus', parameters );
+      geometry = this.createGeometry( 'Torus', parameters );
 
     if ( geometry instanceof THREE.TorusKnotGeometry )
-      geometry = this.createGeometry( 'torusknot', parameters );
+      geometry = this.createGeometry( 'Torusknot', parameters );
 
     geometry.computeBoundingSphere();
     geometry.id = id;

editor/js/Sidebar.Outliner.Scene.js

@@ -24,42 +24,6 @@ Sidebar.Outliner.Scene = function ( signals ) {
 	fogTypeRow.add( fogType );
 	container.add( fogTypeRow );
 
-	var fogColorRow = new UI.Panel();
-	fogColorRow.setDisplay( 'none' );
-	var fogColor = new UI.Color().setValue( '#aaaaaa' ).onChange(
-		function() { editor.setFog( { color: fogColor.getHexValue() } ) }
-	);
-	fogColorRow.add( new UI.Text( 'Fog color' ).setWidth( '90px' ).setColor( '#666' ) );
-	fogColorRow.add( fogColor );
-	container.add( fogColorRow );
-
-	var fogNearRow = new UI.Panel();
-	fogNearRow.setDisplay( 'none' );
-	var fogNear = new UI.Number( 1 ).setWidth( '60px' ).setRange( 0, Infinity ).onChange(
-		function() { editor.setFog( { near: fogNear.getValue() } ) }
-	);
-	fogNearRow.add( new UI.Text( 'Fog near' ).setWidth( '90px' ).setColor( '#666' ) );
-	fogNearRow.add( fogNear );
-	container.add( fogNearRow );
-
-	var fogFarRow = new UI.Panel();
-	fogFarRow.setDisplay( 'none' );
-	var fogFar = new UI.Number( 5000 ).setWidth( '60px' ).setRange( 0, Infinity ).onChange(
-		function() { editor.setFog( { far: fogFar.getValue() } ) }
-	);
-	fogFarRow.add( new UI.Text( 'Fog far' ).setWidth( '90px' ).setColor( '#666' ) );
-	fogFarRow.add( fogFar );
-	container.add( fogFarRow );
-
-	var fogDensityRow = new UI.Panel();
-	fogDensityRow.setDisplay( 'none' );
-	var fogDensity = new UI.Number( 0.00025 ).setWidth( '60px' ).setRange( 0, 0.1 ).setPrecision( 5 ).onChange(
-		function() { editor.setFog( { density: fogDensity.getValue() } ) }
-	);
-	fogDensityRow.add( new UI.Text( 'Fog density' ).setWidth( '90px' ).setColor( '#666' ) );
-	fogDensityRow.add( fogDensity );
-	container.add( fogDensityRow );
-
 	//
 
 	var scene = null;
@@ -144,18 +108,13 @@ Sidebar.Outliner.Scene = function ( signals ) {
 
 		if ( scene.fog ) {
 
-			fogColor.setHexValue( scene.fog.color.getHex() );
-
 			if ( scene.fog instanceof THREE.Fog ) {
 
 				fogType.setValue( "Fog" );
-				fogNear.setValue( scene.fog.near );
-				fogFar.setValue( scene.fog.far );
 
 			} else if ( scene.fog instanceof THREE.FogExp2 ) {
 
 				fogType.setValue( "FogExp2" );
-				fogDensity.setValue( scene.fog.density );
 
 			}
 
@@ -167,11 +126,6 @@ Sidebar.Outliner.Scene = function ( signals ) {
 
 		var type = fogType.getValue();
 
-		fogColorRow.setDisplay( type === 'None' ? 'none' : '' );
-		fogNearRow.setDisplay( type === 'Fog' ? '' : 'none' );
-		fogFarRow.setDisplay( type === 'Fog' ? '' : 'none' );
-		fogDensityRow.setDisplay( type === 'FogExp2' ? '' : 'none' );
-
 	}
 
 	// events

editor/js/libs/ui.js

@@ -43,7 +43,7 @@ UI.Element.prototype = {
 // properties
 
 var properties = [ 'position', 'left', 'top', 'right', 'bottom', 'width', 'height', 'border', 'borderLeft',
-'borderTop', 'borderRight', 'borderBottom', 'borderColor', 'display', 'overflow', 'margin', 'marginLeft', 'marginTop', 'marginRight', 'marginBottom', 'padding', 'paddingLeft', 'paddingTop', 'paddingRight', 'paddingBottom', 'color',
+'borderTop', 'borderRight', 'borderBottom', 'borderColor', 'boxSizing', 'display', 'overflow', 'margin', 'marginLeft', 'marginTop', 'marginRight', 'marginBottom', 'padding', 'paddingLeft', 'paddingTop', 'paddingRight', 'paddingBottom', 'color',
 'backgroundColor', 'opacity', 'fontSize', 'fontWeight', 'textTransform', 'cursor' ];
 
 properties.forEach( function ( property ) {
@@ -199,6 +199,7 @@ UI.Text = function ( text ) {
 	dom.style.cursor = 'default';
 	dom.style.display = 'inline-block';
 	dom.style.verticalAlign = 'top';
+	dom.style.overflow = 'hidden';
 
 	this.dom = dom;
 	this.setValue( text );
@@ -233,6 +234,7 @@ UI.Input = function () {
 	var dom = document.createElement( 'input' );
 	dom.className = 'Input';
 	dom.style.padding = '2px';
+	// dom.style.boxSizing = 'border-box';
 	dom.style.marginTop = '-2px';
 	dom.style.marginLeft = '-2px';
 	dom.style.border = '1px solid #ccc';

editor/js/libs/ui.three.js

@@ -22,9 +22,9 @@ UI.ParamString = function ( name ) {
 UI.ParamString.prototype = Object.create( UI.Panel.prototype );
 
 
-UI.ParamString.prototype.setValue = function ( value ) {
+UI.ParamString.prototype.setValue = function ( model ) {
 
-	this.string.setValue( value );
+	this.string.setValue( model );
 
 };
 
@@ -58,9 +58,9 @@ UI.ParamInteger = function ( name ) {
 
 UI.ParamInteger.prototype = Object.create( UI.Panel.prototype );
 
-UI.ParamInteger.prototype.setValue = function ( value ) {
+UI.ParamInteger.prototype.setValue = function ( model ) {
 
-	this.integer.setValue( value );
+	this.integer.setValue( model );
 
 };
 
@@ -93,9 +93,9 @@ UI.ParamFloat = function ( name ) {
 
 UI.ParamFloat.prototype = Object.create( UI.Panel.prototype );
 
-UI.ParamFloat.prototype.setValue = function ( value ) {
+UI.ParamFloat.prototype.setValue = function ( model ) {
 
-	this.float.setValue( value );
+	this.float.setValue( model );
 
 };
 
@@ -115,7 +115,7 @@ UI.ParamBool = function ( name ) {
 
 	var row = new UI.Panel();
 
-	this.name = new UI.Text( name ).setWidth( '90px' ).setColor( '#666' ).setPosition( 'relative' ).setLeft( '25px' );
+	this.name = new UI.Text( name ).setWidth( 'auto' ).setColor( '#666' ).setPosition( 'relative' ).setLeft( '25px' );
 	this.bool = new UI.Checkbox().setPosition( 'absolute' ).setLeft( '10px' );
 	this.bool.dom.name = name;
 
@@ -128,9 +128,9 @@ UI.ParamBool = function ( name ) {
 
 UI.ParamBool.prototype = Object.create( UI.Panel.prototype );
 
-UI.ParamBool.prototype.setValue = function ( value ) {
+UI.ParamBool.prototype.setValue = function ( model ) {
 
-	this.bool.setValue( value );
+	this.bool.setValue( model );
 
 };
 
@@ -141,69 +141,167 @@ UI.ParamBool.prototype.getValue = function () {
 
 };
 
-// Vector3
+// Vector2
 
-UI.ParamVector3 = function ( name, scaleLock ) {
+UI.ParamVector2 = function ( name ) {
 
   UI.Panel.call( this );
 
-  scaleLock = scaleLock ? scaleLock : false;
-
 	var scope = this;
 
 	var row = new UI.Panel();
 
 	this.name = new UI.Text( name ).setWidth( '90px' ).setColor( '#666' );
 
-	this.x = new UI.Number().setWidth( '50px' ).onChange( setYZ );
-	this.y = new UI.Number().setWidth( '50px' ).onChange( setXZ );
-	this.z = new UI.Number().setWidth( '50px' ).onChange( setXY );
+	this.x = new UI.Number().setWidth( '35px' ).onChange( function( event ) { scaleProportionately( event, [ scope.y ] ) } );
+	this.y = new UI.Number().setWidth( '35px' ).onChange( function( event ) { scaleProportionately( event, [ scope.x ] ) } );
+
 	this.x.dom.name = name;
 	this.y.dom.name = name;
-	this.z.dom.name = name;
 	
-	row.add( this.name, this.x, this.y, this.z );
-
-	if ( scaleLock ) {
+	row.add( this.name, this.x, this.y );
 	
-		this.scaleLock = new UI.Checkbox().setPosition( 'absolute' ).setLeft( '75px' );
-		row.add( this.scaleLock );
-
-	}
+	this.scaleLock = new UI.Checkbox().setPosition( 'absolute' ).setRight( '10px' );
+	row.add( this.scaleLock );
 
 	this.add( row );
 
-	function setYZ( event ) {
+	function scaleProportionately( event, targets ) {
 
 		if ( scope.scaleLock && scope.scaleLock.getValue() && event.srcElement.oldValue ) {
 
 			var scale = event.srcElement.value / event.srcElement.oldValue;
-			scope.y.setValue( parseFloat(scope.y.getValue()) * scale );
-			scope.z.setValue( parseFloat(scope.z.getValue()) * scale );
+			for ( var i in targets ) {
+
+				targets[ i ].setValue( parseFloat(targets[ i ].getValue()) * scale );
+			
+			}
 
 		}
 
 	}
 
-	function setXZ( event ) {
+	return this;
+
+};
+
+UI.ParamVector2.prototype = Object.create( UI.Panel.prototype );
+
+UI.ParamVector2.prototype.setValue = function ( model ) {
+
+	this.x.setValue( model.x );
+	this.y.setValue( model.y );
+
+};
+
+UI.ParamVector2.prototype.getValue = function () {
+
+	return new THREE.Vector2( this.x.getValue(), this.y.getValue() );
+
+};
+
+// Vector3
+
+UI.ParamVector3 = function ( name ) {
+
+  UI.Panel.call( this );
+
+	var scope = this;
+
+	var row = new UI.Panel();
+
+	this.name = new UI.Text( name ).setWidth( '90px' ).setColor( '#666' );
+
+	this.x = new UI.Number().setWidth( '35px' ).onChange( function( event ) { scaleProportionately( event, [ scope.y, scope.z ] ) } );
+	this.y = new UI.Number().setWidth( '35px' ).onChange( function( event ) { scaleProportionately( event, [ scope.x, scope.z ] ) } );
+	this.z = new UI.Number().setWidth( '35px' ).onChange( function( event ) { scaleProportionately( event, [ scope.x, scope.y ] ) } );
+
+	this.x.dom.name = name;
+	this.y.dom.name = name;
+	this.z.dom.name = name;
+	
+	row.add( this.name, this.x, this.y, this.z );
+	
+	this.scaleLock = new UI.Checkbox().setPosition( 'absolute' ).setRight( '10px' );
+	row.add( this.scaleLock );
+
+
+	this.add( row );
+
+	function scaleProportionately( event, targets ) {
 
 		if ( scope.scaleLock && scope.scaleLock.getValue() && event.srcElement.oldValue ) {
 
 			var scale = event.srcElement.value / event.srcElement.oldValue;
-			scope.x.setValue( parseFloat(scope.x.getValue()) * scale );
-			scope.z.setValue( parseFloat(scope.z.getValue()) * scale );
+			for ( var i in targets ) {
+
+				targets[ i ].setValue( parseFloat(targets[ i ].getValue()) * scale );
+			
+			}
 
 		}
 
 	}
 
-	function setXY( event ) {
+	return this;
+
+};
+
+UI.ParamVector3.prototype = Object.create( UI.Panel.prototype );
+
+UI.ParamVector3.prototype.setValue = function ( model ) {
+
+	this.x.setValue( model.x );
+	this.y.setValue( model.y );
+	this.z.setValue( model.z );
+
+};
+
+UI.ParamVector3.prototype.getValue = function () {
+
+	return new THREE.Vector3( this.x.getValue(), this.y.getValue(), this.z.getValue() );
+
+};
+
+// Vector4
+
+UI.ParamVector4 = function ( name ) {
+
+  UI.Panel.call( this );
+
+	var scope = this;
+
+	var row = new UI.Panel();
+
+	this.name = new UI.Text( name ).setWidth( '90px' ).setColor( '#666' );
+
+	this.x = new UI.Number().setWidth( '35px' ).onChange( function( event ) { scaleProportionately( event, [ scope.y, scope.z, scope.w ] ) } );
+	this.y = new UI.Number().setWidth( '35px' ).onChange( function( event ) { scaleProportionately( event, [ scope.x, scope.z, scope.w ] ) } );
+	this.z = new UI.Number().setWidth( '35px' ).onChange( function( event ) { scaleProportionately( event, [ scope.x, scope.y, scope.w ] ) } );
+	this.w = new UI.Number().setWidth( '35px' ).onChange( function( event ) { scaleProportionately( event, [ scope.x, scope.y, scope.z ] ) } );
+
+	this.x.dom.name = name;
+	this.y.dom.name = name;
+	this.z.dom.name = name;
+	this.w.dom.name = name;
+	
+	row.add( this.name, this.x, this.y, this.z, this.w );
+
+	this.scaleLock = new UI.Checkbox().setPosition( 'absolute' ).setRight( '10px' );
+	row.add( this.scaleLock );
+
+	this.add( row );
+
+	function scaleProportionately( event, targets ) {
 
 		if ( scope.scaleLock && scope.scaleLock.getValue() && event.srcElement.oldValue ) {
 
 			var scale = event.srcElement.value / event.srcElement.oldValue;
-			scope.x.setValue( parseFloat(scope.x.getValue()) * scale );
-			scope.y.setValue( parseFloat(scope.y.getValue()) * scale );
+			for ( var i in targets ) {
+
+				targets[ i ].setValue( parseFloat(targets[ i ].getValue()) * scale );
+			
+			}
 
 		}
 
@@ -213,20 +311,20 @@ UI.ParamVector3 = function ( name, scaleLock ) {
 
 };
 
-UI.ParamVector3.prototype = Object.create( UI.Panel.prototype );
+UI.ParamVector4.prototype = Object.create( UI.Panel.prototype );
 
-UI.ParamVector3.prototype.setValue = function ( value ) {
+UI.ParamVector4.prototype.setValue = function ( model ) {
 
-	this.x.setValue( value.x );
-	this.y.setValue( value.y );
-	this.z.setValue( value.z );
+	this.x.setValue( model.x );
+	this.y.setValue( model.y );
+	this.z.setValue( model.z );
+	this.w.setValue( model.w );
 
 };
 
+UI.ParamVector4.prototype.getValue = function () {
 
-UI.ParamVector3.prototype.getValue = function () {
-
-	return new THREE.Vector3( this.x.getValue(), this.y.getValue(), this.z.getValue() );
+	return new THREE.Vector4( this.x.getValue(), this.y.getValue(), this.z.getValue(), this.w.getValue() );
 
 };
 
@@ -259,7 +357,6 @@ UI.ParamColor.prototype.setValue = function ( color ) {
 
 };
 
-
 UI.ParamColor.prototype.getValue = function () {
 
 	return this.color.getHexValue();
@@ -291,13 +388,12 @@ UI.ParamSelect = function ( name ) {
 
 UI.ParamSelect.prototype = Object.create( UI.Panel.prototype );
 
-UI.ParamSelect.prototype.setValue = function ( value ) {
+UI.ParamSelect.prototype.setValue = function ( model ) {
 
-	this.select.setValue( value );
+	this.select.setValue( model );
 
 };
 
-
 UI.ParamSelect.prototype.getValue = function ( value ) {
 
 	return this.select.getValue( value );
@@ -394,7 +490,7 @@ UI.Texture.prototype.getValue = function () {
 
 };
 
-UI.Texture.prototype.setValue = function ( value ) {
+UI.Texture.prototype.setValue = function ( model ) {
 
 	this.texture = value;
 
@@ -463,7 +559,7 @@ UI.CubeTexture.prototype.getValue = function () {
 
 };
 
-UI.CubeTexture.prototype.setValue = function ( value ) {
+UI.CubeTexture.prototype.setValue = function ( model ) {
 
 	this.texture = value;
 
@@ -510,13 +606,12 @@ UI.ParamJson = function ( name ) {
 
 UI.ParamJson.prototype = Object.create( UI.Panel.prototype );
 
-UI.ParamJson.prototype.setValue = function ( value ) {
+UI.ParamJson.prototype.setValue = function ( model ) {
 
-	this.json.setValue( value );
+	this.json.setValue( model );
 
 };
 
-
 UI.ParamJson.prototype.getValue = function () {
 
 	return this.json.getValue();