QGCMapCircleVisuals.qml 8.04 KB
Newer Older
1 2
/****************************************************************************
 *
Gus Grubba's avatar
Gus Grubba committed
3
 * (c) 2009-2020 QGROUNDCONTROL PROJECT <http://www.qgroundcontrol.org>
4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24
 *
 * QGroundControl is licensed according to the terms in the file
 * COPYING.md in the root of the source code directory.
 *
 ****************************************************************************/

import QtQuick          2.3
import QtQuick.Controls 1.2
import QtLocation       5.3
import QtPositioning    5.3

import QGroundControl               1.0
import QGroundControl.ScreenTools   1.0
import QGroundControl.Palette       1.0
import QGroundControl.Controls      1.0
import QGroundControl.FlightMap     1.0

/// QGCMapCircle map visuals
Item {
    id: _root

Gus Grubba's avatar
Gus Grubba committed
25 26 27
    property var    mapControl                                                  ///< Map control to place item in
    property var    mapCircle                                                   ///< QGCMapCircle object
    property bool   interactive:        mapCircle ? mapCircle.interactive : 0   /// true: user can manipulate polygon
28 29
    property color  interiorColor:      "transparent"
    property real   interiorOpacity:    1
30 31
    property int    borderWidth:        2
    property color  borderColor:        "orange"
32

33 34 35 36
    property var    _circleComponent
    property var    _topRotationIndicatorComponent
    property var    _bottomRotationIndicatorComponent
    property var    _dragHandlesComponent
Gus Grubba's avatar
Gus Grubba committed
37
    property real   _radius:            mapCircle ? mapCircle.radius.rawValue : 0
38 39

    function addVisuals() {
40 41 42 43
        if (!_circleComponent) {
            _circleComponent = circleComponent.createObject(mapControl)
            mapControl.addMapItem(_circleComponent)
        }
44 45 46 47 48 49
        if (!_topRotationIndicatorComponent) {
            _topRotationIndicatorComponent = rotationIndicatorComponent.createObject(mapControl, { "topIndicator": true })
            _bottomRotationIndicatorComponent = rotationIndicatorComponent.createObject(mapControl, { "topIndicator": false })
            mapControl.addMapItem(_topRotationIndicatorComponent)
            mapControl.addMapItem(_bottomRotationIndicatorComponent)
        }
50 51 52
    }

    function removeVisuals() {
53 54 55 56
        if (_circleComponent) {
            _circleComponent.destroy()
            _circleComponent = undefined
        }
57 58 59 60 61 62
        if (_topRotationIndicatorComponent) {
            _topRotationIndicatorComponent.destroy()
            _bottomRotationIndicatorComponent.destroy()
            _topRotationIndicatorComponent = undefined
            _bottomRotationIndicatorComponent = undefined
        }
63 64
    }

65 66 67
    function addDragHandles() {
        if (!_dragHandlesComponent) {
            _dragHandlesComponent = dragHandlesComponent.createObject(mapControl)
68 69 70
        }
    }

71 72 73 74
    function removeDragHandles() {
        if (_dragHandlesComponent) {
            _dragHandlesComponent.destroy()
            _dragHandlesComponent = undefined
75 76 77
        }
    }

78 79 80 81 82 83 84 85
    function updateInternalComponents() {
        if (visible) {
            addVisuals()
            if (interactive) {
                addDragHandles()
            } else {
                removeDragHandles()
            }
86
        } else {
87 88
            removeVisuals()
            removeDragHandles()
89 90 91
        }
    }

92 93 94
    Component.onCompleted: {
        updateInternalComponents()
    }
95 96 97

    Component.onDestruction: {
        removeVisuals()
98
        removeDragHandles()
99 100
    }

101 102 103 104 105 106 107
    onInteractiveChanged:   updateInternalComponents()
    onVisibleChanged:       updateInternalComponents()

    Component {
        id: rotationIndicatorComponent

        MapQuickItem {
Don Gagne's avatar
Don Gagne committed
108
            visible: mapCircle.showRotation
109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128

            property bool topIndicator: true

            property real _rotationRadius: _radius

            function updateCoordinate() {
                coordinate = mapCircle.center.atDistanceAndAzimuth(_radius, topIndicator ? 0 : 180)
            }

            Component.onCompleted: updateCoordinate()

            on_RotationRadiusChanged: updateCoordinate()

            Connections {
                target:             mapCircle
                onCenterChanged:    updateCoordinate()
            }

            sourceItem: QGCColoredImage {
                anchors.centerIn:   parent
Don Gagne's avatar
Don Gagne committed
129
                width:              ScreenTools.defaultFontPixelHeight * 0.66
130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148
                height:             ScreenTools.defaultFontPixelHeight
                source:             "/qmlimages/arrow-down.png"
                color:              borderColor

                transform: Rotation {
                    origin.x:   width / 2
                    origin.y:   height / 2
                    angle:      (mapCircle.clockwiseRotation ? 1 : -1) * (topIndicator ? -90 : 90)
                }

                QGCMouseArea {
                    fillItem:   parent
                    onClicked:  mapCircle.clockwiseRotation = !mapCircle.clockwiseRotation
                    visible:    mapCircle.interactive
                }
            }
        }
    }

149 150 151 152 153 154 155 156 157
    Component {
        id: circleComponent

        MapCircle {
            color:          interiorColor
            opacity:        interiorOpacity
            border.color:   borderColor
            border.width:   borderWidth
            center:         mapCircle.center
158
            radius:         _radius
159 160 161 162 163 164 165 166 167 168 169 170 171 172 173 174 175 176 177 178 179 180 181 182 183 184 185
        }
    }

    Component {
        id: dragHandleComponent

        MapQuickItem {
            id:             mapQuickItem
            anchorPoint.x:  dragHandle.width / 2
            anchorPoint.y:  dragHandle.height / 2
            z:              QGroundControl.zOrderMapItems + 2

            sourceItem: Rectangle {
                id:         dragHandle
                width:      ScreenTools.defaultFontPixelHeight * 1.5
                height:     width
                radius:     width / 2
                color:      "white"
                opacity:    .90
            }
        }
    }

    Component {
        id: centerDragAreaComponent

        MissionItemIndicatorDrag {
186 187
            mapControl: _root.mapControl

188 189 190 191 192 193 194 195
            onItemCoordinateChanged: mapCircle.center = itemCoordinate
        }
    }

    Component {
        id: radiusDragAreaComponent

        MissionItemIndicatorDrag {
196 197
            mapControl: _root.mapControl

198
            onItemCoordinateChanged: mapCircle.radius.rawValue = mapCircle.center.distanceTo(itemCoordinate)
199 200 201 202
        }
    }

    Component {
203
        id: dragHandlesComponent
204 205

        Item {
206 207 208 209 210 211
            property var centerDragHandle
            property var centerDragArea
            property var radiusDragHandle
            property var radiusDragArea
            property var radiusDragCoord:       QtPositioning.coordinate()
            property var circleCenterCoord:     mapCircle.center
212
            property real circleRadius:         _radius
213 214 215 216 217 218 219

            function calcRadiusDragCoord() {
                radiusDragCoord = mapCircle.center.atDistanceAndAzimuth(circleRadius, 90)
            }

            onCircleCenterCoordChanged: calcRadiusDragCoord()
            onCircleRadiusChanged:      calcRadiusDragCoord()
220 221

            Component.onCompleted: {
222 223 224 225 226 227 228 229 230
                calcRadiusDragCoord()
                radiusDragHandle = dragHandleComponent.createObject(mapControl)
                radiusDragHandle.coordinate = Qt.binding(function() { return radiusDragCoord })
                mapControl.addMapItem(radiusDragHandle)
                radiusDragArea = radiusDragAreaComponent.createObject(mapControl, { "itemIndicator": radiusDragHandle, "itemCoordinate": radiusDragCoord })
                centerDragHandle = dragHandleComponent.createObject(mapControl)
                centerDragHandle.coordinate = Qt.binding(function() { return circleCenterCoord })
                mapControl.addMapItem(centerDragHandle)
                centerDragArea = centerDragAreaComponent.createObject(mapControl, { "itemIndicator": centerDragHandle, "itemCoordinate": circleCenterCoord })
231 232 233
            }

            Component.onDestruction: {
234 235 236 237
                centerDragHandle.destroy()
                centerDragArea.destroy()
                radiusDragHandle.destroy()
                radiusDragArea.destroy()
238 239 240 241 242
            }
        }
    }
}