start adding back slider labels - CURA-4412

plugins/LayerView/LayerSlider.qml

@@ -19,6 +19,7 @@ Item {
     property color upperHandleColor: "black"
     property color lowerHandleColor: "black"
     property color rangeHandleColor: "black"
+    property real handleLabelWidth: width
 
     // track properties
     property real trackThickness: 4 // width of the slider track
@@ -42,7 +43,6 @@ Item {
     }
 
     function setUpperValue (value) {
-        console.log("setUpperValue", value)
         upperHandle.setValue(value)
         updateRangeHandle()
     }
@@ -52,7 +52,6 @@ Item {
     }
 
     function setLowerValue (value) {
-        console.log("setLowerValue", value)
         lowerHandle.setValue(value)
         updateRangeHandle()
     }
@@ -135,15 +134,13 @@ Item {
 
         function onHandleDragged () {
 
-            console.log("upperhandle dragged")
-
             // don't allow the lower handle to be heigher than the upper handle
             if (lowerHandle.y - (y + height) < sliderRoot.minimumRangeHandleSize) {
                 lowerHandle.y = y + height + sliderRoot.minimumRangeHandleSize
             }
 
             // update the rangle handle
-            rangeHandle.height = lowerHandle.y - (y + height)
+            sliderRoot.updateRangeHandle()
 
             // TODO: improve this?
             UM.LayerView.setCurrentLayer(getValue())
@@ -159,10 +156,15 @@ Item {
 
         // set the slider position based on the upper value
         function setValue (value) {
-            console.log("setValue", value)
             var diff = (value - sliderRoot.maximumValue) / (sliderRoot.minimumValue - sliderRoot.maximumValue)
             var newUpperYPosition = Math.round(diff * (sliderRoot.height - (2 * sliderRoot.handleSize + sliderRoot.minimumRangeHandleSize)))
             y = newUpperYPosition
+
+            // update the rangle handle
+            sliderRoot.updateRangeHandle()
+
+            // TODO: improve this?
+            UM.LayerView.setCurrentLayer(getValue())
         }
 
         // dragging
@@ -179,39 +181,22 @@ Item {
             onPositionChanged: parent.onHandleDragged()
         }
 
-//        UM.PointingRectangle {
+        LayerSliderLabel {
-//
+            id: upperHandleLabel
-//            x: sliderRoot.width - UM.Theme.getSize("slider_layerview_background").width / 2 - width;
+
-//            y: Math.floor(((parent.y + parent.height) / 2) - (height / 2));
+            height: sliderRoot.handleSize + UM.Theme.getSize("default_margin").height
-//
+            // width is calculated automatically from the input field width
-//            target: Qt.point(parent.width, (parent.y + parent.height) / 2)
+            x: (sliderRoot.width / 2 - (parent.width / 2)) - width
-//            arrowSize: UM.Theme.getSize("default_arrow").width
+            y: Math.floor(parent.y + parent.height / 2 - height / 2)
-//
+            target: Qt.point(sliderRoot.width, parent.y + parent.height / 2)
-//            height: UM.Theme.getSize("slider_handle").height + UM.Theme.getSize("default_margin").height
+            visible: sliderRoot.layersVisible
-//            width: valueLabel.width + UM.Theme.getSize("default_margin").width
+
-//            Behavior on height { NumberAnimation { duration: 50; } }
+            // custom properties
-//
+            maximumValue: sliderRoot.maximumValue
-//            color: UM.Theme.getColor("tool_panel_background")
+            value: sliderRoot.getUpperValue()
-//            borderColor: UM.Theme.getColor("lining")
+            busy: UM.LayerView.busy
-//            borderWidth: UM.Theme.getSize("default_lining").width
+            setValue: sliderRoot.setUpperValue // connect callback functions
-//            visible: sliderRoot.layersVisible
+        }
-//
-//            // Catch all mouse events (so 3D scene doesn't handle them)
-//            MouseArea {
-//                anchors.fill: parent
-//            }
-//
-//            TextField {
-//                id: upperValueLabel
-//
-//                property string maximumValue: sliderRoot.maximumValue + 1
-//
-//                text: sliderRoot.getUpperValue() + 1
-//                horizontalAlignment: TextInput.AlignRight
-//
-//
-//            }
-//        }
     }
 
     // Lower handle
@@ -238,7 +223,7 @@ Item {
             rangeHandle.height = y - (upperHandle.y + upperHandle.height)
 
             // TODO: improve this?
-            UM.LayerView.setMinimumLayer(getValue());
+            UM.LayerView.setMinimumLayer(getValue())
         }
 
         // get the lower value from the current slider position
@@ -254,6 +239,12 @@ Item {
             var diff = (value - sliderRoot.maximumValue) / (sliderRoot.minimumValue - sliderRoot.maximumValue)
             var newLowerYPosition = Math.round((sliderRoot.handleSize + sliderRoot.minimumRangeHandleSize) + diff * (sliderRoot.height - (2 * sliderRoot.handleSize + sliderRoot.minimumRangeHandleSize)))
             y = newLowerYPosition
+
+            // update the rangle handle
+            sliderRoot.updateRangeHandle()
+
+            // TODO: improve this?
+            UM.LayerView.setMinimumLayer(getValue())
         }
 
         // dragging
@@ -269,5 +260,22 @@ Item {
 
             onPositionChanged: parent.onHandleDragged()
         }
+
+        LayerSliderLabel {
+            id: lowerHandleLabel
+
+            height: sliderRoot.handleSize + UM.Theme.getSize("default_margin").height
+            // width is calculated automatically from the input field width
+            x: (parent.x + (parent.width / 2)) - width - 100
+            y: Math.floor(parent.y + height / 2)
+            target: Qt.point(sliderRoot.width, parent.y + parent.height / 2)
+            visible: sliderRoot.layersVisible
+
+            // custom properties
+            maximumValue: sliderRoot.maximumValue
+            value: sliderRoot.getLowerValue()
+            busy: UM.LayerView.busy
+            setValue: sliderRoot.setLowerValue // connect callback functions
+        }
     }
 }

plugins/LayerView/LayerSliderLabel.qml

@@ -0,0 +1,110 @@
+// Copyright (c) 2017 Ultimaker B.V.
+// Cura is released under the terms of the LGPLv3 or higher.
+
+import QtQuick 2.2
+import QtQuick.Controls 1.2
+import QtQuick.Layouts 1.1
+import QtQuick.Controls.Styles 1.1
+
+import UM 1.0 as UM
+import Cura 1.0 as Cura
+
+Item {
+    id: sliderLabelRoot
+
+    // custom properties
+    property var target // Qt.point
+    property real maximumValue: 100
+    property real value: 0
+    property var setValue // Function
+    property bool busy: false
+
+    x: parent.x
+    y: parent.y
+    height: parent.height
+    visible: true
+
+    UM.PointingRectangle {
+        x: sliderLabelRoot.x
+        y: sliderLabelRoot.y
+        target: sliderLabelRoot.target
+        arrowSize: UM.Theme.getSize("default_arrow").width
+        height: sliderLabelRoot.height
+        width: valueLabel.width + UM.Theme.getSize("default_margin").width
+
+        color: UM.Theme.getColor("tool_panel_background")
+        borderColor: UM.Theme.getColor("lining")
+        borderWidth: UM.Theme.getSize("default_lining").width
+
+        visible: sliderLabelRoot.visible
+
+        Behavior on height {
+            NumberAnimation {
+                duration: 50
+            }
+        }
+
+        // catch all mouse events so they're not handled by underlying 3D scene
+        MouseArea {
+            anchors.fill: parent
+        }
+
+        TextField {
+            id: valueLabel
+
+            anchors {
+                left: parent.left
+                leftMargin: UM.Theme.getSize("default_margin").width / 2
+                verticalCenter: parent.verticalCenter
+            }
+
+            width: Math.max(UM.Theme.getSize("line").width * sliderLabelRoot.maximumValue.length + 2 * screenScaleFactor, 20 * screenScaleFactor)
+
+            text: sliderLabelRoot.value + 1 // the current handle value, add 1 because layers is an array
+            horizontalAlignment: TextInput.AlignRight
+
+            style: TextFieldStyle {
+                textColor: UM.Theme.getColor("setting_control_text")
+                font: UM.Theme.getFont("default")
+                background: Item { }
+            }
+
+            onEditingFinished: {
+
+                // Ensure that the cursor is at the first position. On some systems the text isn't fully visible
+                // Seems to have to do something with different dpi densities that QML doesn't quite handle.
+                // Another option would be to increase the size even further, but that gives pretty ugly results.
+                cursorPosition = 0
+
+                if (valueLabel.text != "") {
+                    // -1 because we need to convert back to an array structure
+                    sliderLabelRoot.setValue(parseInt(valueLabel.text) - 1)
+                }
+            }
+
+            validator: IntValidator {
+                bottom: 1
+                top: sliderLabelRoot.maximumValue + 1 // +1 because actual layers is an array
+            }
+
+            Keys.onUpPressed: sliderLabelRoot.setValue(sliderLabelRoot.value + ((event.modifiers & Qt.ShiftModifier) ? 10 : 1))
+            Keys.onDownPressed: sliderLabelRoot.setValue(sliderLabelRoot.value - ((event.modifiers & Qt.ShiftModifier) ? 10 : 1))
+        }
+
+        BusyIndicator {
+            id: busyIndicator
+
+            anchors {
+                left: parent.right
+                leftMargin: UM.Theme.getSize("default_margin").width / 2
+                verticalCenter: parent.verticalCenter
+            }
+
+            width: sliderLabelRoot.height
+            height: width
+
+            visible: sliderLabelRoot.busy
+            running: sliderLabelRoot.busy
+        }
+    }
+}

plugins/LayerView/LayerView.qml

@@ -9,8 +9,6 @@ import QtQuick.Controls.Styles 1.1
 import UM 1.0 as UM
 import Cura 1.0 as Cura
 
-//import LayerSlider 1.0
-
 Item
 {
     id: base
@@ -364,6 +362,7 @@ Item
             upperHandleColor: UM.Theme.getColor("slider_handle")
             lowerHandleColor: UM.Theme.getColor("slider_handle")
             rangeHandleColor: UM.Theme.getColor("slider_groove_fill")
+            handleLabelWidth: UM.Theme.getSize("slider_layerview_background").width
             layersVisible: UM.LayerView.layerActivity && CuraApplication.platformActivity ? true : false
 
             // update values when layer data changes
@@ -379,82 +378,5 @@ Item
                 slider.setUpperValue(UM.LayerView.currentLayer)
             }
         }
