QmlProfiler: zoom in and out controls

Change-Id: I920aae3075269e4f2fd1be15e9ca3cc4e08ac7a7
Reviewed-on: http://codereview.qt.nokia.com/826
Reviewed-by: Qt Sanity Bot <qt_sanity_bot@ovi.com>
Reviewed-by: Kai Koehne <kai.koehne@nokia.com>

src/plugins/qmlprofiler/qml/MainView.qml

@@ -81,9 +81,9 @@ Rectangle {
             var startTime = Plotter.ranges[0].start;
             if (rangeMover.value + startTime> event.start) {
                 rangeMover.x = Math.max(0,
-                    Math.floor((event.start - startTime) / xs - canvas.canvasWindow.x - rangeMover.width/2) );
+                    Math.floor((event.start - startTime) / xs - canvas.canvasWindow.x - rangeMover.zoomWidth/2) );
-            } else if (rangeMover.value + startTime + rangeMover.width * xs < event.start + event.duration) {
+            } else if (rangeMover.value + startTime + rangeMover.zoomWidth * xs < event.start + event.duration) {
-                rangeMover.x = Math.floor((event.start + event.duration - startTime) / xs - canvas.canvasWindow.x - rangeMover.width/2);
+                rangeMover.x = Math.floor((event.start + event.duration - startTime) / xs - canvas.canvasWindow.x - rangeMover.zoomWidth/2);
             }
         }
     }
@@ -104,6 +104,30 @@ Rectangle {
         }
     }
 
