More UI.js and Editor refactoring.

editor/js/UI.js

@@ -104,7 +104,7 @@ UI.Panel.prototype.add = function () {
 
 // Text
 
-UI.Text = function () {
+UI.Text = function ( text ) {
 
 	UI.Element.call( this );
 
@@ -115,6 +115,7 @@ UI.Text = function () {
 	dom.style.verticalAlign = 'top';
 
 	this.dom = dom;
+	this.setValue( text );
 
 	return this;
 
@@ -124,7 +125,11 @@ UI.Text.prototype = Object.create( UI.Element.prototype );
 
 UI.Text.prototype.setValue = function ( value ) {
 
-	this.dom.textContent = value;
+	if ( value !== undefined ) {
+
+		this.dom.textContent = value;
+
+	}
 
 	return this;
 
@@ -445,7 +450,7 @@ UI.FancySelect.prototype.onChange = function ( callback ) {
 
 // Checkbox
 
-UI.Checkbox = function () {
+UI.Checkbox = function ( boolean ) {
 
 	UI.Element.call( this );
 
@@ -456,6 +461,7 @@ UI.Checkbox = function () {
 	dom.type = 'checkbox';
 
 	this.dom = dom;
+	this.setValue( boolean );
 
 	this.onChangeCallback = null;
 
@@ -479,7 +485,11 @@ UI.Checkbox.prototype.getValue = function () {
 
 UI.Checkbox.prototype.setValue = function ( value ) {
 
-	this.dom.checked = value;
+	if ( value !== undefined ) {
+
+		this.dom.checked = value;
+
+	}
 
 	return this;
 
@@ -566,7 +576,7 @@ UI.Color.prototype.onChange = function ( callback ) {
 
 // Number
 
-UI.Number = function () {
+UI.Number = function ( number ) {
 
 	UI.Element.call( this );
 
@@ -585,6 +595,7 @@ UI.Number = function () {
 	dom.value = '0.00';
 
 	this.dom = dom;
+	this.setValue( number );
 
 	this.min = - Infinity;
 	this.max = Infinity;
@@ -688,7 +699,11 @@ UI.Number.prototype.getValue = function () {
 
 UI.Number.prototype.setValue = function ( value ) {
 
-	this.dom.value = value.toFixed( this.precision );
+	if ( value !== undefined ) {
+
+		this.dom.value = value.toFixed( this.precision );
+
+	}
 
 	return this;
 

editor/js/UI.three.js

@@ -12,8 +12,6 @@ UI.Texture = function ( position ) {
 	this.dom = document.createElement( 'input' );
 	this.dom.type = 'file';
 	this.dom.style.position = position || 'relative';
-	this.dom.style.marginTop = '-2px';
-	this.dom.style.marginLeft = '-2px';
 
 	this.onChangeCallback = null;
 
@@ -112,8 +110,6 @@ UI.CubeTexture = function ( position ) {
 	this.dom = document.createElement( 'input' );
 	this.dom.type = 'file';
 	this.dom.style.position = position || 'relative';
-	this.dom.style.marginTop = '-2px';
-	this.dom.style.marginLeft = '-2px';
 
 	this.onChangeCallback = null;
 
@@ -168,4 +164,4 @@ UI.CubeTexture.prototype.onChange = function ( callback ) {
 
 	return this;
 
-};
+};

editor/js/ui/Sidebar.Geometry.js

@@ -29,15 +29,15 @@ Sidebar.Geometry = function ( signals ) {
 	container.setDisplay( 'none' );
 	container.setPadding( '10px' );
 
-	container.add( new UI.Text().setValue( 'GEOMETRY' ).setColor( '#666' ) );
+	container.add( new UI.Text( 'GEOMETRY' ).setColor( '#666' ) );
 	container.add( new UI.Break(), new UI.Break() );
 
 	// name
 
 	var geometryNameRow = new UI.Panel();
-	var geometryName = new UI.Input().setPosition( 'absolute' ).setLeft( '100px' ).setWidth( '150px' ).setColor( '#444' ).setFontSize( '12px' ).onChange( update );
+	var geometryName = new UI.Input().setWidth( '150px' ).setColor( '#444' ).setFontSize( '12px' ).onChange( update );
 
-	geometryNameRow.add( new UI.Text().setValue( 'Name' ).setColor( '#666' ) );
+	geometryNameRow.add( new UI.Text( 'Name' ).setWidth( '90px' ).setColor( '#666' ) );
 	geometryNameRow.add( geometryName );
 
 	container.add( geometryNameRow );
@@ -45,9 +45,9 @@ Sidebar.Geometry = function ( signals ) {
 	// class
 
 	var geometryClassRow = new UI.Panel();
-	var geometryClass = new UI.Text().setPosition( 'absolute' ).setLeft( '100px' ).setColor( '#444' ).setFontSize( '12px' );
+	var geometryClass = new UI.Text().setColor( '#444' ).setFontSize( '12px' );
 
-	geometryClassRow.add( new UI.Text().setValue( 'Class' ).setColor( '#666' ) );
+	geometryClassRow.add( new UI.Text( 'Class' ).setWidth( '90px' ).setColor( '#666' ) );
 	geometryClassRow.add( geometryClass );
 
 	container.add( geometryClassRow );
@@ -55,9 +55,9 @@ Sidebar.Geometry = function ( signals ) {
 	// vertices
 
 	var geometryVerticesRow = new UI.Panel();
-	var geometryVertices = new UI.Text().setPosition( 'absolute' ).setLeft( '100px' ).setColor( '#444' ).setFontSize( '12px' );
+	var geometryVertices = new UI.Text().setColor( '#444' ).setFontSize( '12px' );
 
-	geometryVerticesRow.add( new UI.Text().setValue( 'Vertices' ).setColor( '#666' ) );
+	geometryVerticesRow.add( new UI.Text( 'Vertices' ).setWidth( '90px' ).setColor( '#666' ) );
 	geometryVerticesRow.add( geometryVertices );
 
 	container.add( geometryVerticesRow );
@@ -65,9 +65,9 @@ Sidebar.Geometry = function ( signals ) {
 	// faces
 
 	var geometryFacesRow = new UI.Panel();
-	var geometryFaces = new UI.Text().setPosition( 'absolute' ).setLeft( '100px' ).setColor( '#444' ).setFontSize( '12px' );
+	var geometryFaces = new UI.Text().setColor( '#444' ).setFontSize( '12px' );
 
-	geometryFacesRow.add( new UI.Text().setValue( 'Faces' ).setColor( '#666' ) );
+	geometryFacesRow.add( new UI.Text( 'Faces' ).setWidth( '90px' ).setColor( '#666' ) );
 	geometryFacesRow.add( geometryFaces );
 
 	container.add( geometryFacesRow );

editor/js/ui/Sidebar.Material.js

@@ -28,9 +28,9 @@ Sidebar.Material = function ( signals ) {
 	// name
 
 	var materialNameRow = new UI.Panel();
-	var materialName = new UI.Input().setPosition( 'absolute' ).setLeft( '100px' ).setWidth( '150px' ).setColor( '#444' ).setFontSize( '12px' ).onChange( update );
+	var materialName = new UI.Input().setWidth( '150px' ).setColor( '#444' ).setFontSize( '12px' ).onChange( update );
 
-	materialNameRow.add( new UI.Text().setValue( 'Name' ).setColor( '#666' ) );
+	materialNameRow.add( new UI.Text( 'Name' ).setWidth( '90px' ).setColor( '#666' ) );
 	materialNameRow.add( materialName );
 
 	container.add( materialNameRow );
@@ -38,7 +38,7 @@ Sidebar.Material = function ( signals ) {
 	// class
 
 	var materialClassRow = new UI.Panel();
-	var materialClass = new UI.Select().setPosition( 'absolute' ).setOptions( {
+	var materialClass = new UI.Select().setOptions( {
 
 		'LineBasicMaterial': 'LineBasicMaterial',
 		'LineDashedMaterial': 'LineDashedMaterial',
@@ -49,9 +49,9 @@ Sidebar.Material = function ( signals ) {
 		'MeshNormalMaterial': 'MeshNormalMaterial',
 		'MeshPhongMaterial': 'MeshPhongMaterial'
 
-	} ).setLeft( '100px' ).setWidth( '150px' ).setColor( '#444' ).setFontSize( '12px' ).onChange( update );
+	} ).setWidth( '150px' ).setColor( '#444' ).setFontSize( '12px' ).onChange( update );
 
-	materialClassRow.add( new UI.Text().setValue( 'Class' ).setColor( '#666' ) );
+	materialClassRow.add( new UI.Text( 'Class' ).setWidth( '90px' ).setColor( '#666' ) );
 	materialClassRow.add( materialClass );
 
 	container.add( materialClassRow );
@@ -59,9 +59,9 @@ Sidebar.Material = function ( signals ) {
 	// color
 
 	var materialColorRow = new UI.Panel();
-	var materialColor = new UI.Color().setPosition( 'absolute' ).setLeft( '100px' ).onChange( update );
+	var materialColor = new UI.Color().onChange( update );
 
-	materialColorRow.add( new UI.Text().setValue( 'Color' ).setColor( '#666' ) );
+	materialColorRow.add( new UI.Text( 'Color' ).setWidth( '90px' ).setColor( '#666' ) );
 	materialColorRow.add( materialColor );
 
 	container.add( materialColorRow );
@@ -69,9 +69,9 @@ Sidebar.Material = function ( signals ) {
 	// ambient
 
 	var materialAmbientRow = new UI.Panel();
-	var materialAmbient = new UI.Color().setPosition( 'absolute' ).setLeft( '100px' ).onChange( update );
+	var materialAmbient = new UI.Color().onChange( update );
 
-	materialAmbientRow.add( new UI.Text().setValue( 'Ambient' ).setColor( '#666' ) );
+	materialAmbientRow.add( new UI.Text( 'Ambient' ).setWidth( '90px' ).setColor( '#666' ) );
 	materialAmbientRow.add( materialAmbient );
 
 	container.add( materialAmbientRow );
@@ -79,9 +79,9 @@ Sidebar.Material = function ( signals ) {
 	// emissive
 
 	var materialEmissiveRow = new UI.Panel();
-	var materialEmissive = new UI.Color().setPosition( 'absolute' ).setLeft( '100px' ).onChange( update );
+	var materialEmissive = new UI.Color().onChange( update );
 
-	materialEmissiveRow.add( new UI.Text().setValue( 'Emissive' ).setColor( '#666' ) );
+	materialEmissiveRow.add( new UI.Text( 'Emissive' ).setWidth( '90px' ).setColor( '#666' ) );
 	materialEmissiveRow.add( materialEmissive );
 
 	container.add( materialEmissiveRow );
@@ -89,9 +89,9 @@ Sidebar.Material = function ( signals ) {
 	// specular
 
 	var materialSpecularRow = new UI.Panel();
-	var materialSpecular = new UI.Color().setPosition( 'absolute' ).setLeft( '100px' ).onChange( update );
+	var materialSpecular = new UI.Color().onChange( update );
 
-	materialSpecularRow.add( new UI.Text().setValue( 'Specular' ).setColor( '#666' ) );
+	materialSpecularRow.add( new UI.Text( 'Specular' ).setWidth( '90px' ).setColor( '#666' ) );
 	materialSpecularRow.add( materialSpecular );
 
 	container.add( materialSpecularRow );
@@ -99,9 +99,9 @@ Sidebar.Material = function ( signals ) {
 	// shininess
 
 	var materialShininessRow = new UI.Panel();
-	var materialShininess = new UI.Number().setPosition( 'absolute' ).setValue( 30 ).setLeft( '100px' ).onChange( update );
+	var materialShininess = new UI.Number( 30 ).onChange( update );
 
-	materialShininessRow.add( new UI.Text().setValue( 'Shininess' ).setColor( '#666' ) );
+	materialShininessRow.add( new UI.Text( 'Shininess' ).setWidth( '90px' ).setColor( '#666' ) );
 	materialShininessRow.add( materialShininess );
 
 	container.add( materialShininessRow );
@@ -109,10 +109,10 @@ Sidebar.Material = function ( signals ) {
 	// map
 
 	var materialMapRow = new UI.Panel();
-	var materialMapEnabled = new UI.Checkbox().setPosition( 'absolute' ).setValue( false ).setLeft( '100px' ).onChange( update );
-	var materialMap = new UI.Texture().setPosition( 'absolute' ).setLeft( '130px' ).setColor( '#444' ).onChange( update );
+	var materialMapEnabled = new UI.Checkbox( false ).onChange( update );
+	var materialMap = new UI.Texture().setColor( '#444' ).setWidth( '100px' ).onChange( update );
 
-	materialMapRow.add( new UI.Text().setValue( 'Map' ).setColor( '#666' ) );
+	materialMapRow.add( new UI.Text( 'Map' ).setWidth( '90px' ).setColor( '#666' ) );
 	materialMapRow.add( materialMapEnabled );
 	materialMapRow.add( materialMap );
 
@@ -121,10 +121,10 @@ Sidebar.Material = function ( signals ) {
 	// light map
 
 	var materialLightMapRow = new UI.Panel();
-	var materialLightMapEnabled = new UI.Checkbox().setPosition( 'absolute' ).setValue( false ).setLeft( '100px' ).onChange( update );
-	var materialLightMap = new UI.Texture().setPosition( 'absolute' ).setLeft( '130px' ).setColor( '#444' ).onChange( update );
+	var materialLightMapEnabled = new UI.Checkbox( false ).onChange( update );
+	var materialLightMap = new UI.Texture().setColor( '#444' ).setWidth( '100px' ).onChange( update );
 
-	materialLightMapRow.add( new UI.Text().setValue( 'Light Map' ).setColor( '#666' ) );
+	materialLightMapRow.add( new UI.Text( 'Light Map' ).setWidth( '90px' ).setColor( '#666' ) );
 	materialLightMapRow.add( materialLightMapEnabled );
 	materialLightMapRow.add( materialLightMap );
 
@@ -133,11 +133,11 @@ Sidebar.Material = function ( signals ) {
 	// bump map
 
 	var materialBumpMapRow = new UI.Panel();
-	var materialBumpMapEnabled = new UI.Checkbox().setPosition( 'absolute' ).setValue( false ).setLeft( '100px' ).onChange( update );
-	var materialBumpMap = new UI.Texture().setPosition( 'absolute' ).setLeft( '170px' ).setColor( '#444' ).onChange( update );
-	var materialBumpScale = new UI.Number().setPosition( 'absolute' ).setValue( 1 ).setLeft( '130px' ).setWidth( '30px' ).onChange( update );
+	var materialBumpMapEnabled = new UI.Checkbox( false ).onChange( update );
+	var materialBumpMap = new UI.Texture().setColor( '#444' ).setWidth( '100px' ).onChange( update );
+	var materialBumpScale = new UI.Number( 1 ).setWidth( '30px' ).onChange( update );
 
-	materialBumpMapRow.add( new UI.Text().setValue( 'Bump Map' ).setColor( '#666' ) );
+	materialBumpMapRow.add( new UI.Text( 'Bump Map' ).setWidth( '90px' ).setColor( '#666' ) );
 	materialBumpMapRow.add( materialBumpMapEnabled );
 	materialBumpMapRow.add( materialBumpScale );
 	materialBumpMapRow.add( materialBumpMap );
@@ -147,10 +147,10 @@ Sidebar.Material = function ( signals ) {
 	// normal map
 
 	var materialNormalMapRow = new UI.Panel();
-	var materialNormalMapEnabled = new UI.Checkbox().setPosition( 'absolute' ).setValue( false ).setLeft( '100px' ).onChange( update );
-	var materialNormalMap = new UI.Texture().setPosition( 'absolute' ).setLeft( '130px' ).setColor( '#444' ).onChange( update );
+	var materialNormalMapEnabled = new UI.Checkbox( false ).onChange( update );
+	var materialNormalMap = new UI.Texture().setColor( '#444' ).setWidth( '100px' ).onChange( update );
 
-	materialNormalMapRow.add( new UI.Text().setValue( 'Normal Map' ).setColor( '#666' ) );
+	materialNormalMapRow.add( new UI.Text( 'Normal Map' ).setWidth( '90px' ).setColor( '#666' ) );
 	materialNormalMapRow.add( materialNormalMapEnabled );
 	materialNormalMapRow.add( materialNormalMap );
 
@@ -159,10 +159,10 @@ Sidebar.Material = function ( signals ) {
 	// specular map
 
 	var materialSpecularMapRow = new UI.Panel();
-	var materialSpecularMapEnabled = new UI.Checkbox().setPosition( 'absolute' ).setValue( false ).setLeft( '100px' ).onChange( update );
-	var materialSpecularMap = new UI.Texture().setPosition( 'absolute' ).setLeft( '130px' ).setColor( '#444' ).onChange( update );
+	var materialSpecularMapEnabled = new UI.Checkbox( false ).onChange( update );
+	var materialSpecularMap = new UI.Texture().setColor( '#444' ).setWidth( '100px' ).onChange( update );
 
-	materialSpecularMapRow.add( new UI.Text().setValue( 'Specular Map' ).setColor( '#666' ) );
+	materialSpecularMapRow.add( new UI.Text( 'Specular Map' ).setWidth( '90px' ).setColor( '#666' ) );
 	materialSpecularMapRow.add( materialSpecularMapEnabled );
 	materialSpecularMapRow.add( materialSpecularMap );
 
@@ -171,12 +171,12 @@ Sidebar.Material = function ( signals ) {
 	// env map
 
 	var materialEnvMapRow = new UI.Panel();
-	var materialEnvMapEnabled = new UI.Checkbox().setPosition( 'absolute' ).setValue( false ).setLeft( '100px' ).onChange( update );
-	var materialEnvMap = new UI.CubeTexture().setPosition( 'absolute' ).setLeft( '170px' ).setColor( '#444' ).onChange( update );
-	var materialReflectivity = new UI.Number().setPosition( 'absolute' ).setValue( 1 ).setLeft( '130px' ).setWidth( '30px' ).onChange( update );
+	var materialEnvMapEnabled = new UI.Checkbox( false ).onChange( update );
+	var materialEnvMap = new UI.CubeTexture().setColor( '#444' ).setWidth( '100px' ).onChange( update );
+	var materialReflectivity = new UI.Number( 1 ).setWidth( '30px' ).onChange( update );
 
 
-	materialEnvMapRow.add( new UI.Text().setValue( 'Env Map' ).setColor( '#666' ) );
+	materialEnvMapRow.add( new UI.Text( 'Env Map' ).setWidth( '90px' ).setColor( '#666' ) );
 	materialEnvMapRow.add( materialEnvMapEnabled );
 	materialEnvMapRow.add( materialReflectivity );
 	materialEnvMapRow.add( materialEnvMap );
@@ -186,9 +186,9 @@ Sidebar.Material = function ( signals ) {
 	// opacity
 
 	var materialOpacityRow = new UI.Panel();
-	var materialOpacity = new UI.Number().setPosition( 'absolute' ).setLeft( '100px' ).setWidth( '60px' ).setRange( 0, 1 ).onChange( update );
+	var materialOpacity = new UI.Number().setWidth( '60px' ).setRange( 0, 1 ).onChange( update );
 
-	materialOpacityRow.add( new UI.Text().setValue( 'Opacity' ).setColor( '#666' ) );
+	materialOpacityRow.add( new UI.Text( 'Opacity' ).setWidth( '90px' ).setColor( '#666' ) );
 	materialOpacityRow.add( materialOpacity );
 
 	container.add( materialOpacityRow );
@@ -196,9 +196,9 @@ Sidebar.Material = function ( signals ) {
 	// transparent
 
 	var materialTransparentRow = new UI.Panel();
-	var materialTransparent = new UI.Checkbox().setPosition( 'absolute' ).setValue( false ).setLeft( '100px' ).onChange( update );
+	var materialTransparent = new UI.Checkbox().setLeft( '100px' ).onChange( update );
 
-	materialTransparentRow.add( new UI.Text().setValue( 'Transparent' ).setColor( '#666' ) );
+	materialTransparentRow.add( new UI.Text( 'Transparent' ).setWidth( '90px' ).setColor( '#666' ) );
 	materialTransparentRow.add( materialTransparent );
 
 	container.add( materialTransparentRow );
@@ -206,10 +206,10 @@ Sidebar.Material = function ( signals ) {
 	// wireframe
 
 	var materialWireframeRow = new UI.Panel();
-	var materialWireframe = new UI.Checkbox().setPosition( 'absolute' ).setValue( false ).setLeft( '100px' ).onChange( update );
-	var materialWireframeLinewidth = new UI.Number().setPosition( 'absolute' ).setValue( 1 ).setLeft( '120px' ).setRange( 0, 100 ).onChange( update );
+	var materialWireframe = new UI.Checkbox( false ).onChange( update );
+	var materialWireframeLinewidth = new UI.Number( 1 ).setWidth( '60px' ).setRange( 0, 100 ).onChange( update );
 
-	materialWireframeRow.add( new UI.Text().setValue( 'Wireframe' ).setColor( '#666' ) );
+	materialWireframeRow.add( new UI.Text( 'Wireframe' ).setWidth( '90px' ).setColor( '#666' ) );
 	materialWireframeRow.add( materialWireframe );
 	materialWireframeRow.add( materialWireframeLinewidth );
 

editor/js/ui/Sidebar.Object3D.js

@@ -25,9 +25,9 @@ Sidebar.Object3D = function ( signals ) {
 	// name
 
 	var objectNameRow = new UI.Panel();
-	var objectName = new UI.Input().setPosition( 'absolute' ).setLeft( '100px' ).setWidth( '150px' ).setColor( '#444' ).setFontSize( '12px' ).onChange( update );
+	var objectName = new UI.Input().setWidth( '150px' ).setColor( '#444' ).setFontSize( '12px' ).onChange( update );
 
-	objectNameRow.add( new UI.Text().setValue( 'Name' ).setColor( '#666' ) );
+	objectNameRow.add( new UI.Text( 'Name' ).setWidth( '90px' ).setColor( '#666' ) );
 	objectNameRow.add( objectName );
 
 	container.add( objectNameRow );
@@ -35,11 +35,11 @@ Sidebar.Object3D = function ( signals ) {
 	// position
 
 	var objectPositionRow = new UI.Panel();
-	var objectPositionX = new UI.Number().setPosition( 'absolute' ).setLeft( '100px' ).setWidth( '50px' ).onChange( update );
-	var objectPositionY = new UI.Number().setPosition( 'absolute' ).setLeft( '160px' ).setWidth( '50px' ).onChange( update );
-	var objectPositionZ = new UI.Number().setPosition( 'absolute' ).setLeft( '220px' ).setWidth( '50px' ).onChange( update );
+	var objectPositionX = new UI.Number().setWidth( '50px' ).onChange( update );
+	var objectPositionY = new UI.Number().setWidth( '50px' ).onChange( update );
+	var objectPositionZ = new UI.Number().setWidth( '50px' ).onChange( update );
 
-	objectPositionRow.add( new UI.Text().setValue( 'Position' ).setColor( '#666' ) );
+	objectPositionRow.add( new UI.Text( 'Position' ).setWidth( '90px' ).setColor( '#666' ) );
 	objectPositionRow.add( objectPositionX, objectPositionY, objectPositionZ );
 
 	container.add( objectPositionRow );
@@ -47,11 +47,11 @@ Sidebar.Object3D = function ( signals ) {
 	// rotation
 
 	var objectRotationRow = new UI.Panel();
-	var objectRotationX = new UI.Number().setPosition( 'absolute' ).setLeft( '100px' ).setWidth( '50px' ).onChange( update );
-	var objectRotationY = new UI.Number().setPosition( 'absolute' ).setLeft( '160px' ).setWidth( '50px' ).onChange( update );
-	var objectRotationZ = new UI.Number().setPosition( 'absolute' ).setLeft( '220px' ).setWidth( '50px' ).onChange( update );
+	var objectRotationX = new UI.Number().setWidth( '50px' ).onChange( update );
+	var objectRotationY = new UI.Number().setWidth( '50px' ).onChange( update );
+	var objectRotationZ = new UI.Number().setWidth( '50px' ).onChange( update );
 
-	objectRotationRow.add( new UI.Text().setValue( 'Rotation' ).setColor( '#666' ) );
+	objectRotationRow.add( new UI.Text( 'Rotation' ).setWidth( '90px' ).setColor( '#666' ) );
 	objectRotationRow.add( objectRotationX, objectRotationY, objectRotationZ );
 
 	container.add( objectRotationRow );
@@ -60,11 +60,11 @@ Sidebar.Object3D = function ( signals ) {
 
 	var objectScaleRow = new UI.Panel();
 	var objectScaleLock = new UI.Checkbox().setPosition( 'absolute' ).setLeft( '75px' ).onChange( updateScaleLock );
-	var objectScaleX = new UI.Number().setPosition( 'absolute' ).setValue( 1 ).setLeft( '100px' ).setWidth( '50px' ).onChange( updateScaleX );
-	var objectScaleY = new UI.Number().setPosition( 'absolute' ).setValue( 1 ).setLeft( '160px' ).setWidth( '50px' ).onChange( updateScaleY );
-	var objectScaleZ = new UI.Number().setPosition( 'absolute' ).setValue( 1 ).setLeft( '220px' ).setWidth( '50px' ).onChange( updateScaleZ );
+	var objectScaleX = new UI.Number( 1 ).setWidth( '50px' ).onChange( updateScaleX );
+	var objectScaleY = new UI.Number( 1 ).setWidth( '50px' ).onChange( updateScaleY );
+	var objectScaleZ = new UI.Number( 1 ).setWidth( '50px' ).onChange( updateScaleZ );
 
-	objectScaleRow.add( new UI.Text().setValue( 'Scale' ).setColor( '#666' ) );
+	objectScaleRow.add( new UI.Text( 'Scale' ).setWidth( '90px' ).setColor( '#666' ) );
 	objectScaleRow.add( objectScaleLock );
 	objectScaleRow.add( objectScaleX, objectScaleY, objectScaleZ );
 
@@ -73,9 +73,9 @@ Sidebar.Object3D = function ( signals ) {
 	// fov
 
 	var objectFovRow = new UI.Panel();
-	var objectFov = new UI.Number().setPosition( 'absolute' ).setLeft( '100px' ).onChange( update );
+	var objectFov = new UI.Number().onChange( update );
 
-	objectFovRow.add( new UI.Text().setValue( 'Fov' ).setColor( '#666' ) );
+	objectFovRow.add( new UI.Text( 'Fov' ).setWidth( '90px' ).setColor( '#666' ) );
 	objectFovRow.add( objectFov );
 
 	container.add( objectFovRow );
@@ -83,9 +83,9 @@ Sidebar.Object3D = function ( signals ) {
 	// near
 
 	var objectNearRow = new UI.Panel();
-	var objectNear = new UI.Number().setPosition( 'absolute' ).setLeft( '100px' ).onChange( update );
+	var objectNear = new UI.Number().onChange( update );
 
-	objectNearRow.add( new UI.Text().setValue( 'Near' ).setColor( '#666' ) );
+	objectNearRow.add( new UI.Text( 'Near' ).setWidth( '90px' ).setColor( '#666' ) );
 	objectNearRow.add( objectNear );
 
 	container.add( objectNearRow );
@@ -93,9 +93,9 @@ Sidebar.Object3D = function ( signals ) {
 	// far
 
 	var objectFarRow = new UI.Panel();
-	var objectFar = new UI.Number().setPosition( 'absolute' ).setLeft( '100px' ).onChange( update );
+	var objectFar = new UI.Number().onChange( update );
 
-	objectFarRow.add( new UI.Text().setValue( 'Far' ).setColor( '#666' ) );
+	objectFarRow.add( new UI.Text( 'Far' ).setWidth( '90px' ).setColor( '#666' ) );
 	objectFarRow.add( objectFar );
 
 	container.add( objectFarRow );
@@ -103,9 +103,9 @@ Sidebar.Object3D = function ( signals ) {
 	// intensity
 
 	var objectIntensityRow = new UI.Panel();
-	var objectIntensity = new UI.Number().setPosition( 'absolute' ).setRange( 0, Infinity ).setLeft( '100px' ).onChange( update );
+	var objectIntensity = new UI.Number().setRange( 0, Infinity ).onChange( update );
 
-	objectIntensityRow.add( new UI.Text().setValue( 'Intensity' ).setColor( '#666' ) );
+	objectIntensityRow.add( new UI.Text( 'Intensity' ).setWidth( '90px' ).setColor( '#666' ) );
 	objectIntensityRow.add( objectIntensity );
 
 	container.add( objectIntensityRow );
@@ -113,9 +113,9 @@ Sidebar.Object3D = function ( signals ) {
 	// color
 
 	var objectColorRow = new UI.Panel();
-	var objectColor = new UI.Color().setPosition( 'absolute' ).setLeft( '100px' ).onChange( update );
+	var objectColor = new UI.Color().onChange( update );
 
-	objectColorRow.add( new UI.Text().setValue( 'Color' ).setColor( '#666' ) );
+	objectColorRow.add( new UI.Text( 'Color' ).setWidth( '90px' ).setColor( '#666' ) );
 	objectColorRow.add( objectColor );
 
 	container.add( objectColorRow );
@@ -123,9 +123,9 @@ Sidebar.Object3D = function ( signals ) {
 	// ground color
 
 	var objectGroundColorRow = new UI.Panel();
-	var objectGroundColor = new UI.Color().setPosition( 'absolute' ).setLeft( '100px' ).onChange( update );
+	var objectGroundColor = new UI.Color().onChange( update );
 
-	objectGroundColorRow.add( new UI.Text().setValue( 'Ground color' ).setColor( '#666' ) );
+	objectGroundColorRow.add( new UI.Text( 'Ground color' ).setWidth( '90px' ).setColor( '#666' ) );
 	objectGroundColorRow.add( objectGroundColor );
 
 	container.add( objectGroundColorRow );
@@ -133,9 +133,9 @@ Sidebar.Object3D = function ( signals ) {
 	// distance
 
 	var objectDistanceRow = new UI.Panel();
-	var objectDistance = new UI.Number().setPosition( 'absolute' ).setRange( 0, Infinity ).setLeft( '100px' ).onChange( update );
+	var objectDistance = new UI.Number().setRange( 0, Infinity ).onChange( update );
 
-	objectDistanceRow.add( new UI.Text().setValue( 'Distance' ).setColor( '#666' ) );
+	objectDistanceRow.add( new UI.Text( 'Distance' ).setWidth( '90px' ).setColor( '#666' ) );
 	objectDistanceRow.add( objectDistance );
 
 	container.add( objectDistanceRow );
@@ -143,9 +143,9 @@ Sidebar.Object3D = function ( signals ) {
 	// angle
 
 	var objectAngleRow = new UI.Panel();
-	var objectAngle = new UI.Number().setPosition( 'absolute' ).setPrecision( 3 ).setRange( 0, Math.PI * 2 ).setLeft( '100px' ).onChange( update );
+	var objectAngle = new UI.Number().setPrecision( 3 ).setRange( 0, Math.PI * 2 ).onChange( update );
 
-	objectAngleRow.add( new UI.Text().setValue( 'Angle' ).setColor( '#666' ) );
+	objectAngleRow.add( new UI.Text( 'Angle' ).setWidth( '90px' ).setColor( '#666' ) );
 	objectAngleRow.add( objectAngle );
 
 	container.add( objectAngleRow );
@@ -153,9 +153,9 @@ Sidebar.Object3D = function ( signals ) {
 	// exponent
 
 	var objectExponentRow = new UI.Panel();
-	var objectExponent = new UI.Number().setPosition( 'absolute' ).setRange( 0, Infinity ).setLeft( '100px' ).onChange( update );
+	var objectExponent = new UI.Number().setRange( 0, Infinity ).onChange( update );
 
-	objectExponentRow.add( new UI.Text().setValue( 'Exponent' ).setColor( '#666' ) );
+	objectExponentRow.add( new UI.Text( 'Exponent' ).setWidth( '90px' ).setColor( '#666' ) );
 	objectExponentRow.add( objectExponent );
 
 	container.add( objectExponentRow );
@@ -163,9 +163,9 @@ Sidebar.Object3D = function ( signals ) {
 	// visible
 
 	var objectVisibleRow = new UI.Panel();
-	var objectVisible = new UI.Checkbox().setPosition( 'absolute' ).setLeft( '100px' ).onChange( update );
+	var objectVisible = new UI.Checkbox().onChange( update );
 
-	objectVisibleRow.add( new UI.Text().setValue( 'Visible' ).setColor( '#666' ) );
+	objectVisibleRow.add( new UI.Text( 'Visible' ).setWidth( '90px' ).setColor( '#666' ) );
 	objectVisibleRow.add( objectVisible );
 
 	container.add( objectVisibleRow );
@@ -173,9 +173,9 @@ Sidebar.Object3D = function ( signals ) {
 	// user data
 
 	var objectUserDataRow = new UI.Panel();
-	objectUserDataRow.add( new UI.Text().setValue( 'User data' ).setWidth( '100px' ).setColor( '#666' ) );
-
 	var objectUserData = new UI.TextArea().setWidth( '150px' ).setColor( '#444' ).setFontSize( '12px' ).onChange( update );
+
+	objectUserDataRow.add( new UI.Text( 'User data' ).setWidth( '90px' ).setColor( '#666' ) );
 	objectUserDataRow.add( objectUserData );
 
 	container.add( objectUserDataRow );

editor/js/ui/Sidebar.Renderer.js

@@ -13,22 +13,22 @@ Sidebar.Renderer = function ( signals ) {
 	container.setPadding( '10px' );
 	container.setBorderTop( '1px solid #ccc' );
 
-	container.add( new UI.Text().setValue( 'RENDERER' ).setColor( '#666' ) );
+	container.add( new UI.Text( 'RENDERER' ).setColor( '#666' ) );
 	container.add( new UI.Break(), new UI.Break() );
 
 	// class
 
 	var rendererClassRow = new UI.Panel();
-	var rendererClass = new UI.Select().setPosition( 'absolute' ).setOptions( {
+	var rendererClass = new UI.Select().setOptions( {
 
 		'WebGLRenderer': 'WebGLRenderer',
 		'CanvasRenderer': 'CanvasRenderer',
 		'SoftwareRenderer': 'SoftwareRenderer',
 		'SVGRenderer': 'SVGRenderer',
 
-	} ).setLeft( '100px' ).setWidth( '150px' ).setColor( '#444' ).setFontSize( '12px' ).onChange( updateRenderer );
+	} ).setWidth( '150px' ).setColor( '#444' ).setFontSize( '12px' ).onChange( updateRenderer );
 
-	rendererClassRow.add( new UI.Text().setValue( 'Class' ).setColor( '#666' ) );
+	rendererClassRow.add( new UI.Text( 'Class' ).setWidth( '90px' ).setColor( '#666' ) );
 	rendererClassRow.add( rendererClass );
 
 	container.add( rendererClassRow );
@@ -36,9 +36,9 @@ Sidebar.Renderer = function ( signals ) {
 	// clear color
 
 	var clearColorRow = new UI.Panel();
-	var clearColor = new UI.Color().setPosition( 'absolute' ).setLeft( '100px' ).setValue( '#aaaaaa' ).onChange( updateClearColor );
+	var clearColor = new UI.Color().setValue( '#aaaaaa' ).onChange( updateClearColor );
 
-	clearColorRow.add( new UI.Text().setValue( 'Clear color' ).setColor( '#666' ) );
+	clearColorRow.add( new UI.Text( 'Clear color' ).setWidth( '90px' ).setColor( '#666' ) );
 	clearColorRow.add( clearColor );
 
 	container.add( clearColorRow );
@@ -48,10 +48,10 @@ Sidebar.Renderer = function ( signals ) {
 	function updateRenderer() {
 
 		var renderer = new rendererClasses[ rendererClass.getValue() ]( {
-				antialias: true,
-				alpha: false,
-				clearColor: clearColor.getHexValue(),
-				clearAlpha: 1
+			antialias: true,
+			alpha: false,
+			clearColor: clearColor.getHexValue(),
+			clearAlpha: 1
 		} );
 		signals.rendererChanged.dispatch( renderer );
 

editor/js/ui/Sidebar.Scene.js

@@ -19,7 +19,7 @@ Sidebar.Scene = function ( signals ) {
 	container.setPadding( '10px' );
 	container.setBorderTop( '1px solid #ccc' );
 
-	container.add( new UI.Text().setValue( 'SCENE' ).setColor( '#666' ) );
+	container.add( new UI.Text( 'SCENE' ).setColor( '#666' ) );
 	container.add( new UI.Break(), new UI.Break() );
 
 	var outliner = new UI.FancySelect().setWidth( '100%' ).setHeight('140px').setColor( '#444' ).setFontSize( '12px' ).onChange( updateOutliner );
@@ -29,15 +29,15 @@ Sidebar.Scene = function ( signals ) {
 	// fog
 
 	var fogTypeRow = new UI.Panel();
-	var fogType = new UI.Select().setPosition( 'absolute' ).setOptions( {
+	var fogType = new UI.Select().setOptions( {
 
 		'None': 'None',
 		'Fog': 'Linear',
 		'FogExp2': 'Exponential'
 
-	} ).setLeft( '100px' ).setWidth( '150px' ).setColor( '#444' ).setFontSize( '12px' ).onChange( updateFogType );
+	} ).setWidth( '150px' ).setColor( '#444' ).setFontSize( '12px' ).onChange( updateFogType );
 
-	fogTypeRow.add( new UI.Text().setValue( 'Fog' ).setColor( '#666' ) );
+	fogTypeRow.add( new UI.Text( 'Fog' ).setWidth( '90px' ).setColor( '#666' ) );
 	fogTypeRow.add( fogType );
 
 	container.add( fogTypeRow );
@@ -47,9 +47,9 @@ Sidebar.Scene = function ( signals ) {
 	var fogColorRow = new UI.Panel();
 	fogColorRow.setDisplay( 'none' );
 
-	var fogColor = new UI.Color().setPosition( 'absolute' ).setLeft( '100px' ).setValue( '#aaaaaa' ).onChange( updateFogColor );
+	var fogColor = new UI.Color().setValue( '#aaaaaa' ).onChange( updateFogColor );
 
-	fogColorRow.add( new UI.Text().setValue( 'Fog color' ).setColor( '#666' ) );
+	fogColorRow.add( new UI.Text( 'Fog color' ).setWidth( '90px' ).setColor( '#666' ) );
 	fogColorRow.add( fogColor );
 
 	container.add( fogColorRow );
@@ -59,9 +59,9 @@ Sidebar.Scene = function ( signals ) {
 	var fogNearRow = new UI.Panel();
 	fogNearRow.setDisplay( 'none' );
 
-	var fogNear = new UI.Number().setPosition( 'absolute' ).setLeft( '100px' ).setWidth( '60px' ).setRange( 0, Infinity ).setValue( 1 ).onChange( updateFogParameters );
+	var fogNear = new UI.Number( 1 ).setWidth( '60px' ).setRange( 0, Infinity ).onChange( updateFogParameters );
 
-	fogNearRow.add( new UI.Text().setValue( 'Fog near' ).setColor( '#666' ) );
+	fogNearRow.add( new UI.Text( 'Fog near' ).setWidth( '90px' ).setColor( '#666' ) );
 	fogNearRow.add( fogNear );
 
 	container.add( fogNearRow );
@@ -71,9 +71,9 @@ Sidebar.Scene = function ( signals ) {
 
 	// fog far
 
-	var fogFar = new UI.Number().setPosition( 'absolute' ).setLeft( '100px' ).setWidth( '60px' ).setRange( 0, Infinity ).setValue( 5000 ).onChange( updateFogParameters );
+	var fogFar = new UI.Number( 5000 ).setWidth( '60px' ).setRange( 0, Infinity ).onChange( updateFogParameters );
 
-	fogFarRow.add( new UI.Text().setValue( 'Fog far' ).setColor( '#666' ) );
+	fogFarRow.add( new UI.Text( 'Fog far' ).setWidth( '90px' ).setColor( '#666' ) );
 	fogFarRow.add( fogFar );
 
 	container.add( fogFarRow );
@@ -83,9 +83,9 @@ Sidebar.Scene = function ( signals ) {
 	var fogDensityRow = new UI.Panel();
 	fogDensityRow.setDisplay( 'none' );
 
-	var fogDensity = new UI.Number().setPosition( 'absolute' ).setLeft( '100px' ).setWidth( '60px' ).setRange( 0, 0.1 ).setPrecision( 5 ).setValue( 0.00025 ).onChange( updateFogParameters );
+	var fogDensity = new UI.Number( 0.00025 ).setWidth( '60px' ).setRange( 0, 0.1 ).setPrecision( 5 ).onChange( updateFogParameters );
 
-	fogDensityRow.add( new UI.Text().setValue( 'Fog density' ).setColor( '#666' ) );
+	fogDensityRow.add( new UI.Text( 'Fog density' ).setWidth( '90px' ).setColor( '#666' ) );
 	fogDensityRow.add( fogDensity );
 
 	container.add( fogDensityRow );