GUI: Added MenuBar. Changed UI.js to use arguments array. Fixed a object picking bug/typo.

gui/index.html

@@ -26,6 +26,7 @@
 		<script type="text/javascript" src="js/UI.js"></script>
 		<script type="text/javascript" src="js/ui/Viewport.js"></script>
 		<script type="text/javascript" src="js/ui/Panel.js"></script>
+		<script type="text/javascript" src="js/ui/MenuBar.js"></script>
 
 		<script>
 
@@ -43,18 +44,23 @@
 			//
 
 			var viewport = new Viewport( signals );
-			viewport.setWidth( '-webkit-calc(100% - 300px)' );
-			viewport.setWidth( '-moz-calc(100% - 300px)' );
-			viewport.setWidth( 'calc(100% - 300px)' );
-			viewport.setHeight( '100%' );
+			viewport.setTop( '30px' );
+			viewport.setWidth( '-webkit-calc(100% - 300px)', '-moz-calc(100% - 300px)', 'calc(100% - 300px)' );
+			viewport.setHeight( '-webkit-calc(100% - 32px)', '-moz-calc(100% - 32px)', 'calc(100% - 32px)' );
 			document.body.appendChild( viewport.dom );
 
 			var panel = new Panel( signals );
-			panel.setX( '-webkit-calc(100% - 300px)' );
-			panel.setX( '-moz-calc(100% - 300px)' );
-			panel.setX( 'calc(100% - 300px)' );
+			panel.setLeft( '-webkit-calc(100% - 300px)', '-moz-calc(100% - 300px)', 'calc(100% - 300px)' );
+			panel.setTop( '32px' );
+			panel.setHeight( '-webkit-calc(100% - 32px)', '-moz-calc(100% - 32px)', 'calc(100% - 32px)' );
 			document.body.appendChild( panel.dom );
 
+			var menubar = new MenuBar( signals );
+			menubar.setWidth( '100%' );
+			menubar.setHeight( '32px' );
+			document.body.appendChild( menubar.dom );
+
+
 			//
 
 			var geometry = new THREE.SphereGeometry( 75, 25, 15 );

gui/js/UI.js

