AreaDataEditor.qml

import QtQuick 2.0

import Qt.labs.settings 1.0
import QtQuick.Layouts 1.11
import QtQuick.Controls 1.4
import QGroundControl.Controls 1.0
import QGroundControl.FactControls 1.0
import QGroundControl.ScreenTools 1.0

import QGroundControl.Palette 1.0

Rectangle {
    id: _root

    width: mainColumn.width
    height: mainColumn.height
    color: qgcPal.windowShadeDark

    property bool editing: missionItem.editing
    property var missionItem: undefined
    property int availableWidth: 300
    property bool areasCorrect: false
    property string errorString: ""

    property var _areaData: missionItem.areaData
    property real _margin: ScreenTools.defaultFontPixelWidth / 2

    Component.onCompleted: {
        console.assert(missionItem !== undefined,
                       "please set the missionItem property")
        if (editing) {
            areasCorrectTimer.start()
        }
    }

    onEditingChanged: {
        if (editing){
            areasCorrectTimer.start()
        } else {
            areasCorrectTimer.stop()
        }
    }

    ColumnLayout {
        id: mainColumn
        width: availableWidth
        spacing: _margin

        QGCButton {
            id: editButton
            text: _root.editing ? qsTr("Done") : qsTr("Edit")
            enabled: (_root.editing && _root.areasCorrect) || !_root.editing
            onClicked: {
                if (_root.editing) {
                    _root.missionItem.stopEditing()
                } else {
                    _root.missionItem.startEditing()
                }
            }
            Layout.fillWidth: true
        }

        GridLayout {

            width: availableWidth
            columnSpacing: _margin
            Layout.fillWidth: true
            rowSpacing: _margin
            columns: 2
            enabled: _root.editing

            QGCLabel {
                text: _root.errorString
                wrapMode: Text.WordWrap
                horizontalAlignment: Text.AlignLeft
                color: "orange"
                Layout.columnSpan: parent.columns
                Layout.fillWidth: true
                visible: !_root.areasCorrect
            }

            ExclusiveGroup {
                id: areaGroup
            }

            Repeater {
                id: areaSelector

                property int selectedIndex: -1

                model: _missionItem.areaData.areaList
                delegate: QGCRadioButton {
                    text: object.objectName
                    Layout.fillWidth: true
                    Layout.columnSpan: 2

                    onCheckedChanged: {
                        if (checked) {
                            areaSelector.selectedIndex = index
                        }
                    }

                    Component.onCompleted: {
                        if (index === 0) {
                            checked = true
                        }
                        object.interactive = Qt.binding(function () {
                            return checked && _root.editing && _missionItem.isCurrentItem
                        })
                    }
                }
            } // area Repeater

            ColumnLayout {
                id: editorParent
                Layout.fillWidth: true
                Layout.maximumWidth: parent.width
                Layout.columnSpan: 2
            }

            Repeater {
                id: areaEditorRepeater

                Layout.maximumWidth: parent.width

                model: _missionItem.areaData.areaList
                delegate: Item {
                    id: editor
                    visible: index == areaSelector.selectedIndex

                    property var _visualItem: undefined
                    property var geoArea: object

                    Component.onCompleted: {
                        if (geoArea.editorQML && !_visualItem) {
                            var component = Qt.createComponent(
                                        geoArea.editorQML)
                            if (component.status === Component.Error) {
                                console.log("Error loading Qml: ",
                                            geoArea.editorQML,
                                            component.errorString())
                            } else {
                                _visualItem = component.createObject(
                                            editorParent, {
                                                "geoArea": editor.geoArea,
                                                "visible": Qt.binding(
                                                               function () {
                                                                   return editor.visible
                                                               }),
                                                "availableWidth": Qt.binding(
                                                                      function () {
                                                                          return editorParent.width
                                                                      })
                                            })
                            }
                        }
                    }

                    Component.onDestruction: {
                        if (_visualItem) {
                            _visualItem.destroy()
                        }
                    }
                } // editor
            } // areaEditorRepeater

            SectionHeader {
                id: commandsHeader
                Layout.fillWidth: true
                Layout.columnSpan: parent.columns
                text: qsTr("Commands")
            }

            GridLayout {
                columnSpacing: _margin
                rowSpacing: _margin
                columns: 2
                Layout.columnSpan: 2
                Layout.fillWidth: true
                visible: commandsHeader.checked

                QGCButton {
                    text: "Intersection"
                    Layout.fillWidth: true
                    Layout.columnSpan: parent.columns
                    onClicked: {
                        _areaData.intersection()
                    }
                }

                QGCButton {
                    text: "Reset"
                    Layout.fillWidth: true
                    Layout.columnSpan: parent.columns
                    onClicked: {
                        missionItem.reset()
                    }
                }
            }

            SectionHeader {
                id: hintHeader
                Layout.fillWidth: true
                Layout.columnSpan: parent.columns
                text: qsTr("Hints")
            }

            GridLayout {
                columnSpacing: _margin
                rowSpacing: _margin
                columns: 2
                Layout.columnSpan: 2
                Layout.fillWidth: true
                visible: hintHeader.checked

                QGCLabel {
                    id: hintLabel
                    wrapMode: Text.WordWrap
                    horizontalAlignment: Text.AlignLeft
                    text: qsTr("Use the Intersection button to clip the Measurement Area(s).
Use the Reset button to restore the areas to the state before entering this tab.
Use the Abort button to reset the areas and leave the tab.")
                    Layout.fillWidth: true
                    Layout.columnSpan: parent.columns
                }
            }

            Timer {
                id: areasCorrectTimer
                running: false
                interval: 100
                repeat: true

                onTriggered: {
                    _root.areasCorrect = _missionItem.areaData.isCorrect(
                                false /*show gui message*/
                                )
                    if (!_root.areasCorrect) {
                        _root.errorString = _missionItem.areaData.errorString
                    } else {
                        _root.errorString = ""
                    }
                }
            }

            Settings {
                property alias showHint: hintHeader.checked
            }
        } // GridLayout
    } // GridLayout
} // Rectangle