slint/tools/lsp/ui/component-list.slint

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

import { Palette, ScrollView, VerticalBox, GroupBox } from "std-widgets.slint";

export struct ComponentListItem {
    category: string,
    components: [string]
}

export component ComponentList {
    in property <[ComponentListItem]> known-components;

    in property <length> preview-area-position-x;
    in property <length> preview-area-position-y;
    in property <length> preview-area-width;
    in property <length> preview-area-height;

    out property <bool> over-target;

    pure callback can-drop(string/* component_type */, length/* x */, length/* y */, bool/* on-drop-area */) -> bool;
    callback drop(string/* component_type */, length/* x */, length/* y */);

    private property <bool> preview-visible: preview-area-width > 0px && preview-area-height > 0px;

    VerticalBox {
        Text {
            text: @tr("Library");
            horizontal-alignment: center;
            font-size: 1.4rem;
            font-weight: 800;
        }

        ScrollView {
            VerticalLayout {
                for cli in root.known-components: VerticalLayout {
                    Rectangle {
                        height: title.preferred-height + 10px;
                        background: Palette.alternate-background;
                        title := Text {
                            font-size: 1.2rem;
                            font-weight: 800;
                            text: cli.category;
                        }
                    }

                    for ci in cli.components: TouchArea {
                        private property <length> drop-x: self.absolute-position.x + self.mouse-x - root.preview-area-position-x;
                        private property <length> drop-y: self.absolute-position.y + self.mouse-y - root.preview-area-position-y;
                        private property <bool> on-drop-area:
                            drop-x >= 0 && drop-x <= root.preview-area-width && drop-y >= 0 && drop-y <= root.preview-area-height;
                        private property <bool> can-drop-here: root.can-drop(ci, drop-x, drop-y, on-drop-area);

                        enabled: root.preview-visible;
                        height: name.preferred-height + 10px;
                        width: 100%;
                        name := Text {
                            text: ci;
                        }

                        pointer-event(event) => {
                            if (self.can-drop-here && event.kind == PointerEventKind.up && event.button == PointerEventButton.left) {
                                root.drop(ci, drop-x, drop-y);
                            }
                        }
                        states [
                            dragging-no-drop when self.pressed && !self.can-drop-here: {
                                mouse-cursor: MouseCursor.no-drop;
                            }
                            dragging-can-drop when self.pressed && self.can-drop-here: {
                                mouse-cursor: MouseCursor.copy;
                            }
                            normal when !self.pressed: {
                                mouse-cursor: MouseCursor.default;
                            }
                        ]
                    }
                }
            }
        }
    }
}