import QtQuick 2.7
import QtQuick.Controls 2.0
import QtQuick.Layouts 1.3

ApplicationWindow {
    visible: true
    width: 640
    height: 480

    Rectangle
    {
        anchors.fill: parent
        Rectangle
        {
            anchors.bottom: parent.bottom
            anchors.left: parent.left
            width: 120
            height: 200
            Rectangle
            {
                id:contollerForce
                width: 60
                height: 160
                color: "lightgray"
                opacity: 0.2
                border.color: "black"
                border.width: 3
                radius: width*0.5
                anchors.centerIn: parent

                MouseArea
                {
                    anchors.fill: parent
                    drag.target: contollerForcePoint
                    drag.axis: Drag.YAxis
                    drag.minimumY: parent.y-contollerForcePoint.height/4-3.5
                    drag.maximumY: parent.height-contollerForcePoint.height-4
                    onReleased: contollerForcePoint.y = 55
                }

                Rectangle
                {
                    id:contollerForcePoint
                    x: parent.width/2-width/2
                    y: parent.height/2-height/2
                    width: 50
                    height: 50
                    color: "gray"
                    opacity: 0.5
                    border.color: "black"
                    border.width: 1
                    radius: width*0.5
                }
            }
        }


        Rectangle
        {
            anchors.bottom: parent.bottom
            anchors.right: parent.right
            width: 200
            height: 200
            Rectangle
            {
                id:contollerRotate
                width: 160
                height: 60
                color: "lightgray"
                opacity: 0.2
                border.color: "black"
                border.width: 3
                radius: width*0.5
                anchors.centerIn: parent

                MouseArea
                {
                    anchors.fill: parent
                    drag.target: contollerRotatePoint
                    drag.axis: Drag.XAxis
                    drag.minimumX: parent.x-contollerRotatePoint.width/4-3.5
                    drag.maximumX: parent.width-contollerRotatePoint.width-4
                    onReleased: contollerRotatePoint.x = 55
                }

                Rectangle
                {
                    id: contollerRotatePoint
                    x: parent.width/2-width/2
                    y: parent.height/2-height/2
                    width: 50
                    height: 50
                    color: "gray"
                    opacity: 0.5
                    border.color: "black"
                    border.width: 1
                    radius: width*0.5
                }
            }
        }

    }
}