/**
* 构件树管理器
* 负责管理构件树按钮和构件树对话框
*/
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: '',
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 '';
},
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);
}
}