LibrePCB

import { Data } from "../api.slint";

export component ScrollBar inherits Rectangle {
    in property <bool> horizontal;
    in property <length> page-size;
    in property <length> maximum;
    in property <bool> enabled;
    in-out property <length> value;
    out property <bool> has-hover: ta.has-hover;
    property <length> track-size: horizontal ? (root.width - 2 * offset) : (root.height - 2 * offset);
    property <length> offset: 2px;

    callback scrolled();

    background: has-hover ? Data.theme.control-hovered : transparent;
    visible: maximum > 0;

    handle := Rectangle {
        width: !horizontal ? parent.width - 2px : maximum <= 0phx ? 0phx : max(min(32px, root.width), track-size * root.page-size / (maximum + root.page-size));
        height: horizontal ? parent.height - 2px : maximum <= 0phx ? 0phx : max(min(32px, root.height), track-size * (root.page-size / (maximum + root.page-size)));
        x: !horizontal ? (parent.width - self.width) / 2 : offset + (track-size - self.width) * (-value / maximum);
        y: horizontal ? (parent.height - self.height) / 2 : offset + (track-size - self.height) * (-value / maximum);
        background: {
            if ta.pressed {
                Data.theme.control-text.mix(Data.theme.control-text-muted, 0.5)
            } else if ta.has-hover {
                Data.theme.control-text-muted
            } else {
                Data.theme.control-text-disabled
            }
        };
        border-radius: min(self.width, self.height) / 2;
    }

    ta := TouchArea {
        property <{ pressed-value: length, maximum: length, x: length, y: length}> saved-values;

        x: horizontal ? 0 : parent.width - self.width + 4px;
        y: (!horizontal) ? 0 : parent.height - self.height + 4px;
        width: (!horizontal) ? parent.width + 4px : parent.width;
        height: horizontal ? parent.height + 4px : parent.height;

        function update-saved-values() {
            saved-values = { pressed-value: -value, maximum: maximum, x: self.mouse-x, y: self.mouse-y };
        }

        pointer-event(event) => {
            if (event.button == PointerEventButton.left) && (event.kind == PointerEventKind.down) {
                self.update-saved-values();
            }
        }

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

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

export component ScrollView {
    in property <bool> force-show-scrollbars: false;
    in property <bool> thin-scrollbars: false;
    in property <bool> mouse-drag-pan-enabled <=> flickable.interactive;
    in property <bool> consume-scroll-events: false;
    in-out property <length> content-x <=> flickable.content-x;
    in-out property <length> content-y <=> flickable.content-y;
    in-out property <length> content-width <=> flickable.content-width;
    in-out property <length> content-height <=> flickable.content-height;

    // Workaround for crashing slint-lsp if those properties don't exist.
    property <length> visible-width <=> flickable.width;
    property <length> visible-height <=> flickable.height;

    callback scrolled <=> flickable.flicked;

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

    ta := TouchArea {
        x: 0;
        y: 0;
        width: 100%;
        height: 100%;

        flickable := Flickable {
            x: 0;
            y: 0;
            width: 100%;
            height: 100%;
            content-x <=> horizontal-bar.value;
            content-y <=> vertical-bar.value;
            interactive: false;

            @children
        }

        vertical-bar := ScrollBar {
            x: parent.width - self.width;
            y: 0;
            width: (self.has-hover && (!thin-scrollbars)) ? 8px : 6px;
            height: horizontal-bar.visible ? parent.height - horizontal-bar.height : parent.height;
            horizontal: false;
            page-size: flickable.height;
            maximum: flickable.content-height - flickable.height;
            opacity: (force-show-scrollbars || ta.has-hover || self.has-hover) ? 0.7 : 0;

            animate opacity {
                delay: 100ms;
                duration: 100ms;
            }

            scrolled => {
                root.scrolled()
            }
        }

        horizontal-bar := ScrollBar {
            x: 0;
            y: parent.height - self.height;
            width: vertical-bar.visible ? parent.width - vertical-bar.width : parent.width;
            height: (self.has-hover && (!thin-scrollbars)) ? 8px : 6px;
            horizontal: true;
            page-size: flickable.width;
            maximum: flickable.content-width - flickable.width;
            opacity: (force-show-scrollbars || ta.has-hover || self.has-hover) ? 0.7 : 0;

            animate opacity {
                delay: 100ms;
                duration: 100ms;
            }

            scrolled => {
                root.scrolled()
            }
        }

        // Depending on context, we need to consume scroll events to avoid
        // them to propagate to elements below the scroll view.
        scroll-event(event) => {
            consume-scroll-events ? accept : reject
        }
    }
}