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-1.1 OR LicenseRef-Slint-commercial

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

export struct ComponentListSubItem {
    name: string,
    import_file: string,
    is_builtin: bool,
    is_std_widget: bool,
    is_exported: bool,
}
export struct ComponentListItem {
    category: string,
    components: [ComponentListSubItem]
}

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;

    pure callback can-drop(string /* component type */, length /* x */, length /* y */) -> bool;
    callback drop(string /* component type */, string /* import_path */, length /* x */, length /* y */);

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

    ScrollView {
        VerticalBox {
            Text {
                font-weight: 800;
                text: @tr("Assets");
            }

            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: on-drop-area && root.can-drop(ci.name, drop-x, drop-y);

                    enabled: root.preview-visible;

                    height: name.preferred-height + 10px;
                    width: 100%;

                    name := Text { text: ci.name; }

                    pointer-event(event) => {
                        if (self.can-drop-here && event.kind == PointerEventKind.up && event.button == PointerEventButton.left) {
                            root.drop(ci.name, ci.import_file, 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;
                        }
                    ]
                }
            }
        }
    }
}