C

Qt Quick Ultralite swipe_game Demo

// Copyright (C) 2024 The Qt Company Ltd.
// SPDX-License-Identifier: LicenseRef-Qt-Commercial

import QtQuick 2.0
import StyleModule 1.0
import SwipeModule 1.0
/*
    This component provides vertical/horizontal gesture recognition.
    Set the direction property to define which swipe direction should be checked.
*/

Item {
    id: root

    // NOTE: overwrite the Style and Globals value assignments if you want to use the component outside of this project

    // determines the size of the internal MouseArea.
    property int areaSize: Globals.useSmallTouchAreas ? Style.swipeAreaSizeSmall : Style.swipeAreaSizeDefault
    // determines the required distance in pixels for a gesture to be recognized as a swipe
    property int threshold: Style.swipeThreshold
    // the image used for visual feedback. Set to empty string if you want to try this component outside of this project
    property string highlightSource: "mask_circle_highlight_small_right.svg"
    // can be activated in the config view as a guide for users
    property bool showTouchArea: Globals.showTouchAreas

    // determines the swipe direction this area will detect
    property int direction: Swipe.Direction.Left

    signal triggered()

    implicitWidth: Style.appSize
    implicitHeight: Style.appSize

    states: [
        State {
            name: "Left"
            when: direction === Swipe.Direction.Left
            PropertyChanges {
                target: mouseArea
                anchors {
                    leftMargin: width - root.areaSize
                    rightMargin: 0
                    topMargin: 0
                    bottomMargin: 0
                }
            }
        },
        State {
            name: "Right"
            when: direction === Swipe.Direction.Right
            PropertyChanges {
                target: mouseArea
                anchors {
                    leftMargin: 0
                    rightMargin: width - root.areaSize
                    topMargin: 0
                    bottomMargin: 0
                }
            }
        },
        State {
            name: "Up"
            when: direction === Swipe.Direction.Up
            PropertyChanges {
                target: mouseArea
                anchors {
                    leftMargin: 0
                    rightMargin: 0
                    topMargin: height - root.areaSize
                    bottomMargin: 0
                }
            }
        },
        State {
            name: "Down"
            when: direction === Swipe.Direction.Down
            PropertyChanges {
                target: mouseArea
                anchors {
                    leftMargin: 0
                    rightMargin: 0
                    topMargin: 0
                    bottomMargin: height - root.areaSize
                }
            }
        }
    ]

    QtObject {
        id: internal

        property int startX: 0
        property int startY: 0
        property bool triggered: false
    }

    MouseArea {
        id: mouseArea

        anchors.fill: parent

        onPressed: {
            internal.startX = mouseX
            internal.startY = mouseY
            internal.triggered = false
        }

        onPositionChanged: {
            if (internal.triggered) {
                return
            }

            if (Swipe.detectDirection(mouseX, mouseY, internal.startX, internal.startY, root.threshold) != Swipe.Direction.None)
            {
                triggered();
                internal.triggered = true
            }
        }

        // can be activated in the config view as a guide for users
        Rectangle {
            id: areaVisualizer

            anchors.fill: parent
            color: "magenta"
            opacity: 0.4
            visible: root.showTouchArea
        }
    }

    Image {
        id: highlight

        anchors.fill: parent
        source: root.highlightSource
        rotation: {
            switch (direction) {
            case Swipe.Direction.Right: 180; break
            case Swipe.Direction.Left: 0; break
            case Swipe.Direction.Up: 90; break
            case Swipe.Direction.Down: -90; break
            default: 0
            }
        }
        visible: mouseArea.pressed
    }
}