bim_engine/src/managers/toolbar-manager.ts

/**
 * 工具栏管理器
 * 负责管理底部工具栏的创建、按钮配置和显示控制
 */
import type { ButtonGroupColors, ButtonConfig } from '../components/button-group/index.type';
import { Toolbar } from '../components/button-group/toolbar';
import type { ThemeConfig } from '../themes/types';
import { BaseManager } from '../core/base-manager';

/**
 * 工具栏管理器
 * 提供工具栏按钮的添加、显示/隐藏、主题更新等功能
 */
export class ToolbarManager extends BaseManager {
    /** 工具栏实例 */
    private toolbar: Toolbar | null = null;
    /** 工具栏容器元素 */
    private toolbarContainer: HTMLElement | null = null;
    /** 主容器元素 */
    private container: HTMLElement;

    constructor(container: HTMLElement) {
        super();
        this.container = container;
        this.init();
    }

    /** 初始化工具栏 */
    private init() {
        this.toolbarContainer = document.createElement('div');
        this.toolbarContainer.id = 'opt-btn-groups';
        this.toolbarContainer.className = 'bim-engine-opt-btn-container is-bottom-toolbar';
        this.container.appendChild(this.toolbarContainer);

        this.toolbar = new Toolbar({
            container: this.toolbarContainer,
            type: 'glass-pill',
            showLabel: true,
            direction: 'row',
            position: 'bottom-right',
            align: 'vertical',
            expand: 'up'
        });

        this.toolbar.init();
    }

    /**
     * 更新工具栏主题
     * @param theme 主题配置
     */
    public updateTheme(theme: ThemeConfig) {
        this.toolbar?.setTheme(theme);
    }

    /** 刷新工具栏渲染 */
    public refresh() {
        this.toolbar?.render();
    }

    /** 销毁工具栏 */
    public destroy() {
        this.toolbar?.destroy();
        this.toolbar = null;
        super.destroy();
    }

    /**
     * 添加按钮组
     * @param groupId 组 ID
     * @param beforeGroupId 插入到指定组之前
     */
    public addGroup(groupId: string, beforeGroupId?: string) {
        this.toolbar?.addGroup(groupId, beforeGroupId);
        this.toolbar?.render();
    }

    /**
     * 添加按钮
     * @param config 按钮配置
     */
    public addButton(config: ButtonConfig) {
        this.toolbar?.addButton(config);
        this.toolbar?.render();
    }

    /**
     * 设置按钮可见性
     * @param id 按钮 ID
     * @param v 是否可见
     */
    public setButtonVisibility(id: string, v: boolean) {
        this.toolbar?.updateButtonVisibility(id, v);
    }

    /**
     * 设置是否显示标签
     * @param show 是否显示
     */
    public setShowLabel(show: boolean) {
        this.toolbar?.setShowLabel(show);
    }

    /**
     * 设置按钮激活状态
     * @param id 按钮 ID
     * @param active 是否激活
     */
    public setBtnActive(id: string, active?: boolean) {
        this.toolbar?.setBtnActive(id, active);
    }

    /**
     * 设置工具栏可见性
     * @param visible 是否可见
     */
    public setVisible(visible: boolean) {
        if (this.toolbarContainer) {
            this.toolbarContainer.style.visibility = visible ? 'visible' : 'hidden';
        }
    }

    /**
     * 设置背景颜色
     * @param color 颜色值
     */
    public setBackgroundColor(color: string) {
        this.toolbar?.setBackgroundColor(color);
    }

    /**
     * 设置按钮组颜色
     * @param colors 颜色配置
     */
    public setColors(colors: ButtonGroupColors) {
        this.toolbar?.setColors(colors);
    }

    /** 隐藏工具栏 */
    public hide(): void {
        if (this.toolbarContainer) {
            this.toolbarContainer.style.display = 'none';
        }
    }

    /** 显示工具栏 */
    public show(): void {
        if (this.toolbarContainer) {
            this.toolbarContainer.style.display = '';
        }
    }

    /**
     * 获取工具栏容器
     * @returns 容器元素
     */
    public getContainer(): HTMLElement | null {
        return this.toolbarContainer;
    }
}