@@ -4,138 +4,146 @@ UI.Element = function () {};
 
 UI.Element.prototype = {
 
-	setX: function ( value ) {
+	setStyle: function ( style, array ) {
 
-		this.dom.style.left = value;
+		for ( var i = 0; i < array.length; i ++ ) {
 
-		return this;
+			this.dom.style[ style ] = array[ i ];
+
+		}
 
 	},
 
-	setY: function ( value ) {
+	setLeft: function () {
+
+		this.setStyle( 'left', arguments );
+		return this;
+
+	},
 
-		this.dom.style.top = value;
+	setTop: function () {
 
+		this.setStyle( 'top', arguments );
 		return this;		
 
 	},
 
-	setWidth: function ( value ) {
+	setWidth: function () {
 
-		this.dom.style.width = value;
+		this.setStyle( 'width', arguments );
 		return this;
 
 	},
 
-	setHeight: function ( value ) {
+	setHeight: function () {
 
-		this.dom.style.height = value;
+		this.setStyle( 'height', arguments );
 		return this;
 
 	},
 
 	// border
 
-	setBorder: function ( value ) {
+	setBorder: function () {
 
-		this.dom.style.border = value;
+		this.setStyle( 'border', arguments );
 		return this;
 
 	},
 
-	setBorderTop: function ( value ) {
+	setBorderTop: function () {
 
-		this.dom.style.borderTop = value;
+		this.setStyle( 'borderTop', arguments );
 		return this;
 
 	},
 
-	setBorderBottom: function ( value ) {
+	setBorderBottom: function () {
 
-		this.dom.style.borderBottom = value;
+		this.setStyle( 'borderBottom', arguments );
 		return this;
 
 	},
 
-	setBorderLeft: function ( value ) {
+	setBorderLeft: function () {
 
-		this.dom.style.borderLeft = value;
+		this.setStyle( 'borderLeft', arguments );
 		return this;
 
 	},
 
-	setBorderRight: function ( value ) {
+	setBorderRight: function () {
 
-		this.dom.style.borderRight = value;
+		this.setStyle( 'borderRight', arguments );
 		return this;
 
 	},
 
 	// margin
 
-	setMargin: function ( value ) {
+	setMargin: function () {
 
-		this.dom.style.margin = value;
+		this.setStyle( 'margin', arguments );
 		return this;
 
 	},
 
-	setMarginTop: function ( value ) {
+	setMarginTop: function () {
 
-		this.dom.style.marginTop = value;
+		this.setStyle( 'marginTop', arguments );
 		return this;
 
 	},
 
-	setMarginBottom: function ( value ) {
+	setMarginBottom: function () {
 
-		this.dom.style.marginBottom = value;
+		this.setStyle( 'marginBottom', arguments );
 		return this;
 
 	},
 
-	setMarginLeft: function ( value ) {
+	setMarginLeft: function () {
 
-		this.dom.style.marginLeft = value;
+		this.setStyle( 'marginLeft', arguments );
 		return this;
 
 	},
 
-	setMarginRight: function ( value ) {
+	setMarginRight: function () {
 
-		this.dom.style.marginRight = value;
+		this.setStyle( 'marginRight', arguments );
 		return this;
 
 	},
 
 	// padding
 
-	setPadding: function ( value ) {
+	setPadding: function () {
 
-		this.dom.style.padding = value;
+		this.setStyle( 'padding', arguments );
 		return this;
 
 	},
 
 	//
 
-	setFontWeight: function ( value ) {
+	setFontWeight: function () {
 
-		this.dom.style.fontWeight = value;
+		this.setStyle( 'fontWeight', arguments );
 		return this;
 
 	},
 
-	setColor: function ( value ) {
+	setColor: function () {
 
-		this.dom.style.color = value;
+		this.setStyle( 'color', arguments );
 		return this;
 
 	},
 
-	setBackgroundColor: function ( value ) {
+	setBackgroundColor: function () {
 
-		this.dom.style.backgroundColor = value;
+		this.setStyle( 'backgroundColor', arguments );
 		return this;
 
 	}

gui/js/ui/Panel.js

@@ -9,7 +9,8 @@ var Panel = function ( signals ) {
 	// Properties
 
 	var properties = new UI.Panel();
-	properties.setMargin( '8px' );
+	properties.setPadding( '8px' );
+	properties.setBorderTop( '1px solid #ccc' );
 
 	properties.add( new UI.Text().setText( 'PROPERTIES' ).setColor( '#666' ) );
 
@@ -18,9 +19,9 @@ var Panel = function ( signals ) {
 
 	properties.add( new UI.Text().setText( 'position' ).setColor( '#666' ) );
 
-	var positionX = new UI.FloatNumber( 'absolute' ).setX( '90px' ).onChanged( update );
-	var positionY = new UI.FloatNumber( 'absolute' ).setX( '160px' ).onChanged( update );
-	var positionZ = new UI.FloatNumber( 'absolute' ).setX( '230px' ).onChanged( update );
+	var positionX = new UI.FloatNumber( 'absolute' ).setLeft( '90px' ).onChanged( update );
+	var positionY = new UI.FloatNumber( 'absolute' ).setLeft( '160px' ).onChanged( update );
+	var positionZ = new UI.FloatNumber( 'absolute' ).setLeft( '230px' ).onChanged( update );
 
 	properties.add( positionX, positionY, positionZ );
 
@@ -28,9 +29,9 @@ var Panel = function ( signals ) {
 
 	properties.add( new UI.Text().setText( 'rotation' ).setColor( '#666' ) );
 
-	var rotationX = new UI.FloatNumber( 'absolute' ).setX( '90px' ).onChanged( update );
-	var rotationY = new UI.FloatNumber( 'absolute' ).setX( '160px' ).onChanged( update );
-	var rotationZ = new UI.FloatNumber( 'absolute' ).setX( '230px' ).onChanged( update );
+	var rotationX = new UI.FloatNumber( 'absolute' ).setLeft( '90px' ).onChanged( update );
+	var rotationY = new UI.FloatNumber( 'absolute' ).setLeft( '160px' ).onChanged( update );
+	var rotationZ = new UI.FloatNumber( 'absolute' ).setLeft( '230px' ).onChanged( update );
 
 	properties.add( rotationX, rotationY, rotationZ );
 
@@ -38,9 +39,9 @@ var Panel = function ( signals ) {
 
 	properties.add( new UI.Text().setText( 'scale' ).setColor( '#666' ) );
 
-	var scaleX = new UI.FloatNumber( 'absolute' ).setValue( 1 ).setX( '90px' ).onChanged( update );
-	var scaleY = new UI.FloatNumber( 'absolute' ).setValue( 1 ).setX( '160px' ).onChanged( update );
-	var scaleZ = new UI.FloatNumber( 'absolute' ).setValue( 1 ).setX( '230px' ).onChanged( update );
+	var scaleX = new UI.FloatNumber( 'absolute' ).setValue( 1 ).setLeft( '90px' ).onChanged( update );
+	var scaleY = new UI.FloatNumber( 'absolute' ).setValue( 1 ).setLeft( '160px' ).onChanged( update );
+	var scaleZ = new UI.FloatNumber( 'absolute' ).setValue( 1 ).setLeft( '230px' ).onChanged( update );
 
 	properties.add( scaleX, scaleY, scaleZ );
 

gui/js/ui/Viewport.js

@@ -61,7 +61,11 @@ var Viewport = function ( signals ) {
 
 		event.preventDefault();
 
-		var vector = new THREE.Vector3( ( event.clientX / container.dom.offsetWidth ) * 2 - 1, - ( event.clientY / container.dom.offsetHeght ) * 2 + 1, 0.5 );
+		var vector = new THREE.Vector3(
+			( ( event.clientX - container.dom.offsetLeft ) / container.dom.offsetWidth ) * 2 - 1,
+			- ( ( event.clientY - container.dom.offsetTop ) / container.dom.offsetHeight ) * 2 + 1,
+			0.5
+		);
 		projector.unprojectVector( vector, camera );
 
 		var ray = new THREE.Ray( camera.position, vector.subSelf( camera.position ).normalize() );