feat(tree): implement tree component with checkbox support and manager pattern
- Added core Tree component (BimTree, BimTreeNode) - Added TreeManager for lifecycle management - Added ModelTreeManager for business logic encapsulation (Tree + Dialog) - Integrated into BimEngine and updated demos - Added internationalization support
This commit is contained in:
76
src/managers/model-tree-manager.ts
Normal file
76
src/managers/model-tree-manager.ts
Normal file
@@ -0,0 +1,76 @@
|
||||
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 实例由它们各自的生命周期管理
|
||||
// 这里不需要销毁它们,除非我们持有了全局引用
|
||||
}
|
||||
}
|
||||
57
src/managers/tree-manager.ts
Normal file
57
src/managers/tree-manager.ts
Normal file
@@ -0,0 +1,57 @@
|
||||
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