slint/tools/lsp/ui/main.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

// cSpell: ignore Heade

import { Button, ComboBox, ListView, ScrollView, VerticalBox } from "std-widgets.slint";
import { Api, ComponentItem } from "api.slint";
import { ComponentList } from "component-list.slint";
import { DrawArea, DrawAreaMode } from "draw-area.slint";
import { DiagnosticsOverlay } from "diagnostics-overlay.slint";
import { PropertyEditor } from "property-editor.slint";
import { SideBar } from "side-bar.slint";

import { HeaderView } from "./views/header-view.slint";

export { Api }

export component PreviewUi inherits Window {
    property <length> border: 20px;
    property <length> side-bar-width: 300px;

    title: "Slint Live-Preview";
    icon: @image-url("assets/slint-logo-small-light.png");

    VerticalLayout {
        if (!Api.show-preview-ui): no-ui-drawing-rect := Rectangle {
            VerticalLayout {
                ComponentContainer {
                    component-factory: Api.preview-area;
                }
            }

            // Diagnostics overlay:
            DiagnosticsOverlay {
                width: 100%;
                height: 100%;
                diagnostics <=> Api.diagnostics;
                show-document(url, line, column) => {
                    Api.show-document(url, line, column);
                }
            }
        }
        if (Api.show-preview-ui): Rectangle {
            VerticalLayout {
                header-view := HeaderView {
                    edit-mode <=> Api.design-mode;
                    current-style <=> Api.current-style;
                    known-styles <=> Api.known-styles;

                    edit-mode-toggled() => {
                        key-handler.focus();
                    }

                    style-selected => {
                        Api.style-changed();
                    }
                }
                
                HorizontalLayout {
                    left-sidebar := SideBar {
                        default-width: root.side-bar-width;
                        show-side-bar: Api.design-mode;

                        component-list := ComponentList {
                            preview-area-position-x: draw-area.preview-area-position-x;
                            preview-area-position-y: draw-area.preview-area-position-y;
                            preview-area-width: draw-area.preview-area-width;
                            preview-area-height: draw-area.preview-area-height;
                        }
                    }

                    draw-area := DrawArea {
                        visible-component <=> component-list.visible-component;
                    }

                    right-sidebar := SideBar {
                        default-width: root.side-bar-width;
                        show-side-bar: Api.design-mode;

                        property-editor := PropertyEditor { }
                    }

                    preferred-width: draw-area.preferred-width + 2 * root.side-bar-width;
                }
            }

            key-handler := FocusScope {
                enabled: draw-area.mode == DrawAreaMode.designing;

                key-released(event) => {
                    if event.text == Key.Delete {
                        // This `if` should not be necessary, but without it
                        // we do trigger deletion of Elements while errors
                        // are on screen.
                        if draw-area.mode == DrawAreaMode.designing {
                            Api.selected-element-delete();
                        }
                        return accept;
                    }
                    reject
                }
            }
        }
    }
}