GUI: More wiring.

gui/index.html

@@ -35,6 +35,7 @@
 
 				objectAdded: new SIGNALS.Signal(),
 				objectSelected: new SIGNALS.Signal(),
+				objectChanged: new SIGNALS.Signal(),
 				windowResize: new SIGNALS.Signal()
 
 			};

gui/js/UI.js

@@ -211,6 +211,8 @@ UI.IntNumber = function ( position ) {
 	this.dom.style.fontSize = '12px';
 	this.dom.style.textDecoration = 'underline';
 
+	this.onChangedCallback = null;
+
 	var scope = this;
 	var onMouseDownValue, onMouseDownScreenX, onMouseDownScreenY;
 
@@ -218,7 +220,7 @@ UI.IntNumber = function ( position ) {
 
 		event.preventDefault();
 
-		onMouseDownValue = parseFloat( scope.dom.innerText );
+		onMouseDownValue = parseInt( scope.dom.innerText );
 		onMouseDownScreenX = event.screenX;
 		onMouseDownScreenY = event.screenY;
 
@@ -233,6 +235,7 @@ UI.IntNumber = function ( position ) {
 		var dy = event.screenY - onMouseDownScreenY;
 
 		scope.dom.innerText = ( onMouseDownValue - ( dx - dy ) ).toFixed( 0 ); 
+		scope.onChangedCallback();
 
 	}
 
@@ -252,13 +255,27 @@ UI.IntNumber = function ( position ) {
 UI.IntNumber.prototype = new UI.Element();
 UI.IntNumber.prototype.constructor = UI.IntNumber;
 
-UI.IntNumber.prototype.setNumber = function ( value ) {
+UI.IntNumber.prototype.getValue = function () {
+
+	return parseInt( this.dom.innerText );
+
+};
+
+UI.IntNumber.prototype.setValue = function ( value ) {
 
 	this.dom.innerText = value.toFixed( 0 );
 	return this;
 
 };
 
+UI.IntNumber.prototype.onChanged = function ( callback ) {
+
+	this.onChangedCallback = callback;
+	return this;
+
+};
+
+
 
 // FloatNumber
 
@@ -274,6 +291,8 @@ UI.FloatNumber = function ( position ) {
 	this.dom.style.fontSize = '12px';
 	this.dom.style.textDecoration = 'underline';
 
+	this.onChangedCallback = null;
+
 	var scope = this;
 	var onMouseDownValue, onMouseDownScreenX, onMouseDownScreenY;
 
@@ -296,6 +315,7 @@ UI.FloatNumber = function ( position ) {
 		var dy = event.screenY - onMouseDownScreenY;
 
 		scope.dom.innerText = ( onMouseDownValue + ( dx - dy ) / 100 ).toFixed( 2 ); 
+		scope.onChangedCallback();
 
 	}
 
@@ -315,13 +335,26 @@ UI.FloatNumber = function ( position ) {
 UI.FloatNumber.prototype = new UI.Element();
 UI.FloatNumber.prototype.constructor = UI.FloatNumber;
 
-UI.FloatNumber.prototype.setNumber = function ( value ) {
+UI.FloatNumber.prototype.getValue = function () {
+
+	return parseFloat( this.dom.innerText );
+
+};
+
+UI.FloatNumber.prototype.setValue = function ( value ) {
 
 	this.dom.innerText = value.toFixed( 2 );
 	return this;
 
 };
 
+UI.FloatNumber.prototype.onChanged = function ( callback ) {
+
+	this.onChangedCallback = callback;
+	return this;
+
+};
+
 
 // Break
 

gui/js/ui/Panel.js

@@ -18,9 +18,9 @@ var Panel = function ( signals ) {
 
 	properties.add( new UI.Text().setText( 'position' ).setColor( '#666' ) );
 
-	var positionX = new UI.FloatNumber( 'absolute' ).setX( '90px' );
-	var positionY = new UI.FloatNumber( 'absolute' ).setX( '160px' );
-	var positionZ = new UI.FloatNumber( 'absolute' ).setX( '230px' );
+	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 );
 
 	properties.add( positionX, positionY, positionZ );
 
@@ -28,9 +28,9 @@ var Panel = function ( signals ) {
 
 	properties.add( new UI.Text().setText( 'rotation' ).setColor( '#666' ) );
 
-	var rotationX = new UI.FloatNumber( 'absolute' ).setX( '90px' );
-	var rotationY = new UI.FloatNumber( 'absolute' ).setX( '160px' );
-	var rotationZ = new UI.FloatNumber( 'absolute' ).setX( '230px' );
+	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 );
 
 	properties.add( rotationX, rotationY, rotationZ );
 
@@ -38,9 +38,9 @@ var Panel = function ( signals ) {
 
 	properties.add( new UI.Text().setText( 'scale' ).setColor( '#666' ) );
 
-	var scaleX = new UI.FloatNumber( 'absolute' ).setNumber( 1 ).setX( '90px' );
-	var scaleY = new UI.FloatNumber( 'absolute' ).setNumber( 1 ).setX( '160px' );
-	var scaleZ = new UI.FloatNumber( 'absolute' ).setNumber( 1 ).setX( '230px' );
+	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 );
 
 	properties.add( scaleX, scaleY, scaleZ );
 
@@ -49,30 +49,6 @@ var Panel = function ( signals ) {
 
 	container.add( properties );
 
-	//
-
-	signals.objectSelected.add( function ( object ) {
-
-		selected = object;
-
-		if ( object ) {
-
-			positionX.setNumber( object.position.x );
-			positionY.setNumber( object.position.y );
-			positionZ.setNumber( object.position.z );
-
-			rotationX.setNumber( object.rotation.x );
-			rotationY.setNumber( object.rotation.y );
-			rotationZ.setNumber( object.rotation.z );
-
-			scaleX.setNumber( object.scale.x );
-			scaleY.setNumber( object.scale.y );
-			scaleZ.setNumber( object.scale.z );
-
-		}
-
-	} );
-
 
 	// Geometry
 
@@ -99,6 +75,53 @@ var Panel = function ( signals ) {
 
 	container.add( properties );
 
+
+	// Events
+
+	function update() {
+
+		if ( selected ) {
+
+			selected.position.x = positionX.getValue();
+			selected.position.y = positionX.getValue();
+			selected.position.z = positionX.getValue();
+
+			selected.rotation.x = rotationX.getValue();
+			selected.rotation.y = rotationY.getValue();
+			selected.rotation.z = rotationZ.getValue();
+
+			selected.scale.x = scaleX.getValue();
+			selected.scale.y = scaleY.getValue();
+			selected.scale.z = scaleZ.getValue();
+
+			signals.objectChanged.dispatch( selected );
+
+		}
+
+	}
+
+	signals.objectSelected.add( function ( object ) {
+
+		selected = object;
+
+		if ( object ) {
+
+			positionX.setValue( object.position.x );
+			positionY.setValue( object.position.y );
+			positionZ.setValue( object.position.z );
+
+			rotationX.setValue( object.rotation.x );
+			rotationY.setValue( object.rotation.y );
+			rotationZ.setValue( object.rotation.z );
+
+			scaleX.setValue( object.scale.x );
+			scaleY.setValue( object.scale.y );
+			scaleZ.setValue( object.scale.z );
+
+		}
+
+	} );
+
 	return container;
 
 }

gui/js/ui/Viewport.js

@@ -89,6 +89,16 @@ var Viewport = function ( signals ) {
 
 	} );
 
+	signals.objectChanged.add( function ( object ) {
+
+		selectionBox.position.copy( object.position );
+		selectionBox.rotation.copy( object.rotation );
+		// selectionBox.scale.copy( object.scale );
+
+		render();
+
+	} );
+
 	signals.objectSelected.add( function ( object ) {
 
 		if ( object === null ) {