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, TabWidget } from "std-widgets.slint";
import { Api, ComponentItem, DiagnosticSummary } from "api.slint";

import { EditorSizeSettings, EditorSpaceSettings, Icons } from "./components/styling.slint";
import { StatusLine } from "./components/status-line.slint";
import { HeaderView } from "./views/header-view.slint";
import { LibraryView } from "./views/library-view.slint";
import { DrawAreaMode, PreviewView } from "./views/preview-view.slint";
import { OutOfDateBox } from "./components/out-of-date-box.slint";
import { PropertyView } from "./views/property-view.slint";
import { PreviewDataView } from "./views/preview-data-view.slint";
import { SpreadsheetDialog } from "./components/spreadsheet-dialog.slint";

import { WindowGlobal } from "windowglobal.slint";

export { Api }

export component PreviewUi inherits Window {
    property <length> border: 20px;
    property <ComponentItem> visible-component: {
        name: "",
        defined-at: "",
        pretty-location: "",
        is-user-defined: false,
        is-currently-shown: false,
    };
    property <bool> show-left-sidebar;
    property <bool> show-right-sidebar;

    title: "Slint Live-Preview";
    icon: @image-url("assets/slint-logo-small-light.png");
    always-on-top <=> Api.always-on-top;

    changed width => {
        WindowGlobal.window-width = self.width;
    }
    changed height => {
        WindowGlobal.window-height = self.height;
    }

    VerticalLayout {
        if !Api.show-preview-ui: no-ui-drawing-rect := Rectangle {
            VerticalLayout {
                ComponentContainer {
                    component-factory: Api.preview-area;
                }
            }
        }
        if Api.show-preview-ui: Rectangle {
            VerticalLayout {
                header-view := HeaderView {
                    show-left-sidebar <=> root.show-left-sidebar;
                    show-right-sidebar <=> root.show-right-sidebar;

                    current-style <=> Api.current-style;
                    known-styles <=> Api.known-styles;

                    style-selected => {
                        Api.style-changed();
                    }

                    edit := Button {
                        icon: Icons.inspect;
                        colorize-icon: preview.select-mode ? false : true;
                        checkable: true;
                        checked <=> preview.select-mode;
                        primary: preview.select-mode;
                        enabled: preview.preview-is-current;
                    }
                }

                HorizontalLayout {
                    if  root.show-left-sidebar: LibraryView {
                        known-components: Api.known-components;

                        preview-area-is-current: preview.preview-is-current;
                        preview-area-position-x: preview.preview-area-position-x;
                        preview-area-position-y: preview.preview-area-position-y;
                        preview-area-width: preview.preview-area-width;
                        preview-area-height: preview.preview-area-height;

                        visible-component: root.visible-component;

                        can-drop(index, x, y, on-drop-area) => {
                            Api.can-drop(index, x, y, on-drop-area);
                        }

                        drop(index, x, y) => {
                            Api.drop(index, x, y);
                        }

                        show-preview-for(name, defined-at) => {
                            Api.show-preview-for(name, defined-at);
                        }
                    }

                    preview := PreviewView {
                        visible-component <=> root.visible-component;
                    }

                    if  root.show-right-sidebar: HorizontalLayout {
                        Rectangle {
                            width: 4px;
                            background: @linear-gradient(90deg, #0000, #0002);
                        }
                        VerticalLayout {
                            TabWidget {
                                width: EditorSizeSettings.property-bar-width - (EditorSpaceSettings.default-padding*2);
                                current-index: 0;
                                Tab {
                                    title: "Properties";
                                    PropertyView {
                                        opacity: preview.preview-is-current ? 1.0 : 0.3;
                                        enabled: preview.preview-is-current;
                                    }
                                }

                                preview_data_tab := Tab {
                                    title: "Data";
                                    PreviewDataView {
                                        opacity: preview.preview-is-current ? 1.0 : 0.3;
                                        enabled: preview.preview-is-current;
                                    }
                                }
                            }
                        }
                    }

                }

                StatusLine { }
            }
        }
    }

    if Api.diagnostic-summary == DiagnosticSummary.Errors: OutOfDateBox {
        x: (parent.width - self.width) / 2;
        y: (parent.height / 10);
    }
}