Click and drag to resize PiP window instead of grow and shrink buttons

qgcresources.qrc

@@ -107,6 +107,7 @@
         <file alias="compassInstrumentDial.svg">src/FlightMap/Images/compassInstrumentDial.svg</file>
         <file alias="crossHair.svg">src/FlightMap/Images/crossHair.svg</file>
         <file alias="PiP.svg">src/FlightMap/Images/PiP.svg</file>
+        <file alias="pipResize.svg">src/FlightMap/Images/pipResize.svg</file>
         <file alias="rollDialWhite.svg">src/FlightMap/Images/rollDialWhite.svg</file>
         <file alias="rollPointerWhite.svg">src/FlightMap/Images/rollPointerWhite.svg</file>
         <file alias="scale.png">src/FlightMap/Images/scale.png</file>

src/FlightDisplay/FlightDisplayView.qml

@@ -311,23 +311,8 @@ QGCView {
             onHideIt: {
                 setPipVisibility(!state)
             }
-            onGrow: {
-                if (_pipSize >= 825) {
-                    return
-                }
-
-                _pipSize += 50
-                _flightVideoPipControl.width = _pipSize
-                _flightVideoPipControl.height= _pipSize * (9/16)
-            }
-            onShrink: {
-                if (_pipSize <= 225) {
-                    return
-                }
-
-                _pipSize -= 50
-                _flightVideoPipControl.width = _pipSize
-                _flightVideoPipControl.height= _pipSize * (9/16)
+            onNewWidth: {
+                _pipSize = newWidth
             }
         }
 

src/QmlControls/QGCPipable.qml

@@ -22,43 +22,98 @@ Item {
     property bool isHidden:  false
     property bool isDark:    false
 
+    // As a percentage of the window width
+    property real maxSize: 0.75
+    property real minSize: 0.10
+
     signal  activated()
     signal  hideIt(bool state)
-    signal  grow()
-    signal  shrink()
+    signal  newWidth(real newWidth)
 
     MouseArea {
+        id: pipMouseArea
         anchors.fill: parent
         enabled:      !isHidden
+        hoverEnabled: true
         onClicked: {
             pip.activated()
         }
     }
 
-    QGCButton {
-        id: growButton
-        visible: !isHidden && !ScreenTools.isShortScreen && !ScreenTools.isTinyScreen
-        anchors.left: parent.left
-        anchors.bottom: shrinkButton.top
-        height: 20
+    // MouseArea to drag in order to resize the PiP area
+    MouseArea {
+        id: pipResize
+        anchors.top: parent.top
+        anchors.right: parent.right
+        height: ScreenTools.minTouchPixels
         width: height
-        anchors.margins: 5
-        text: "+"
-        opacity: 0.5
-        onClicked: pip.grow()
+        property var initialX: 0
+        property var initialWidth: 0
+
+        onClicked: {
+            // TODO propagate
+        }
+
+        // When we push the mouse button down, we un-anchor the mouse area to prevent a resizing loop
+        onPressed: {
+            pipResize.anchors.top = undefined // Top doesn't seem to 'detach'
+            pipResize.anchors.right = undefined // This one works right, which is what we really need
+            pipResize.initialX = mouse.x
+            pipResize.initialWidth = pip.width
+        }
+
+        // When we let go of the mouse button, we re-anchor the mouse area in the correct position
+        onReleased: {
+            pipResize.anchors.top = pip.top
+            pipResize.anchors.right = pip.right
+        }
+
+        // Drag
+        onPositionChanged: {
+            if (pipResize.pressed) {
+                var parentW = pip.parent.width // flightView
+                var newW = pipResize.initialWidth + mouse.x - pipResize.initialX
+                if (newW < parentW * maxSize && newW > parentW * minSize) {
+                    newWidth(newW)
+                }
+            }
+        }
     }
 
-    QGCButton {
-        id: shrinkButton
-        visible: !isHidden && !ScreenTools.isShortScreen && !ScreenTools.isTinyScreen
-        anchors.left: parent.left
-        anchors.bottom: closePIP.top
-        height: 20
-        width: height
-        anchors.margins: 5
-        text: "-"
-        opacity: 0.5
-        onClicked: pip.shrink()
+    // Resize icon
+    Image {
+        source:         "/qmlimages/pipResize.svg"
+        fillMode:       Image.PreserveAspectFit
+        mipmap: true
+        anchors.right:  parent.right
+        anchors.top:    parent.top
+        visible:        !isHidden && pipMouseArea.containsMouse
+        height:         ScreenTools.defaultFontPixelHeight * 2.5
+        width:          ScreenTools.defaultFontPixelHeight * 2.5
+        sourceSize.height:  height
+    }
+
+    // Resize pip window if necessary when main window is resized
+    property var pipLock: 2
+
+    Connections {
+        target: pip.parent
+        onWidthChanged: {
+            // hackity hack...
+            // don't fire this while app is loading/initializing (it happens twice)
+            if (pipLock) {
+                pipLock--
+                return
+            }
+
+            var parentW = pip.parent.width
+
+            if (pip.width > parentW * maxSize) {
+                newWidth(parentW * maxSize)
+            } else if (pip.width < parentW * minSize) {
+                newWidth(parentW * minSize)
+            }
+        }
     }
 
     //-- PIP Corner Indicator