LibrePCB

import { ToolTip } from "tooltip.slint";

export enum SceneButtonStyle {
    button,
    checkbox,
    uncheckbox,
}

export component SceneButton inherits Rectangle {
    in property <string> text;
    in property <image> icon;
    in property <float> icon-scale: 1.0;
    in property <string> tooltip;
    in property <color> base-color: white;
    in property <color> base-text-color: black;
    in property <length> font-size: 13px;
    in property <SceneButtonStyle> style: button;
    in-out property <bool> checked: false;
    in property <bool> enabled: true;
    property <color> current-base-text-color: enabled ? base-text-color : base-text-color.with-alpha(0.7);
    property <bool> draw-circle: ((style == SceneButtonStyle.checkbox) && (!checked)) || (style == SceneButtonStyle.uncheckbox);
    property <color> circle-color: ((style == SceneButtonStyle.uncheckbox) && checked) ? red : current-base-text-color;

    callback clicked;
    clicked => {
        if (style == SceneButtonStyle.checkbox) || (style == SceneButtonStyle.uncheckbox) {
            checked = !checked;
        }
    }

    width: 30px;
    height: self.width;

    // Accessibility
    accessible-role: button;
    accessible-checkable: (style == SceneButtonStyle.checkbox) || (style == SceneButtonStyle.uncheckbox);
    accessible-checked: checked;
    accessible-label: text + " " + tooltip;
    accessible-action-default => {
        ta.clicked();
    }

    Rectangle {
        width: parent.width * ((style != SceneButtonStyle.button) ? 0.8 : (ta.has-hover ? 1.0 : 0.85));
        height: self.width;
        background: ((style == SceneButtonStyle.checkbox) && checked) ? current-base-text-color : base-color;
        border-radius: self.height / 2;
        border-color: circle-color;
        border-width: draw-circle ? 1px : 0;

        animate width { duration: 75ms; }

        if !text.is-empty: Text {
            width: parent.width;
            height: self.width;
            vertical-alignment: center;
            horizontal-alignment: center;
            color: ((style == SceneButtonStyle.checkbox) && checked) ? base-color : current-base-text-color;
            font-size: font-size * (((style == SceneButtonStyle.button) && ta.has-hover) ? 1.3 : 1);
            text: text;
            accessible-role: none;

            animate font-size { duration: 75ms; }
        }

        if text.is-empty: Image {
            width: parent.width * icon-scale * 0.8;
            height: self.width;
            image-fit: ImageFit.fill;
            source: icon;
            colorize: ((style == SceneButtonStyle.checkbox) && checked) ? base-color : current-base-text-color;
            accessible-role: none;
        }

        if (style == SceneButtonStyle.uncheckbox) && checked: Rectangle {
            width: 80%;
            height: self.width;

            Path {
                stroke: circle-color;
                stroke-width: 3px;
                commands: "M -100 -100 L 100 100";
            }
        }

        ta := TouchArea {
            mouse-cursor: pointer;
            enabled: enabled;

            clicked => {
                root.clicked();
            }
        }

        if ta.has-hover && (!ta.pressed) && (!tooltip.is-empty): tt := ToolTip {
            x: -self.width - 5px;
            y: (parent.height - self.height) / 2;
            text: tooltip;
        }
    }
}