添加测试信息
This commit is contained in:
yuding
200
src/managers/construct-tree-manager-btn.ts
Normal file
200
src/managers/construct-tree-manager-btn.ts
Normal file
@@ -0,0 +1,200 @@
|
||||
import type {ButtonGroupColors, ButtonConfig} from '../components/button-group/index.type';
|
||||
import {Toolbar} from '../components/button-group/toolbar';
|
||||
import {BimComponent} from '../core/component';
|
||||
import type {BimEngine} from '../bim-engine';
|
||||
import {BimButtonGroup} from "../components/button-group";
|
||||
import {BimTree} from "../components/tree";
|
||||
import {TreeNodeConfig} from "../components/tree/types.ts";
|
||||
import {BimDialog} from "../components/dialog";
|
||||
|
||||
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）' }
|
||||
]
|
||||
}
|
||||
]
|
||||
}
|
||||
];
|
||||
|
||||
/**
|
||||
* 底部工具栏管理器 (ToolbarManager)
|
||||
* 仅负责管理底部工具栏实例。
|
||||
*/
|
||||
export class ConstructTreeManagerBtn extends BimComponent {
|
||||
private toolbar: Toolbar | null = null;
|
||||
private toolbarContainer: HTMLElement | null = null;
|
||||
private container: HTMLElement;
|
||||
private dialog: BimDialog | null = null;
|
||||
|
||||
constructor(engine: BimEngine, container: HTMLElement) {
|
||||
super(engine);
|
||||
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.setEngine(this.engine);
|
||||
this.toolbar.addGroup('construct-tree');
|
||||
this.toolbar.addButton({
|
||||
id: 'construct-tree-btn',
|
||||
groupId: 'construct-tree',
|
||||
type: 'button',
|
||||
label: 'construct-tree',
|
||||
icon: '<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 24 24"><path fill="currentColor" d="M15 21v-3h-4V8H9v3H2V3h7v3h6V3h7v8h-7V8h-2v8h2v-3h7v8zM4 5v4zm13 10v4zm0-10v4zm0 4h3V5h-3zm0 10h3v-4h-3zM4 9h3V5H4z"/></svg>',
|
||||
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();
|
||||
this.dialog = this.engine.dialog!.create({
|
||||
title: 'constructTree.title',
|
||||
minWidth: 300,
|
||||
height: 400,
|
||||
content: tree.element,
|
||||
position: {x: 20, y: 20},
|
||||
resizable: false,
|
||||
// 关键：绑定生命周期
|
||||
onClose: () => {
|
||||
this.setVisible(true)
|
||||
}
|
||||
});
|
||||
this.dialog?.fitWidth()
|
||||
}
|
||||
|
||||
public refresh() {
|
||||
this.toolbar?.render();
|
||||
}
|
||||
|
||||
public destroy() {
|
||||
this.toolbar?.destroy();
|
||||
this.toolbar = null;
|
||||
}
|
||||
|
||||
// --- 转发 API ---
|
||||
public addGroup(groupId: string, beforeGroupId?: string) {
|
||||
this.toolbar?.addGroup(groupId, beforeGroupId);
|
||||
this.toolbar?.render();
|
||||
}
|
||||
|
||||
public addButton(config: ButtonConfig) {
|
||||
this.toolbar?.addButton(config);
|
||||
this.toolbar?.render();
|
||||
}
|
||||
|
||||
public setButtonVisibility(id: string, v: boolean) {
|
||||
this.toolbar?.updateButtonVisibility(id, v);
|
||||
}
|
||||
|
||||
public setShowLabel(show: boolean) {
|
||||
this.toolbar?.setShowLabel(show);
|
||||
}
|
||||
|
||||
public setVisible(visible: boolean) {
|
||||
if (this.toolbarContainer) {
|
||||
this.toolbarContainer.style.visibility = visible ? 'visible' : 'hidden';
|
||||
}
|
||||
}
|
||||
|
||||
public setBackgroundColor(color: string) {
|
||||
this.toolbar?.setBackgroundColor(color);
|
||||
}
|
||||
|
||||
public setColors(colors: ButtonGroupColors) {
|
||||
this.toolbar?.setColors(colors);
|
||||
}
|
||||
}
|
||||
@@ -1,76 +0,0 @@
|
||||
import { BimComponent } from '../core/component';
|
||||
import { BimTree } from '../components/tree/index';
|
||||
import { BimDialog } from '../components/dialog/index';
|
||||
import { TreeNodeConfig } from '../components/tree/types';
|
||||
|
||||
/**
|
||||
* 模型树业务管理器
|
||||
* 负责组装 Tree 和 Dialog 组件，提供开箱即用的业务弹窗
|
||||
*/
|
||||
export class ModelTreeManager extends BimComponent {
|
||||
|
||||
/**
|
||||
* 显示带复选框的模型结构树弹窗
|
||||
* @param data 树节点数据
|
||||
* @param title 弹窗标题 (翻译键)
|
||||
*/
|
||||
public showStructTree(data: TreeNodeConfig[], title: string = 'tree.modelStruct'): { tree: BimTree, dialog: BimDialog } {
|
||||
// 1. 创建 Tree 实例
|
||||
const tree = this.engine.tree!.create({
|
||||
data: data,
|
||||
checkable: true,
|
||||
checkStrictly: true,
|
||||
defaultExpandAll: true
|
||||
});
|
||||
|
||||
// 2. 创建 Dialog 实例
|
||||
const dialog = this.engine.dialog!.create({
|
||||
title: title,
|
||||
width: 300,
|
||||
height: 400,
|
||||
content: tree.element,
|
||||
position: 'left-center',
|
||||
resizable: true,
|
||||
// 关键：绑定生命周期
|
||||
onClose: () => {
|
||||
tree.destroy();
|
||||
}
|
||||
});
|
||||
|
||||
return { tree, dialog };
|
||||
}
|
||||
|
||||
/**
|
||||
* 显示简单的树形弹窗 (无复选框)
|
||||
* @param data 树节点数据
|
||||
* @param title 弹窗标题 (翻译键)
|
||||
*/
|
||||
public showSimpleTree(data: TreeNodeConfig[], title: string = 'menu.home'): { tree: BimTree, dialog: BimDialog } {
|
||||
// 1. 创建 Tree 实例
|
||||
const tree = this.engine.tree!.create({
|
||||
data: data,
|
||||
checkable: false,
|
||||
defaultExpandAll: true
|
||||
});
|
||||
|
||||
// 2. 创建 Dialog 实例
|
||||
const dialog = this.engine.dialog!.create({
|
||||
title: title,
|
||||
width: 250,
|
||||
height: 300,
|
||||
content: tree.element,
|
||||
position: 'center',
|
||||
resizable: true,
|
||||
onClose: () => {
|
||||
tree.destroy();
|
||||
}
|
||||
});
|
||||
|
||||
return { tree, dialog };
|
||||
}
|
||||
|
||||
public destroy(): void {
|
||||
// 具体的 Tree 和 Dialog 实例由它们各自的生命周期管理
|
||||
// 这里不需要销毁它们，除非我们持有了全局引用
|
||||
}
|
||||
}
|
||||
@@ -1,57 +0,0 @@
|
||||
import { BimComponent } from '../core/component';
|
||||
import { BimTree } from '../components/tree/index';
|
||||
import { TreeOptions } from '../components/tree/types';
|
||||
import type { BimEngine } from '../bim-engine';
|
||||
|
||||
/**
|
||||
* 树组件管理器
|
||||
* 负责创建和管理 BimTree 实例
|
||||
*/
|
||||
export class TreeManager extends BimComponent {
|
||||
|
||||
// eslint-disable-next-line @typescript-eslint/no-unused-vars
|
||||
constructor(engine: BimEngine, _container: HTMLElement) {
|
||||
super(engine);
|
||||
}
|
||||
|
||||
/**
|
||||
* 创建一个新的树组件实例
|
||||
* @param options 配置选项
|
||||
*/
|
||||
public create(options: TreeOptions): BimTree {
|
||||
const tree = new BimTree(options);
|
||||
|
||||
// 绑定事件桥接
|
||||
tree.onNodeCheck = (node) => {
|
||||
this.emit('ui:tree-node-check', {
|
||||
id: node.config.id,
|
||||
checked: node.config.checked || false,
|
||||
node: node.config
|
||||
});
|
||||
};
|
||||
|
||||
tree.onNodeSelect = (node) => {
|
||||
this.emit('ui:tree-node-select', {
|
||||
id: node.config.id,
|
||||
selected: true,
|
||||
node: node.config
|
||||
});
|
||||
};
|
||||
|
||||
tree.onNodeExpand = (node) => {
|
||||
this.emit('ui:tree-node-expand', {
|
||||
id: node.config.id,
|
||||
expanded: node.config.expanded || false
|
||||
});
|
||||
};
|
||||
|
||||
tree.init();
|
||||
return tree;
|
||||
}
|
||||
|
||||
public destroy(): void {
|
||||
// TreeManager 本身不持有 Tree 实例的强引用列表
|
||||
// 实例通常由调用者（如 Dialog）持有并销毁
|
||||
// 这里可以做一些全局清理工作
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user