insta360-link-tools/plasmoid/package/contents/ui/Joystick.qml

/*
 * A circular virtual joystick.
 *
 * Reports displacement as a normalised vector: nx and ny in -1..1, with ny
 * positive upwards. Emits nothing itself; the parent samples nx/ny on a timer
 * while `held` is true, which is what turns a position into a velocity.
 */
import QtQuick
import org.kde.kirigami as Kirigami

Item {
    id: pad

    property real nx: 0
    property real ny: 0
    property bool held: false
    // Displacement below this fraction of the radius counts as centred, so
    // resting a finger slightly off-centre does not creep the camera.
    property real deadzone: 0.15

    readonly property real magnitude: Math.sqrt(nx * nx + ny * ny)
    readonly property bool engaged: held && magnitude > deadzone

    implicitWidth: Kirigami.Units.gridUnit * 9
    implicitHeight: implicitWidth

    signal released()

    function reset() {
        nx = 0;
        ny = 0;
    }

    // Base
    Rectangle {
        id: base
        anchors.centerIn: parent
        width: Math.min(pad.width, pad.height)
        height: width
        radius: width / 2
        color: Kirigami.Theme.alternateBackgroundColor
        border.width: 1
        border.color: Kirigami.Theme.separatorColor ?? Kirigami.Theme.textColor

        // Deadzone ring, drawn so the inactive area is visible rather than
        // something the user has to discover.
        Rectangle {
            anchors.centerIn: parent
            width: base.width * pad.deadzone
            height: width
            radius: width / 2
            color: "transparent"
            border.width: 1
            border.color: Kirigami.Theme.separatorColor ?? Kirigami.Theme.textColor
            opacity: 0.4
        }

        // Crosshair
        Rectangle {
            anchors.centerIn: parent
            width: base.width * 0.9
            height: 1
            color: Kirigami.Theme.textColor
            opacity: 0.15
        }
        Rectangle {
            anchors.centerIn: parent
            width: 1
            height: base.height * 0.9
            color: Kirigami.Theme.textColor
            opacity: 0.15
        }
    }

    readonly property real knobSize: base.width * 0.28
    // Travel available to the knob centre.
    readonly property real travel: (base.width - knobSize) / 2

    Rectangle {
        id: knob
        width: pad.knobSize
        height: pad.knobSize
        radius: width / 2
        color: pad.engaged ? Kirigami.Theme.highlightColor
                           : Kirigami.Theme.backgroundColor
        border.width: 2
        border.color: Kirigami.Theme.highlightColor
        x: base.x + base.width / 2 - width / 2 + pad.nx * pad.travel
        y: base.y + base.height / 2 - height / 2 - pad.ny * pad.travel

        Behavior on x {
            enabled: !pad.held
            NumberAnimation { duration: 120; easing.type: Easing.OutCubic }
        }
        Behavior on y {
            enabled: !pad.held
            NumberAnimation { duration: 120; easing.type: Easing.OutCubic }
        }
    }

    MouseArea {
        anchors.fill: parent
        preventStealing: true

        function update(mx, my) {
            const cx = base.x + base.width / 2;
            const cy = base.y + base.height / 2;
            let dx = mx - cx;
            let dy = my - cy;
            const len = Math.sqrt(dx * dx + dy * dy);
            // Clamp into the circle so a corner drag cannot exceed full scale.
            if (len > pad.travel && len > 0) {
                dx *= pad.travel / len;
                dy *= pad.travel / len;
            }
            pad.nx = pad.travel > 0 ? dx / pad.travel : 0;
            pad.ny = pad.travel > 0 ? -dy / pad.travel : 0;
        }

        onPressed: (mouse) => {
            pad.held = true;
            update(mouse.x, mouse.y);
        }
        onPositionChanged: (mouse) => {
            if (pad.held) {
                update(mouse.x, mouse.y);
            }
        }
        onReleased: {
            pad.held = false;
            pad.reset();
            pad.released();
        }
        onCanceled: {
            pad.held = false;
            pad.reset();
            pad.released();
        }
    }
}