bim_xg/bim_engine
2
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

初始化

Browse Source
This commit is contained in:
yuding
2025-12-25 15:47:57 +08:00
parent 04a5e74284
commit 9b6959585d
28 changed files with 6464 additions and 4197 deletions
Download Patch File Download Diff File Expand all files Collapse all files

107
src/managers/map-dialog-manager.ts Normal file
View File

@@ -0,0 +1,107 @@
import { BimComponent } from '../core/component';
import { BimEngine } from '../bim-engine';
import { BimDialog } from '../components/dialog';
import { MapPanel } from '../components/map-panel';
/**
* 地图弹窗管理器（独立通用组件）
*/
export class MapDialogManager extends BimComponent {
private dialogId = 'map-dialog';
private dialog: BimDialog | null = null;
private panel: MapPanel | null = null;
constructor(engine: BimEngine) {
super(engine);
}
public init(): void {
// 可以在这里监听事件
}
/**
* 显示弹窗
*/
public show(): void {
if (!this.engine.dialog || !this.engine.container) {
console.warn('Dialog manager or container is not initialized');
return;
}
// 如果已打开，不重复打开
if (this.isOpen()) {
return;
}
// 创建面板
this.panel = new MapPanel();
this.panel.init();
const dialogWidth = 300;
const dialogHeight = 400;
const paddingLeft = 20;
const paddingBottom = 20;
const container = this.engine.container;
const containerHeight = container.clientHeight;
// 左下角：left: 20px, bottom: 20px
const x = paddingLeft;
const y = containerHeight - dialogHeight - paddingBottom;
this.dialog = this.engine.dialog.create({
id: this.dialogId,
title: 'map.dialogTitle',
width: dialogWidth,
height: dialogHeight,
position: { x, y },
draggable: true,
resizable: false,
content: this.panel.element,
onClose: () => {
this.hide();
}
});
this.dialog.init();
// 触发地图打开事件
this.emit('map:opened', {});
}
/**
* 隐藏弹窗
*/
public hide(): void {
this.destroy();
// 触发地图关闭事件
this.emit('map:closed', {});
}
/**
* 检查地图是否打开
*/
public isOpen(): boolean {
return this.dialog !== null;
}
/**
* 销毁弹窗和面板
*/
public destroy(): void {
// 先保存 dialog 引用，避免在回调中重复调用
const dialog = this.dialog;
// 立即清空引用，防止递归
this.dialog = null;
// 关闭弹窗
if (dialog) {
dialog.destroy();
}
// 销毁面板
if (this.panel) {
this.panel.destroy();
this.panel = null;
}
}
}

34
src/managers/property-panel-manager.ts
View File

