HandwritingModeButton.qml Example File

/****************************************************************************
**
** Copyright (C) 2016 The Qt Company Ltd.
** Contact: https://www.qt.io/licensing/
**
** This file is part of the Qt Virtual Keyboard module of the Qt Toolkit.
**
** $QT_BEGIN_LICENSE:GPL$
** Commercial License Usage
** Licensees holding valid commercial Qt licenses may use this file in
** accordance with the commercial license agreement provided with the
** Software or, alternatively, in accordance with the terms contained in
** a written agreement between you and The Qt Company. For licensing terms
** and conditions see https://www.qt.io/terms-conditions. For further
** information use the contact form at https://www.qt.io/contact-us.
**
** GNU General Public License Usage
** Alternatively, this file may be used under the terms of the GNU
** General Public License version 3 or (at your option) any later version
** approved by the KDE Free Qt Foundation. The licenses are as published by
** the Free Software Foundation and appearing in the file LICENSE.GPL3
** included in the packaging of this file. Please review the following
** information to ensure the GNU General Public License requirements will
** be met: https://www.gnu.org/licenses/gpl-3.0.html.
**
** $QT_END_LICENSE$
**
****************************************************************************/

import QtQuick 2.0

Item {
    id: handwritingModeButton
    state: "unavailable"
    property bool floating
    property bool flipable
    readonly property real __minWidthHeight: Math.min(width, height)

    signal clicked()
    signal doubleClicked()

    Flipable {
        id: flipableImage
        anchors.fill: parent

        property bool flipped

        front: Image {
            sourceSize.width: handwritingModeButton.__minWidthHeight
            sourceSize.height: handwritingModeButton.__minWidthHeight
            smooth: false
            source: "qrc:/content/FloatingButton_Unavailable.svg"
        }

        back: Image {
            id: buttonImage
            sourceSize.width: handwritingModeButton.__minWidthHeight
            sourceSize.height: handwritingModeButton.__minWidthHeight
            smooth: false
            source: "qrc:/content/FloatingButton_Available.svg"
        }

        states: State {
            PropertyChanges { target: rotation; angle: 180 }
            when: flipableImage.flipped
        }

        transform: Rotation {
            id: rotation
            origin.x: flipableImage.width / 2
            origin.y: flipableImage.height / 2
            axis { x: 0; y: 1; z: 0 }
            angle: 0
        }

        transitions: Transition {
            enabled: handwritingModeButton.flipable
            NumberAnimation { target: rotation; property: "angle"; duration: 400 }
        }
    }

    states: [
        State {
            name: "available"
            PropertyChanges { target: flipableImage; flipped: true }
        },
        State {
            name: "active"
            PropertyChanges { target: flipableImage; flipped: true }
            PropertyChanges { target: buttonImage; source: "qrc:/content/FloatingButton_Active.svg" }
        }
    ]

    function snapHorizontal() {
        if (!floating)
            return
        if (mouseArea.drag.maximumX > mouseArea.drag.minimumX) {
            if (x + 20 >= mouseArea.drag.maximumX) {
                anchors.left = undefined
                anchors.right = parent.right
            } else if (x - 20 <= mouseArea.drag.minimumX) {
                anchors.right = undefined
                anchors.left = parent.left
            }
        }
    }

    function snapVertical() {
        if (!floating)
            return
        if (mouseArea.drag.maximumY > mouseArea.drag.minimumY) {
            if (y + 20 >= mouseArea.drag.maximumY) {
                anchors.top = undefined
                anchors.bottom = parent.bottom
            } else if (y - 20 <= mouseArea.drag.minimumY) {
                anchors.bottom = undefined
                anchors.top = parent.top
            }
        }
    }

    MouseArea {
        id: mouseArea
        anchors.fill: parent
        drag {
            target: handwritingModeButton.floating ? handwritingModeButton : undefined
            axis: Drag.XAxis | Drag.YAxis
            minimumX: 0
            maximumX: handwritingModeButton.parent.width - handwritingModeButton.width
            onMaximumXChanged: !mouseArea.drag.active && handwritingModeButton.snapHorizontal()
            minimumY: 0
            maximumY: handwritingModeButton.parent.height - handwritingModeButton.height
            onMaximumYChanged: !mouseArea.drag.active && handwritingModeButton.snapVertical()
        }
        onPressed: {
            if (!handwritingModeButton.floating)
                return
            handwritingModeButton.anchors.left = undefined
            handwritingModeButton.anchors.top = undefined
            handwritingModeButton.anchors.right = undefined
            handwritingModeButton.anchors.bottom = undefined
        }
        onReleased: {
            handwritingModeButton.snapHorizontal()
            handwritingModeButton.snapVertical()
        }
        onClicked: {
            handwritingModeButton.snapHorizontal()
            handwritingModeButton.snapVertical()
            clickTimer.restart()
        }
        onDoubleClicked: {
            clickTimer.stop()
            handwritingModeButton.snapHorizontal()
            handwritingModeButton.snapVertical()
            handwritingModeButton.doubleClicked()
        }
        Timer {
            id: clickTimer
            interval: Qt.styleHints ? Qt.styleHints.mouseDoubleClickInterval / 3 : 0
            repeat: false
            onTriggered: handwritingModeButton.clicked()
        }
    }
}