Sinopec-Anxin/src/app/babylon/tool/babylon-ui-style-tool.ts

import { AbstractMesh, EventState, Scene, setAndStartTimer, Vector2 } from "@babylonjs/core";
import { Button, Container, Control, Ellipse, MultiLine, RadioButton, Rectangle, StackPanel, TextBlock, Vector2WithInfo } from "@babylonjs/gui";
import { ConfigManager } from "../controller/config-manager";
import { SceneManager } from "../controller/scene-manager";
import { UIManager } from "../controller/ui-manager";
import { UIBase } from "../view/window-base/ui-base";
import { MyInputText } from "./babylon-tool";

//babylon UI 风格 工具
export class BabylonUIStyleTool {

    static c_color_blue: string = "#0080FF";//普通蓝色，用于选中、确定等正面风格
    static c_color_gray: string = "#E8ECF1";//普通灰色，用于取消、后退、输入背景等
    static c_color_black: string = "black";//黑色
    static c_color_blueBg: string = "#001121";//深蓝，用于长存界面的背景
    static c_color_white: string = "white";
    static c_color_green = "#439C08";//绿色按钮
    static c_color_greenLight = '#00F424';//亮绿色
    static c_color_red = "#C14242";//红色按钮，用于删除等危险操作

    static c_color_3d_blueLight: string = "#99ECFC";//亮蓝，字
    static c_color_3d_blue: string = "#47E0FF";//蓝， 框体
    static c_color_3d_blueBg: string = "#122F49";//蓝黑，背景

    static c_shadow_blur_button = 2;//按钮的阴影模糊
    static c_shadow_blur_window = 20; //界面的阴影模糊

    static readonly cornerRadius_window1 = 10;//界面圆角
    static readonly cornerRadius_button = 6;//按钮圆角

    static c_zIndex_gizmo = 200;//gizmo界面的z
    static c_zIndex_topBar = 100;//topbar界面的z

    static c_zIndex_buildingIcon = 50;//建筑标志的z
    static c_zIndex_facilityIcon = 40;//设备标志的z


    //#region 组件
    //创建窗口根节点
    static createWindoRoot(window: UIBase, name: string, width: string, height: string, isDialog: boolean) {

        window.root = new Rectangle(name);
        UIManager.Instance.uiRoot.addControl(window.root);
        window.root.width = width;
        window.root.height = height;

        BabylonUIStyleTool.setDefaultStyle_windowRoot(window.root, isDialog);

    }

    //创建文本输入组件
    static createInputText(name: string, parent: Container, width: string, height: string, textColor: string = "black", thickness: number = 0, cornerRadius: number = 6, backgroundColor: string = "#EEF1F5", focuseColor: string = "black", focuseBgColor: string = "#EEF1F5"): MyInputText {
        let result = new MyInputText(name, parent, width, height);

        result.inputText.color = textColor;

        result.inputText.background = backgroundColor;
        result.inputText.thickness = thickness;

        result.inputText.focusedColor = focuseColor;
        result.inputText.focusedBackground = focuseBgColor;

        result.bg.cornerRadius = cornerRadius;
        result.bg.color = backgroundColor;
        result.bg.thickness = thickness;

        return result;

    }

    //创建文本
    static createTextBlock(name: string, text: string, width: string, height: string, fontSize: string): TextBlock {
        let textBlock = new TextBlock(name, text);
        BabylonUIStyleTool.setStyle_size(textBlock, width, height);
        textBlock.fontSize = fontSize;
        textBlock.color = "black";
        return textBlock;

    }

    //创建统一风格的确定按钮
    static createBtn_OK(name: string, text: string, width: string, height: string, fontSize: string): Button {
        let result = BabylonUIStyleTool.createBtn(name, text, width, height, fontSize, "white", BabylonUIStyleTool.c_color_blue);
        BabylonUIStyleTool.setStyle_Shadow(result, undefined, 1.5);
        return result;
    }

    //创建统一风格的取消按钮
    static createBtn_Cancel(name: string, text: string, width: string, height: string, fontSize: string): Button {
        let result = BabylonUIStyleTool.createBtn(name, text, width, height, fontSize, "black", BabylonUIStyleTool.c_color_gray);
        return result
    }

    //创建统一风格的删除按钮
    static createBtn_Delete(name: string, text: string, width: string, height: string, fontSize: string,): Button {
        let result = BabylonUIStyleTool.createBtn(name, text, width, height, fontSize, "white", BabylonUIStyleTool.c_color_red);
        return result;
    }

