DemoApplication/controls/CNFlipButton.qml


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89

import QtQuick 2.11
import QtQuick.Controls 2.4
import CursorNavigation 1.0

CNButton {
    id: root

    implicitWidth: (textLabel.contentWidth + 40)
    implicitHeight: 40

    CursorNavigation.acceptsCursor: true

    background: Rectangle {
        anchors.fill: parent
        radius: 4
        opacity: root.pressed ? 0.6 : 0.4
        color: "grey"
    }

    contentItem: Item {
        anchors.fill: parent
        Label {
            id: textLabel
            anchors.centerIn: parent
            font.pixelSize: 14
            color: "blue"
            text: root.text
        }

        CNCursorIndicator { cursorItem : root; radius: 4}
    }

    Rotation {
        id: rot
        origin.x: root.width/2
        origin.y: root.height/2
    }

    NumberAnimation {
        id: returnAnimation
        target: rot
        property: "angle"
        duration: 400
        easing.type: Easing.InOutQuad
        from: 45
        to: 0
    }

    transform: rot

    CursorNavigation.onHasCursorChanged: {
        if (!hasCursor) {
            returnAnimation.start();
        }
    }

    function flip(angle, magnitude) {
        rot.angle = magnitude*45.0;
        var a = angle * Math.PI/180.0;
        rot.axis.x = -Math.sin(a);
        rot.axis.y = Math.cos(a);
        rot.axis.z = 0;
    }

    CursorNavigation.onMagnitudeChanged: {
        flip(angle, magnitude);
    }

    CursorNavigation.onMovedUp: {
        console.log("moved up ffs");
        flip(-90, 1);
        returnAnimation.start();
    }

    CursorNavigation.onMovedDown: {
        flip(90, 1);
        returnAnimation.start();
    }

    CursorNavigation.onMovedRight: {
        flip(0, 1);
        returnAnimation.start();
    }

    CursorNavigation.onMovedLeft: {
        flip(180, 1);
        returnAnimation.start();
    }
}