GUI: Starting geometry exporter.

gui/js/UI.js

@@ -24,7 +24,21 @@ UI.Element.prototype = {
 	setTop: function () {
 
 		this.setStyle( 'top', arguments );
-		return this;		
+		return this;
+
+	},
+
+	setRight: function () {
+
+		this.setStyle( 'right', arguments );
+		return this;
+
+	},
+
+	setBottom: function () {
+
+		this.setStyle( 'bottom', arguments );
+		return this;
 
 	},
 
@@ -235,7 +249,7 @@ UI.IntNumber = function ( position ) {
 	this.dom.style.fontSize = '12px';
 	this.dom.style.textDecoration = 'underline';
 
-	this.onChangedCallback = null;
+	this.onChangeCallback = null;
 
 	var scope = this;
 	var onMouseDownValue, onMouseDownScreenX, onMouseDownScreenY;
@@ -259,7 +273,7 @@ UI.IntNumber = function ( position ) {
 		var dy = event.screenY - onMouseDownScreenY;
 
 		scope.dom.textContent = ( onMouseDownValue + ( dx - dy ) / ( event.shiftKey ? 10 : 100 ) ).toFixed( 0 );
-		scope.onChangedCallback();
+		scope.onChangeCallback();
 
 	}
 
@@ -292,9 +306,9 @@ UI.IntNumber.prototype.setValue = function ( value ) {
 
 };
 
-UI.IntNumber.prototype.onChanged = function ( callback ) {
+UI.IntNumber.prototype.onChange = function ( callback ) {
 
-	this.onChangedCallback = callback;
+	this.onChangeCallback = callback;
 	return this;
 
 };
@@ -315,7 +329,7 @@ UI.FloatNumber = function ( position ) {
 	this.dom.style.fontSize = '12px';
 	this.dom.style.textDecoration = 'underline';
 
-	this.onChangedCallback = null;
+	this.onChangeCallback = null;
 
 	var scope = this;
 	var onMouseDownValue, onMouseDownScreenX, onMouseDownScreenY;
@@ -339,7 +353,7 @@ UI.FloatNumber = function ( position ) {
 		var dy = event.screenY - onMouseDownScreenY;
 
 		scope.dom.textContent = ( onMouseDownValue + ( dx - dy ) / ( event.shiftKey ? 10 : 100 ) ).toFixed( 2 );
-		scope.onChangedCallback();
+		scope.onChangeCallback();
 
 	}
 
@@ -372,9 +386,9 @@ UI.FloatNumber.prototype.setValue = function ( value ) {
 
 };
 
-UI.FloatNumber.prototype.onChanged = function ( callback ) {
+UI.FloatNumber.prototype.onChange = function ( callback ) {
 
-	this.onChangedCallback = callback;
+	this.onChangeCallback = callback;
 	return this;
 
 };
@@ -421,6 +435,16 @@ UI.Button = function ( position ) {
 	this.dom = document.createElement( 'button' );
 	this.dom.style.position = position || 'relative';
 
+	this.onClickCallback = null;
+
+	var scope = this;
+
+	this.dom.addEventListener( 'click', function ( event ) {
+
+		scope.onClickCallback();
+
+	}, false );
+
 	return this;
 
 };
@@ -434,3 +458,10 @@ UI.Button.prototype.setText = function ( value ) {
 	return this;
 
 };
+
+UI.Button.prototype.onClick = function ( callback ) {
+
+	this.onClickCallback = callback;
+	return this;
+
+};

gui/js/ui/Sidebar.Outliner.js

@@ -6,7 +6,7 @@ Sidebar.Outliner = function ( signals ) {
 	container.setPadding( '8px' );
 	container.setBorderTop( '1px solid #ccc' );
 
-	container.add( new UI.Text().setText( 'OUTLINER' ).setColor( '#666' ) );
+	container.add( new UI.Text().setText( 'SCENE' ).setColor( '#666' ) );
 
 	container.add( new UI.Break(), new UI.Break() );
 

gui/js/ui/Sidebar.Properties.Geometry.js

@@ -5,6 +5,8 @@ Sidebar.Properties.Geometry = function ( signals ) {
 
 	container.add( new UI.Text().setText( 'GEOMETRY' ).setColor( '#666' ) );
 
+	container.add( new UI.Button( 'absolute' ).setRight( '0px' ).setText( 'Export' ).onClick( exportGeometry ) );
+
 	container.add( new UI.Break(), new UI.Break() );
 
 	container.add( new UI.Text().setText( 'Name' ).setColor( '#666' ) );
@@ -38,10 +40,14 @@ Sidebar.Properties.Geometry = function ( signals ) {
 
 	//
 
+	var selected = null;
+
 	signals.objectSelected.add( function ( object ) {
 
 		if ( object && object.geometry ) {
 
+			selected = object.geometry;
+
 			container.setDisplay( 'block' );
 
 			geometryName.setText( object.geometry.name );
@@ -51,6 +57,8 @@ Sidebar.Properties.Geometry = function ( signals ) {
 
 		} else {
 
+			selected = null;
+
 			container.setDisplay( 'none' );
 
 		}
@@ -81,6 +89,12 @@ Sidebar.Properties.Geometry = function ( signals ) {
 
 	}
 
+	function exportGeometry() {
+
+		console.log( selected );
+
+	}
+
 	return container;
 
 }

gui/js/ui/Sidebar.Properties.Object3D.js

@@ -19,9 +19,9 @@ Sidebar.Properties.Object3D = function ( signals ) {
 
 	container.add( new UI.Text().setText( 'Position' ).setColor( '#666' ) );
 
-	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 );
+	var positionX = new UI.FloatNumber( 'absolute' ).setLeft( '90px' ).onChange( update );
+	var positionY = new UI.FloatNumber( 'absolute' ).setLeft( '160px' ).onChange( update );
+	var positionZ = new UI.FloatNumber( 'absolute' ).setLeft( '230px' ).onChange( update );
 
 	container.add( positionX, positionY, positionZ );
 
@@ -29,9 +29,9 @@ Sidebar.Properties.Object3D = function ( signals ) {
 
 	container.add( new UI.Text().setText( 'Rotation' ).setColor( '#666' ) );
 
-	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 );
+	var rotationX = new UI.FloatNumber( 'absolute' ).setLeft( '90px' ).onChange( update );
+	var rotationY = new UI.FloatNumber( 'absolute' ).setLeft( '160px' ).onChange( update );
+	var rotationZ = new UI.FloatNumber( 'absolute' ).setLeft( '230px' ).onChange( update );
 
 	container.add( rotationX, rotationY, rotationZ );
 
@@ -39,9 +39,9 @@ Sidebar.Properties.Object3D = function ( signals ) {
 
 	container.add( new UI.Text().setText( 'Scale' ).setColor( '#666' ) );
 
-	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 );
+	var scaleX = new UI.FloatNumber( 'absolute' ).setValue( 1 ).setLeft( '90px' ).onChange( update );
+	var scaleY = new UI.FloatNumber( 'absolute' ).setValue( 1 ).setLeft( '160px' ).onChange( update );
+	var scaleZ = new UI.FloatNumber( 'absolute' ).setValue( 1 ).setLeft( '230px' ).onChange( update );
 
 	container.add( scaleX, scaleY, scaleZ );