Index: sources/gui/qml/components/Slider.qml =================================================================== diff -u -r5001ec3cb4b5e76db9fa3c70a36e9c8d64677348 -r54b940806bb1acdbdeef6ff7b61cd13418d578e7 --- sources/gui/qml/components/Slider.qml (.../Slider.qml) (revision 5001ec3cb4b5e76db9fa3c70a36e9c8d64677348) +++ sources/gui/qml/components/Slider.qml (.../Slider.qml) (revision 54b940806bb1acdbdeef6ff7b61cd13418d578e7) @@ -25,7 +25,7 @@ */ RangeRect { id: _root property real value : _progressRect.value - property real minStop : undefined + property real minStop : _root.minimum property real defaultValue : _root.minimum property real step : 1 @@ -41,6 +41,7 @@ property alias handler : _handler property alias handlerColor : _handler.color property alias handlerVisible : _handler.visible + property color handleBorderColor : Colors.textMain property alias diameter : _handler.diameter @@ -53,8 +54,14 @@ property bool isRoundedEnds : true property bool hasBorder : true - property color borderColor : Colors.borderDisableButton - property color highlightColor : Colors.sliderHighlightColor + property bool showMinMaxText : true + property color borderColor : Colors.borderDisableButton + property color highlightActiveColor : Colors.sliderHighlightColor + property color highlightInactiveColor : Colors.createTreatmentInactive + property color progressBorderActiveColor : Colors.sliderProgressBorderActive + property color progressBorderInactiveColor : Colors.borderDisableButton + property color handlerActiveColor : Colors.createTreatmentActive + property color handlerInactiveColor : Colors.createTreatmentInactive signal activeChanged() signal handleSelected() @@ -86,14 +93,16 @@ let newValue = Number.NaN if(vIsIncrement) { - newValue = _progressRect.value + amountChanged + newValue = calculateRoundedValue(_progressRect.value + amountChanged) } else { - newValue = _progressRect.value - amountChanged + newValue = calculateRoundedValue(_progressRect.value - amountChanged) } // Capping values based on min/max threshold - if ( newValue < minimum ) newValue = minimum - if ( newValue > maximum ) newValue = maximum + let min = calculateMinimum() + let max = calculateRoundedValue(_root.maximum) + if ( newValue < min ) newValue = min + if ( newValue > max ) newValue = max // Update the slider's visual value _progressRect.previousSliderValue = newValue // for comparison purposes @@ -105,11 +114,11 @@ function setActiveVisuals(active) { if (active) { - color = _root.highlightColor - handlerColor = Colors.createTreatmentActive + color = _root.highlightActiveColor + handlerColor = _root.handlerActiveColor } else { - color = Colors.createTreatmentInactive - handlerColor = Colors.createTreatmentInactive + color = _root.highlightInactiveColor + handlerColor = _root.handlerInactiveColor } } @@ -163,13 +172,13 @@ } minText { - visible : true + visible : _root.showMinMaxText anchors.topMargin: Variables.sliderTextMargin font.pixelSize : Fonts.fontPixelSliderMarker font.bold : false } maxText { - visible : true + visible : _root.showMinMaxText anchors.topMargin: Variables.sliderTextMargin font.pixelSize : Fonts.fontPixelSliderMarker font.bold : false @@ -179,6 +188,12 @@ return (Math.round(vValue / step) * step).toFixed(decimal) } + // round the value based on the given precision (not step) + function calculatePrecisionRoundedValue(value) { + let multiplier = Math.pow(10, decimal) + return Math.round(value * multiplier) / multiplier + } + function getValueOfX(x) { return ( x * ( maximum - minimum ) ) / width + minimum } @@ -188,14 +203,9 @@ } function calculateValue(x, isSnappingToTicks) { - let mMinimum = Number(_root.minimum.toFixed(decimal)) - let mMaximum = Number(_root.maximum.toFixed(decimal)) + let mMinimum = calculateMinimum() + let mMaximum = calculatePrecisionRoundedValue(_root.maximum) - // if there is a minimum stop, then adjust the slider minimum to that value - if (minStop && mMinimum < minStop) { - mMinimum = minStop - } - // the center of the handler is aligned on the snap point and half width shall be used to set as min not the entire width. // also half of the hadler is out of slider min position when set on min, which proves the same as above. if(x < ( _handler.width / 2 ) ) { @@ -221,8 +231,10 @@ let stepWidth = width / ((mMaximum - mMinimum) / step) if ( stepWidth < _handler.width ) { let valueStepCount = parseInt(mValue / step) - mValue = valueStepCount * step - return mValue.toFixed(decimal) + mValue = calculateRoundedValue((valueStepCount * step)) + if ( mValue < mMinimum ) { return mMinimum } + if ( mValue > mMaximum ) { return mMaximum } + return mValue } // For sliders with decimal min, max, values, we need to add refinement to @@ -242,6 +254,31 @@ return mValue; } + /*! + * \brief Calculate the minimum value for the slider based on the current minimum, + * minStop, and stepSnap values. + * \return If minimum is greater than or equal to minStop, then just return minimum. + * If minStop is greater than minimum and stepSnap is false, then return minStop. + * If minStop is greater than minimum and stepSnap is true, then return minStep if + * it falls on a step, otherwise return the step above minStop. + */ + function calculateMinimum() { + let result = calculateRoundedValue(_root.minimum) + let rdMinStop = calculatePrecisionRoundedValue(_root.minStop) + if (rdMinStop > result) { + if (stepSnap) { + // if slider is set to snap and minimum stop is not on a step, then + // adjust it to one step above + let rdStep = calculatePrecisionRoundedValue(step) + result = Math.ceil(rdMinStop/rdStep) * rdStep + } + else { + result = rdMinStop + } + } + return result + } + // used loader for performance since it may not always be required. // and can be a heavy Component Loader { id: _ticksLoader @@ -265,7 +302,7 @@ ProgressRect { id: _progressRect property real previousSliderValue: Number.NaN value : minimum - color : _root.highlightColor + color : _root.highlightActiveColor decimal : _root.decimal minimum : _root.minimum @@ -275,7 +312,7 @@ radius : _root.isRoundedEnds ? (height/2) : Variables.rangeRectRadius border.width: _root.hasBorder ? Variables.rangeRectBorderWidth : 0 - border.color: _root.isActive ? Colors.sliderProgressBorderActive : Colors.borderDisableButton + border.color: _root.isActive ? _root.progressBorderActiveColor : _root.progressBorderInactiveColor // propagation is not working on drag ! onDragged: { @@ -345,10 +382,10 @@ width : diameter height : diameter radius : diameter - color : Colors.highlightProgressBar + color : _root.handlerActiveColor border { width: Variables.progressbarHandlerBorderWidth - color: Colors.textMain + color: _root.handleBorderColor } MouseArea { anchors.fill: parent