提交代码

src/components/engine-2d/index.ts

@@ -0,0 +1,379 @@
+/**
+ * 2D 引擎组件
+ * 负责创建和管理第三方 2D 图纸引擎实例
+ * 镜像 3D Engine 组件的设计模式
+ */
+import type { ThemeConfig } from '../../themes/types';
+import { IBimComponent } from '../../types/component';
+import { themeManager } from '../../services/theme';
+import type { Engine2dOptions, DrawingLoadOptions, Drawing2dLayer } from './types';
+import type { ManagerRegistry } from '../../core/manager-registry';
+// 导入第三方 SDK 的 createEngine2d 函数（从 npm 包引入）
+import { createEngine2d as createEngine2dSDK } from 'iflow-engine-base';
+import "../../../../bim_engine_base/dist/iflow-engine-base.css";
+
+export type { Engine2dOptions, DrawingLoadOptions, Drawing2dLayer };
+
+/**
+ * 创建 Engine2d 实例的工厂函数
+ * 兼容旧代码直接 import 的方式
+ */
+export const createEngine2d = (options: Engine2dOptions, registry: ManagerRegistry) => {
+    return new Engine2d(options, registry);
+};
+
+/**
+ * 2D 图纸引擎组件
+ * 负责创建和管理第三方 2D 引擎实例
+ */
+export class Engine2d implements IBimComponent {
+    /** 第三方 2D 引擎实例 */
+    private engine: any = null;
+    /** 管理器注册表实例 */
+    private registry: ManagerRegistry;
+    /** 引擎挂载的容器元素 */
+    private container: HTMLElement;
+    /** 引擎容器 ID（用于传递给 createEngine2d） */
+    private containerId: string;
+    /** 引擎配置选项（不包含 container） */
+    private options: Omit<Engine2dOptions, 'container'>;
+    /** 是否已初始化 */
+    private _isInitialized = false;
+    /** 是否已销毁 */
+    private _isDestroyed = false;
+    /** 主题订阅取消函数 */
+    private unsubscribeTheme: (() => void) | null = null;
+
+    /**
+     * 构造函数
+     * @param options 2D 引擎配置选项
+     * @param registry 管理器注册表
+     */
+    constructor(options: Engine2dOptions, registry: ManagerRegistry) {
+        // 保存注册表
+        this.registry = registry;
+        // 解析容器元素
+        this.container = options.container;
+        // 如果容器没有 id，生成一个唯一的 id
+        if (!this.container.id) {
+            this.containerId = `engine2d-container-${Date.now()}-${Math.random().toString(36).substr(2, 9)}`;
+            this.container.id = this.containerId;
+        } else {
+            this.containerId = this.container.id;
+        }
+
+        // 保存配置选项（设置默认值）
+        this.options = {
+            backgroundColor: options.backgroundColor ?? 0x1a1a1a,
+            gridEnabled: options.gridEnabled ?? true,
+            axesEnabled: options.axesEnabled ?? true,
+            selectionColor: options.selectionColor,
+            highlightColor: options.highlightColor,
+            enablePerformanceMonitoring: options.enablePerformanceMonitoring ?? true,
+        };
+    }
+
+    /**
+     * 初始化组件 (接口实现)
+     * 创建 div 容器并初始化 2D 引擎
+     */
+    public init(): void {
+        if (this._isInitialized) {
+            console.warn('[Engine2d] Engine already initialized.');
+            return;
+        }
+
+        if (this._isDestroyed) {
+            console.error('[Engine2d] Cannot initialize destroyed engine.');
+            return;
+        }
+
+        try {
+            // 创建引擎配置对象
+            const engineConfig: any = {
+                containerId: this.containerId,
+                backgroundColor: this.options.backgroundColor,
+                gridEnabled: this.options.gridEnabled,
+                axesEnabled: this.options.axesEnabled,
+            };
+
+            // 仅在用户提供时传递可选参数
+            if (this.options.selectionColor !== undefined) {
+                engineConfig.selectionColor = this.options.selectionColor;
+            }
+            if (this.options.highlightColor !== undefined) {
+                engineConfig.highlightColor = this.options.highlightColor;
+            }
+            if (this.options.enablePerformanceMonitoring !== undefined) {
+                engineConfig.enablePerformanceMonitoring = this.options.enablePerformanceMonitoring;
+            }
+
+            // 输出配置信息
+            console.log('[Engine2d] 引擎配置信息：', engineConfig);
+
+            // 调用引擎创建函数创建 2D 引擎实例
+            this.engine = createEngine2dSDK(engineConfig);
+
+            if (!this.engine) {
+                throw new Error('Failed to create 2D engine instance');
+            }
+
+            // 标记为已初始化
+            this._isInitialized = true;
+
+            // 订阅主题变化
+            this.unsubscribeTheme = themeManager.subscribe((theme) => {
+                this.setTheme(theme);
+            });
+
+            // 应用当前主题
+            this.setTheme(themeManager.getTheme());
+
+            // 监听 2D 图纸实体点击事件
+            if (this.engine.events) {
+                this.engine.events.on('entity-click', (data: any) => {
+                    console.log('[Engine2d] 实体点击:', data);
+                    this.registry.emit('engine2d:entity-clicked', { data });
+                });
+
+                this.engine.events.on('layer-visibility-changed', (data: any) => {
+                    console.log('[Engine2d] 图层可见性变更:', data);
+                    this.registry.emit('engine2d:layer-changed', { data });
+                });
+            }
+
+        } catch (error) {
+            console.error('[Engine2d] Failed to initialize 2D engine:', error);
+            this._isInitialized = false;
+            throw error;
+        }
+    }
+
+    /**
+     * 设置主题 (接口实现)
+     * @param _theme 全局主题配置
+     */
+    public setTheme(_theme: ThemeConfig): void {
+        // 2D 引擎可根据主题切换深色/浅色模式
+        // if (!this._isInitialized || !this.engine) return;
+
+        // try {
+        //     if (typeof this.engine.setTheme === 'function') {
+        // 根据主题背景色判断深色/浅色
+        //const isDark = _theme.bgBase ? this.isColorDark(_theme.bgBase) : false;
+        //this.engine.setTheme(isDark ? 'dark' : 'light');
+        //     }
+        // } catch (e) {
+        //     console.warn('[Engine2d] Failed to set theme:', e);
+        // }
+    }
+
+    /**
+     * 设置语言 (接口实现)
+     */
+    public setLocales(): void {
+        // 2D 引擎组件暂时不需要本地化
+    }
+
+    /**
+     * 检查是否已初始化
+     */
+    public isInitialized(): boolean {
+        return this._isInitialized;
+    }
+
+    /**
+     * 加载 2D 图纸
+     * @param url 图纸文件 URL
+     * @param options 加载选项
+     */
+    public async loadDrawing(url: string, options?: DrawingLoadOptions): Promise<void> {
+        if (!this._isInitialized || !this.engine) {
+            console.error('[Engine2d] Engine not initialized. Please call init() first.');
+            return;
+        }
+        if (!url) {
+            console.error('[Engine2d] Drawing URL is required.');
+            return;
+        }
+
+        try {
+            console.log('[Engine2d] 开始加载图纸:', url);
+            await this.engine.loadModel(url, options);
+            console.log('[Engine2d] 图纸加载完成:', url);
+            this.registry.emit('engine2d:drawing-loaded', { url });
+        } catch (error) {
+            console.error('[Engine2d] 图纸加载失败:', error);
+            throw error;
+        }
+    }
+
+    /**
+     * 获取所有图层
+     * @returns 图层列表
+     */
+    public getLayers(): Drawing2dLayer[] {
+        if (!this._isInitialized || !this.engine) {
+            return [];
+        }
+        try {
+            return this.engine.getLayers?.() ?? [];
+        } catch (e) {
+            console.warn('[Engine2d] Failed to get layers:', e);
+            return [];
+        }
+    }
+
+    /**
+     * 设置图层可见性
+     * @param name 图层名称
+     * @param visible 是否可见
+     */
+    public setLayerVisible(name: string, visible: boolean): void {
+        if (!this._isInitialized || !this.engine) {
+            console.warn('[Engine2d] Engine not initialized.');
+            return;
+        }
+        try {
+            this.engine.setLayerVisible?.(name, visible);
+        } catch (e) {
+            console.warn('[Engine2d] Failed to set layer visibility:', e);
+        }
+    }
+
+    /**
+     * 重置视图（适应画布）
+     */
+    public resetView(): void {
+        if (!this._isInitialized || !this.engine) return;
+        try {
+            this.engine.resetView?.();
+        } catch (e) {
+            console.warn('[Engine2d] Failed to reset view:', e);
+        }
+    }
+
+    /**
+     * 适应视图（缩放到全部内容）
+     */
+    public fitToView(): void {
+        if (!this._isInitialized || !this.engine) return;
+        try {
+            this.engine.fitToView?.();
+        } catch (e) {
+            console.warn('[Engine2d] Failed to fit to view:', e);
+        }
+    }
+
+    /**
+     * 设置缩放级别
+     * @param zoom 缩放值
+     */
+    public setZoom(zoom: number): void {
+        if (!this._isInitialized || !this.engine) return;
+        this.engine.setZoom?.(zoom);
+    }
+
+    /**
+     * 获取当前缩放级别
+     * @returns 当前缩放值
+     */
+    public getZoom(): number {
+        if (!this._isInitialized || !this.engine) return 1;
+        return this.engine.getZoom?.() ?? 1;
+    }
+
+    /**
+     * 设置背景色
+     * @param color 颜色值（十六进制数值）
+     */
+    public setBackgroundColor(color: number): void {
+        if (!this._isInitialized || !this.engine) return;
+        this.engine.setBackgroundColor?.(color);
+    }
+
+    /**
+     * 清除场景
+     */
+    public clearScene(): void {
+        if (!this._isInitialized || !this.engine) return;
+        this.engine.clearScene?.();
+    }
+
+    /**
+     * 调整引擎尺寸
+     */
+    public resize(): void {
+        if (!this._isInitialized || !this.engine) return;
+        this.engine.resize?.();
+    }
+
+    /**
+     * 订阅原始 2D 引擎事件
+     * @param event 事件名称
+     * @param handler 事件处理函数
+     */
+    public onRawEvent(event: string, handler: (...args: any[]) => void): void {
+        this.engine?.events?.on(event, handler);
+    }
+
+    /**
+     * 取消订阅原始 2D 引擎事件
+     * @param event 事件名称
+     * @param handler 事件处理函数
+     */
+    public offRawEvent(event: string, handler: (...args: any[]) => void): void {
+        this.engine?.events?.off(event, handler);
+    }
+
+    /**
+     * 销毁组件 (接口实现)
+     * 清理资源、取消订阅、销毁引擎实例
+     */
+    public destroy(): void {
+        if (this._isDestroyed) {
+            return;
+        }
+
+        // 取消主题订阅
+        if (this.unsubscribeTheme) {
+            this.unsubscribeTheme();
+            this.unsubscribeTheme = null;
+        }
+
+        // 销毁 2D 引擎，释放资源
+        if (this.engine) {
+            try {
+                this.engine.dispose?.();
+            } catch (e) {
+                console.warn('[Engine2d] Error during dispose:', e);
+            }
+            this.engine = null;
+        }
+
+        // 清理容器
+        this.container.innerHTML = '';
+
+        // 更新状态
+        this._isDestroyed = true;
+        this._isInitialized = false;
+    }
+
+    /**
+     * 判断颜色字符串是否为深色
+     * @param color CSS 颜色字符串
+     * @returns 是否为深色
+     */
+    // private isColorDark(color: string): boolean {
+    //     // 简单判断：如果包含常见深色关键字或数值较低则为深色
+    //     if (color.includes('#')) {
+    //         const hex = color.replace('#', '');
+    //         const r = parseInt(hex.substring(0, 2), 16) || 0;
+    //         const g = parseInt(hex.substring(2, 4), 16) || 0;
+    //         const b = parseInt(hex.substring(4, 6), 16) || 0;
+    //         const luminance = (0.299 * r + 0.587 * g + 0.114 * b) / 255;
+    //         return luminance < 0.5;
+    //     }
+    //     return false;
+    // }
+}

