PolygonEditor.qml 14.8 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
 *
 * QGroundControl is licensed according to the terms in the file
 * COPYING.md in the root of the source code directory.
 *
 ****************************************************************************/

10 11
import QtQuick      2.3
import QtLocation   5.3
12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30

import QGroundControl               1.0
import QGroundControl.ScreenTools   1.0
import QGroundControl.Controls      1.0


/// Polygon drawing item. Add to your control and call methods to get support for polygon drawing and adjustment.
Item {
    id: _root

    // These properties must be provided by the consumer
    property var    map            ///< Map control
    property var    callbackObject ///< Callback item

    // These properties can be queried by the consumer
    property bool   drawingPolygon:     false
    property bool   adjustingPolygon:   false
    property bool   polygonReady:       _currentPolygon ? _currentPolygon.path.length > 2 : false   ///< true: enough points have been captured to create a closed polygon

31 32 33 34 35 36 37 38 39
    property var    _helpLabel                                  ///< Dynamically added help label component
    property var    _newPolygon                                 ///< Dynamically added polygon which represents all polygon points including the one currently being drawn
    property var    _currentPolygon                             ///< Dynamically added polygon which represents the currently completed polygon
    property var    _nextPointLine                              ///< Dynamically added line which goes from last polygon point to the new one being drawn
    property var    _mobileSegment                              ///< Dynamically added line between first and second polygon point for mobile
    property var    _mobilePoint                                ///< Dynamically added point showing first polygon point on mobile
    property var    _mouseArea                                  ///< Dynamically added MouseArea which handles all clicking and mouse movement
    property var    _vertexDragList:    [ ]                     ///< Dynamically added vertex drag points
    property bool   _mobile:            ScreenTools.isMobile
40 41 42 43 44 45 46 47

    /// Begin capturing a new polygon
    ///     polygonCaptureStarted will be signalled through callbackObject
    function startCapturePolygon() {
        _helpLabel =        helpLabelComponent.createObject     (map)
        _newPolygon =       newPolygonComponent.createObject    (map)
        _currentPolygon =   currentPolygonComponent.createObject(map)
        _nextPointLine =    nextPointComponent.createObject     (map)
48 49
        _mobileSegment =    mobileSegmentComponent.createObject (map)
        _mobilePoint =      mobilePointComponent.createObject   (map)
50 51 52 53 54
        _mouseArea =        mouseAreaComponent.createObject     (map)

        map.addMapItem(_newPolygon)
        map.addMapItem(_currentPolygon)
        map.addMapItem(_nextPointLine)
55 56
        map.addMapItem(_mobileSegment)
        map.addMapItem(_mobilePoint)
57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78

        drawingPolygon = true
        callbackObject.polygonCaptureStarted()
    }

    /// Finish capturing the polygon
    ///     polygonCaptureFinished will be signalled through callbackObject
    /// @return true: polygon completed, false: not enough points to complete polygon
    function finishCapturePolygon() {
        if (!polygonReady) {
            return false
        }
        var polygonPath = _currentPolygon.path
        _cancelCapturePolygon()
        callbackObject.polygonCaptureFinished(polygonPath)
        return true
    }

    function startAdjustPolygon(vertexCoordinates) {
        adjustingPolygon = true
        for (var i=0; i<vertexCoordinates.length; i++) {
            var dragItem = Qt.createQmlObject(
79 80
                        "import QtQuick                     2.3; " +
                        "import QtLocation                  5.3; " +
81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 161 162 163 164 165 166 167 168 169 170 171
                        "import QGroundControl.ScreenTools  1.0; " +
                        "" +
                        "Rectangle {" +
                        "   id:     vertexDrag; " +
                        "   width:  _sideLength + _expandMargin; " +
                        "   height: _sideLength + _expandMargin; " +
                        "   color:  'red'; " +
                        "" +
                        "   property var coordinate; " +
                        "   property int index; " +
                        "" +
                        "   readonly property real _sideLength:     ScreenTools.defaultFontPixelWidth * 2; " +
                        "   readonly property real _halfSideLength: _sideLength / 2; " +
                        "" +
                        "   property real _expandMargin: ScreenTools.isMobile ? ScreenTools.defaultFontPixelWidth : 0;" +
                        "" +
                        "   Drag.active:    dragMouseArea.drag.active; " +
                        "" +
                        "   onXChanged: updateCoordinate(); " +
                        "   onYChanged: updateCoordinate(); " +
                        "" +
                        "   function updateCoordinate() { " +
                        "       vertexDrag.coordinate = map.toCoordinate(Qt.point(vertexDrag.x + _expandMargin + _halfSideLength, vertexDrag.y + _expandMargin + _halfSideLength), false); " +
                        "       callbackObject.polygonAdjustVertex(vertexDrag.index, vertexDrag.coordinate); " +
                        "   } " +
                        "" +
                        "   function updatePosition() { " +
                        "       var vertexPoint = map.fromCoordinate(coordinate, false); " +
                        "       vertexDrag.x = vertexPoint.x - _expandMargin - _halfSideLength; " +
                        "       vertexDrag.y = vertexPoint.y - _expandMargin - _halfSideLength; " +
                        "   } " +
                        "" +
                        "   Connections { " +
                        "       target:             map; " +
                        "       onCenterChanged:    updatePosition(); " +
                        "       onZoomLevelChanged: updatePosition(); " +
                        "   } " +
                        "" +
                        "   MouseArea { " +
                        "       id:             dragMouseArea; " +
                        "       anchors.fill:   parent; " +
                        "       drag.target:    parent; " +
                        "       drag.minimumX:  0; " +
                        "       drag.minimumY:  0; " +
                        "       drag.maximumX:  map.width - parent.width; " +
                        "       drag.maximumY:  map.height - parent.height; " +
                        "   } " +
                        "} ",
                        map)
            dragItem.z = QGroundControl.zOrderMapItems + 1
            dragItem.coordinate = vertexCoordinates[i]
            dragItem.index = i
            dragItem.updatePosition()
            _vertexDragList.push(dragItem)
            callbackObject.polygonAdjustStarted()
        }
    }

    function finishAdjustPolygon() {
        _cancelAdjustPolygon()
        callbackObject.polygonAdjustFinished()
    }

    /// Cancels an in progress draw or adjust
    function cancelPolygonEdit() {
        _cancelAdjustPolygon()
        _cancelCapturePolygon()
    }

    function _cancelAdjustPolygon() {
        adjustingPolygon = false
        for (var i=0; i<_vertexDragList.length; i++) {
            _vertexDragList[i].destroy()
        }
        _vertexDragList = []
    }

    function _cancelCapturePolygon() {
        _helpLabel.destroy()
        _newPolygon.destroy()
        _currentPolygon.destroy()
        _nextPointLine.destroy()
        _mouseArea.destroy()
        drawingPolygon = false
    }

    Component {
        id: helpLabelComponent

        QGCMapLabel {
            id:                     polygonHelp
172
            anchors.topMargin:      parent.height - mainWindow.height
173 174 175 176 177 178 179 180 181 182 183 184 185 186 187 188 189 190 191 192 193 194 195 196 197 198 199 200 201 202 203 204 205 206 207 208 209 210 211 212 213 214 215 216 217 218 219 220 221 222 223 224 225 226 227 228 229 230 231 232 233
            anchors.top:            parent.top
            anchors.left:           parent.left
            anchors.right:          parent.right
            horizontalAlignment:    Text.AlignHCenter
            map:                    _root.map
            text:                   qsTr("Click to add point %1").arg(ScreenTools.isMobile || !polygonReady ? "" : qsTr("- Right Click to end polygon"))

            Connections {
                target: _root

                onDrawingPolygonChanged: {
                    if (drawingPolygon) {
                        polygonHelp.text = qsTr("Click to add point")
                    }
                    polygonHelp.visible = drawingPolygon
                }

                onPolygonReadyChanged: {
                    if (polygonReady && !ScreenTools.isMobile) {
                        polygonHelp.text = qsTr("Click to add point - Right Click to end polygon")
                    }
                }

                onAdjustingPolygonChanged: {
                    if (adjustingPolygon) {
                        polygonHelp.text = qsTr("Adjust polygon by dragging corners")
                    }
                    polygonHelp.visible = adjustingPolygon
                }
            }
        }
    }

    Component {
        id: mouseAreaComponent

        MouseArea {
            anchors.fill:       map
            acceptedButtons:    Qt.LeftButton | Qt.RightButton
            hoverEnabled:       true
            z:                  QGroundControl.zOrderMapItems + 1

            property bool   justClicked: false

            onClicked: {
                if (mouse.button == Qt.LeftButton) {
                    justClicked = true
                    if (_newPolygon.path.length > 2) {
                        // Make sure the new line doesn't intersect the existing polygon
                        var lastSegment = _newPolygon.path.length - 2
                        var newLineA = map.fromCoordinate(_newPolygon.path[lastSegment], false /* clipToViewPort */)
                        var newLineB = map.fromCoordinate(_newPolygon.path[lastSegment+1], false /* clipToViewPort */)
                        for (var i=0; i<lastSegment; i++) {
                            var oldLineA = map.fromCoordinate(_newPolygon.path[i], false /* clipToViewPort */)
                            var oldLineB = map.fromCoordinate(_newPolygon.path[i+1], false /* clipToViewPort */)
                            if (QGroundControl.linesIntersect(newLineA, newLineB, oldLineA, oldLineB)) {
                                return;
                            }
                        }
                    }

DonLakeFlyer's avatar
DonLakeFlyer committed
234
                    var clickCoordinate = map.toCoordinate(Qt.point(mouse.x, mouse.y), false /* clipToViewPort */)
235
                    var polygonPath = _newPolygon.path
236
                    if (polygonPath.length === 0) {
237 238 239 240 241 242 243 244 245 246 247 248 249 250 251 252 253
                        // Add first coordinate
                        polygonPath.push(clickCoordinate)
                    } else {
                        // Add subsequent coordinate
                        if (ScreenTools.isMobile) {
                            // Since mobile has no mouse, the onPositionChangedHandler will not fire. We have to add the coordinate
                            // here instead.
                            justClicked = false
                            polygonPath.push(clickCoordinate)
                        } else {
                            // The onPositionChanged handler for mouse movement will have already added the coordinate to the array.
                            // Just update it to the final position
                            polygonPath[_newPolygon.path.length - 1] = clickCoordinate
                        }
                    }
                    _currentPolygon.path = polygonPath
                    _newPolygon.path = polygonPath
254

255
                    if (_mobile && _currentPolygon.path.length === 1) {
256 257
                        _mobilePoint.coordinate = _currentPolygon.path[0]
                        _mobilePoint.visible = true
258
                    } else if (_mobile && _currentPolygon.path.length === 2) {
259 260 261 262 263 264 265 266
                        // Show initial line segment on mobile
                        _mobileSegment.path = [ _currentPolygon.path[0], _currentPolygon.path[1] ]
                        _mobileSegment.visible = true
                        _mobilePoint.visible = false
                    } else {
                        _mobileSegment.visible = false
                        _mobilePoint.visible = false
                    }
267 268 269 270 271 272 273 274 275 276 277
                } else if (polygonReady) {
                    finishCapturePolygon()
                }
            }

            onPositionChanged: {
                if (ScreenTools.isMobile) {
                    // We don't track mouse drag on mobile
                    return
                }
                if (_newPolygon.path.length) {
DonLakeFlyer's avatar
DonLakeFlyer committed
278
                    var dragCoordinate = map.toCoordinate(Qt.point(mouse.x, mouse.y), false /* clipToViewPort */)
279 280 281 282 283 284 285 286 287 288 289 290 291 292 293 294 295 296 297 298 299 300 301 302 303 304 305 306 307 308 309 310 311 312 313 314 315 316 317
                    var polygonPath = _newPolygon.path
                    if (justClicked){
                        // Add new drag coordinate
                        polygonPath.push(dragCoordinate)
                        justClicked = false
                    }

                    // Update drag line
                    _nextPointLine.path = [ _newPolygon.path[_newPolygon.path.length - 2], dragCoordinate ]

                    polygonPath[_newPolygon.path.length - 1] = dragCoordinate
                    _newPolygon.path = polygonPath
                }
            }
        }
    }

    /// Polygon being drawn, including new point
    Component {
        id: newPolygonComponent

        MapPolygon {
            color:      "blue"
            opacity:    0.5
            visible:    path.length > 2
        }
    }

    /// Current complete polygon
    Component {
        id: currentPolygonComponent

        MapPolygon {
            color:      'green'
            opacity:    0.5
            visible:    polygonReady
        }
    }

318 319 320 321 322 323 324 325 326 327 328 329 330 331 332 333 334 335 336 337 338 339 340 341 342 343 344 345 346
    /// First line segment to show on mobile
    Component {
        id: mobileSegmentComponent

        MapPolyline {
            line.color: "green"
            line.width: 3
            visible:    false
        }
    }

    /// First line segment to show on mobile
    Component {
        id: mobilePointComponent

        MapQuickItem {
            anchorPoint.x:  rect.width / 2
            anchorPoint.y:  rect.height / 2
            visible:        false

            sourceItem: Rectangle {
                id:     rect
                width:  ScreenTools.defaultFontPixelHeight
                height: width
                color:  "green"
            }
        }
    }

347 348 349 350 351 352 353 354 355 356
    /// Next line for polygon
    Component {
        id: nextPointComponent

        MapPolyline {
            line.color: "green"
            line.width: 3
        }
    }
}