+    function zoomIn() {
+        // 10%
+        var newZoom = rangeMover.zoomWidth / 1.1;
+
+        // 0.1 ms minimum zoom
+        if (newZoom * Plotter.xScale(canvas) > 100000) {
+            hideRangeDetails();
+            rangeMover.zoomWidth =  newZoom
+            rangeMover.updateZoomControls();
+        }
+    }
+
+    function zoomOut() {
+        hideRangeDetails();
+        // 10%
+        var newZoom = rangeMover.zoomWidth * 1.1;
+        if (newZoom > canvas.width)
+            newZoom = canvas.width;
+        if (newZoom + rangeMover.x > canvas.width)
+            rangeMover.x = canvas.width - newZoom;
+        rangeMover.zoomWidth = newZoom;
+        rangeMover.updateZoomControls();
+    }
+
     //handle debug data coming from C++
     Connections {
         target: connection
@@ -173,7 +197,7 @@ Rectangle {
         anchors.left: flick.left
         anchors.right: flick.right
         startTime: rangeMover.x * Plotter.xScale(canvas);
-        endTime: (rangeMover.x + rangeMover.width) * Plotter.xScale(canvas);
+        endTime: (rangeMover.x + rangeMover.zoomWidth) * Plotter.xScale(canvas);
     }
 
     function hideRangeDetails() {
@@ -227,13 +251,7 @@ Rectangle {
                     flick.contentX = startX
             }
             startTime: rangeMover.value
-
+            endTime: startTime + (rangeMover.zoomWidth*Plotter.xScale(canvas))
-            property real prevXStep:  -1
-            property real possibleEndTime: startTime + (rangeMover.width*Plotter.xScale(canvas))
-            onPossibleEndTimeChanged:  {
-                prevXStep = canvas.canvasWindow.x;
-                endTime = possibleEndTime
-            }
             onEndTimeChanged: updateTimeline()
 
             delegate: Rectangle {
@@ -413,7 +431,7 @@ Rectangle {
     MouseArea {
         anchors.fill: canvas
         //### ideally we could press to position then immediately drag
-        onPressed: rangeMover.x = mouse.x - rangeMover.width/2
+        onPressed: rangeMover.x = mouse.x - rangeMover.zoomWidth/2
     }
 
     RangeMover {

src/plugins/qmlprofiler/qml/RangeMover.qml

@@ -37,60 +37,80 @@ import Monitor 1.0
 
 Item {
     id: rangeMover
-    width: rect.width; height: 50
 
-    property real prevXStep: -1
+
-    property real possibleValue: (canvas.canvasWindow.x + x) * Plotter.xScale(canvas)
+    property color lighterColor:"#cc80b2f6"
-    onPossibleValueChanged:  {
+    property color darkerColor:"#cc6da1e8"
-        prevXStep = canvas.canvasWindow.x;
+    property real value: (canvas.canvasWindow.x + x) * Plotter.xScale(canvas)
-        if (value != possibleValue)
+    property real zoomWidth: 20
-            value = possibleValue;
+
+    function updateZoomControls() {
+        rightRange.x = rangeMover.width;
     }
+    onXChanged: updateZoomControls();
 
-    property real value
+    width: Math.max(rangeMover.zoomWidth, 20); height: 50
 
     MouseArea {
         anchors.fill: parent
         drag.target: rangeMover
         drag.axis: "XAxis"
         drag.minimumX: 0
-        drag.maximumX: canvas.width - rangeMover.width //###
+        drag.maximumX: canvas.width - rangeMover.zoomWidth //###
+    }
+
+    Rectangle {
+        id: frame
+        color:"transparent"
+        border.width: 1
+        border.color: darkerColor
+        anchors.fill: parent
+        anchors.rightMargin: 1
+        anchors.bottomMargin: 1
     }
 
     Rectangle {
         id: rect
 
-        color: "#cc80b2f6"
+        color: lighterColor
-        width: 20
+        width: parent.zoomWidth
         height: parent.height
     }
 
+
+
     Rectangle {
         id: leftRange
 
         property int currentX: rangeMover.x
-        property int currentWidth : rect.width
+        property int currentWidth : rangeMover.zoomWidth
 
+        x: -width
         height: parent.height
-        width: 5
+        width: 15
-        color: Qt.darker(rect.color);
+        color: darkerColor
-        opacity: 0.3
+
+        Text {
+            anchors.centerIn: parent
+            text:"<"
+        }
+
         MouseArea {
             anchors.fill: parent
             drag.target: leftRange
             drag.axis: "XAxis"
             drag.minimumX: -parent.currentX
-            drag.maximumX: parent.currentWidth - 20
+            drag.maximumX: parent.currentWidth - width - 1
             onPressed: {
                 parent.currentX = rangeMover.x;
-                parent.currentWidth = rect.width;
+                parent.currentWidth = rangeMover.zoomWidth;
             }
         }
         onXChanged: {
-            if (x!=0) {
+            if (x + width != 0) {
-                rect.width = currentWidth - x;
+                rangeMover.zoomWidth = currentWidth - x - width;
-                rangeMover.x = currentX + x;
+                rangeMover.x = currentX + x + width;
-                x = 0;
+                x = -width;
             }
         }
     }
@@ -98,23 +118,32 @@ Item {
     Rectangle {
         id: rightRange
         property int currentX: rangeMover.x
+        property int widthSpace: rangeMover.width - rangeMover.zoomWidth
 
         height: parent.height
-        width: 5
+        width: 15
-        anchors.right: parent.right
+        x: rangeMover.width
-        color: Qt.darker(rect.color);
+        color: darkerColor;
-        opacity: 0.3
+
+        Text {
+            anchors.centerIn: parent
+            text:">"
+        }
         MouseArea {
             anchors.fill: parent
             drag.target: rightRange
             drag.axis: "XAxis"
-            drag.minimumX: 15
+            drag.minimumX: 1 + parent.widthSpace
             drag.maximumX: canvas.width - parent.currentX;
-            onPressed: parent.currentX = rangeMover.x;
+            onPressed: {
+                parent.currentX = rangeMover.x;
+                parent.widthSpace = rangeMover.width - rangeMover.zoomWidth;
+            }
+            onReleased: rightRange.x = rangeMover.width;
         }
         onXChanged: {
-            if (x != rect.width - width) {
+            if (x != rangeMover.width) {
-                rect.width = x + width;
+                rangeMover.zoomWidth = x - widthSpace;
             }
         }
     }

src/plugins/qmlprofiler/qml/qml.qrc

@@ -14,5 +14,7 @@
         <file>prev.png</file>
         <file>next.png</file>
         <file>toolbarbg.png</file>
+        <file>magnifier-minus.png</file>
+        <file>magnifier-plus.png</file>
     </qresource>
 </RCC>

src/plugins/qmlprofiler/tracewindow.cpp

@@ -295,8 +295,16 @@ TraceWindow::TraceWindow(QWidget *parent)
     QToolButton *buttonNext= new QToolButton;
     buttonNext->setIcon(QIcon(":/qmlprofiler/next.png"));
     connect(buttonNext, SIGNAL(clicked()), this, SIGNAL(jumpToNext()));
+    QToolButton *buttonZoomIn = new QToolButton;
+    buttonZoomIn->setIcon(QIcon(":/qmlprofiler/magnifier-plus.png"));
+    connect(buttonZoomIn, SIGNAL(clicked()), this, SIGNAL(zoomIn()));
+    QToolButton *buttonZoomOut = new QToolButton;
+    buttonZoomOut->setIcon(QIcon(":/qmlprofiler/magnifier-minus.png"));
+    connect(buttonZoomOut, SIGNAL(clicked()), this, SIGNAL(zoomOut()));
     toolBarLayout->addWidget(buttonPrev);
     toolBarLayout->addWidget(buttonNext);
+    toolBarLayout->addWidget(buttonZoomIn);
+    toolBarLayout->addWidget(buttonZoomOut);
 
     m_view->setResizeMode(QDeclarativeView::SizeRootObjectToView);
     m_view->setFocus();
@@ -330,6 +338,8 @@ void TraceWindow::reset(QDeclarativeDebugConnection *conn)
     connect(m_view->rootObject(), SIGNAL(updateTimer()), this, SLOT(updateTimer()));
     connect(this, SIGNAL(jumpToPrev()), m_view->rootObject(), SLOT(prevEvent()));
     connect(this, SIGNAL(jumpToNext()), m_view->rootObject(), SLOT(nextEvent()));
+    connect(this, SIGNAL(zoomIn()), m_view->rootObject(), SLOT(zoomIn()));
+    connect(this, SIGNAL(zoomOut()), m_view->rootObject(), SLOT(zoomOut()));
 
     connect(this, SIGNAL(internalClearDisplay()), m_view->rootObject(), SLOT(clearAll()));
 }

src/plugins/qmlprofiler/tracewindow.h

@@ -78,6 +78,8 @@ signals:
     void internalClearDisplay();
     void jumpToPrev();
     void jumpToNext();
+    void zoomIn();
+    void zoomOut();
 
 private:
     QWeakPointer<TracePlugin> m_plugin;