feat(tree,menu,docs): 对接目录树三类数据并中文化文档
This commit is contained in:
yuding
@@ -1,7 +1,3 @@
|
||||
/**
|
||||
* 构件树管理器
|
||||
* 负责管理构件树按钮和构件树对话框
|
||||
*/
|
||||
import type { ButtonGroupColors, ButtonConfig } from '../components/button-group/index.type';
|
||||
import { BaseManager } from '../core/base-manager';
|
||||
import { BimButtonGroup } from '../components/button-group';
|
||||
@@ -11,76 +7,37 @@ 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）' }
|
||||
]
|
||||
}
|
||||
]
|
||||
}
|
||||
];
|
||||
function transformTreeData(apiData: any[]): TreeNodeConfig[] {
|
||||
if (!apiData || apiData.length === 0) return [];
|
||||
|
||||
return apiData.map((model, modelIndex) => {
|
||||
const transformNode = (node: any, index: number): TreeNodeConfig => {
|
||||
const hasChildren = node.children && node.children.length > 0;
|
||||
return {
|
||||
id: node.id || `node-${modelIndex}-${index}`,
|
||||
label: node.name || node.label || '未命名',
|
||||
expanded: false,
|
||||
clickAction: hasChildren ? 'expand' : 'select',
|
||||
children: hasChildren
|
||||
? node.children.map((child: any, childIndex: number) => transformNode(child, childIndex))
|
||||
: undefined,
|
||||
data: node
|
||||
};
|
||||
};
|
||||
|
||||
const hasChildren = model.children && model.children.length > 0;
|
||||
return {
|
||||
id: `model-${modelIndex}`,
|
||||
label: model.name || '模型',
|
||||
expanded: true,
|
||||
clickAction: 'expand',
|
||||
children: hasChildren
|
||||
? model.children.map((child: any, childIndex: number) => transformNode(child, childIndex))
|
||||
: undefined
|
||||
};
|
||||
});
|
||||
}
|
||||
|
||||
/**
|
||||
* 构件树管理器
|
||||
* 管理左上角的构件树按钮和对话框
|
||||
*/
|
||||
export class ConstructTreeManagerBtn extends BaseManager {
|
||||
/** 按钮组实例 */
|
||||
private toolbar: BimButtonGroup | null = null;
|
||||
@@ -125,41 +82,54 @@ export class ConstructTreeManagerBtn extends BaseManager {
|
||||
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 levelTreeData = this.registry.engine3d?.getLevelTreeData() ?? [];
|
||||
const typeTreeData = this.registry.engine3d?.getTypeTreeData() ?? [];
|
||||
const majorTreeData = this.registry.engine3d?.getMajorTreeData() ?? [];
|
||||
|
||||
const systemPlaceholder = document.createElement('div');
|
||||
systemPlaceholder.className = 'construct-tab__panel-content';
|
||||
const spacePlaceholder = document.createElement('div');
|
||||
spacePlaceholder.className = 'construct-tab__panel-content';
|
||||
console.log('[ConstructTree] 构件树数据 (Level):', levelTreeData);
|
||||
console.log('[ConstructTree] 类型树数据 (Type):', typeTreeData);
|
||||
console.log('[ConstructTree] 专业树数据 (Major):', majorTreeData);
|
||||
|
||||
const createTree = (data: any[]) => {
|
||||
const tree = new BimTree({
|
||||
data: transformTreeData(data),
|
||||
checkable: true,
|
||||
indent: 0,
|
||||
enableSearch: true,
|
||||
checkStrictly: true,
|
||||
defaultExpandAll: true,
|
||||
onNodeCheck: (node) => {
|
||||
console.log('onNodeCheck', node);
|
||||
},
|
||||
onNodeSelect: (node) => {
|
||||
console.log('onNodeSelect', node);
|
||||
},
|
||||
onNodeExpand: () => {
|
||||
this.dialog?.fitWidth();
|
||||
},
|
||||
});
|
||||
tree.init();
|
||||
return tree;
|
||||
};
|
||||
|
||||
const componentTree = createTree(levelTreeData);
|
||||
const typeTree = createTree(typeTreeData);
|
||||
const majorTree = createTree(majorTreeData);
|
||||
|
||||
const componentPanel = document.createElement('div');
|
||||
componentPanel.className = 'construct-tab__panel-content';
|
||||
componentPanel.appendChild(tree.element);
|
||||
componentPanel.appendChild(componentTree.element);
|
||||
|
||||
const typePanel = document.createElement('div');
|
||||
typePanel.className = 'construct-tab__panel-content';
|
||||
typePanel.appendChild(typeTree.element);
|
||||
|
||||
const majorPanel = document.createElement('div');
|
||||
majorPanel.className = 'construct-tab__panel-content';
|
||||
majorPanel.appendChild(majorTree.element);
|
||||
|
||||
const tabMount = document.createElement('div');
|
||||
tabMount.className = 'construct-tab__container';
|
||||
@@ -169,8 +139,8 @@ export class ConstructTreeManagerBtn extends BaseManager {
|
||||
container: tabMount,
|
||||
tabs: [
|
||||
{ id: 'component', title: 'tab.component', content: componentPanel },
|
||||
{ id: 'system', title: 'tab.system', content: systemPlaceholder },
|
||||
{ id: 'space', title: 'tab.space', content: spacePlaceholder },
|
||||
{ id: 'type', title: 'tab.type', content: typePanel },
|
||||
{ id: 'major', title: 'tab.major', content: majorPanel },
|
||||
],
|
||||
activeId: 'component',
|
||||
onChange: () => {
|
||||
@@ -188,7 +158,9 @@ export class ConstructTreeManagerBtn extends BaseManager {
|
||||
resizable: false,
|
||||
onClose: () => {
|
||||
tab.destroy();
|
||||
tree.destroy();
|
||||
componentTree.destroy();
|
||||
typeTree.destroy();
|
||||
majorTree.destroy();
|
||||
this.setVisible(true);
|
||||
}
|
||||
});
|
||||
|
||||
Reference in New Issue
Block a user