/** * 属性面板管理器 * 负责管理构件属性面板的显示和内容 */ import { BaseManager } from '../core/base-manager'; import { BimCollapse } from '../components/collapse/index'; import { BimDescription } from '../components/description/index'; import { BimTab } from '../components/tab/index'; /** * 属性面板管理器 * 显示选中构件的属性信息和材质信息 */ export class PropertyPanelManager extends BaseManager { /** 对话框 ID */ private dialogId = 'property-panel-dialog'; /** 对话框实例 */ private dialog: any = null; constructor() { super(); } /** 初始化,监听打开事件 */ public init(): void { document.addEventListener('bim-demo:open-property-panel', () => { this.show(); }); } /** 显示属性面板 */ public show() { if (!this.registry.dialog) { console.warn('Dialog manager is not initialized'); return; } if (this.isOpen()) { return; } const width = 360; const x = document.body.clientWidth - width - 40; this.dialog = this.registry.dialog.create({ id: this.dialogId, title: 'panel.property.title', content: '', width: `${width}px`, height: '500px', position: { x, y: 20 }, showMask: false, resizable: true, onClose: () => { this.hide(); } } as any); const contentContainer = document.createElement('div'); contentContainer.style.height = '100%'; contentContainer.style.display = 'flex'; contentContainer.style.flexDirection = 'column'; this.dialog.setContent(contentContainer); const tab = new BimTab({ container: contentContainer, tabs: [ { id: 'props', title: 'panel.property.tab.props', content: this.createPropsTabContent() }, { id: 'material', title: 'panel.property.tab.material', content: this.createMaterialTabContent() } ] }); tab.init(); } /** 创建属性标签页内容 */ private createPropsTabContent(): HTMLElement { const container = document.createElement('div'); container.style.height = '100%'; container.style.overflowY = 'auto'; new BimCollapse({ container: container, accordion: true, activeIds: ['base', 'location'], items: [ { id: 'base', title: 'panel.property.base', content: this.createBaseInfoContent(), }, { id: 'advanced', title: 'panel.property.advanced', content: this.createAdvancedInfoContent(), disabled: false } ] }); return container; } /** 创建材质标签页内容 */ private createMaterialTabContent(): HTMLElement { const container = document.createElement('div'); container.style.height = '100%'; container.style.overflowY = 'auto'; new BimCollapse({ container: container, accordion: true, activeIds: ['material'], items: [ { id: 'material', title: 'panel.property.material', content: this.createMaterialContent(), } ] }); return container; } /** 创建基本信息内容 */ private createBaseInfoContent(): HTMLElement { const container = document.createElement('div'); new BimDescription({ container: container, labelWidth: '80px', bordered: true, items: [ { label: 'Guid', value: '1f8d-4a2e-9c' }, { label: 'Name', value: 'Basic Wall: Generic - 200mm' }, { label: 'Type', value: 'Basic Wall' }, { label: 'Level', value: 'Trane - Centrifugal Water Chiller - CVHF 2 Stage direct drive TAG(BP-RHS-1100RT) 0202104531 1' } ] }); return container; } /** 创建高级信息内容 */ private createAdvancedInfoContent(): HTMLElement { const container = document.createElement('div'); new BimDescription({ container: container, labelWidth: '100px', bordered: true, items: [ { label: 'Area', value: '32.5 m²' }, { label: 'Volume', value: '6.5 m³' }, { label: 'Length', value: '5000 mm' }, { label: 'Phase', value: 'New Construction' } ] }); return container; } /** 创建材质内容 */ private createMaterialContent(): HTMLElement { const container = document.createElement('div'); const preview = document.createElement('div'); preview.style.display = 'flex'; preview.style.alignItems = 'center'; preview.style.marginBottom = '4px'; preview.innerHTML = `
Concrete - Cast-in-Place Gray `; const descContainer = document.createElement('div'); new BimDescription({ container: descContainer, items: [ { label: 'Preview', value: preview }, { label: 'Class', value: 'Concrete' }, { label: 'Density', value: '2400 kg/m³' }, { label: 'Thermal', value: '0.6 W/(m·K)' } ] }); container.appendChild(descContainer); return container; } /** * 检查面板是否打开 * @returns 是否打开 */ public isOpen(): boolean { return this.dialog !== null; } /** 隐藏面板 */ public hide(): void { if (this.dialog) { this.dialog.destroy(); this.dialog = null; } } /** 销毁管理器 */ public destroy(): void { this.hide(); super.destroy(); } }