feat(tree,menu,docs): 对接目录树三类数据并中文化文档
This commit is contained in:
@@ -19,7 +19,7 @@
|
||||
background-color: var(--bim-component-bg);
|
||||
padding-left: 12px;
|
||||
padding-right: 0;
|
||||
border-bottom: 1px solid var(--bim-border-strong);
|
||||
border-bottom: 1px solid var(--bim-border-default);
|
||||
}
|
||||
|
||||
.bim-collapse.is-ghost .bim-collapse-header:hover {
|
||||
|
||||
@@ -4,6 +4,7 @@ import { themeManager } from '../../services/theme';
|
||||
import type { EngineOptions, ModelLoadOptions } from './types';
|
||||
import type { MeasureMode } from '../../types/measure';
|
||||
import type { SectionBoxRange } from '../section-box-panel/types';
|
||||
import { ManagerRegistry } from '../../core/manager-registry';
|
||||
// 导入第三方 SDK 的 createEngine 函数(从 npm 包引入)
|
||||
// import { createEngine as createEngineSDK } from 'iflow-engine-base';
|
||||
import { createEngine as createEngineSDK } from '../../../../bim_engine_base/dist/bim-engine-sdk.es';
|
||||
@@ -128,15 +129,18 @@ export class Engine implements IBimComponent {
|
||||
|
||||
// 监听构件点击事件
|
||||
this.engine.events.on('click', (hit: any) => {
|
||||
const registry = ManagerRegistry.getInstance();
|
||||
if (hit && hit.object) {
|
||||
this.selectedComponent = {
|
||||
url: hit.object.url,
|
||||
id: hit.object.name
|
||||
};
|
||||
console.log('[Engine] 构件选中:', this.selectedComponent);
|
||||
registry.emit('component:selected', this.selectedComponent);
|
||||
} else {
|
||||
this.selectedComponent = null;
|
||||
console.log('[Engine] 取消选中');
|
||||
registry.emit('component:deselected', {});
|
||||
}
|
||||
});
|
||||
} catch (error) {
|
||||
@@ -735,6 +739,31 @@ export class Engine implements IBimComponent {
|
||||
|
||||
// ==================== 结束:构件选中 ====================
|
||||
|
||||
// ==================== 模型树 ====================
|
||||
|
||||
public getTypeTreeData(): any[] {
|
||||
if (!this._isInitialized || !this.engine?.modelTree) {
|
||||
return [];
|
||||
}
|
||||
return this.engine.modelTree.getTypeTreeData();
|
||||
}
|
||||
|
||||
public getLevelTreeData(): any[] {
|
||||
if (!this._isInitialized || !this.engine?.modelTree) {
|
||||
return [];
|
||||
}
|
||||
return this.engine.modelTree.getLevelTreeData();
|
||||
}
|
||||
|
||||
public getMajorTreeData(): any[] {
|
||||
if (!this._isInitialized || !this.engine?.modelTree) {
|
||||
return [];
|
||||
}
|
||||
return this.engine.modelTree.getMajorTreeData();
|
||||
}
|
||||
|
||||
// ==================== 结束:模型树 ====================
|
||||
|
||||
/** 激活框选放大功能 */
|
||||
public activateZoomBox(): void {
|
||||
if (!this._isInitialized || !this.engine) {
|
||||
|
||||
@@ -7,7 +7,6 @@
|
||||
padding: 6px;
|
||||
margin: 0;
|
||||
list-style: none;
|
||||
min-width: 160px;
|
||||
box-shadow: var(--bim-shadow-lg);
|
||||
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
|
||||
user-select: none;
|
||||
@@ -38,8 +37,7 @@
|
||||
}
|
||||
|
||||
.bim-menu-item:hover {
|
||||
background-color: var(--bim-floating-btn-bg);
|
||||
transform: translateX(2px);
|
||||
background-color: var(--bim-component-bg-hover);
|
||||
}
|
||||
|
||||
.bim-menu-item.disabled {
|
||||
@@ -49,6 +47,10 @@
|
||||
}
|
||||
|
||||
.bim-menu-item-icon {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.bim-menu.has-icons .bim-menu-item-icon {
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
margin-right: 8px;
|
||||
|
||||
@@ -93,14 +93,23 @@ export class BimMenu implements IBimComponent {
|
||||
return this.element;
|
||||
}
|
||||
|
||||
/**
|
||||
* 核心渲染逻辑
|
||||
* 处理分组、排序和 DOM 生成
|
||||
*/
|
||||
private hasAnyIcon(items: MenuItemConfig[]): boolean {
|
||||
return items.some(item => {
|
||||
if (item.icon) return true;
|
||||
if (item.children) return this.hasAnyIcon(item.children);
|
||||
return false;
|
||||
});
|
||||
}
|
||||
|
||||
private render(): void {
|
||||
const { items, groupOrder } = this.options;
|
||||
|
||||
// 1. 数据分桶:按 group 字段将菜单项分组
|
||||
if (this.hasAnyIcon(items)) {
|
||||
this.element.classList.add('has-icons');
|
||||
} else {
|
||||
this.element.classList.remove('has-icons');
|
||||
}
|
||||
|
||||
const groups = new Map<string, MenuItemConfig[]>();
|
||||
const defaultGroup = 'default';
|
||||
|
||||
@@ -112,25 +121,19 @@ export class BimMenu implements IBimComponent {
|
||||
groups.get(groupName)!.push(item);
|
||||
});
|
||||
|
||||
// 2. 确定分组顺序
|
||||
let sortedGroupKeys: string[] = [];
|
||||
if (groupOrder) {
|
||||
// 优先按照 groupOrder 指定的顺序排序
|
||||
sortedGroupKeys = groupOrder.filter(g => groups.has(g));
|
||||
// 将未在 groupOrder 中定义的组追加到最后
|
||||
for (const key of groups.keys()) {
|
||||
if (!sortedGroupKeys.includes(key)) {
|
||||
sortedGroupKeys.push(key);
|
||||
}
|
||||
}
|
||||
} else {
|
||||
// 如果未指定顺序,则按默认遍历顺序
|
||||
sortedGroupKeys = Array.from(groups.keys());
|
||||
}
|
||||
|
||||
// 3. 渲染分组和组内项
|
||||
sortedGroupKeys.forEach((groupName, index) => {
|
||||
// 除了第一组外,每组之前插入分割线
|
||||
if (index > 0) {
|
||||
const divider = document.createElement('li');
|
||||
divider.className = 'bim-menu-divider';
|
||||
@@ -138,13 +141,16 @@ export class BimMenu implements IBimComponent {
|
||||
}
|
||||
|
||||
const groupItems = groups.get(groupName)!;
|
||||
// 组内排序:根据 item.order 升序排列
|
||||
groupItems.sort((a, b) => (a.order || 0) - (b.order || 0));
|
||||
|
||||
groupItems.forEach(item => {
|
||||
// 仅渲染可见的项
|
||||
if (item.visible !== false) {
|
||||
this.element.appendChild(this.createItemElement(item));
|
||||
if (item.divider) {
|
||||
const divider = document.createElement('li');
|
||||
divider.className = 'bim-menu-divider';
|
||||
this.element.appendChild(divider);
|
||||
}
|
||||
}
|
||||
});
|
||||
});
|
||||
|
||||
@@ -1,6 +1,3 @@
|
||||
/**
|
||||
* 菜单项配置接口 (用于简化的对象配置)
|
||||
*/
|
||||
export interface MenuItemConfig {
|
||||
id: string;
|
||||
label: string;
|
||||
@@ -11,4 +8,5 @@ export interface MenuItemConfig {
|
||||
children?: MenuItemConfig[];
|
||||
disabled?: boolean;
|
||||
visible?: boolean;
|
||||
divider?: boolean;
|
||||
}
|
||||
Reference in New Issue
Block a user