-
-//        Item
-//        {
-
-//            UM.PointingRectangle
-//            {
-//                x: parent.width - UM.Theme.getSize("slider_layerview_background").width / 2 - width;
-//                y: Math.floor(slider.activeHandle.y + slider.activeHandle.height / 2 - height / 2);
-//
-//                target: Qt.point(parent.width, slider.activeHandle.y + slider.activeHandle.height / 2)
-//                arrowSize: UM.Theme.getSize("default_arrow").width
-//
-//                height: UM.Theme.getSize("slider_handle").height + UM.Theme.getSize("default_margin").height
-//                width: valueLabel.width + UM.Theme.getSize("default_margin").width
-//                Behavior on height { NumberAnimation { duration: 50; } }
-//
-//                color: UM.Theme.getColor("tool_panel_background")
-//                borderColor: UM.Theme.getColor("lining")
-//                borderWidth: UM.Theme.getSize("default_lining").width
-//
-//                visible: slider.layersVisible
-//
-//                MouseArea //Catch all mouse events (so scene doesnt handle them)
-//                {
-//                    anchors.fill: parent
-//                }
-//
-//                TextField
-//                {
-//                    id: valueLabel
-//                    property string maxValue: slider.maximumValue + 1
-//                    text: slider.activeHandle.value + 1
-//                    horizontalAlignment: TextInput.AlignRight;
-//                    onEditingFinished:
-//                    {
-//                        // Ensure that the cursor is at the first position. On some systems the text isn't fully visible
-//                        // Seems to have to do something with different dpi densities that QML doesn't quite handle.
-//                        // Another option would be to increase the size even further, but that gives pretty ugly results.
-//                        cursorPosition = 0;
-//                        if(valueLabel.text != '')
-//                        {
-//                            slider.activeHandle.setValue(valueLabel.text - 1);
-//                        }
-//                    }
-//                    validator: IntValidator { bottom: 1; top: slider.maximumValue + 1; }
-//
-//                    anchors.left: parent.left;
-//                    anchors.leftMargin: UM.Theme.getSize("default_margin").width / 2;
-//                    anchors.verticalCenter: parent.verticalCenter;
-//
-//                    width: Math.max(UM.Theme.getSize("line").width * maxValue.length + 2 * screenScaleFactor, 20 * screenScaleFactor);
-//                    style: TextFieldStyle
-//                    {
-//                        textColor: UM.Theme.getColor("setting_control_text");
-//                        font: UM.Theme.getFont("default");
-//                        background: Item { }
-//                    }
-//
-//                    Keys.onUpPressed: slider.activeHandle.setValue(slider.activeHandle.value + ((event.modifiers & Qt.ShiftModifier) ? 10 : 1))
-//                    Keys.onDownPressed: slider.activeHandle.setValue(slider.activeHandle.value - ((event.modifiers & Qt.ShiftModifier) ? 10 : 1))
-//                }
-//
-//                BusyIndicator
-//                {
-//                    id: busyIndicator;
-//                    anchors.left: parent.right;
-//                    anchors.leftMargin: UM.Theme.getSize("default_margin").width / 2;
-//                    anchors.verticalCenter: parent.verticalCenter;
-//
-//                    width: UM.Theme.getSize("slider_handle").height;
-//                    height: width;
-//
-//                    running: UM.LayerView.busy;
-//                    visible: UM.LayerView.busy;
-//                }
-//            }
-//        }
     }
 }