Editor: Torus is now configurable :)

editor/js/UI.js

@@ -606,15 +606,15 @@ UI.Number = function ( number ) {
 	dom.style.cursor = 'col-resize';
 	dom.value = '0.00';
 
-	this.dom = dom;
-	this.setValue( number );
-
 	this.min = - Infinity;
 	this.max = Infinity;
 
 	this.precision = 2;
 	this.step = 1;
 
+	this.dom = dom;
+	this.setValue( number );
+
 	this.onChangeCallback = null;
 
 	var distance = 0;
@@ -635,16 +635,18 @@ UI.Number = function ( number ) {
 
 	var onMouseMove = function ( event ) {
 
+		var currentValue = dom.value;
+
 		var movementX = event.movementX || event.webkitMovementX || event.mozMovementX || 0;
 		var movementY = event.movementY || event.webkitMovementY || event.mozMovementY || 0;
 
 		distance += movementX - movementY;
 
-		var number = onMouseDownValue + ( distance / ( event.shiftKey ? 10 : 100 ) ) * scope.step;
+		var number = onMouseDownValue + ( distance / ( event.shiftKey ? 5 : 50 ) ) * scope.step;
 
 		dom.value = Math.min( scope.max, Math.max( scope.min, number ) ).toFixed( scope.precision );
 
-		if ( scope.onChangeCallback ) scope.onChangeCallback();
+		if ( currentValue !== dom.value && scope.onChangeCallback ) scope.onChangeCallback();
 
 	};
 
@@ -734,9 +736,148 @@ UI.Number.prototype.setPrecision = function ( precision ) {
 
 	this.precision = precision;
 
-	if ( precision > 2 ) {
+	return this;
+
+};
+
+UI.Number.prototype.onChange = function ( callback ) {
+
+	this.onChangeCallback = callback;
+
+	return this;
+
+};
+
+
+// Integer
+
+UI.Integer = function ( number ) {
+
+	UI.Element.call( this );
+
+	var scope = this;
+
+	var dom = document.createElement( 'input' );
+	dom.className = 'Number';
+	dom.style.color = '#0080f0';
+	dom.style.fontSize = '12px';
+	dom.style.backgroundColor = 'transparent';
+	dom.style.border = '1px solid transparent';
+	dom.style.marginTop = '-2px';
+	dom.style.marginLegt = '-2px';
+	dom.style.padding = '2px';
+	dom.style.cursor = 'col-resize';
+	dom.value = '0.00';
+
+	this.min = - Infinity;
+	this.max = Infinity;
+
+	this.step = 1;
+
+	this.dom = dom;
+	this.setValue( number );
+
+	this.onChangeCallback = null;
+
+	var distance = 0;
+	var onMouseDownValue = 0;
+
+	var onMouseDown = function ( event ) {
+
+		event.preventDefault();
+
+		distance = 0;
+
+		onMouseDownValue = parseFloat( dom.value );
+
+		document.addEventListener( 'mousemove', onMouseMove, false );
+		document.addEventListener( 'mouseup', onMouseUp, false );
+
+	};
+
+	var onMouseMove = function ( event ) {
+
+		var currentValue = dom.value;
+
+		var movementX = event.movementX || event.webkitMovementX || event.mozMovementX || 0;
+		var movementY = event.movementY || event.webkitMovementY || event.mozMovementY || 0;
+
+		distance += movementX - movementY;
+
+		var number = onMouseDownValue + ( distance / ( event.shiftKey ? 5 : 50 ) ) * scope.step;
 
-		this.step = Math.pow( 10, -( precision - 1 ) );
+		dom.value = Math.min( scope.max, Math.max( scope.min, number ) ) | 0;
+
+		if ( currentValue !== dom.value && scope.onChangeCallback ) scope.onChangeCallback();
+
+	};
+
+	var onMouseUp = function ( event ) {
+
+		document.removeEventListener( 'mousemove', onMouseMove, false );
+		document.removeEventListener( 'mouseup', onMouseUp, false );
+
+		if ( Math.abs( distance ) < 2 ) {
+
+			dom.focus();
+			dom.select();
+
+		}
+
+	};
+
+	var onChange = function ( event ) {
+
+		var number = parseInt( dom.value );
+
+		if ( isNaN( number ) === false ) {
+
+			dom.value = number;
+
+			if ( scope.onChangeCallback ) scope.onChangeCallback();
+
+		}
+
+	};
+
+	var onFocus = function ( event ) {
+
+		dom.style.backgroundColor = '';
+		dom.style.borderColor = '#ccc';
+		dom.style.cursor = '';
+
+	};
+
+	var onBlur = function ( event ) {
+
+		dom.style.backgroundColor = 'transparent';
+		dom.style.borderColor = 'transparent';
+		dom.style.cursor = 'col-resize';
+
+	};
+
+	dom.addEventListener( 'mousedown', onMouseDown, false );
+	dom.addEventListener( 'change', onChange, false );
+	dom.addEventListener( 'focus', onFocus, false );
+	dom.addEventListener( 'blur', onBlur, false );
+
+	return this;
+
+};
+
+UI.Integer.prototype = Object.create( UI.Element.prototype );
+
+UI.Integer.prototype.getValue = function () {
+
+	return parseInt( this.dom.value );
+
+};
+
+UI.Integer.prototype.setValue = function ( value ) {
+
+	if ( value !== undefined ) {
+
+		this.dom.value = value | 0;
 
 	}
 
@@ -744,7 +885,16 @@ UI.Number.prototype.setPrecision = function ( precision ) {
 
 };
 
-UI.Number.prototype.onChange = function ( callback ) {
+UI.Integer.prototype.setRange = function ( min, max ) {
+
+	this.min = min;
+	this.max = max;
+
+	return this;
+
+};
+
+UI.Integer.prototype.onChange = function ( callback ) {
 
 	this.onChangeCallback = callback;
 

editor/js/ui/Sidebar.Geometry.TorusGeometry.js

@@ -8,15 +8,56 @@ Sidebar.Geometry.TorusGeometry = function ( signals, object ) {
 
 	// radius
 
-	var objectRadiusRow = new UI.Panel();
-	var objectRadius = new UI.Number( geometry.radius ).onChange( update );
+	var radiusRow = new UI.Panel();
+	var radius = new UI.Number( geometry.radius ).onChange( update );
 
-	objectRadiusRow.add( new UI.Text( 'Radius' ).setWidth( '90px' ).setColor( '#666' ) );
-	objectRadiusRow.add( objectRadius );
+	radiusRow.add( new UI.Text( 'Radius' ).setWidth( '90px' ).setColor( '#666' ) );
+	radiusRow.add( radius );
 
-	container.add( objectRadiusRow );
+	container.add( radiusRow );
 
-	// 
+	// tube
+
+	var tubeRow = new UI.Panel();
+	var tube = new UI.Number( geometry.tube ).onChange( update );
+
+	tubeRow.add( new UI.Text( 'Tube' ).setWidth( '90px' ).setColor( '#666' ) );
+	tubeRow.add( tube );
+
+	container.add( tubeRow );
+
+	// radialSegments
+
+	var radialSegmentsRow = new UI.Panel();
+	var radialSegments = new UI.Integer( geometry.radialSegments ).setRange( 1, Infinity ).onChange( update );
+
+	radialSegmentsRow.add( new UI.Text( 'Radial Segments' ).setWidth( '90px' ).setColor( '#666' ) );
+	radialSegmentsRow.add( radialSegments );
+
+	container.add( radialSegmentsRow );
+
+	// tubularSegments
+
+	var tubularSegmentsRow = new UI.Panel();
+	var tubularSegments = new UI.Integer( geometry.tubularSegments ).setRange( 1, Infinity ).onChange( update );
+
+	tubularSegmentsRow.add( new UI.Text( 'Tubular Segments' ).setWidth( '90px' ).setColor( '#666' ) );
+	tubularSegmentsRow.add( tubularSegments );
+
+	container.add( tubularSegmentsRow );
+
+	// arc
+
+	var arcRow = new UI.Panel();
+	var arc = new UI.Number( geometry.arc ).onChange( update );
+
+	arcRow.add( new UI.Text( 'Arc' ).setWidth( '90px' ).setColor( '#666' ) );
+	arcRow.add( arc );
+
+	container.add( arcRow );
+
+
+	//
 
 	function update() {
 
@@ -24,7 +65,13 @@ Sidebar.Geometry.TorusGeometry = function ( signals, object ) {
 
 		object.geometry.dispose();
 
-		object.geometry = new THREE.TorusGeometry( objectRadius.getValue(), 40, 8, 6, Math.PI * 2 );
+		object.geometry = new THREE.TorusGeometry(
+			radius.getValue(),
+			tube.getValue(),
+			radialSegments.getValue(),
+			tubularSegments.getValue(),
+			arc.getValue()
+		);
 		object.geometry.computeBoundingSphere();
 
 		signals.objectChanged.dispatch( object );