UI: Changed position API.

editor/js/UI.js

@@ -34,7 +34,7 @@ UI.Element.prototype = {
 
 // properties
 
-var properties = [ 'left', 'top', 'right', 'bottom', 'width', 'height', 'border', 'borderLeft',
+var properties = [ 'position', 'left', 'top', 'right', 'bottom', 'width', 'height', 'border', 'borderLeft',
 'borderTop', 'borderRight', 'borderBottom', 'margin', 'marginLeft', 'marginTop', 'marginRight',
 'marginBottom', 'padding', 'paddingLeft', 'paddingTop', 'paddingRight', 'paddingBottom', 'color',
 'backgroundColor', 'fontSize', 'fontWeight', 'display', 'overflow', 'cursor' ];
@@ -72,13 +72,12 @@ events.forEach( function ( event ) {
 
 // Panel
 
-UI.Panel = function ( position ) {
+UI.Panel = function () {
 
 	UI.Element.call( this );
 
 	var dom = document.createElement( 'div' );
 	dom.className = 'Panel';
-	dom.style.position = position || 'relative';
 	dom.style.userSelect = 'none';
 	dom.style.WebkitUserSelect = 'none';
 	dom.style.MozUserSelect = 'none';
@@ -105,14 +104,15 @@ UI.Panel.prototype.add = function () {
 
 // Text
 
-UI.Text = function ( position ) {
+UI.Text = function () {
 
 	UI.Element.call( this );
 
 	var dom = document.createElement( 'span' );
 	dom.className = 'Text';
-	dom.style.position = position || 'relative';
 	dom.style.cursor = 'default';
+	dom.style.display = 'inline-block';
+	dom.style.verticalAlign = 'top';
 
 	this.dom = dom;
 
@@ -133,7 +133,7 @@ UI.Text.prototype.setValue = function ( value ) {
 
 // Input
 
-UI.Input = function ( position ) {
+UI.Input = function () {
 
 	UI.Element.call( this );
 
@@ -141,7 +141,6 @@ UI.Input = function ( position ) {
 
 	var dom = document.createElement( 'input' );
 	dom.className = 'Input';
-	dom.style.position = position || 'relative';
 	dom.style.padding = '2px';
 	dom.style.marginTop = '-2px';
 	dom.style.marginLeft = '-2px';
@@ -188,7 +187,7 @@ UI.Input.prototype.onChange = function ( callback ) {
 
 // TextArea
 
-UI.TextArea = function ( position ) {
+UI.TextArea = function () {
 
 	UI.Element.call( this );
 
@@ -196,7 +195,6 @@ UI.TextArea = function ( position ) {
 
 	var dom = document.createElement( 'textarea' );
 	dom.className = 'TextArea';
-	dom.style.position = position || 'relative';
 	dom.style.padding = '2px';
 	dom.style.marginTop = '-2px';
 	dom.style.marginLeft = '-2px';
@@ -243,7 +241,7 @@ UI.TextArea.prototype.onChange = function ( callback ) {
 
 // Select
 
-UI.Select = function ( position ) {
+UI.Select = function () {
 
 	UI.Element.call( this );
 
@@ -251,7 +249,6 @@ UI.Select = function ( position ) {
 
 	var dom = document.createElement( 'select' );
 	dom.className = 'Select';
-	dom.style.position = position || 'relative';
 	dom.style.width = '64px';
 	dom.style.height = '16px';
 	dom.style.border = '0px';
@@ -326,7 +323,7 @@ UI.Select.prototype.onChange = function ( callback ) {
 
 // FancySelect
 
-UI.FancySelect = function ( position ) {
+UI.FancySelect = function () {
 
 	UI.Element.call( this );
 
@@ -334,7 +331,6 @@ UI.FancySelect = function ( position ) {
 
 	var dom = document.createElement( 'div' );
 	dom.className = 'FancySelect';
-	dom.style.position = position || 'relative';
 	dom.style.background = '#fff';
 	dom.style.border = '1px solid #ccc';
 	dom.style.padding = '0';
@@ -449,7 +445,7 @@ UI.FancySelect.prototype.onChange = function ( callback ) {
 
 // Checkbox
 
-UI.Checkbox = function ( position ) {
+UI.Checkbox = function () {
 
 	UI.Element.call( this );
 
@@ -457,7 +453,6 @@ UI.Checkbox = function ( position ) {
 
 	var dom = document.createElement( 'input' );
 	dom.className = 'Checkbox';
-	dom.style.position = position || 'relative';
 	dom.type = 'checkbox';
 
 	this.dom = dom;
@@ -501,7 +496,7 @@ UI.Checkbox.prototype.onChange = function ( callback ) {
 
 // Color
 
-UI.Color = function ( position ) {
+UI.Color = function () {
 
 	UI.Element.call( this );
 
@@ -509,7 +504,6 @@ UI.Color = function ( position ) {
 
 	var dom = document.createElement( 'input' );
 	dom.className = 'Color';
-	dom.style.position = position || 'relative';
 	dom.style.width = '64px';
 	dom.style.height = '16px';
 	dom.style.border = '0px';
@@ -572,7 +566,7 @@ UI.Color.prototype.onChange = function ( callback ) {
 
 // Number
 
-UI.Number = function ( position ) {
+UI.Number = function () {
 
 	UI.Element.call( this );
 
@@ -580,7 +574,6 @@ UI.Number = function ( position ) {
 
 	var dom = document.createElement( 'input' );
 	dom.className = 'Number';
-	dom.style.position = position || 'relative';
 	dom.style.color = '#0080f0';
 	dom.style.fontSize = '12px';
 	dom.style.backgroundColor = 'transparent';
@@ -753,13 +746,12 @@ UI.Break.prototype = Object.create( UI.Element.prototype );
 
 // HorizontalRule
 
-UI.HorizontalRule = function ( position ) {
+UI.HorizontalRule = function () {
 
 	UI.Element.call( this );
 
 	var dom = document.createElement( 'hr' );
 	dom.className = 'HorizontalRule';
-	dom.style.position = position || 'relative';
 
 	this.dom = dom;
 
@@ -772,7 +764,7 @@ UI.HorizontalRule.prototype = Object.create( UI.Element.prototype );
 
 // Button
 
-UI.Button = function ( position ) {
+UI.Button = function () {
 
 	UI.Element.call( this );
 
@@ -780,7 +772,6 @@ UI.Button = function ( position ) {
 
 	var dom = document.createElement( 'button' );
 	dom.className = 'Button';
-	dom.style.position = position || 'relative';
 
 	this.dom = dom;
 

editor/js/ui/Menubar.js

@@ -1,6 +1,7 @@
 var Menubar = function ( signals ) {
 
-	var container = new UI.Panel( 'absolute' );
+	var container = new UI.Panel();
+	container.setPosition( 'absolute' );
 	container.setClass( 'menubar' );
 
 	container.add( new Menubar.File( signals ) );

editor/js/ui/Sidebar.Geometry.js

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

editor/js/ui/Sidebar.Material.js

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

editor/js/ui/Sidebar.Object3D.js

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

editor/js/ui/Sidebar.Renderer.js

@@ -19,7 +19,7 @@ Sidebar.Renderer = function ( signals ) {
 	// class
 
 	var rendererClassRow = new UI.Panel();
-	var rendererClass = new UI.Select( 'absolute' ).setOptions( {
+	var rendererClass = new UI.Select().setPosition( 'absolute' ).setOptions( {
 
 		'WebGLRenderer': 'WebGLRenderer',
 		'CanvasRenderer': 'CanvasRenderer',
@@ -36,7 +36,7 @@ Sidebar.Renderer = function ( signals ) {
 	// clear color
 
 	var clearColorRow = new UI.Panel();
-	var clearColor = new UI.Color( 'absolute' ).setLeft( '100px' ).setValue( '#aaaaaa' ).onChange( updateClearColor );
+	var clearColor = new UI.Color().setPosition( 'absolute' ).setLeft( '100px' ).setValue( '#aaaaaa' ).onChange( updateClearColor );
 
 	clearColorRow.add( new UI.Text().setValue( 'Clear color' ).setColor( '#666' ) );
 	clearColorRow.add( clearColor );

editor/js/ui/Sidebar.Scene.js

@@ -29,7 +29,7 @@ Sidebar.Scene = function ( signals ) {
 	// fog
 
 	var fogTypeRow = new UI.Panel();
-	var fogType = new UI.Select( 'absolute' ).setOptions( {
+	var fogType = new UI.Select().setPosition( 'absolute' ).setOptions( {
 
 		'None': 'None',
 		'Fog': 'Linear',
@@ -47,7 +47,7 @@ Sidebar.Scene = function ( signals ) {
 	var fogColorRow = new UI.Panel();
 	fogColorRow.setDisplay( 'none' );
 
-	var fogColor = new UI.Color( 'absolute' ).setLeft( '100px' ).setValue( '#aaaaaa' ).onChange( updateFogColor );
+	var fogColor = new UI.Color().setPosition( 'absolute' ).setLeft( '100px' ).setValue( '#aaaaaa' ).onChange( updateFogColor );
 
 	fogColorRow.add( new UI.Text().setValue( 'Fog color' ).setColor( '#666' ) );
 	fogColorRow.add( fogColor );
@@ -59,7 +59,7 @@ Sidebar.Scene = function ( signals ) {
 	var fogNearRow = new UI.Panel();
 	fogNearRow.setDisplay( 'none' );
 
-	var fogNear = new UI.Number( 'absolute' ).setLeft( '100px' ).setWidth( '60px' ).setRange( 0, Infinity ).setValue( 1 ).onChange( updateFogParameters );
+	var fogNear = new UI.Number().setPosition( 'absolute' ).setLeft( '100px' ).setWidth( '60px' ).setRange( 0, Infinity ).setValue( 1 ).onChange( updateFogParameters );
 
 	fogNearRow.add( new UI.Text().setValue( 'Fog near' ).setColor( '#666' ) );
 	fogNearRow.add( fogNear );
@@ -71,7 +71,7 @@ Sidebar.Scene = function ( signals ) {
 
 	// fog far
 
-	var fogFar = new UI.Number( 'absolute' ).setLeft( '100px' ).setWidth( '60px' ).setRange( 0, Infinity ).setValue( 5000 ).onChange( updateFogParameters );
+	var fogFar = new UI.Number().setPosition( 'absolute' ).setLeft( '100px' ).setWidth( '60px' ).setRange( 0, Infinity ).setValue( 5000 ).onChange( updateFogParameters );
 
 	fogFarRow.add( new UI.Text().setValue( 'Fog far' ).setColor( '#666' ) );
 	fogFarRow.add( fogFar );
@@ -83,7 +83,7 @@ Sidebar.Scene = function ( signals ) {
 	var fogDensityRow = new UI.Panel();
 	fogDensityRow.setDisplay( 'none' );
 
-	var fogDensity = new UI.Number( 'absolute' ).setLeft( '100px' ).setWidth( '60px' ).setRange( 0, 0.1 ).setPrecision( 5 ).setValue( 0.00025 ).onChange( updateFogParameters );
+	var fogDensity = new UI.Number().setPosition( 'absolute' ).setLeft( '100px' ).setWidth( '60px' ).setRange( 0, 0.1 ).setPrecision( 5 ).setValue( 0.00025 ).onChange( updateFogParameters );
 
 	fogDensityRow.add( new UI.Text().setValue( 'Fog density' ).setColor( '#666' ) );
 	fogDensityRow.add( fogDensity );

editor/js/ui/Sidebar.js

@@ -1,6 +1,7 @@
 var Sidebar = function ( signals ) {
 
-	var container = new UI.Panel( 'absolute' );
+	var container = new UI.Panel();
+	container.setPosition( 'absolute' );
 	container.setClass( 'sidebar' );
 
 	container.add( new Sidebar.Renderer( signals ) );

editor/js/ui/Viewport.js

@@ -1,6 +1,7 @@
 var Viewport = function ( signals ) {
 
-	var container = new UI.Panel( 'absolute' );
+	var container = new UI.Panel();
+	container.setPosition( 'absolute' );
 	container.setBackgroundColor( '#aaa' );
 
 	// settings