src/components/engine-2d/types.ts

@@ -0,0 +1,46 @@
+/**
+ * 2D 引擎类型定义
+ * 定义 2D CAD/DWG 图纸引擎的配置选项和相关类型
+ */
+
+/**
+ * 2D 引擎配置选项
+ */
+export interface Engine2dOptions {
+    /** 引擎挂载的容器元素 */
+    container: HTMLElement;
+    /** 背景颜色（十六进制数值，如 0xffffff） */
+    backgroundColor?: number;
+    /** 是否启用网格 */
+    gridEnabled?: boolean;
+    /** 是否启用坐标轴 */
+    axesEnabled?: boolean;
+    /** 选中构件颜色 */
+    selectionColor?: number;
+    /** 高亮构件颜色 */
+    highlightColor?: number;
+    /** 是否启用性能监控 */
+    enablePerformanceMonitoring?: boolean;
+}
+
+/**
+ * 2D 图纸加载选项
+ */
+export interface DrawingLoadOptions {
+    /** 分块大小 */
+    chunkSize?: number;
+    /** 是否启用分块加载 */
+    enableChunkedLoading?: boolean;
+    /** 是否启用数据校验 */
+    enableValidation?: boolean;
+}
+
+/**
+ * 2D 图纸图层信息
+ */
+export interface Drawing2dLayer {
+    /** 图层名称 */
+    name: string;
+    /** 图层是否可见 */
+    visible: boolean;
+}

