diff --git a/gui/js/UI.js b/gui/js/UI.js index bc01a47cfb0ec16265619f080b2ae1d253ac10ed..97283fa5c76f3abc1ac2283dd10820b69a19860d 100644 --- a/gui/js/UI.js +++ b/gui/js/UI.js @@ -198,7 +198,7 @@ UI.Panel = function ( position ) { this.dom = document.createElement( 'div' ); this.dom.style.position = position || 'relative'; - this.dom.addEventListener( 'mousedown', function ( event ) { event.preventDefault() }, false ); + // this.dom.addEventListener( 'mousedown', function ( event ) { event.preventDefault() }, false ); return this; }; @@ -243,99 +243,22 @@ UI.Text.prototype.setText = function ( value ) { }; -// IntNumber - -UI.IntNumber = function ( position ) { - - UI.Element.call( this ); - - this.dom = document.createElement( 'span' ); - this.dom.style.position = position || 'relative'; - this.dom.textContent = '0.00'; - this.dom.style.marginTop = '2px'; - this.dom.style.color = '#0080f0'; - this.dom.style.fontSize = '12px'; - this.dom.style.textDecoration = 'underline'; - - this.onChangeCallback = null; - - var scope = this; - var onMouseDownValue, onMouseDownScreenX, onMouseDownScreenY; - - var onMouseDown = function ( event ) { - - event.preventDefault(); - - onMouseDownValue = parseInt( scope.dom.textContent ); - onMouseDownScreenX = event.screenX; - onMouseDownScreenY = event.screenY; - - document.addEventListener( 'mousemove', onMouseMove, false ); - document.addEventListener( 'mouseup', onMouseUp, false ); - - } - - var onMouseMove = function ( event ) { - - var dx = event.screenX - onMouseDownScreenX; - var dy = event.screenY - onMouseDownScreenY; - - scope.dom.textContent = ( onMouseDownValue + ( dx - dy ) / ( event.shiftKey ? 10 : 100 ) ).toFixed( 0 ); - scope.onChangeCallback(); - - } - - var onMouseUp = function ( event ) { - - document.removeEventListener( 'mousemove', onMouseMove, false ); - document.removeEventListener( 'mouseup', onMouseUp, false ); - - } - - this.dom.addEventListener( 'mousedown', onMouseDown, false ); - - return this; - -}; - -UI.IntNumber.prototype = new UI.Element(); -UI.IntNumber.prototype.constructor = UI.IntNumber; - -UI.IntNumber.prototype.getValue = function () { - - return parseInt( this.dom.textContent ); - -}; - -UI.IntNumber.prototype.setValue = function ( value ) { - - this.dom.textContent = value.toFixed( 0 ); - return this; - -}; - -UI.IntNumber.prototype.onChange = function ( callback ) { - - this.onChangeCallback = callback; - return this; - -}; - - - // FloatNumber UI.FloatNumber = function ( position ) { UI.Element.call( this ); - this.dom = document.createElement( 'span' ); + this.dom = document.createElement( 'input' ); this.dom.style.position = position || 'relative'; - this.dom.textContent = '0.00'; - this.dom.style.marginTop = '2px'; + this.dom.style.marginTop = '0px'; this.dom.style.color = '#0080f0'; this.dom.style.fontSize = '12px'; this.dom.style.textDecoration = 'underline'; + this.dom.style.backgroundColor = 'transparent'; + this.dom.style.border = '0px'; + + this.dom.value = '0.00'; this.min = - Infinity; this.max = Infinity; @@ -347,9 +270,9 @@ UI.FloatNumber = function ( position ) { var onMouseDown = function ( event ) { - event.preventDefault(); + // event.preventDefault(); - onMouseDownValue = parseFloat( scope.dom.textContent ); + onMouseDownValue = parseFloat( scope.dom.value ); onMouseDownScreenX = event.screenX; onMouseDownScreenY = event.screenY; @@ -365,7 +288,7 @@ UI.FloatNumber = function ( position ) { var number = onMouseDownValue + ( distance / amount ); - scope.dom.textContent = Math.min( scope.max, Math.max( scope.min, number ) ).toFixed( 2 ); + scope.dom.value = Math.min( scope.max, Math.max( scope.min, number ) ).toFixed( 2 ); scope.onChangeCallback(); } @@ -378,6 +301,18 @@ UI.FloatNumber = function ( position ) { } this.dom.addEventListener( 'mousedown', onMouseDown, false ); + this.dom.addEventListener( 'change', function ( event ) { + + var number = parseFloat( scope.dom.value ); + + if ( number !== NaN ) { + + scope.dom.value = number.toFixed( 2 ); + scope.onChangeCallback(); + + } + + }, false ); return this; @@ -388,13 +323,13 @@ UI.FloatNumber.prototype.constructor = UI.FloatNumber; UI.FloatNumber.prototype.getValue = function () { - return parseFloat( this.dom.textContent ); + return parseFloat( this.dom.value ); }; UI.FloatNumber.prototype.setValue = function ( value ) { - this.dom.textContent = value.toFixed( 2 ); + this.dom.value = value.toFixed( 2 ); return this; }; diff --git a/gui/js/ui/Sidebar.Properties.Material.js b/gui/js/ui/Sidebar.Properties.Material.js index b131c425beb6d7208d48f2c28d12a726db266cf5..d03695d91d657235bd73060423885c06185004cc 100644 --- a/gui/js/ui/Sidebar.Properties.Material.js +++ b/gui/js/ui/Sidebar.Properties.Material.js @@ -27,9 +27,7 @@ Sidebar.Properties.Material = function ( signals ) { container.add( new UI.HorizontalRule() ); container.add( new UI.Text().setText( 'Opacity' ).setColor( '#666' ) ); - var materialOpacity = new UI.FloatNumber( 'absolute' ).setLeft( '90px' ).setFontSize( '12px' ); - materialOpacity.setMin( 0 ).setMax( 1 ); - materialOpacity.onChange( update ); + var materialOpacity = new UI.FloatNumber( 'absolute' ).setLeft( '90px' ).setWidth( '60px' ).setMin( 0 ).setMax( 1 ).onChange( update ); container.add( materialOpacity ); container.add( new UI.HorizontalRule() ); diff --git a/gui/js/ui/Sidebar.Properties.Object3D.js b/gui/js/ui/Sidebar.Properties.Object3D.js index bb0b262ba098704284771086edd8f41c9ffbfad2..b13d6c6d0757ed71e96d1b0a27bc7a95a25de7d7 100644 --- a/gui/js/ui/Sidebar.Properties.Object3D.js +++ b/gui/js/ui/Sidebar.Properties.Object3D.js @@ -12,23 +12,23 @@ Sidebar.Properties.Object3D = function ( signals ) { container.add( new UI.HorizontalRule() ); container.add( new UI.Text().setText( 'Position' ).setColor( '#666' ) ); - 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 ); + var positionX = new UI.FloatNumber( 'absolute' ).setLeft( '90px' ).setWidth( '60px' ).onChange( update ); + var positionY = new UI.FloatNumber( 'absolute' ).setLeft( '160px' ).setWidth( '60px' ).onChange( update ); + var positionZ = new UI.FloatNumber( 'absolute' ).setLeft( '230px' ).setWidth( '60px' ).onChange( update ); container.add( positionX, positionY, positionZ ); container.add( new UI.HorizontalRule() ); container.add( new UI.Text().setText( 'Rotation' ).setColor( '#666' ) ); - 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 ); + var rotationX = new UI.FloatNumber( 'absolute' ).setLeft( '90px' ).setWidth( '60px' ).onChange( update ); + var rotationY = new UI.FloatNumber( 'absolute' ).setLeft( '160px' ).setWidth( '60px' ).onChange( update ); + var rotationZ = new UI.FloatNumber( 'absolute' ).setLeft( '230px' ).setWidth( '60px' ).onChange( update ); container.add( rotationX, rotationY, rotationZ ); container.add( new UI.HorizontalRule() ); container.add( new UI.Text().setText( 'Scale' ).setColor( '#666' ) ); - 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 ); + var scaleX = new UI.FloatNumber( 'absolute' ).setValue( 1 ).setLeft( '90px' ).setWidth( '60px' ).onChange( update ); + var scaleY = new UI.FloatNumber( 'absolute' ).setValue( 1 ).setLeft( '160px' ).setWidth( '60px' ).onChange( update ); + var scaleZ = new UI.FloatNumber( 'absolute' ).setValue( 1 ).setLeft( '230px' ).setWidth( '60px' ).onChange( update ); container.add( scaleX, scaleY, scaleZ ); container.add( new UI.Break(), new UI.Break(), new UI.Break() );