slint/internal/compiler/widgets/fluent/scrollview.slint

// Copyright © SixtyFPS GmbH <info@slint.dev>
// SPDX-License-Identifier: GPL-3.0-only OR LicenseRef-Slint-Royalty-free-2.0 OR LicenseRef-Slint-Software-3.0

import { FluentPalette, Icons } from "styling.slint";

component ScrollViewButton inherits TouchArea {
    in property <image> icon;
    in property <bool> horizontal;

    width: root.horizontal ? 6px : 8px;
    height: root.horizontal ? 8px : 6px;

    icon := Image {
        x: (parent.width - self.width) / 2;
        y: (parent.height - self.height) / 2;
        width: parent.width;
        source: root.icon;
        colorize: FluentPalette.border;
        accessible-role: none;

        animate colorize, opacity { duration: 150ms; }
        animate width, height { duration: 150ms; easing: ease-out; }
    }

    states [
        pressed when root.pressed : {
            opacity: 1;
            icon.width: root.width - 2px;
        }
        hover when root.has-hover : {
            opacity: 1;
            icon.colorize: FluentPalette.text-secondary;
        }
    ]
}

component ScrollBar inherits Rectangle {
    in-out property <bool> horizontal;
    in-out property <length> maximum;
    in-out property <length> page-size;
    in-out property <length> value;
    in property <ScrollBarPolicy> policy: ScrollBarPolicy.as-needed;
    in property <bool> enabled;

    callback scrolled();

    property <length> offset: 16px;
    property <length> size: 2px;
    property <length> track-size: root.horizontal ? root.width - 2 * root.offset : root.height - 2 * offset;
    property <length> step-size: 10px;

    border-width: 1px;
    border-radius: 7px;
    visible: (self.policy == ScrollBarPolicy.always-on) || (self.policy == ScrollBarPolicy.as-needed && self.maximum > 0);
    clip: true;

    states [
        hover when touch-area.has-hover || down-scroll-button.has-hover || up-scroll-button.has-hover : {
            root.background: FluentPalette.alternate-background;
            root.size: 6px;
            up-scroll-button.opacity: 1;
            down-scroll-button.opacity: 1;
        }
    ]

    animate size { duration: 150ms; easing: ease-out; }

    thumb := Rectangle {
        width: !root.horizontal ? root.size : root.maximum <= 0phx ? 0phx : max(min(16px, root.width), root.track-size * root.page-size / (root.maximum + root.page-size));
        height: root.horizontal ? root.size : root.maximum <= 0phx ? 0phx : max(min(16px, root.height), root.track-size * (root.page-size / (root.maximum + root.page-size)));
        x: !root.horizontal ? parent.width - 4px - self.width : root.offset + (root.track-size - thumb.width) * (-root.value / root.maximum);
        y: root.horizontal ? parent.height - 4px - self.height : root.offset + (root.track-size - thumb.height) * (-root.value / root.maximum);
        border-radius: (root.horizontal ? self.height : self.width) / 2;
        background: FluentPalette.border;

        animate width, height { duration: 150ms; easing: ease-out; }
    }

    touch-area := TouchArea {
        property <length> pressed-value;

        width: parent.width;
        height: parent.height;

        pointer-event(event) => {
            if (event.button == PointerEventButton.left && event.kind == PointerEventKind.down) {
                self.pressed-value = -root.value;
            }
        }

        moved => {
            if (self.enabled && self.pressed) {
                root.value = -max(0px, min(root.maximum, self.pressed-value + (
                    root.horizontal ? (touch-area.mouse-x - touch-area.pressed-x) * (root.maximum / (root.track-size - thumb.width))
                               : (touch-area.mouse-y - touch-area.pressed-y) * (root.maximum / (root.track-size - thumb.height))
                )));
                root.scrolled();
            }
        }

        scroll-event(event) => {
            if (root.horizontal && event.delta-x != 0) {
                root.value = max(-root.maximum, min(0px, root.value + event.delta-x));
                return accept;
            } else if (!root.horizontal && event.delta-y != 0) {
                root.value = max(-root.maximum, min(0px, root.value + event.delta-y));
                return accept;
            }
            reject
        }
    }

    up-scroll-button := ScrollViewButton {
        opacity: 0;
        x: !root.horizontal ? (parent.width - self.width) / 2 : 4px;
        y: root.horizontal ? (parent.height - self.height) / 2 : 4px;
        icon: root.horizontal ? Icons.left : Icons.up;
        horizontal: root.horizontal;

        clicked => {
            root.value = min(0px, root.value + root.step-size);
        }
    }

    down-scroll-button := ScrollViewButton {
        opacity: 0;
        x: !root.horizontal ? (parent.width - self.width) / 2 : root.width - self.width - 4px;
        y: root.horizontal ? (parent.height - self.height) / 2 : root.height - self.height - 4px;
        icon: root.horizontal ? Icons.right : Icons.down;
        horizontal: root.horizontal;

        clicked => {
            root.value = max(-root.maximum, root.value - root.step-size);
        }
    }
}

export component ScrollView {
    in property <bool> enabled: true;
    out property <length> visible-width <=> flickable.width;
    out property <length> visible-height <=> flickable.height;
    in-out property <length> viewport-width <=> flickable.viewport-width;
    in-out property <length> viewport-height <=> flickable.viewport-height;
    in-out property <length> viewport-x <=> flickable.viewport-x;
    in-out property <length> viewport-y <=> flickable.viewport-y;
    in property <ScrollBarPolicy> vertical-scrollbar-policy <=> vertical-bar.policy;
    in property <ScrollBarPolicy> horizontal-scrollbar-policy <=> horizontal-bar.policy;
    in property <bool> mouse-drag-pan-enabled <=> flickable.interactive;

    // FIXME: remove. This property is currently set by the ListView and is used by the native style to draw the scrollbar differently when it has focus
    in-out property <bool> has-focus;

    callback scrolled <=> flickable.flicked;

    min-height: 50px;
    min-width: 50px;
    horizontal-stretch: 1;
    vertical-stretch: 1;
    preferred-height: 100%;
    preferred-width: 100%;

    flickable := Flickable {
        interactive: false;
        viewport-y <=> vertical-bar.value;
        viewport-x <=> horizontal-bar.value;
        width: parent.width;
        height: parent.height;

        @children
    }

    vertical-bar := ScrollBar {
        enabled: root.enabled;
        width: 14px;
        x: flickable.width + flickable.x - self.width;
        y: flickable.y;
        height:  flickable.height - horizontal-bar.height;
        horizontal: false;
        maximum:  flickable.viewport-height - flickable.height;
        page-size:  flickable.height;

        scrolled => {root.scrolled()}
    }

    horizontal-bar := ScrollBar {
        enabled: root.enabled;
        width:  flickable.width - vertical-bar.width;
        height: 14px;
        y: flickable.height + flickable.y - self.height;
        x: flickable.x;
        horizontal: true;
        maximum:  flickable.viewport-width - flickable.width;
        page-size:  flickable.width;

        scrolled => {root.scrolled()}
    }
}