@@ -10,6 +10,7 @@ import { BimTab } from '../components/tab/index';
*/
export class PropertyPanelManager extends BimComponent {
private dialogId = 'property-panel-dialog';
private dialog: any = null; // 保存 dialog 引用
constructor(engine: BimEngine) {
super(engine);
@@ -31,12 +32,17 @@ export class PropertyPanelManager extends BimComponent {
return;
}
// 如果已打开，不重复打开
if (this.isOpen()) {
return;
}
// 1. 创建弹窗
const width = 360; // 稍微加宽一点以容纳 Tab
const x = document.body.clientWidth - width - 40;
console.log('x', x)
const dialog = this.engine.dialog.create({
this.dialog = this.engine.dialog.create({
id: this.dialogId,
title: 'panel.property.title', // '构件详情'
content: '',
@@ -44,7 +50,10 @@ export class PropertyPanelManager extends BimComponent {
height: '500px',
position: { x, y: 20 },
showMask: false,
resizable: true
resizable: true,
onClose: () => {
this.hide();
}
} as any);
// 2. 创建内容容器
@@ -53,7 +62,7 @@ export class PropertyPanelManager extends BimComponent {
contentContainer.style.display = 'flex';
contentContainer.style.flexDirection = 'column';
dialog.setContent(contentContainer);
this.dialog.setContent(contentContainer);
// 3. 创建标签页组件
const tab = new BimTab({
@@ -194,7 +203,24 @@ export class PropertyPanelManager extends BimComponent {
return container;
}
/**
* 检查属性面板是否打开
*/
public isOpen(): boolean {
return this.dialog !== null;
}
/**
* 隐藏属性面板
*/
public hide(): void {
if (this.dialog) {
this.dialog.destroy();
this.dialog = null;
}
}
public destroy(): void {
// 如果有需要清理的资源
this.hide();
}
}

25
src/managers/toolbar-manager.ts
View File

@@ -68,4 +68,29 @@ export class ToolbarManager extends BimComponent {
}
public setBackgroundColor(color: string) { this.toolbar?.setBackgroundColor(color); }
public setColors(colors: ButtonGroupColors) { this.toolbar?.setColors(colors); }
/**
* 隐藏工具栏
*/
public hide(): void {
if (this.toolbarContainer) {
this.toolbarContainer.style.display = 'none';
}
}
/**
* 显示工具栏
*/
public show(): void {
if (this.toolbarContainer) {
this.toolbarContainer.style.display = '';
}
}
/**
* 获取工具栏容器
*/
public getContainer(): HTMLElement | null {
return this.toolbarContainer;
}
}

151
src/managers/walk-control-manager.ts Normal file
View File

@@ -0,0 +1,151 @@
import { BimComponent } from '../core/component';
import { BimEngine } from '../bim-engine';
import { WalkControlPanel } from '../components/walk-control-panel';
import { WalkPathDialogManager } from './walk-path-dialog-manager';
/**
* 漫游控制管理器
*/
export class WalkControlManager extends BimComponent {
public panel: WalkControlPanel | null = null;
private pathManager: WalkPathDialogManager | null = null;
constructor(engine: BimEngine) {
super(engine);
}
public init(): void {
// 初始化子 manager
this.pathManager = new WalkPathDialogManager(this.engine);
this.pathManager.init();
}
/**
* 显示漫游控制面板
*/
public show(): void {
if (!this.engine.toolbar) {
console.warn('Toolbar not initialized');
return;
}
// 隐藏 toolbar
this.engine.toolbar.hide();
// 创建漫游控制面板
this.panel = new WalkControlPanel({
onPlanViewToggle: (isActive) => {
console.log('[WalkControl] 地图:', isActive);
if (isActive) {
this.engine.map?.show();
} else {
this.engine.map?.hide();
}
// 触发事件
this.emit('walk:plan-view-toggle', { isActive });
},
onPathModeToggle: (isActive) => {
console.log('[WalkControl] 路径漫游:', isActive);
if (isActive) {
this.pathManager?.show();
} else {
this.pathManager?.hide();
}
// 触发事件
this.emit('walk:path-mode-toggle', { isActive });
},
onWalkModeToggle: (isActive) => {
console.log('[WalkControl] 漫游模式:', isActive);
// 切换到漫游模式时，关闭路径漫游弹窗
if (isActive) {
this.pathManager?.hide();
}
// 触发事件
this.emit('walk:walk-mode-toggle', { isActive });
},
onSpeedChange: (speed) => {
console.log('[WalkControl] 速度变化:', speed);
// 触发事件
this.emit('walk:speed-change', { speed });
},
onGravityToggle: (enabled) => {
console.log('[WalkControl] 重力:', enabled);
// 触发事件
this.emit('walk:gravity-toggle', { enabled });
},
onCollisionToggle: (enabled) => {
console.log('[WalkControl] 碰撞:', enabled);
// 触发事件
this.emit('walk:collision-toggle', { enabled });
},
onCharacterModelChange: (model) => {
console.log('[WalkControl] 角色模型:', model);
// TODO: 实现角色模型变化逻辑
},
onWalkModeChange: (mode) => {
console.log('[WalkControl] 行走模式:', mode);
// TODO: 实现行走模式变化逻辑
},
onExit: () => {
this.hide();
}
});
this.panel.init();
// 如果地图已经打开，同步按钮状态
if (this.engine.map?.isOpen()) {
this.panel.setPlanViewActive(true);
}
// 监听地图事件，同步漫游面板中的地图按钮状态
this.engine.on('map:opened', () => {
this.panel?.setPlanViewActive(true);
});
this.engine.on('map:closed', () => {
this.panel?.setPlanViewActive(false);
});
// 将面板添加到主容器中，定位在底部中间（类似toolbar的位置）
if (this.engine.container) {
// 添加定位样式
this.panel.element.style.position = 'absolute';
this.panel.element.style.bottom = '20px';
this.panel.element.style.left = '50%';
this.panel.element.style.transform = 'translateX(-50%)';
this.panel.element.style.zIndex = '1000';
this.engine.container.appendChild(this.panel.element);
} else {
console.warn('[WalkControlManager] Container not found');
}
}
/**
* 隐藏漫游控制面板
*/
public hide(): void {
// 关闭路径漫游弹窗（但不关闭地图，因为地图可能是用户单独打开的）
this.pathManager?.hide();
// 销毁面板
if (this.panel) {
this.panel.destroy();
this.panel = null;
}
// 显示 toolbar
if (this.engine.toolbar) {
this.engine.toolbar.show();
}
}
/**
* 销毁管理器
*/
public destroy(): void {
this.hide();
this.pathManager?.destroy();
this.pathManager = null;
}
}

97
src/managers/walk-path-dialog-manager.ts Normal file
View File

@@ -0,0 +1,97 @@
import { BimComponent } from '../core/component';
import { BimEngine } from '../bim-engine';
import { BimDialog } from '../components/dialog';
import { WalkPathPanel } from '../components/walk-path-panel';
/**
* 路径漫游弹窗管理器
*/
export class WalkPathDialogManager extends BimComponent {
private dialogId = 'walk-path-dialog';
private dialog: BimDialog | null = null;
private panel: WalkPathPanel | null = null;
constructor(engine: BimEngine) {
super(engine);
}
public init(): void {
// 可以在这里监听事件
}
/**
* 显示弹窗
*/
public show(): void {
if (!this.engine.dialog || !this.engine.container) {
console.warn('Dialog manager or container is not initialized');
return;
}
// 如果已打开，先销毁
this.destroy();
// 创建面板（暂时空内容）
this.panel = new WalkPathPanel();
this.panel.init();
const dialogWidth = 300;
const dialogHeight = 400;
const paddingRight = 20;
const container = this.engine.container;
const containerHeight = container.clientHeight;
const containerWidth = container.clientWidth;
// 右边中间：right: 20px, 垂直居中
const x = containerWidth - dialogWidth - paddingRight;
const y = (containerHeight - dialogHeight) / 2;
this.dialog = this.engine.dialog.create({
id: this.dialogId,
title: 'walkControl.path.dialogTitle',
width: dialogWidth,
height: dialogHeight,
position: { x, y },
draggable: true,
resizable: false,
content: this.panel.element,
onClose: () => {
// 通知主控制面板更新状态
if (this.engine.walkControl && this.engine.walkControl.panel) {
this.engine.walkControl.panel.setPathModeActive(false);
}
this.hide();
}
});
this.dialog.init();
}
/**
* 隐藏弹窗
*/
public hide(): void {
this.destroy();
}
/**
* 销毁弹窗和面板
*/
public destroy(): void {
// 先保存 dialog 引用，避免在回调中重复调用
const dialog = this.dialog;
// 立即清空引用，防止递归
this.dialog = null;
// 关闭弹窗
if (dialog) {
dialog.destroy();
}
// 销毁面板
if (this.panel) {
this.panel.destroy();
this.panel = null;
}
}
}

97
src/managers/walk-plan-view-dialog-manager.ts Normal file
View File

@@ -0,0 +1,97 @@
import { BimComponent } from '../core/component';
import { BimEngine } from '../bim-engine';
import { BimDialog } from '../components/dialog';
import { WalkPlanViewPanel } from '../components/walk-plan-view-panel';
/**
* 平面图弹窗管理器
*/
export class WalkPlanViewDialogManager extends BimComponent {
private dialogId = 'walk-plan-view-dialog';
private dialog: BimDialog | null = null;
private panel: WalkPlanViewPanel | null = null;
constructor(engine: BimEngine) {
super(engine);
}
public init(): void {
// 可以在这里监听事件
}
/**
* 显示弹窗
*/
public show(): void {
if (!this.engine.dialog || !this.engine.container) {
console.warn('Dialog manager or container is not initialized');
return;
}
// 如果已打开，先销毁
this.destroy();
// 创建面板（暂时空内容）
this.panel = new WalkPlanViewPanel();
this.panel.init();
const dialogWidth = 300;
const dialogHeight = 400;
const paddingLeft = 20;
const paddingBottom = 20;
const container = this.engine.container;
const containerHeight = container.clientHeight;
// 左下角：left: 20px, bottom: 20px
const x = paddingLeft;
const y = containerHeight - dialogHeight - paddingBottom;
this.dialog = this.engine.dialog.create({
id: this.dialogId,
title: 'walkControl.planView.dialogTitle',
width: dialogWidth,
height: dialogHeight,
position: { x, y },
draggable: true,
resizable: false,
content: this.panel.element,
onClose: () => {
// 通知主控制面板更新状态
if (this.engine.walkControl && this.engine.walkControl.panel) {
this.engine.walkControl.panel.setPlanViewActive(false);
}
this.hide();
}
});
this.dialog.init();
}
/**
* 隐藏弹窗
*/
public hide(): void {
this.destroy();
}
/**
* 销毁弹窗和面板
*/
public destroy(): void {
// 先保存 dialog 引用，避免在回调中重复调用
const dialog = this.dialog;
// 立即清空引用，防止递归
this.dialog = null;
// 关闭弹窗
if (dialog) {
dialog.destroy();
}
// 销毁面板
if (this.panel) {
this.panel.destroy();
this.panel = null;
}
}
}