import QtQuick 2.0

Item {
    width: parent.width
    height: parent.width
        Canvas {
            anchors.centerIn: parent
            width: parent.width - 40
            height: parent.height - 40
            id: canvas

            property real fieldHeight: 0
            property real fieldWidth: 0

            states: State {
                name: "clicked"
                PropertyChanges { fieldWidth: width/2; fieldHeight: height/2; target: canvas }
            }

            transitions: Transition {
                    ParallelAnimation {
                        NumberAnimation { target: canvas; property: "fieldWidth"; to:  width/2; duration: 500 }
                        NumberAnimation { target: canvas; property: "fieldHeight"; to: height/2; duration: 500 }
                    }
            }


            MouseArea{
                id: mouseArea
                anchors.fill: parent
                onClicked: canvas.state = "clicked"
            }

            onFieldHeightChanged: requestPaint();

            onPaint: {
                var ctx = getContext("2d");
                ctx.strokeStyle = Qt.rgba(0, 0, 0, 1);
                ctx.lineWidth = 7;
                ctx.beginPath();

                ctx.moveTo(width/3,height/2);
                ctx.lineTo(width/3, height/2 - fieldHeight);
                ctx.stroke();

                ctx.moveTo(width/3,height/2);
                ctx.lineTo(width/3, height/2 + fieldHeight);
                ctx.stroke();

                ctx.moveTo(2*width/3,height/2);
                ctx.lineTo(2*width/3, height/2 - fieldHeight);
                ctx.stroke();

                ctx.moveTo(2*width/3,height/2);
                ctx.lineTo(2*width/3, height/2 + fieldHeight);
                ctx.stroke();

                ctx.moveTo(width/2,height/3);
                ctx.lineTo(width/2 - fieldWidth, height/3);
                ctx.stroke();

                ctx.moveTo(width/2,height/3);
                ctx.lineTo(width/2 + fieldWidth, height/3);
                ctx.stroke();

                ctx.moveTo(width/2, 2*height/3);
                ctx.lineTo(width/2 - fieldWidth, 2*height/3);
                ctx.stroke();

                ctx.moveTo(width/2, 2*height/3);
                ctx.lineTo(width/2 + fieldWidth, 2*height/3);
                ctx.stroke();
                ctx.closePath()
            }
        }
}