src/components/engine-720/index.ts

@@ -0,0 +1,356 @@
+/**
+ * 720 全景引擎组件
+ * 负责创建和管理第三方 720° 全景引擎实例
+ * 镜像 Engine2d 组件的设计模式
+ */
+import type { ThemeConfig } from '../../themes/types';
+import { IBimComponent } from '../../types/component';
+import { themeManager } from '../../services/theme';
+import type { Engine720Options, PanoramaLoadOptions, PanoramaAnnotation } from './types';
+import type { ManagerRegistry } from '../../core/manager-registry';
+// 导入第三方 SDK 的 createEngine720 函数（从 npm 包引入）
+import { createEngine720 as createEngine720SDK } from 'iflow-engine-base';
+import "../../../../bim_engine_base/dist/iflow-engine-base.css";
+
+export type { Engine720Options, PanoramaLoadOptions, PanoramaAnnotation };
+
+/**
+ * 创建 Engine720 实例的工厂函数
+ * 兼容旧代码直接 import 的方式
+ */
+export const createEngine720 = (options: Engine720Options, registry: ManagerRegistry) => {
+    return new Engine720(options, registry);
+};
+
+/**
+ * 720° 全景引擎组件
+ * 负责创建和管理第三方 720 全景引擎实例
+ */
+export class Engine720 implements IBimComponent {
+    /** 第三方 720 引擎实例 */
+    private engine: any = null;
+    /** 管理器注册表实例 */
+    private registry: ManagerRegistry;
+    /** 引擎挂载的容器元素 */
+    private container: HTMLElement;
+    /** 引擎容器 ID（用于传递给 createEngine720） */
+    private containerId: string;
+    /** 引擎配置选项（不包含 container） */
+    private options: Omit<Engine720Options, 'container'>;
+    /** 是否已初始化 */
+    private _isInitialized = false;
+    /** 是否已销毁 */
+    private _isDestroyed = false;
+    /** 主题订阅取消函数 */
+    private unsubscribeTheme: (() => void) | null = null;
+
+    /**
+     * 构造函数
+     * @param options 720 引擎配置选项
+     * @param registry 管理器注册表
+     */
+    constructor(options: Engine720Options, registry: ManagerRegistry) {
+        // 保存注册表
+        this.registry = registry;
+        // 解析容器元素
+        this.container = options.container;
+        // 如果容器没有 id，生成一个唯一的 id
+        if (!this.container.id) {
+            this.containerId = `engine720-container-${Date.now()}-${Math.random().toString(36).substr(2, 9)}`;
+            this.container.id = this.containerId;
+        } else {
+            this.containerId = this.container.id;
+        }
+
+        // 保存配置选项（设置默认值）
+        this.options = {
+            fov: options.fov ?? 75,
+            enableZoom: options.enableZoom ?? true,
+            enableRotate: options.enableRotate ?? true,
+            sphereRadius: options.sphereRadius ?? 500,
+            rotateSpeed: options.rotateSpeed,
+            zoomSpeed: options.zoomSpeed,
+            enableDamping: options.enableDamping,
+            dampingFactor: options.dampingFactor,
+            minFov: options.minFov,
+            maxFov: options.maxFov,
+        };
+    }
+
+    /**
+     * 初始化组件 (接口实现)
+     * 创建 div 容器并初始化 720 引擎
+     */
+    public init(): void {
+        if (this._isInitialized) {
+            console.warn('[Engine720] Engine already initialized.');
+            return;
+        }
+
+        if (this._isDestroyed) {
+            console.error('[Engine720] Cannot initialize destroyed engine.');
+            return;
+        }
+
+        try {
+            // 创建引擎配置对象
+            const engineConfig: any = {
+                containerId: this.containerId,
+                fov: this.options.fov,
+                enableZoom: this.options.enableZoom,
+                enableRotate: this.options.enableRotate,
+                sphereRadius: this.options.sphereRadius,
+            };
+
+            // 仅在用户提供时传递可选参数
+            if (this.options.rotateSpeed !== undefined) {
+                engineConfig.rotateSpeed = this.options.rotateSpeed;
+            }
+            if (this.options.zoomSpeed !== undefined) {
+                engineConfig.zoomSpeed = this.options.zoomSpeed;
+            }
+            if (this.options.enableDamping !== undefined) {
+                engineConfig.enableDamping = this.options.enableDamping;
+            }
+            if (this.options.dampingFactor !== undefined) {
+                engineConfig.dampingFactor = this.options.dampingFactor;
+            }
+            if (this.options.minFov !== undefined) {
+                engineConfig.minFov = this.options.minFov;
+            }
+            if (this.options.maxFov !== undefined) {
+                engineConfig.maxFov = this.options.maxFov;
+            }
+
+            // 输出配置信息
+            console.log('[Engine720] 引擎配置信息：', engineConfig);
+
+            // 调用引擎创建函数创建 720 引擎实例
+            this.engine = createEngine720SDK(engineConfig);
+
+            if (!this.engine) {
+                throw new Error('Failed to create 720 engine instance');
+            }
+
+            // 标记为已初始化
+            this._isInitialized = true;
+
+            // 订阅主题变化
+            this.unsubscribeTheme = themeManager.subscribe((theme) => {
+                this.setTheme(theme);
+            });
+
+            // 应用当前主题
+            this.setTheme(themeManager.getTheme());
+
+            // 监听 720 全景事件
+            if (this.engine.events) {
+                this.engine.events.on('panorama-loaded', (data: any) => {
+                    console.log('[Engine720] 全景加载完成:', data);
+                    this.registry.emit('engine720:panorama-loaded', { data });
+                });
+
+                this.engine.events.on('panorama-load-error', (data: any) => {
+                    console.error('[Engine720] 全景加载失败:', data);
+                    this.registry.emit('engine720:load-error', { data });
+                });
+
+                this.engine.events.on('annotation-click', (data: any) => {
+                    console.log('[Engine720] 标注点击:', data);
+                    this.registry.emit('engine720:annotation-click', { data });
+                });
+
+                this.engine.events.on('view-angle-changed', (data: any) => {
+                    this.registry.emit('engine720:view-changed', { data });
+                });
+            }
+
+        } catch (error) {
+            console.error('[Engine720] Failed to initialize 720 engine:', error);
+            this._isInitialized = false;
+            throw error;
+        }
+    }
+
+    /**
+     * 设置主题 (接口实现)
+     * @param _theme 全局主题配置
+     */
+    public setTheme(_theme: ThemeConfig): void {
+        // 720 引擎暂时不需要主题切换（全景图本身覆盖整个视口）
+        if (!this._isInitialized || !this.engine) return;
+        // 预留：如果底层引擎支持 setTheme，可在此调用
+    }
+
+    /**
+     * 设置语言 (接口实现)
+     */
+    public setLocales(): void {
+        // 720 引擎组件暂时不需要本地化
+    }
+
+    /**
+     * 检查是否已初始化
+     */
+    public isInitialized(): boolean {
+        return this._isInitialized;
+    }
+
+    /**
+     * 加载全景图
+     * @param url 全景图片 URL
+     * @param _options 加载选项（预留）
+     */
+    public async loadPanorama(url: string, _options?: PanoramaLoadOptions): Promise<void> {
+        if (!this._isInitialized || !this.engine) {
+            console.error('[Engine720] Engine not initialized. Please call init() first.');
+            return;
+        }
+        if (!url) {
+            console.error('[Engine720] Panorama URL is required.');
+            return;
+        }
+
+        try {
+            console.log('[Engine720] 开始加载全景图:', url);
+            await this.engine.loadPanorama(url);
+            console.log('[Engine720] 全景图加载完成:', url);
+        } catch (error) {
+            console.error('[Engine720] 全景图加载失败:', error);
+            throw error;
+        }
+    }
+
+    /**
+     * 预加载多个全景图
+     * @param urls 全景图 URL 列表
+     */
+    public async preloadPanoramas(urls: string[]): Promise<void> {
+        if (!this._isInitialized || !this.engine) return;
+        try {
+            await this.engine.preloadPanoramas?.(urls);
+        } catch (e) {
+            console.warn('[Engine720] Failed to preload panoramas:', e);
+        }
+    }
+
+    /**
+     * 设置视场角
+     * @param fov 视场角值
+     */
+    public setFov(fov: number): void {
+        if (!this._isInitialized || !this.engine) return;
+        this.engine.setFov?.(fov);
+    }
+
+    /**
+     * 获取当前视场角
+     * @returns 当前视场角值
+     */
+    public getFov(): number {
+        if (!this._isInitialized || !this.engine) return 75;
+        return this.engine.getFov?.() ?? 75;
+    }
+
+    /**
+     * 设置相机朝向
+     * @param phi 水平角度
+     * @param theta 垂直角度
+     * @param animated 是否动画过渡
+     */
+    public lookAt(phi: number, theta: number, animated?: boolean): void {
+        if (!this._isInitialized || !this.engine) return;
+        this.engine.lookAt?.(phi, theta, animated);
+    }
+
+    /**
+     * 重置视图
+     */
+    public resetView(): void {
+        if (!this._isInitialized || !this.engine) return;
+        try {
+            // 重置到默认视角
+            this.engine.lookAt?.(0, 0, true);
+            this.engine.setFov?.(75);
+        } catch (e) {
+            console.warn('[Engine720] Failed to reset view:', e);
+        }
+    }
+
+    /**
+     * 暂停渲染
+     */
+    public pauseRendering(): void {
+        if (!this._isInitialized || !this.engine) return;
+        this.engine.pauseRendering?.();
+    }
+
+    /**
+     * 恢复渲染
+     */
+    public resumeRendering(): void {
+        if (!this._isInitialized || !this.engine) return;
+        this.engine.resumeRendering?.();
+    }
+
+    /**
+     * 调整引擎尺寸
+     * @param width 宽度
+     * @param height 高度
+     */
+    public resize(width?: number, height?: number): void {
+        if (!this._isInitialized || !this.engine) return;
+        this.engine.resize?.(width, height);
+    }
+
+    /**
+     * 订阅原始 720 引擎事件
+     * @param event 事件名称
+     * @param handler 事件处理函数
+     */
+    public onRawEvent(event: string, handler: (...args: any[]) => void): void {
+        this.engine?.events?.on(event, handler);
+    }
+
+    /**
+     * 取消订阅原始 720 引擎事件
+     * @param event 事件名称
+     * @param handler 事件处理函数
+     */
+    public offRawEvent(event: string, handler: (...args: any[]) => void): void {
+        this.engine?.events?.off(event, handler);
+    }
+
+    /**
+     * 销毁组件 (接口实现)
+     * 清理资源、取消订阅、销毁引擎实例
+     */
+    public destroy(): void {
+        if (this._isDestroyed) {
+            return;
+        }
+
+        // 取消主题订阅
+        if (this.unsubscribeTheme) {
+            this.unsubscribeTheme();
+            this.unsubscribeTheme = null;
+        }
+
+        // 销毁 720 引擎，释放资源
+        if (this.engine) {
+            try {
+                this.engine.dispose?.();
+            } catch (e) {
+                console.warn('[Engine720] Error during dispose:', e);
+            }
+            this.engine = null;
+        }
+
+        // 清理容器
+        this.container.innerHTML = '';
+
+        // 更新状态
+        this._isDestroyed = true;
+        this._isInitialized = false;
+    }
+}