    //创建按钮
    static createBtn(name: string, text: string, width: string, height: string, fontSize: string, textColor: string = "black", bgColor: string = "white", thickness: number = 0, cornerRadius: number = 6): Button {
        let result = Button.CreateSimpleButton(name, text);
        result.background = bgColor;
        result.color = textColor;
        result.width = width;
        result.height = height;
        result.thickness = thickness;
        result.cornerRadius = cornerRadius;

        result.textBlock.color = textColor;
        result.fontSize = fontSize;
        return result;
    }


    //创建选择框
    static createRadioButton(name: string, parent: Container, group: string, width: string, height: string, color: string, background: string, info?: string, infoWidth?: string, isChecked = false, callback?: (eventData: boolean, eventState: EventState) => void) {
        let root = new StackPanel(name + "Root");
        root.isVertical = false
        root.width = width;
        root.height = height;
        parent.addControl(root);



        let radioButton = new RadioButton(name);
        root.addControl(radioButton);
        radioButton.group = group;
        BabylonUIStyleTool.setStyle_size(radioButton, height, height);
        radioButton.background = background;
        radioButton.color = color;
        if (callback) {
            radioButton.onIsCheckedChangedObservable.add(callback);
        }
        radioButton.isChecked = isChecked;


        let header = new TextBlock(name + "_info", info);
        root.addControl(header);
        header.height = height;
        header.width = width;
        header.color = "black";
        header.textHorizontalAlignment = Control.HORIZONTAL_ALIGNMENT_LEFT;

        return radioButton;
    }

    /**
     * 创建线性指示UI
     * @param key 
     * @param mesh 跟随在此mesh 右侧
     * @param size 外框的大小， 外框的左侧中点为线段起点
     * @param infoSize 信息框的大小， 对齐于外框的右上角
     */
    static createLineInfo(key: string, mesh: AbstractMesh, size: Vector2 = new Vector2(160, 60), infoSize: Vector2 = new Vector2(120, 20)): UI_LineInfo {


        if (size.x < infoSize.x) {
            size.x = infoSize.x;
        }
        if (size.y < infoSize.y) {
            size.y = infoSize.y;
        }

        let lineInfo = new UI_LineInfo(key, mesh, size, infoSize);

        return lineInfo;
    }


    //#endregion


    //#region 风格样式
    //统一设置窗口根节点风格
    static setDefaultStyle_windowRoot(container: Rectangle, isDialog = true, shadow: boolean = true, corner: boolean = true) {

        container.thickness = 0;
        //弹框
        if (isDialog) {
            container.color = BabylonUIStyleTool.c_color_white;
            container.background = BabylonUIStyleTool.c_color_white;
            container.alpha = 1;
            container.zIndex = 100;
        }
        else//长存界面
        {

            container.color = BabylonUIStyleTool.c_color_blueBg;
            container.background = BabylonUIStyleTool.c_color_blueBg;
            container.alpha = 0.8;
            container.zIndex = 1;
        }


        //阴影
        if (shadow) {
            BabylonUIStyleTool.setStyle_Shadow(container, BabylonUIStyleTool.c_color_black, BabylonUIStyleTool.c_shadow_blur_window);
        }
        //圆角
        if (corner) {
            container.cornerRadius = BabylonUIStyleTool.cornerRadius_window1;
        }
    }
    //设置尺寸
    static setStyle_size(control: Control, width: string, height: string) {
        control.width = width;
        control.height = height;
    }

    //设置文本风格
    static setStyle_bodyText(text: TextBlock, fontSize: string = "20px", color: string = "#333333", alpha: number = 1) {
        text.fontSize = fontSize;
        text.color = color;
        text.alpha = alpha;
    }

    //设置对齐方式
    //horizontal: Control.HORIZONTAL_ALIGNMENT_CENTER;Control.HORIZONTAL_ALIGNMENT_LEFT;Control.HORIZONTAL_ALIGNMENT_RIGHT;
    //vertical: Control.VERTICAL_ALIGNMENT_CENTER ; Control.VERTICAL_ALIGNMENT_LEFT;Control.VERTICAL_ALIGNMENT_RIGHT;
    //
    static setStyle_Alignment(control: Control, horizontal: number, vertical: number) {
        control.horizontalAlignment = horizontal;
        control.verticalAlignment = vertical;
    }

