feat(FlightMap): add mission item grouping and improve map usability

src/FlightMap/CMakeLists.txt

@@ -15,6 +15,7 @@ qt_add_qml_module(FlightMapModule
         MapItems/MapLineArrow.qml
         MapItems/MissionItemIndicator.qml
         MapItems/MissionItemIndicatorDrag.qml
+        MapItems/MissionItemIndicatorGroup.qml
         MapItems/MissionLineView.qml
         MapItems/PlanMapItems.qml
         MapItems/ProximityRadarMapView.qml

src/FlightMap/MapItems/MapLineArrow.qml

@@ -8,14 +8,18 @@ import QGroundControl.Controls
 import QGroundControl.FlightMap
 
 MapQuickItem {
+    id: root
+
+    required property FlightMap mapControl
+
     property color  arrowColor:     "white"
     property var    fromCoord:      QtPositioning.coordinate()
     property var    toCoord:        QtPositioning.coordinate()
     property int    arrowPosition:  1 ///< 1: first quarter, 2: halfway, 3: last quarter
 
-    property var    _map:           parent
     property real   _arrowSize:     15
     property real   _arrowHeading:  0
+    property real   _screenLegLength: 0
 
     function _updateArrowDetails() {
         if (fromCoord && fromCoord.isValid && toCoord && toCoord.isValid) {
@@ -26,16 +30,38 @@ MapQuickItem {
             coordinate = QtPositioning.coordinate()
             _arrowHeading = 0
         }
+        _updateScreenLegLength()
+    }
+
+    function _updateScreenLegLength() {
+        if (mapControl && fromCoord && fromCoord.isValid && toCoord && toCoord.isValid) {
+            const fromPoint = mapControl.fromCoordinate(fromCoord, false)
+            const toPoint = mapControl.fromCoordinate(toCoord, false)
+            _screenLegLength = Math.hypot(toPoint.x - fromPoint.x, toPoint.y - fromPoint.y)
+        } else {
+            _screenLegLength = 0
+        }
     }
 
     onFromCoordChanged: _updateArrowDetails()
     onToCoordChanged:   _updateArrowDetails()
+    onMapControlChanged: _updateScreenLegLength()
+
+    Component.onCompleted: _updateArrowDetails()
+
+    Connections {
+        target: root.mapControl
+
+        function onCenterChanged() { root._updateScreenLegLength() }
+        function onZoomLevelChanged() { root._updateScreenLegLength() }
+    }
 
     sourceItem: Canvas {
         x:      -_arrowSize
         y:      0
         width:  _arrowSize * 2
         height: _arrowSize
+        visible: root._screenLegLength >= width
 
         onPaint: {
             var ctx = getContext("2d");

src/FlightMap/MapItems/MissionItemIndicator.qml

@@ -11,25 +11,51 @@ MapQuickItem {
 
     property var missionItem
     property int sequenceNumber
+    property MissionItemIndicatorGroup indicatorGroup
+    property bool indicatorVisible: true
+    property bool interactive: true
+
+    readonly property bool _isCurrentItem: missionItem ? missionItem.isCurrentItem || missionItem.hasCurrentChildItem : false
+    readonly property bool _usesAbbreviation: missionItem && missionItem.abbreviation.charAt(0) > 'A' && missionItem.abbreviation.charAt(0) < 'z'
+    readonly property var _group: indicatorGroup ? indicatorGroup.groupForItem(missionItem) : null
+    readonly property bool _isGrouped: _group && _group.items.length > 1
+    readonly property bool _isGroupRepresentative: !_group || _group.representative === missionItem
 
     signal clicked
 
+    function activate() {
+        if (_isGrouped) {
+            const topLeft = _label.mapToItem(globals.parent, Qt.point(0, 0))
+            const bottomRight = _label.mapToItem(globals.parent, Qt.point(_label.width, _label.height))
+            const clickRect = Qt.rect(topLeft.x, topLeft.y,
+                                      bottomRight.x - topLeft.x, bottomRight.y - topLeft.y)
+            indicatorGroup.showGroup(missionItem, clickRect)
+        } else {
+            clicked()
+        }
+    }
+
     anchorPoint.x:  sourceItem.anchorPointX
     anchorPoint.y:  sourceItem.anchorPointY
+    autoFadeIn:     false
+    z:              QGroundControl.zOrderMapItems + (_isCurrentItem ? 1 : 0)
+    visible:        indicatorVisible && _isGroupRepresentative
 
     sourceItem:
         MissionItemIndexLabel {
             id:                 _label
-            checked:            _isCurrentItem
-            label:              missionItem.abbreviation
-            index:              missionItem.abbreviation.charAt(0) > 'A' && missionItem.abbreviation.charAt(0) < 'z' ? -1 : missionItem.sequenceNumber
+            checked:            _item._isCurrentItem
+            label:              _item.missionItem.abbreviation
+            index:              _item._usesAbbreviation ? -1 : _item.missionItem.sequenceNumber
+            indicatorSubText:   _item._isGrouped ? "…" : ""
+            small:              !_item._isGrouped && !_item._isCurrentItem
+            medium:             _item._isGrouped && !_item._isCurrentItem
             gimbalYaw:          missionItem.missionGimbalYaw
             vehicleYaw:         missionItem.missionVehicleYaw
-            showGimbalYaw:      !isNaN(missionItem.missionGimbalYaw)
+            showGimbalYaw:      !_item._isGrouped && !isNaN(_item.missionItem.missionGimbalYaw)
             highlightSelected:  true
-            onClicked:          _item.clicked()
+            enabled:            _item.interactive
+            onClicked:          _item.activate()
             opacity:            _item.opacity
-
-            property bool _isCurrentItem:   missionItem ? missionItem.isCurrentItem || missionItem.hasCurrentChildItem : false
         }
 }