src/components/engine-720/types.ts

@@ -0,0 +1,56 @@
+/**
+ * 720 全景引擎类型定义
+ * 定义 720° 全景查看引擎的配置选项和相关类型
+ */
+
+/**
+ * 720 全景引擎配置选项
+ */
+export interface Engine720Options {
+    /** 引擎挂载的容器元素 */
+    container: HTMLElement;
+    /** 视场角（默认 75） */
+    fov?: number;
+    /** 是否启用缩放（默认 true） */
+    enableZoom?: boolean;
+    /** 是否启用旋转（默认 true） */
+    enableRotate?: boolean;
+    /** 球体半径（默认 500） */
+    sphereRadius?: number;
+    /** 旋转速度 */
+    rotateSpeed?: number;
+    /** 缩放速度 */
+    zoomSpeed?: number;
+    /** 是否启用阻尼（惯性） */
+    enableDamping?: boolean;
+    /** 阻尼因子 */
+    dampingFactor?: number;
+    /** 最小视场角 */
+    minFov?: number;
+    /** 最大视场角 */
+    maxFov?: number;
+}
+
+/**
+ * 全景加载选项
+ */
+export interface PanoramaLoadOptions {
+    /** 加载超时时间（毫秒） */
+    timeout?: number;
+}
+
+/**
+ * 全景标注信息
+ */
+export interface PanoramaAnnotation {
+    /** 标注 ID */
+    id: string;
+    /** 标注位置（球面坐标 phi） */
+    phi?: number;
+    /** 标注位置（球面坐标 theta） */
+    theta?: number;
+    /** 标注文本 */
+    text?: string;
+    /** 自定义数据 */
+    data?: any;
+}

