import QtQuick 2.0
import Ubuntu.Components 1.1

/*!
    \brief MainView with a Label and Button elements.
*/

MainView {
    // objectName for functional testing purposes (autopilot-qt5)
    objectName: "mainView"

    // Note! applicationName needs to match the "name" field of the click manifest
    applicationName: "canvas.dpniel"

    /*
     This property enables the application to change orientation
     when the device is rotated. The default is false.
    */
    //automaticOrientation: true

    // Removes the old toolbar and enables new features of the new header.
    useDeprecatedToolbar: false

    width: units.gu(100)
    height: units.gu(75)

    Page {
        id: pg
        title: i18n.tr("app")

        property int currentX
        property int currentY
        property int pointSize: 10

        Canvas {
            id: c
            anchors.fill: parent

            onPaint: {
                var context = getContext('2d')
                context.fillStyle = UbuntuColors.orange
                // The offset isn't needed here if you want the exact center point of the
                // mouse position. But to make it look like it's on the tip
                // just half the pointSize and subtract from the currentX/Y
                var offset = pg.pointSize / 2
                context.fillRect(pg.currentX - offset, pg.currentY - offset, 10, 10)
            }

            MouseArea{
                anchors.fill: parent
                onPressed: {
                    pg.currentX = mouseX
                    pg.currentY = mouseY
                    c.requestPaint()
                }
                onMouseXChanged: {
                    pg.currentX = mouseX
                    pg.currentY = mouseY
                    c.requestPaint()
                }
                onMouseYChanged: {
                    pg.currentX = mouseX
                    pg.currentY = mouseY
                    c.requestPaint()
                }
            }
        }
    }
}