    //设置边距
    static setStyle_padding(control: Control, paddingTop?: string, paddingRight?: string, paddingBottom?: string, paddingLeft?: string) {
        if (paddingTop != undefined) {
            control.paddingTop = paddingTop;
        }

        if (paddingRight != undefined) {
            control.paddingRight = paddingRight;
        }
        if (paddingBottom != undefined) {
            control.paddingBottom = paddingBottom;
        }

        if (paddingLeft != undefined) {
            control.paddingLeft = paddingLeft;
        }

    }


    //设置阴影
    static setStyle_Shadow(container: Control, color: string = BabylonUIStyleTool.c_color_black, blur: number = BabylonUIStyleTool.c_shadow_blur_window) {
        container.shadowColor = color;
        container.shadowBlur = blur;

    }
    //#endregion


    //#region 功能封装



    /**
     * 在按钮上增加长按事件
     * @param button 按钮
     * @param scene 所在的场景
     * @param onEnd 正常长按
     * @param onAbort 长按中端
     */
    static addLongPressButtonBehave(button: Button, scene: Scene, onEnd?: () => void, onAbort?: () => void) {
        let pickDown = false;

        let size = ConfigManager.c_size_facilityIconSize;
        let vector2WithInfo: Vector2WithInfo;

        let ellipse: Ellipse;
        button.onPointerUpObservable.add((info) => {
            if (pickDown) {
                pickDown = false;
                ellipse.dispose();
                console.log("onPointerUpObservable");
                vector2WithInfo = info;
            }

        });
        button.onPointerDownObservable.add(() => {
            ellipse = new Ellipse("ellipse");
            ellipse.width = size + "px";
            ellipse.height = size + "px";
            ellipse.color = BabylonUIStyleTool.c_color_blue;
            button.addControl(ellipse);
            console.log("onPointerDownObservable");
            pickDown = true;
            setAndStartTimer({
                timeout: ConfigManager.c_time_longPress,
                contextObservable: scene.onBeforeRenderObservable,
                breakCondition: () => {
                    return pickDown == false;
                },

                onEnded: (data) => {
                    if (onEnd) {
                        onEnd();

                        setTimeout(
                            function () {
                                button.onPointerUpObservable.notifyObservers(vector2WithInfo);
                                //此处存在问题，因为打开了前端页面，导致焦点小时，babylon无法确定鼠标抬起，则下一次的按下操作失效
                            },
                            250);


                    }
                },

                onAborted: () => {
                    if (onAbort) {
                        onAbort();
                    }
                },

                onTick: (data) => {
                    ellipse.thickness = data.completeRate * 0.5 * size * data.completeRate * data.completeRate;
                }
            })
        });
    }

    /**
     * 在按钮上增加双击事件
     * @param button 
     * @param scene 
     * @param onClick 双击的回调
     */
    static addDoubleClickButtonBehave(button: Button, scene: Scene, onClick: () => void) {
        if (BabylonUIStyleTool.s_doubleClickHelper == null) {
            BabylonUIStyleTool.s_doubleClickHelper = new DoubleClickHelper(scene);
        }
        button.onPointerClickObservable.add(
            (eventData: Vector2WithInfo, eventState: EventState) => {
                let buttonID = button.uniqueId.toString();
                if (BabylonUIStyleTool.s_doubleClickHelper.isDoubleClick(buttonID)) {
                    onClick();
                }
                else {
                    BabylonUIStyleTool.s_doubleClickHelper.setClickEvent(buttonID);
                }

            }
        );

    }

    static s_doubleClickHelper: DoubleClickHelper;

    //#endregion
}

/**
 * 双击帮助器
 */
class DoubleClickHelper {
    readonly c_timer: number = 200; //双击的时间间隔 
    scene: Scene;

    timer: number;
    buttonID: string;

    constructor(scene: Scene) {
        this.scene = scene;
        let instance = this;
        this.scene.onBeforeRenderObservable.add(() => {
            instance.update()
        });
    }

    update() {
        if (this.timer > 0) {
            this.timer -= this.scene.deltaTime;
        }

    }

    /**
     * 判断双击
     * @param buttonID 按钮id
     */
    isDoubleClick(buttonID: string) {
        if (this.buttonID == buttonID && this.timer > 0) {
            return true;
        }
        else {
            return false;
        }




    }

