QmlProfiler: Use RangeMover to simplify and fix SelectionRange

Deduplicate the code and fix the "jaggy" behavior.

Task-number: QTCREATORBUG-10762
Change-Id: Iaca3bc5b77cb8d92f082232e6fd3c2d9e0935300
Reviewed-by: Kai Koehne <kai.koehne@digia.com>

src/plugins/qmlprofiler/qml/MainView.qml

@@ -335,29 +335,6 @@ Rectangle {
             onContentXChanged: view.updateZoomControl()
             clip:true
 
-            MouseArea {
-                id: selectionRangeDrag
-                enabled: selectionRange.ready
-                anchors.fill: selectionRange
-                drag.target: selectionRange
-                drag.axis: "XAxis"
-                drag.minimumX: 0
-                drag.maximumX: flick.contentWidth - selectionRange.width
-                onPressed: {
-                    selectionRange.isDragging = true;
-                }
-                onReleased: {
-                    selectionRange.isDragging = false;
-                }
-                onDoubleClicked: {
-                    zoomControl.setRange(selectionRange.startTime,
-                                         selectionRange.startTime + selectionRange.duration);
-                    root.selectionRangeMode = false;
-                    root.updateRangeButton();
-                }
-            }
-
-
             SelectionRange {
                 id: selectionRange
                 visible: root.selectionRangeMode
@@ -434,11 +411,8 @@ Rectangle {
                 }
 
              // hack to pass mouse events to the other mousearea if enabled
-                startDragArea: selectionRangeDrag.enabled ? selectionRangeDrag.x :
+                startDragArea: selectionRange.ready ? selectionRange.getLeft() : -flick.contentX
-                                                            -flick.contentX
+                endDragArea: selectionRange.ready ? selectionRange.getRight() : -flick.contentX-1
-                endDragArea: selectionRangeDrag.enabled ?
-                                 selectionRangeDrag.x + selectionRangeDrag.width :
-                                 -flick.contentX-1
             }
             MouseArea {
                 id: selectionRangeControl
@@ -517,7 +491,7 @@ Rectangle {
         startTime: selectionRange.startTimeString
         duration: selectionRange.durationString
         endTime: selectionRange.endTimeString
-        showDuration: selectionRange.width > 1
+        showDuration: selectionRange.getWidth() > 1
     }
 
     RangeDetails {

src/plugins/qmlprofiler/qml/SelectionRange.qml

@@ -29,65 +29,41 @@
 
 import QtQuick 2.1
 
-Rectangle {
+RangeMover {
     id: selectionRange
 
-    width: 1
-    color: "transparent"
-
     property bool ready: visible && creationState === 3
 
-    property color rangeColor:"#444a64b8"
-    property color pressedColor:"#664a64b8"
-    property color borderColor:"#aa4a64b8"
-    property color dragMarkerColor: "#4a64b8"
-    property color singleLineColor: "#4a64b8"
-
     property string startTimeString: detailedPrintTime(startTime)
     property string endTimeString: detailedPrintTime(startTime+duration)
     property string durationString: detailedPrintTime(duration)
 
-    property real startTime: x * selectionRange.viewTimePerPixel + qmlProfilerModelProxy.traceStartTime()
+    property real startTime: getLeft() * viewTimePerPixel + qmlProfilerModelProxy.traceStartTime()
-    property real duration: width * selectionRange.viewTimePerPixel
+    property real duration: getWidth() * viewTimePerPixel
     property real viewTimePerPixel: 1
     property int creationState : 0
 
-    property real x1
-    property real x2
-    property real x3: Math.min(x1, x2)
-    property real x4: Math.max(x1, x2)
-
-    property bool isDragging: false
-
     Connections {
         target: zoomControl
         onRangeChanged: {
             var oldTimePerPixel = selectionRange.viewTimePerPixel;
             selectionRange.viewTimePerPixel = Math.abs(zoomControl.endTime() - zoomControl.startTime()) / flick.width;
             if (creationState === 3 && oldTimePerPixel != selectionRange.viewTimePerPixel) {
-                selectionRange.x = x * oldTimePerPixel / selectionRange.viewTimePerPixel;
+                var newWidth = getWidth() * oldTimePerPixel / viewTimePerPixel;
-                selectionRange.width = width * oldTimePerPixel / selectionRange.viewTimePerPixel;
+                setLeft(getLeft() * oldTimePerPixel / viewTimePerPixel);
+                setRight(getLeft() + newWidth);
             }
         }
     }
 
-    onCreationStateChanged: {
+    onRangeDoubleClicked: {
-        switch (creationState) {
+        zoomControl.setRange(startTime, startTime + duration);
-        case 0: color = "transparent"; break;
+        root.selectionRangeMode = false;
-        case 1: color = singleLineColor; break;
+        root.updateRangeButton();
-        default: color = rangeColor; break;
-        }
-    }
-
-    onIsDraggingChanged: {
-        if (isDragging)
-            color = pressedColor;
-        else
-            color = rangeColor;
     }
 
     function reset(setVisible) {
-        width = 1;
+        setRight(getLeft() + 1);
         creationState = 0;
         visible = setVisible;
     }
@@ -95,16 +71,13 @@ Rectangle {
     function setPos(pos) {
         switch (creationState) {
         case 1: {
-            width = 1;
+            setLeft(pos);
-            x1 = pos;
+            setRight(pos + 1);
-            x2 = pos;
-            x = pos;
             break;
         }
         case 2: {
-            x2 = pos;
+            setLeft(Math.min(getLeft(), pos));
-            x = x3;
+            setRight(Math.max(getRight(), pos));
-            width = x4-x3;
             break;
         }
         default: return;
@@ -156,142 +129,4 @@ Rectangle {
             selectionRange.setPos(selectionRangeControl.mouseX + flick.contentX);
         }
     }
-
-    Rectangle {
-        id: leftBorder
-
-        visible: selectionRange.creationState === 3
-
-        // used for dragging the borders
-        property real initialX: 0
-        property real initialWidth: 0
-
-        x: 0
-        height: parent.height
-        width: 1
-        color: borderColor
-
-        Rectangle {
-            id: leftBorderHandle
-            height: parent.height
-            x: -width
-            width: 9
-            color: "#869cd1"
-            visible: false
-            Image {
-                source: "range_handle.png"
-                x: 4
-                width: 4
-                height: 63
-                fillMode: Image.Tile
-                y: root.scrollY + root.height / 2 - 32
-            }
-        }
-
-        states: State {
-            name: "highlighted"
-            PropertyChanges {
-                target: leftBorderHandle
-                visible: true
-            }
-        }
-
-        onXChanged: if (x != 0) {
-            selectionRange.width = initialWidth - x;
-            selectionRange.x = initialX + x;
-            x = 0;
-        }
-
-        MouseArea {
-            x: -12
-            width: 15
-            y: 0
-            height: parent.height
-
-            drag.target: leftBorder
-            drag.axis: "XAxis"
-            drag.minimumX: -parent.initialX
-            drag.maximumX: parent.initialWidth - 2
-
-            hoverEnabled: true
-
-            onEntered: parent.state = "highlighted"
-            onExited: {
-                if (!pressed) parent.state = "";
-            }
-            onReleased: {
-                if (!containsMouse) parent.state = "" ;
-            }
-            onPressed: {
-                parent.initialX = selectionRange.x;
-                parent.initialWidth = selectionRange.width;
-            }
-        }
-    }
-
-    Rectangle {
-        id: rightBorder
-
-        visible: selectionRange.creationState === 3
-
-        x: selectionRange.width
-        height: parent.height
-        width: 1
-        color: borderColor
-
-        Rectangle {
-            id: rightBorderHandle
-            height: parent.height
-            x: 1
-            width: 9
-            color: "#869cd1"
-            visible: false
-            Image {
-                source: "range_handle.png"
-                x: 2
-                width: 4
-                height: 63
-                fillMode: Image.Tile
-                y: root.scrollY + root.height / 2 - 32
-            }
-        }
-
-        states: State {
-            name: "highlighted"
-            PropertyChanges {
-                target: rightBorderHandle
-                visible: true
-            }
-        }
-
-        onXChanged: {
-            if (x != selectionRange.width) {
-                selectionRange.width = x;
-            }
-        }
-
-        MouseArea {
-            x: -3
-            width: 15
-            y: 0
-            height: parent.height
-
-            drag.target: rightBorder
-            drag.axis: "XAxis"
-            drag.minimumX: 1
-            drag.maximumX: flick.contentWidth - selectionRange.x
-
-            hoverEnabled: true
-
-            onEntered: {
-                parent.state = "highlighted";
-            }
-            onExited: {
-                if (!pressed) parent.state = "";
-            }
-            onReleased: {
-                if (!containsMouse) parent.state = "";
-            }
-        }
-    }
 }