SplitView: support changing orientation

Change-Id: I8a5f7ec5bd6315a8a74ac6f8b5c9bc0d0f9c19fa
Reviewed-by: Jens Bache-Wiig <jens.bache-wiig@digia.com>

2 files changed, 116 insertions, 6 deletions

diff --git a/src/controls/SplitView.qml b/src/controls/SplitView.qml
index a0558aa8..2dbbbf75 100644
--- a/src/controls/SplitView.qml
+++ b/src/controls/SplitView.qml
@@ -163,12 +163,13 @@ Item {
     Component.onCompleted: d.init()
     onWidthChanged: d.updateLayout()
     onHeightChanged: d.updateLayout()
+    onOrientationChanged: d.changeOrientation()
 
     SystemPalette { id: pal }
 
     QtObject {
         id: d
-        readonly property bool horizontal: orientation == Qt.Horizontal
+        property bool horizontal: orientation == Qt.Horizontal
         readonly property string minimum: horizontal ? "minimumWidth" : "minimumHeight"
         readonly property string maximum: horizontal ? "maximumWidth" : "maximumHeight"
         readonly property string otherMinimum: horizontal ? "minimumHeight" : "minimumWidth"
@@ -224,6 +225,39 @@ Item {
             d.updateLayout()
         }
 
+        function changeOrientation()
+        {
+            if (__items.length == 0)
+                return;
+            d.updateLayoutGuard = true
+
+            // Swap width/height for items and handles:
+            for (var i=0; i<__items.length; ++i) {
+                var item = __items[i]
+                var tmp = item.x
+                item.x = item.y
+                item.y = tmp
+                tmp = item.width
+                item.width = item.height
+                item.height = tmp
+
+                var handle = __handles[i]
+                if (handle) {
+                    tmp = handle.x
+                    handle.x = handle.y
+                    handle.y = handle.x
+                    tmp = handle.width
+                    handle.width = handle.height
+                    handle.height = tmp
+                }
+            }
+
+            // Change d.horizontal explicit, since the binding will change too late:
+            d.horizontal = orientation == Qt.Horizontal
+            d.updateLayoutGuard = false
+            d.updateFillIndex()
+        }
+
         function calculateImplicitSize()
         {
             var implicitSize = 0
diff --git a/tests/auto/controls/data/tst_splitview.qml b/tests/auto/controls/data/tst_splitview.qml
index ebbcef45..793844ff 100644
--- a/tests/auto/controls/data/tst_splitview.qml
+++ b/tests/auto/controls/data/tst_splitview.qml
@@ -41,27 +41,103 @@
 import QtQuick 2.1
 import QtTest 1.0
 import QtQuick.Controls 1.0
+import QtQuickControlsTests 1.0
 
 TestCase {
     id: testCase
     name: "Tests_SplitView"
     when: windowShown
     width: 400
-    height: 400
-
+    height: 500
+    visible: true
+    property int handleWidth: 1
+    property int handleHeight: 5
 
     Component {
         id: splitView
-        SplitView { Item {}  Item {} }
+        SplitView {
+            anchors.fill: parent
+            property alias item1: item1
+            property alias item2: item2
+            handleDelegate: Rectangle { width: handleWidth; height: handleHeight; color: "black" }
+
+            Rectangle {
+                id: item1
+                width: 100
+                height: 80
+                color: "red"
+            }
+            Rectangle {
+                id: item2
+                width: 200
+                height: 90
+                color: "blue"
+            }
+        }
     }
 
-    function test_splitView() {
+    function test_01_splitView() {
         var component = splitView
         var view = component.createObject(testCase);
         verify (view !== null, "splitview created is null")
         verify (view.orientation === Qt.Horizontal)
-        verify (view.__items.length === 2)
+        compare (view.__items.length, 2)
+        compare (view.item1.x, 0)
+        compare (view.item1.y, 0)
+        compare (view.item1.width, 100)
+        compare (view.item1.height, 500)
+        compare (view.item2.x, view.item1.x + view.item1.width + handleWidth)
+        compare (view.item2.y, 0)
+        compare (view.item2.width, testCase.width - view.item1.width - handleWidth)
+        compare (view.item2.height, 500)
+        view.destroy()
+    }
+
+    function test_02_splitView_initial_orientation_vertical() {
+        var component = splitView
+        var view = component.createObject(testCase, {orientation:Qt.Vertical});
+        verify (view !== null, "splitview created is null")
+        compare (view.orientation, Qt.Vertical)
+        compare (view.__items.length, 2)
+        compare (view.item1.x, 0)
+        compare (view.item1.y, 0)
+        compare (view.item1.width, 400)
+        compare (view.item1.height, 80)
+        compare (view.item2.x, 0)
+        compare (view.item2.y, view.item1.y + view.item1.height + handleHeight)
+        compare (view.item2.width, 400)
+        compare (view.item2.height, testCase.height - view.item1.height - handleHeight)
         view.destroy()
     }
 
+    function test_03_orientation_change()
+    {
+        var component = splitView
+        var view = component.createObject(testCase);
+        verify (view.orientation === Qt.Horizontal)
+
+        view.orientation = Qt.Vertical
+        verify (view.orientation === Qt.Vertical)
+        compare (view.item1.x, 0)
+        compare (view.item1.y, 0)
+        compare (view.item1.width, 400)
+        compare (view.item1.height, 100)
+        compare (view.item2.x, 0)
+        // We use handleWidth rather than handleHeight, since the layout is just flipped:
+        compare (view.item2.y, view.item1.y + view.item1.height + handleWidth)
+        compare (view.item2.width, 400)
+        compare (view.item2.height, testCase.height - view.item1.height - handleWidth)
+
+        view.orientation = Qt.Horizontal
+        verify (view.orientation === Qt.Horizontal)
+        compare (view.item1.x, 0)
+        compare (view.item1.y, 0)
+        compare (view.item1.width, 100)
+        compare (view.item1.height, 500)
+        compare (view.item2.x, view.item1.x + view.item1.width + handleWidth)
+        compare (view.item2.y, 0)
+        compare (view.item2.width, testCase.width - view.item1.width - handleWidth)
+        compare (view.item2.height, 500)
+        view.destroy()
+    }
 }