LibrePCB

import { Tab } from "../../tab.slint";
import {
    SceneButton,
    SliderSceneButton,
    Spinner,
} from "../../widgets.slint";
import {
    Backend,
    Board3dTabData,
    BoardAction,
    Data,
    TabAction,
    WindowSectionData,
} from "../../api.slint";

export component Board3dTab inherits Tab {
    in property <int> section-index;
    in-out property <WindowSectionData> section;
    property <[Board3dTabData]> tabs: section.board-3d-tabs;
    property <int> index: section.current-tab-index;

    enabled: true;

    // Strangely the 3D scene colors look different (wrong) when using the
    // light theme, compared to the dark theme. This doesn't happen when
    // we draw a black background first.
    Rectangle {
        background: Data.preview-mode ? tabs[index].background-color : black;
    }

    img := Image {
        width: 100%;
        height: 100%;
        source: Backend.render-scene(section-index, root.width, root.height, 0, tabs[index].frame);
        accessible-role: none;
    }

    ta := TouchArea {
        mouse-cursor: tabs[index].cursor;

        if !tabs[index].error.is-empty: Rectangle {
            width: self.preferred-width;
            height: self.preferred-height;
            background: Data.theme.error;
            border-radius: 8px;

            VerticalLayout {
                padding: 8px;

                error-txt := Text {
                    max-width: 0.7 * root.width;
                    color: Data.theme.error-text;
                    wrap: word-wrap;
                    text: tabs[index].error;
                }
            }
        }

        VerticalLayout {
            x: parent.width - self.preferred-width - 10px;
            y: 10px;
            width: self.preferred-width;

            zoom-fit-btn := SceneButton {
                x: parent.width - self.width;
                icon: @image-url("../../../../font-awesome/svgs/solid/expand.svg");
                icon-scale: 0.9;
                base-color: tabs[index].background-color;
                base-text-color: tabs[index].foreground-color;

                clicked => {
                    Backend.trigger-tab(section-index, index, TabAction.zoom-fit);
                }
            }

            zoom-in-btn := SceneButton {
                x: parent.width - self.width;
                icon: @image-url("../../../../bootstrap-icons/icons/zoom-in.svg");
                base-color: tabs[index].background-color;
                base-text-color: tabs[index].foreground-color;

                clicked => {
                    Backend.trigger-tab(section-index, index, TabAction.zoom-in);
                }
            }

            zoom-out-btn := SceneButton {
                x: parent.width - self.width;
                icon: @image-url("../../../../bootstrap-icons/icons/zoom-out.svg");
                base-color: tabs[index].background-color;
                base-text-color: tabs[index].foreground-color;

                clicked => {
                    Backend.trigger-tab(section-index, index, TabAction.zoom-out);
                }
            }

            devices-alpha-ta := SliderSceneButton {
                x: parent.width - self.width;
                icon: @image-url("../../../../bootstrap-icons/icons/cpu.svg");
                tooltip: @tr("Devices");
                value: tabs[index].devices-alpha;
                base-color: tabs[index].background-color;
                base-text-color: tabs[index].foreground-color;

                value-changed(value) => {
                    tabs[index].devices-alpha = value;
                }
            }

            solderpaste-alpha-ta := SliderSceneButton {
                x: parent.width - self.width;
                icon: @image-url("../../../../font-awesome/svgs/solid/highlighter.svg");
                tooltip: @tr("Solder Paste");
                value: tabs[index].solderpaste-alpha;
                base-color: tabs[index].background-color;
                base-text-color: tabs[index].foreground-color;

                value-changed(value) => {
                    tabs[index].solderpaste-alpha = value;
                }
            }

            silkscreen-alpha-ta := SliderSceneButton {
                x: parent.width - self.width;
                icon: @image-url("../../../../font-awesome/svgs/solid/font.svg");
                tooltip: @tr("Silkscreen");
                value: tabs[index].silkscreen-alpha;
                base-color: tabs[index].background-color;
                base-text-color: tabs[index].foreground-color;

                value-changed(value) => {
                    tabs[index].silkscreen-alpha = value;
                }
            }

            solderresist-alpha-ta := SliderSceneButton {
                x: parent.width - self.width;
                icon: @image-url("../../../../font-awesome/svgs/solid/fill.svg");
                tooltip: @tr("Solder Resist");
                value: tabs[index].solderresist-alpha;
                base-color: tabs[index].background-color;
                base-text-color: tabs[index].foreground-color;

                value-changed(value) => {
                    tabs[index].solderresist-alpha = value;
                }
            }

            toggle-2d-btn := SceneButton {
                x: parent.width - self.width;
                text: "2D";
                base-color: tabs[index].background-color;
                base-text-color: tabs[index].foreground-color;

                clicked => {
                    Backend.trigger-board(tabs[index].project-index, tabs[index].board-index, BoardAction.open-2d);
                }
            }

            Rectangle {
                height: 5px;
            }

            if tabs[index].refreshing: spinner := Spinner {
                x: toggle-2d-btn.x + (toggle-2d-btn.width - self.width) / 2;
                width: 20px;
                height: self.width;
                foreground-color: tabs[index].foreground-color;
                indeterminate: true;
            }
        }

        pointer-event(event) => {
            if event.kind == PointerEventKind.down {
                Data.set-current-tab(section-index, index);
                if !root.has-focus {
                    root.focus();
                }
            }
            Backend.scene-pointer-event(section-index, self.mouse-x, self.mouse-y, event, 0);
        }

        scroll-event(event) => {
            Backend.scene-scrolled(section-index, self.mouse-x, self.mouse-y, event, 0) ? accept : reject
        }
    }

    focus-gained(reason) => {
        Data.set-current-tab(section-index, index);
    }

    key-released(event) => {
        Backend.scene-key-released(section-index, event) ? accept : reject
    }
}