bim_engine/src/managers/construct-tree-manager-btn.ts

/**
 * 构件树管理器
 * 负责管理构件树按钮和构件树对话框
 */
import type { ButtonGroupColors, ButtonConfig } from '../components/button-group/index.type';
import { BaseManager } from '../core/base-manager';
import { BimButtonGroup } from '../components/button-group';
import { BimTree } from '../components/tree';
import { TreeNodeConfig } from '../components/tree/types';
import { BimDialog } from '../components/dialog';
import { BimTab } from '../components/tab';
import { getIcon } from '../utils/icon-manager';

/** 模拟的构件树数据 */
const MOCK_STRUCT_DATA: TreeNodeConfig[] = [
    {
        id: 'root',
        label: '全部构件',
        expanded: true,
        clickAction: 'expand',
        children: [
            {
                id: 'level-1',
                label: '一层',
                expanded: false,
                icon: '<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 24 24"><path fill="currentColor" d="M20.73 16.52V7.59a.7.7 0 0 0-.08-.33a.74.74 0 0 0-.36-.36l-8-3.58a.75.75 0 0 0-.62 0l-8 3.58a.8.8 0 0 0-.44.69v8.82a.83.83 0 0 0 .44.69l8 3.58a.72.72 0 0 0 .62 0l8-3.58a.77.77 0 0 0 .44-.58m-16-7.78l6.5 2.92v7.18l-6.5-2.91Zm8 2.92l6.5-2.92v7.19l-6.5 2.91ZM12 4.82l6.17 2.77L12 10.35L5.83 7.59Z"/></svg>',
                clickAction: 'expand',
                children: [
                    { id: 'l1-wall', label: '墙体（128）' },
                    { id: 'l1-column', label: '柱（46）' },
                    { id: 'l1-beam', label: '梁（82）' },
                    { id: 'l1-slab', label: '楼板（12）' },
                    { id: 'l1-door', label: '门（24）' },
                    { id: 'l1-window', label: '窗（36）' }
                ]
            },
            {
                id: 'level-2',
                label: '二层',
                expanded: false,
                clickAction: 'expand',
                children: [
                    { id: 'l2-wall', label: '墙体（141）' },
                    { id: 'l2-column', label: '柱（52）' },
                    { id: 'l2-beam', label: '梁（90）' },
                    { id: 'l2-slab', label: '楼板（12）' },
                    { id: 'l2-door', label: '门（18）' },
                    { id: 'l2-window', label: '窗（40）' }
                ]
            },
            {
                id: 'level-3',
                label: '三层',
                expanded: false,
                clickAction: 'expand',
                children: [
                    { id: 'l3-wall', label: '墙体（136）' },
                    { id: 'l3-column', label: '柱（48）' },
                    { id: 'l3-beam', label: '梁（88）' },
                    { id: 'l3-slab', label: '楼板（12）' },
                    { id: 'l3-door', label: '门（16）' },
                    { id: 'l3-window', label: '窗（38）' }
                ]
            },
            {
                id: 'level-roof',
                label: '屋面层',
                expanded: false,
                clickAction: 'expand',
                children: [
                    { id: 'rf-slab', label: '屋面板（6）' },
                    { id: 'rf-beam', label: '屋面梁（24）' },
                    { id: 'rf-parapet', label: '女儿墙（18）' }
                ]
            }
        ]
    }
];

/**
 * 构件树管理器
 * 管理左上角的构件树按钮和对话框
 */
export class ConstructTreeManagerBtn extends BaseManager {
    /** 按钮组实例 */
    private toolbar: BimButtonGroup | null = null;
    /** 按钮容器元素 */
    private toolbarContainer: HTMLElement | null = null;
    /** 主容器元素 */
    private container: HTMLElement;
    /** 构件树对话框实例 */
    private dialog: BimDialog | null = null;

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

    /** 初始化按钮 */
    private init() {
        this.toolbarContainer = document.createElement('div');
        this.toolbarContainer.id = 'bim-construct-tree';
        this.container.appendChild(this.toolbarContainer);
        this.toolbar = new BimButtonGroup({
            container: this.toolbarContainer,
            showLabel: false,
            direction: 'column',
            position: 'top-left',
            align: 'vertical',
            expand: 'up'
        });
        this.toolbar.init();
        this.toolbar.addGroup('construct-tree');
        this.toolbar.addButton({
            id: 'construct-tree-btn',
            groupId: 'construct-tree',
            type: 'button',
            label: 'construct-tree',
            icon: getIcon('目录树'),
            onClick: () => {
                this.openConstructTreeDialog();
            }
        });
        this.toolbar.render();
    }

    /** 打开构件树对话框 */
    public openConstructTreeDialog() {
        this.setVisible(false);

        const tree = new BimTree({
            data: MOCK_STRUCT_DATA,
            checkable: true,
            indent: 0,
            enableSearch: true,
            checkStrictly: true,
            defaultExpandAll: true,
            renderActions: (_node) => {
                return '<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 24 24"><path fill="none" stroke="currentColor" stroke-linejoin="round" stroke-miterlimit="10" stroke-width="1.5" d="m14.828 6.343l2.829 2.829m1.414-1.415L8.464 18.364l-3.535.707l.707-3.536L16.243 4.93a2 2 0 0 1 2.828 2.828Z"/></svg>';
            },
            onNodeCheck: (node) => {
                console.log('onNodeCheck', node);
            },
            onNodeSelect: (node) => {
                console.log('onNodeSelect', node);
            },
            onNodeExpand: (node) => {
                console.log('onNodeExpand', node);
                this.dialog?.fitWidth();
            },
        });
        tree.init();

        const systemPlaceholder = document.createElement('div');
        systemPlaceholder.className = 'construct-tab__panel-content';
        const spacePlaceholder = document.createElement('div');
        spacePlaceholder.className = 'construct-tab__panel-content';

        const componentPanel = document.createElement('div');
        componentPanel.className = 'construct-tab__panel-content';
        componentPanel.appendChild(tree.element);

        const tabMount = document.createElement('div');
        tabMount.className = 'construct-tab__container';
        tabMount.style.height = '100%';
        tabMount.style.overflow = 'hidden';
        const tab = new BimTab({
            container: tabMount,
            tabs: [
                { id: 'component', title: 'tab.component', content: componentPanel },
                { id: 'system', title: 'tab.system', content: systemPlaceholder },
                { id: 'space', title: 'tab.space', content: spacePlaceholder },
            ],
            activeId: 'component',
            onChange: () => {
                this.dialog?.fitWidth();
            }
        });
        tab.init();

        this.dialog = this.registry.dialog!.create({
            title: 'constructTree.title',
            minWidth: 320,
            height: 420,
            content: tabMount,
            position: { x: 20, y: 20 },
            resizable: false,
            onClose: () => {
                tab.destroy();
                tree.destroy();
                this.setVisible(true);
            }
        });
        this.dialog?.fitWidth();
    }

    /** 刷新渲染 */
    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 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);
    }
}