src/components/engine/index.ts

@@ -122,6 +122,8 @@ export class Engine implements IBimComponent {
             // 标记为已初始化
             this._isInitialized = true;
 
+            this.resize(this.container.clientWidth, this.container.clientHeight);
+
             // 订阅主题变化
             this.unsubscribeTheme = themeManager.subscribe((theme) => {
                 this.setTheme(theme);
@@ -260,11 +262,21 @@ export class Engine implements IBimComponent {
      * 调整渲染器尺寸
      * 容器大小变化时调用，自动更新渲染器、相机投影矩阵和后处理合成器
      */
-    public resize(): void {
+    public resize(width?: number, height?: number): void {
         if (!this._isInitialized || !this.engine) {
             return;
         }
-        // this.engine.handleWindowResize();
+
+        const nextWidth = typeof width === 'number' ? Math.floor(width) : this.container.clientWidth;
+        const nextHeight = typeof height === 'number' ? Math.floor(height) : this.container.clientHeight;
+
+        if (nextWidth <= 0 || nextHeight <= 0) {
+            return;
+        }
+
+        if (typeof this.engine.handleWindowResize === 'function') {
+            this.engine.handleWindowResize(nextWidth, nextHeight);
+        }
     }
 
     // ==================== 测量功能方法 ====================

src/components/section-box-panel/index.ts

@@ -21,12 +21,10 @@ export class SectionBoxPanel implements IBimComponent {
     private range: SectionBoxRange;
 
     private hideBtn!: HTMLButtonElement;
-    private reverseBtn!: HTMLButtonElement;
     private fitBtn!: HTMLButtonElement;
     private resetBtn!: HTMLButtonElement;
 
     private hideLabelEl!: HTMLElement;
-    private reverseLabelEl!: HTMLElement;
     private fitLabelEl!: HTMLElement;
     private resetLabelEl!: HTMLElement;
     private xLabelEl!: HTMLElement;
@@ -134,19 +132,13 @@ export class SectionBoxPanel implements IBimComponent {
             this.options.onHideToggle?.(this.isHidden);
         }, 'hide');
 
-        this.reverseBtn = this.createButton('reverse', t('sectionBox.actions.reverse'), () => {
-            this.isReversed = !this.isReversed;
-            this.updateButtonStates();
-            this.options.onReverseToggle?.(this.isReversed);
-        }, 'reverse');
-
         this.fitBtn = this.createButton('fit', t('sectionBox.actions.fitToModel'), () => {
             this.options.onFitToModel?.();
         }, 'fit');
 
         this.resetBtn = this.createButton('reset', t('sectionBox.actions.reset'), () => this.reset(), 'reset');
 
-        [this.hideBtn, this.reverseBtn, this.fitBtn, this.resetBtn].forEach(btn => buttonsContainer.appendChild(btn));
+        [this.hideBtn, this.fitBtn, this.resetBtn].forEach(btn => buttonsContainer.appendChild(btn));
 
         const slidersContainer = document.createElement('div');
         slidersContainer.className = 'section-box-sliders';
@@ -184,7 +176,6 @@ export class SectionBoxPanel implements IBimComponent {
         labelEl.textContent = label;
 
         if (ref === 'hide') this.hideLabelEl = labelEl;
-        else if (ref === 'reverse') this.reverseLabelEl = labelEl;
         else if (ref === 'fit') this.fitLabelEl = labelEl;
         else if (ref === 'reset') this.resetLabelEl = labelEl;
 
@@ -325,20 +316,17 @@ export class SectionBoxPanel implements IBimComponent {
 
     private updateButtonStates(): void {
         if (this.hideBtn) this.hideBtn.classList.toggle('active', this.isHidden);
-        if (this.reverseBtn) this.reverseBtn.classList.toggle('active', this.isReversed);
     }
 
     public setLocales(): void {
         if (!this.hideLabelEl) return;
         this.hideLabelEl.textContent = t('sectionBox.actions.hide');
-        this.reverseLabelEl.textContent = t('sectionBox.actions.reverse');
         this.fitLabelEl.textContent = t('sectionBox.actions.fitToModel');
         this.resetLabelEl.textContent = t('sectionBox.actions.reset');
         this.xLabelEl.textContent = t('sectionBox.axes.x');
         this.yLabelEl.textContent = t('sectionBox.axes.y');
         this.zLabelEl.textContent = t('sectionBox.axes.z');
         this.hideBtn.title = t('sectionBox.actions.hide');
-        this.reverseBtn.title = t('sectionBox.actions.reverse');
         this.fitBtn.title = t('sectionBox.actions.fitToModel');
         this.resetBtn.title = t('sectionBox.actions.reset');
     }
@@ -365,4 +353,4 @@ export class SectionBoxPanel implements IBimComponent {
             this.element.parentElement.removeChild(this.element);
         }
     }
-}
+}