Editor: Nicer UI.Number.

editor/js/UI.js

@@ -457,11 +457,21 @@ UI.Number = function ( position ) {
 
 	this.dom = document.createElement( 'span' );
 	this.dom.style.position = position || 'relative';
-	this.dom.style.color = '#0080f0';
-	this.dom.style.fontSize = '12px';
-	this.dom.style.cursor = 'col-resize';
 
-	this.dom.textContent = '0.00';
+	var display = document.createElement( 'span' );
+	display.style.color = '#0080f0';
+	display.style.fontSize = '12px';
+	display.style.cursor = 'col-resize';
+	display.textContent = '0.00';
+	this.dom.appendChild( display );
+
+	var input = document.createElement( 'input' );
+	input.style.display = 'none';
+	input.style.width = '100%';
+	input.style.marginTop = '-2px';
+	input.style.marginLeft = '-2px';
+	input.style.fontSize = '12px';
+	this.dom.appendChild( input );
 
 	this.min = - Infinity;
 	this.max = Infinity;
@@ -477,7 +487,7 @@ UI.Number = function ( position ) {
 
 		distance = 0;
 
-		onMouseDownValue = parseFloat( scope.dom.textContent );
+		onMouseDownValue = parseFloat( display.textContent );
 
 		document.addEventListener( 'mousemove', onMouseMove, false );
 		document.addEventListener( 'mouseup', onMouseUp, false );
@@ -493,7 +503,7 @@ UI.Number = function ( position ) {
 
 		var number = onMouseDownValue + ( distance / ( event.shiftKey ? 10 : 100 ) );
 
-		scope.dom.textContent = Math.min( scope.max, Math.max( scope.min, number ) ).toFixed( 2 );
+		display.textContent = Math.min( scope.max, Math.max( scope.min, number ) ).toFixed( 2 );
 
 		if ( scope.onChangeCallback ) scope.onChangeCallback();
 
@@ -504,32 +514,66 @@ UI.Number = function ( position ) {
 		document.removeEventListener( 'mousemove', onMouseMove, false );
 		document.removeEventListener( 'mouseup', onMouseUp, false );
 
-		if ( Math.abs( distance ) > 0 ) console.log( 'click' );
+		if ( Math.abs( distance ) < 1 ) {
 
-	};
+			display.style.display = 'none';
 
-	this.dom.addEventListener( 'mousedown', onMouseDown, false );
+			input.value = display.textContent;
 
-	/*
-	this.dom.addEventListener( 'change', function ( event ) {
+			input.addEventListener( 'change', onInputChange, false );
+			input.addEventListener( 'blur', onInputBlur, false );
+			input.addEventListener( 'keyup', onInputKeyUp, false );
+
+			input.style.display = '';
+
+			input.focus();
+			input.select();
+
+		}
 
-		var number = parseFloat( scope.dom.textContent );
+	};
+
+	var onInputChange = function ( event ) {
+
+		var number = parseFloat( input.value );
 
-		if ( number !== NaN ) {
+		if ( isNaN( number ) === false ) {
 
-			scope.dom.textContent = number.toFixed( 2 );
+			display.textContent = number.toFixed( 2 );
 
 			if ( scope.onChangeCallback ) scope.onChangeCallback();
 
 		}
 
-	}, false );
-	this.dom.addEventListener( 'blur', function ( event ) {
+	};
 
-		console.log( 'Yay?' );
+	var onInputBlur = function ( event ) {
 
-	}, false );
-	*/
+		display.style.display = '';
+
+		input.removeEventListener( 'change', onInputChange );
+		input.removeEventListener( 'blur', onInputBlur );
+		input.removeEventListener( 'keyup', onInputKeyUp );
+		input.style.display = 'none';
+
+	};
+
+	var onInputKeyUp = function ( event ) {
+
+		if ( event.keyCode == 13 ) {
+
+			display.style.display = '';
+
+			input.removeEventListener( 'change', onInputChange );
+			input.removeEventListener( 'blur', onInputBlur );
+			input.removeEventListener( 'keyup', onInputKeyUp );
+			input.style.display = 'none';
+
+		}
+
+	};
+
+	display.addEventListener( 'mousedown', onMouseDown, false );
 
 	return this;
 
@@ -539,13 +583,13 @@ UI.Number.prototype = Object.create( UI.Element.prototype );
 
 UI.Number.prototype.getValue = function () {
 
-	return parseFloat( this.dom.textContent );
+	return parseFloat( this.dom.children[ 0 ].textContent );
 
 };
 
 UI.Number.prototype.setValue = function ( value ) {
 
-	this.dom.textContent = value.toFixed( 2 );
+	this.dom.children[ 0 ].textContent = value.toFixed( 2 );
 
 	return this;
 

editor/js/ui/Viewport.js

@@ -38,7 +38,6 @@ var Viewport = function ( signals ) {
 
 	var selectionAxis = new THREE.AxisHelper( 100 );
 	selectionAxis.material.depthTest = false;
-	selectionAxis.material.transparent = true;
 	selectionAxis.matrixAutoUpdate = false;
 	selectionAxis.visible = false;
 	sceneHelpers.add( selectionAxis );
@@ -102,6 +101,7 @@ var Viewport = function ( signals ) {
 			- ( ( 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() );
@@ -111,8 +111,6 @@ var Viewport = function ( signals ) {
 
 			signals.objectSelected.dispatch( intersects[ 0 ].object );
 
-			// controls.enabled = false;
-
 		} else {
 
 			signals.objectSelected.dispatch( null );