More features in QGCMouseArea

src/MissionEditor/MissionItemEditor.qml

@@ -69,20 +69,9 @@ Rectangle {
     }
 
     QGCMouseArea {
-        // The MouseArea for the hamburger is larger than the hamburger image itself in order to provide a larger
-        // touch area on mobile
-        anchors.leftMargin:     -_touchMarginHorizontal
-        anchors.rightMargin:    -_touchMarginHorizontal
-        anchors.topMargin:      -_touchMarginVertical
-        anchors.bottomMargin:   -_touchMarginVertical
-        anchors.fill:           hamburger
-        visible:                hamburger.visible
-        onClicked:              hamburgerMenu.popup()
-
-        property real _touchWidth:              Math.max(hamburger.width, ScreenTools.minTouchPixels)
-        property real _touchHeight:             Math.max(hamburger.height, ScreenTools.minTouchPixels)
-        property real _touchMarginHorizontal:   ScreenTools.isMobile ? (_touchWidth - hamburger.width) / 2 : 0
-        property real _touchMarginVertical:     ScreenTools.isMobile ? (_touchHeight - hamburger.height) / 2 : 0
+        fillItem:   hamburger
+        visible:    hamburger.visible
+        onClicked:  hamburgerMenu.popup()
 
         Menu {
             id: hamburgerMenu

src/QmlControls/MissionItemIndexLabel.qml

@@ -73,14 +73,8 @@ Canvas {
         onWidthChanged: requestPaint()
     }
 
-    MouseArea {
-        anchors.leftMargin:     -_expandMargin
-        anchors.rightMargin:    _expandMargin
-        anchors.topMargin:      -_expandMargin
-        anchors.bottomMargin:   _expandMargin
-        anchors.fill:           parent
-        onClicked:              parent.clicked()
-
-        property real _expandMargin: ScreenTools.isMobile ? ScreenTools.defaultFontPixelWidth : 0
+    QGCMouseArea {
+        fillItem:   parent
+        onClicked:  parent.clicked()
     }
 }

src/QmlControls/QGCMouseArea.qml

@@ -1,8 +1,27 @@
 import QtQuick 2.3
 
-import QGroundControl 1.0
+import QGroundControl               1.0
+import QGroundControl.ScreenTools   1.0
 
+/// Works just like a regular MouseArea except:
+///     1) It supports the ability to show touch extents based on QGroundControl.showTouchAreas
+///     2) You can specify fillItem and it will automatically fill to the size and adjust touch areas on mobile
 MouseArea {
+    anchors.leftMargin:     fillItem ? -_touchMarginHorizontal : 0
+    anchors.rightMargin:    fillItem ? -_touchMarginHorizontal : 0
+    anchors.topMargin:      fillItem ? -_touchMarginVertical : 0
+    anchors.bottomMargin:   fillItem ? -_touchMarginVertical : 0
+    anchors.fill:           fillItem ? fillItem : undefined
+
+    property var fillItem
+
+    property real _itemWidth:               fillItem ? fillItem.width : width
+    property real _itemHeight:              fillItem ? fillItem.height : height
+    property real _touchWidth:              Math.max(_itemWidth, ScreenTools.minTouchPixels)
+    property real _touchHeight:             Math.max(_itemHeight, ScreenTools.minTouchPixels)
+    property real _touchMarginHorizontal:   ScreenTools.isMobile ? (_touchWidth - _itemWidth) / 2 : 0
+    property real _touchMarginVertical:     ScreenTools.isMobile ? (_touchHeight - _itemHeight) / 2 : 0
+
     Rectangle {
         anchors.fill:   parent
         border.color:   "red"