    /**
     * 记录点击
     * @param buttonID 
     */
    setClickEvent(buttonID: string) {
        this.buttonID = buttonID;
        this.timer = this.c_timer;
    }


}

//#region 功能类

export class UI_LineInfo {
    key: string;
    mesh: AbstractMesh;

    root: Rectangle;
    root_size: Vector2;

    points: Ellipse[] = [];
    lineLength: number;

    infoBg: Rectangle;
    info: TextBlock;

    line: MultiLine;
    constructor(l_key: string, l_mesh: AbstractMesh, rootSize: Vector2, infoSize: Vector2) {
        this.key = l_key;
        this.mesh = l_mesh;

        this.root = new Rectangle("UI_LineRoot_" + this.key);
        UIManager.Instance.uiRoot.addControl(this.root);
        this.root.thickness = 0;


        this.root_size = rootSize;
        BabylonUIStyleTool.setStyle_size(this.root, rootSize.x + "px", rootSize.y + "px");
        this.root.linkWithMesh(this.mesh);
        this.root.linkOffsetXInPixels = rootSize.x * 0.5;
        // this.root.linkOffsetYInPixels = -40;

        let point_start = new Ellipse("start");
        point_start.width = "5px";
        point_start.height = "5px";
        this.root.addControl(point_start);
        point_start.horizontalAlignment = Control.HORIZONTAL_ALIGNMENT_LEFT;
        point_start.color = BabylonUIStyleTool.c_color_3d_blue;
        point_start.background = BabylonUIStyleTool.c_color_3d_blue;
        point_start.shadowColor = BabylonUIStyleTool.c_color_3d_blue;
        point_start.shadowBlur = 5;
        this.points.push(point_start);

        let point_end = new Ellipse("end");
        point_end.width = "1px";
        point_end.height = "1px";
        this.root.addControl(point_end);
        point_end.horizontalAlignment = Control.HORIZONTAL_ALIGNMENT_LEFT;
        point_end.verticalAlignment = Control.VERTICAL_ALIGNMENT_TOP;
        this.lineLength = 20;
        point_end.left = this.lineLength + "px";
        point_end.topInPixels = infoSize.y * 0.5;
        this.points.push(point_end);


        this.infoBg = new Rectangle("infoBg");
        BabylonUIStyleTool.setStyle_size(this.infoBg, infoSize.x + "px", infoSize.y + "px");
        this.root.addControl(this.infoBg);
        this.infoBg.color = BabylonUIStyleTool.c_color_3d_blue;
        this.infoBg.shadowBlur = 5;
        this.infoBg.shadowColor = BabylonUIStyleTool.c_color_3d_blue;
        this.infoBg.background = BabylonUIStyleTool.c_color_3d_blueBg;
        this.infoBg.alpha = 0.7;
        this.infoBg.horizontalAlignment = Control.HORIZONTAL_ALIGNMENT_RIGHT;
        this.infoBg.verticalAlignment = Control.VERTICAL_ALIGNMENT_TOP;

        this.info = new TextBlock("info", "info")
        this.info.fontSize = 12;
        this.infoBg.addControl(this.info);
        this.info.color = BabylonUIStyleTool.c_color_3d_blueLight;


        let point_infoBgLeft = new Ellipse("infoBgLeft");
        this.infoBg.addControl(point_infoBgLeft);
        BabylonUIStyleTool.setStyle_size(point_infoBgLeft, "1px", "1px");
        point_infoBgLeft.horizontalAlignment = Control.HORIZONTAL_ALIGNMENT_LEFT;
        point_infoBgLeft.leftInPixels = -1

        this.points.push(point_infoBgLeft);


        this.line = new MultiLine("ui_line_" + this.key);

        for (let i = 0; i < this.points.length; i++) {
            this.line.add(this.points[i]);
        }
        // this.line.add(this.mesh);//起点
        // this.line.add(pointL);
        // this.line.add(point);
        this.line.lineWidth = 1.5;
        this.line.color = BabylonUIStyleTool.c_color_3d_blue;
        this.line.alpha = 0.7;
        this.line.shadowColor = BabylonUIStyleTool.c_color_3d_blue;
        this.line.shadowBlur = 5;
        UIManager.Instance.uiRoot.addControl(this.line);


    }

    setEnable(show: boolean) {
        this.root.isVisible = show;
        this.line.isVisible = show;
    }

    dispose() {
        this.root.dispose();

        this.line.dispose();
    }

}

//#endregion