/** * 通用按钮组组件 (BimButtonGroup) */ declare class BimButtonGroup implements IBimComponent { private container; private options; private groups; private activeBtnIds; private btnRefs; private dropdownElement; private hoverTimeout; private customColors; private unsubscribeLocale; private unsubscribeTheme; protected engine: BimEngine | null; private readonly DEFAULT_ICON; constructor(options: ButtonGroupOptions); setEngine(engine: BimEngine): void; protected emit(event: K, payload: EngineEvents[K]): void; private initContainer; /** * 设置事件拦截,防止事件��泡到下层元素(如 3D 引擎) */ private setupEventInterception; private updatePosition; /** * 应用样式到容器 */ private applyStyles; /** * 设置主题颜色 * 只会应用到没有被用户自定义的颜色属性上 */ setTheme(theme: ThemeConfig): void; /** * 直接设置颜色(强制覆盖) * 设置的颜色会被标记为自定义,后续的 setTheme 不会覆盖它们 */ setColors(colors: ButtonGroupColors): void; init(): Promise; setLocales(): void; addGroup(groupId: string, beforeGroupId?: string): void; addButton(config: ButtonConfig): void; private findButton; render(): void; private renderGroup; private renderButton; private handleClick; private handleMouseEnter; private handleMouseLeave; private showDropdown; private renderDropdownItem; private closeDropdown; private updateButtonState; private getIcon; updateButtonVisibility(id: string, visible: boolean): void; setShowLabel(show: boolean): void; private updateLabelsVisibility; private findButtonById; setBackgroundColor(color: string): void; private isVisible; destroy(): void; } declare abstract class BimComponent { protected engine: BimEngine; constructor(engine: BimEngine); /** * Helper to send events easily */ protected emit(event: K, payload: EngineEvents[K]): void; /** * Helper to listen to events easily * Returns an unsubscribe function */ protected on(event: K, listener: (payload: EngineEvents[K]) => void): () => void; abstract destroy(): void; } /** * 通用弹窗组件类 * 支持拖拽、缩放、自定义内容和位置。 */ declare class BimDialog implements IBimComponent { private element; private options; private container; private header; private contentArea; private _isDestroyed; private _isInitialized; private unsubscribeTheme; private unsubscribeLocale; private rafId; /** * 构造函数 * @param options 弹窗配置选项 */ constructor(options: DialogOptions); /** * 设置主题 * @param theme 全局主题配置 */ setTheme(theme: ThemeConfig): void; /** * 初始化组件功能 (接口实现) */ init(): void; setLocales(): void; /** * 创建弹窗的 DOM 结构 */ private createDom; /** * 设置元素尺寸 */ private setSize; /** * 根据内容自动调整弹窗宽度 * @param recenter 是否重新计算定位(例如保持居中),默认 true */ fitWidth(recenter?: boolean): void; /** * 初始化弹窗位置 */ private initPosition; /** * 初始化拖拽功能 (性能优化 + 解决粘手) */ private initDrag; /** * 初始化缩放功能 (性能优化 + 解决粘手) */ private initResize; /** * 动态设置内容 * @param content 内容元素或 HTML 字符串 */ setContent(content: HTMLElement | string): void; /** * 关闭弹窗并销毁 */ close(): void; /** * 销毁组件 (接口实现) */ destroy(): void; } export declare class BimEngine extends EventEmitter { private container; private wrapper; toolbar: ToolbarManager | null; constructTreeBtn: ConstructTreeManagerBtn | null; buttonGroup: ButtonGroupManager | null; dialog: DialogManager | null; engine: EngineManager | null; rightKey: RightKeyManager | null; propertyPanel: PropertyPanelManager | null; constructor(container: HTMLElement | string, options?: { locale?: LocaleType; theme?: ThemeType; }); emit(event: K, payload: EngineEvents[K]): void; on(event: K, listener: (payload: EngineEvents[K]) => void): () => void; setLocale(locale: LocaleType): void; getLocale(): LocaleType; setTheme(theme: 'dark' | 'light'): void; setCustomTheme(theme: ThemeConfig): void; private init; private updateTheme; destroy(): void; } /** * 树节点类 * 负责渲染单个节点、处理交互和递归 */ declare class BimTreeNode { config: TreeNodeConfig; element: HTMLElement; children: BimTreeNode[]; parent: BimTreeNode | null; checkState: TreeNodeCheckState; private contentEl; private switcherEl; private checkboxEl; private titleEl; private actionsEl; private childrenContainer; private onExpandChange; private onCheckChange; private onNodeClick; private renderActions?; constructor(config: TreeNodeConfig, options: TreeOptions, callbacks: { onExpand: (n: BimTreeNode) => void; onCheck: (n: BimTreeNode) => void; onClick: (n: BimTreeNode) => void; }); /** * 创建节点 DOM */ private createDom; /** * 设置高亮选中状态 (Select 模式下) */ setSelected(selected: boolean): void; /** * 更新显示文本 (国际化支持) -> 移除国际化,直接显示 */ updateLabel(): void; /** * 切换展开状态 */ toggleExpand(force?: boolean): void; /** * 切换选中状态 (用户点击) */ toggleCheck(): void; /** * 设置选中状态 (API调用或联动) * @param state 新状态 * @param fireEvent 是否触发事件 */ setChecked(state: TreeNodeCheckState, fireEvent?: boolean): void; /** * 更新复选框 UI 样式 */ updateCheckboxUI(): void; /** * 添加子节点实例 */ appendChild(childNode: BimTreeNode): void; /** * 销毁 */ destroy(): void; } /** 按钮内部文字图标排列 */ declare type ButtonAlign = 'vertical' | 'horizontal'; /** 按钮配置 */ export declare interface ButtonConfig { id: string; type: ButtonType; label: string; icon?: string; keepActive?: boolean; disabled?: boolean; onClick?: (button: OptButton) => void; children?: ButtonConfig[]; groupId?: string; parentId?: string; /** 按钮内部图标文字排列 (默认 vertical,即图标在上) */ align?: ButtonAlign; /** 图标大小 (正方形,单位 px,默认 32) */ iconSize?: number; /** 按钮最小宽度 (单位 px,默认 50) */ minWidth?: number; } declare interface ButtonGroupColors { backgroundColor?: string; btnBackgroundColor?: string; btnHoverColor?: string; btnActiveColor?: string; iconColor?: string; iconActiveColor?: string; textColor?: string; textActiveColor?: string; } /** * 通用按钮组管理器 (ButtonGroupManager) * 负责创建和管理通用的按钮组实例。 */ declare class ButtonGroupManager extends BimComponent { private groups; private container; constructor(engine: BimEngine, container: HTMLElement); create(id: string, options: Omit): BimButtonGroup; get(id: string): BimButtonGroup | undefined; updateTheme(theme: ThemeConfig): void; destroy(): void; } export declare interface ButtonGroupOptions extends ButtonGroupColors { container: HTMLElement | string; /** 屏幕位置 (如 top-left) */ position?: GroupPosition; /** 按钮组排列方向 (默认 row) */ direction?: GroupDirection; /** 按钮内部图标文字排列 (默认 vertical) */ align?: ButtonAlign; /** 菜单展开方向 */ expand?: ExpandDirection; showLabel?: boolean; visibility?: Record; className?: string; } declare type ButtonType = 'button' | 'menu'; export declare interface CollapseItemConfig { /** 唯一标识符 */ id: string; /** 标题文本的翻译键 (例如 'panel.attributes') */ title: string; /** 内容: HTML字符串 或 HTMLElement */ content: string | HTMLElement; /** 标题栏左侧图标 (SVG 字符串, 可选) */ icon?: string; /** 标题栏右侧额外内容 (可选) */ extra?: string | HTMLElement; /** 是否禁用 */ disabled?: boolean; /** 自定义类名 */ className?: string; } export declare interface CollapseOptions { /** 挂载容器 */ container: HTMLElement | string; /** 面板项列表 */ items: CollapseItemConfig[]; /** 是否开启手风琴模式 (默认 false) */ accordion?: boolean; /** 初始展开的面板 ID 列表 */ activeIds?: string[]; /** 是否显示边框 (默认 true) */ bordered?: boolean; /** 是否幽灵模式 (默认 false) */ ghost?: boolean; /** 自定义类名 */ className?: string; /** 切换面板时的回调 */ onChange?: (activeIds: string[]) => void; } /** * 底部工具栏管理器 (ToolbarManager) * 仅负责管理底部工具栏实例。 */ declare class ConstructTreeManagerBtn extends BimComponent { private toolbar; private toolbarContainer; private container; private dialog; constructor(engine: BimEngine, container: HTMLElement); private init; openConstructTreeDialog(): void; refresh(): void; destroy(): void; addGroup(groupId: string, beforeGroupId?: string): void; addButton(config: ButtonConfig): void; setButtonVisibility(id: string, v: boolean): void; setShowLabel(show: boolean): void; setVisible(visible: boolean): void; setBackgroundColor(color: string): void; setColors(colors: ButtonGroupColors): void; } /** * 描述列表项配置 */ export declare interface DescriptionItem { /** 标签文本 (直接显示,组件内部不翻译) */ label: string; /** 内容文本或元素 */ value: string | HTMLElement; /** 行级自定义标签颜色 */ labelColor?: string; /** 行级自定义内容颜色 */ valueColor?: string; /** 自定义类名 */ className?: string; } /** * 描述列表组件配置 */ export declare interface DescriptionOptions { /** 挂载容器 */ container: HTMLElement | string; /** 数据项列表 */ items: DescriptionItem[]; /** * 是否显示边框 (默认 false) * 开启后,将显示行间分割线以及 Key-Value 之间的纵向分割线 */ bordered?: boolean; /** 标签固定宽度 (例如 '80px'),若不设置则自适应 */ labelWidth?: string; /** 全局标签颜色 */ labelColor?: string; /** 全局内容颜色 */ valueColor?: string; /** 全局字体大小 */ fontSize?: string; /** 标签内边距 (默认 '0 4px') */ labelPadding?: string; /** 内容内边距 (默认 '0 4px') */ valuePadding?: string; /** 自定义类名 */ className?: string; } /** * 弹窗颜色配置 */ declare interface DialogColors { /** 窗体背景颜色,默认 rgba(17, 17, 17, 0.95) */ backgroundColor?: string; /** 标题栏背景颜色,默认 #2a2a2a */ headerBackgroundColor?: string; /** 标题文字颜色,默认 #fff */ titleColor?: string; /** 内容文字颜色,默认 #ccc */ textColor?: string; /** 边框颜色,默认 #444 */ borderColor?: string; } /** * 弹窗管理器 * 负责创建和管理应用中的各类弹窗。 */ declare class DialogManager extends BimComponent { /** 弹窗挂载的父容器 */ private container; /** 活跃的弹窗实例列表 */ private activeDialogs; /** * 构造函数 * @param engine 引擎实例 * @param container 弹窗挂载的目标容器 */ constructor(engine: BimEngine, container: HTMLElement); /** * 创建一个通用弹窗 * @param options 弹窗配置选项(不需要传 container,自动使用管理器绑定的容器) * @returns BimDialog 实例 */ create(options: Omit): BimDialog; /** * 显示二次封装的模型信息弹窗 * 演示如何调用特定的业务弹窗组件 */ showInfoDialog(): void; /** * 响应全局主题变更 * @param theme 全局主题配置 */ updateTheme(theme: ThemeConfig): void; destroy(): void; } /** * 弹窗配置选项接口 */ export declare interface DialogOptions extends DialogColors { /** 弹窗挂载的父容器 */ container: HTMLElement; /** 弹窗标题 */ title?: string; /** 弹窗内容,支持 HTML 字符串或 HTMLElement */ content?: HTMLElement | string; /** 弹窗宽度,数字(像素)或字符串(如 '50%') */ width?: number | string; /** 弹窗高度 */ height?: number | string; /** 弹窗位置 */ position?: DialogPosition; /** 是否可拖拽 */ draggable?: boolean; /** 是否可调整大小 */ resizable?: boolean; /** 最小宽度限制 */ minWidth?: number; /** 最小高度限制 */ minHeight?: number; /** 关闭时的回调函数 */ onClose?: () => void; /** 打开时的回调函数 */ onOpen?: () => void; /** 弹窗唯一标识 ID (可选) */ id?: string; } /** * 弹窗位置类型定义 * 可以是预设的字符串位置(如 'center', 'top-left' 等), * 也可以是具体的坐标对象 { x, y } */ export declare type DialogPosition = 'center' | 'top-left' | 'top-center' | 'top-right' | 'left-center' | 'right-center' | 'bottom-left' | 'bottom-center' | 'bottom-right' | { x: number; y: number; }; export declare interface EngineEvents { 'ui:open-dialog': { id: string; data?: any; }; 'ui:close-dialog': { id: string; }; 'engine:model-loaded': { url: string; }; 'engine:object-clicked': { objectId: string; position: { x: number; y: number; z: number; }; }; 'ui:tree-node-check': { id: string; checked: boolean; node: any; }; 'ui:tree-node-select': { id: string; selected: boolean; node: any; }; 'ui:tree-node-expand': { id: string; expanded: boolean; }; 'ui:collapse-change': { activeIds: string[]; }; 'sys:theme-changed': { theme: string; }; 'sys:locale-changed': { locale: string; }; } /** * 3D 引擎管理器 * 负责连接 Engine 组件和 BimEngine,向外部暴露简化的 API * 采用延迟初始化模式,用户需主动调用 initialize() 方法 */ declare class EngineManager extends BimComponent { /** 3D 引擎挂载的父容器 */ private container; /** 3D 引擎组件实例 */ private engineInstance; rightKey: RightKeyManager | null; /** * 构造函数 * @param engine 引擎实例 * @param container 3D 引擎挂载的目标容器 */ constructor(engine: BimEngine, container: HTMLElement); /** * 初始化 3D 引擎 * @param options 引擎配置选项(可选,如果不提供则使用默认配置) * @returns 是否初始化成功 */ initialize(options?: Omit): boolean; /** * 检��� 3D 引擎是否已初始化 */ isInitialized(): boolean; /** * 加载 3D 模型 * @param url 模型文件 URL * @param options 加载选项(位置、旋转、缩放) */ loadModel(url: string, options?: ModelLoadOptions): void; /** * 获取原始 3D 引擎实例 * 用于直接调用第三方引擎的其他 API */ getEngine(): any; /** * 销毁 3D 引擎实例 */ destroy(): void; } /** * 引擎配置选项 * 用于 Engine 组件的初始化 */ export declare interface EngineOptions { /** 容器元素 */ container: HTMLElement; /** 背景颜色(十六进制数字,如 0x333333) */ backgroundColor?: number; /** WebGL 版本 */ version?: 'v1' | 'v2'; /** 是否显示性能统计 */ showStats?: boolean; /** 是否显示视图立方体 */ showViewCube?: boolean; } declare class EventEmitter { private events; on(event: string, listener: Listener): () => void; off(event: string, listener: Listener): void; emit(event: string, payload?: any): void; clear(): void; } /** 二级菜单展开方向 */ declare type ExpandDirection = 'up' | 'down' | 'left' | 'right'; /** 按钮组排列方向 (Flex-direction) */ declare type GroupDirection = 'row' | 'column'; /** 弹窗/按钮组位置 */ declare type GroupPosition = 'center' | 'top-left' | 'top-center' | 'top-right' | 'left-center' | 'right-center' | 'bottom-left' | 'bottom-center' | 'bottom-right' | { x: number; y: number; } | 'static'; /** * BIM 引擎组件通用接口 * 所有受引擎管理的 UI 组件都必须实现此接口 */ export declare interface IBimComponent { /** * 初始化组件 * 用于创建 DOM、绑定事件、加载资源等 * 支持同步或异步操作 */ init(): void | Promise; /** * 设置主题 * 组件应在此方法中将 ThemeConfig 映射为自身的 CSS 变量或样式 */ setTheme(theme: ThemeConfig): void; /** * 设置语言 */ setLocales(): void; /** * 销毁组件 * 清理 DOM 事件监听、定时器和引用 */ destroy(): void; } declare type Listener = (payload: T) => void; /** * 语言��码类型 */ declare type LocaleType = 'zh-CN' | 'en-US'; /** * 菜单项配置接口 (用于简化的对象配置) */ declare interface MenuItemConfig { id: string; label: string; onClick?: () => void; icon?: string; group?: string; order?: number; children?: MenuItemConfig[]; disabled?: boolean; visible?: boolean; } /** * 模型加载选项 * 用于配置模型的位置、旋转和缩放 */ export declare interface ModelLoadOptions { /** 模型初始位置 [x, y, z] */ position?: [number, number, number]; /** 模型初始旋转 [x, y, z](弧度) */ rotation?: [number, number, number]; /** 模型初始缩放 [x, y, z] */ scale?: [number, number, number]; /** 模型 ID(可选,如果不提供则自动生成) */ id?: string; } /** * 节点点击行为类型 */ export declare type NodeClickAction = 'select' | 'expand'; declare interface OptButton extends ButtonConfig { children?: OptButton[]; } /** * 属性面板管理器 * 负责展示和管理属性面板弹窗 (演示 Tab + Collapse + Description 组件) */ declare class PropertyPanelManager extends BimComponent { private dialogId; constructor(engine: BimEngine); init(): void; /** * 显示属性面板 */ show(): void; /** * 创建"属性"标签页的内容 (包含 Collapse) */ private createPropsTabContent; /** * 创建"材质"标签页的内容 (包含 Collapse) */ private createMaterialTabContent; private createBaseInfoContent; private createAdvancedInfoContent; private createMaterialContent; destroy(): void; } /** * 右键菜单管理器 (RightKeyManager) * 负责协调右键交互流程: * 1. 监听 Canvas/容器的 contextmenu 事件 * 2. 通过注册的处理器 (Handler) 获取需要显示的菜单项 * 3. 实例化 Menu 组件并装载到 RightKey 容器中显示 */ declare class RightKeyManager extends BimComponent { private container; private rightKeyPanel; private contextHandlers; constructor(engine: BimEngine, container: HTMLElement); destroy(): void; /** * 注册上下文菜单处理器 * @param handler 处理函数,接收鼠标事件,返回菜单项数组 */ registerHandler(handler: (e: MouseEvent) => MenuItemConfig[] | null): void; /** * 手动显示菜单 * 允许外部直接调用以显示特定的菜单,不一定依赖右键事件 * @param x 屏幕 X 坐标 * @param y 屏幕 Y 坐标 * @param items 菜单项列表 * @param groupOrder 可选的分组顺序 */ showMenu(x: number, y: number, items: MenuItemConfig[], groupOrder?: string[]): void; /** * 隐藏右键菜单 */ hide(): void; /** * 处理右键点击事件 * 由 BimRightKey 组件在检测到有效右键点击时调用 */ private handleContextMenu; } /** * 全局主题配置接口 * 定义系统通用的语义化颜色 */ export declare interface ThemeConfig { /** 主题名称 */ name: string; /** 品牌色/主色 */ primary: string; /** 主色悬停/激活态 */ primaryHover: string; /** 基础背景色 (应用整体背景) */ background: string; /** 面板背景色 (工具栏、弹窗背景) */ panelBackground: string; /** 主要文字颜色 */ textPrimary: string; /** 次要文字颜色 */ textSecondary: string; /** 边框/分割线颜色 */ border: string; /** 图标默认颜色 */ icon: string; /** 图标激活颜色 */ iconActive: string; /** 交互组件背景 (如按钮默认背景) */ componentBackground: string; /** 交互组件悬停背景 */ componentHover: string; /** 交互组件激活背景 */ componentActive: string; } /** * 主题类型定义 */ export declare type ThemeType = 'dark' | 'light' | 'custom'; /** * 底部工具栏管理器 (ToolbarManager) * 仅负责管理底部工具栏实例。 */ declare class ToolbarManager extends BimComponent { private toolbar; private toolbarContainer; private container; constructor(engine: BimEngine, container: HTMLElement); private init; updateTheme(theme: ThemeConfig): void; refresh(): void; destroy(): void; addGroup(groupId: string, beforeGroupId?: string): void; addButton(config: ButtonConfig): void; setButtonVisibility(id: string, v: boolean): void; setShowLabel(show: boolean): void; setVisible(visible: boolean): void; setBackgroundColor(color: string): void; setColors(colors: ButtonGroupColors): void; } /** * 节点勾选状态枚举 */ export declare enum TreeNodeCheckState { Unchecked = 0, Checked = 1, Indeterminate = 2 } /** * 树节点配置接口 */ export declare interface TreeNodeConfig { /** 唯一标识符 */ id: string; /** 显示文本的翻译键 */ label: string; /** 节点图标 (SVG string 或 URL) */ icon?: string; /** 子节点列表 */ children?: TreeNodeConfig[]; /** 初始展开状态 (默认 false) */ expanded?: boolean; /** 初始选中状态 (默认 false) */ checked?: boolean; /** 是否禁用 (默认 false) */ disabled?: boolean; /** 自定义业务数据 */ data?: any; /** 是否是叶子节点 (用于异步加载场景,暂留接口) */ isLeaf?: boolean; /** 点击整行的行为 (默认 'select') */ clickAction?: NodeClickAction; } /** * 树组件配置选项 */ export declare interface TreeOptions { /** 树的数据源 */ data: TreeNodeConfig[]; /** 是否显示复选框 (默认 true) */ checkable?: boolean; /** * 父子节点选中状态是否关联 (默认 true) * true: 选中父选子,子全选自动选父 * false: 独立选中 */ checkStrictly?: boolean; /** 默认展开所有节点 (默认 false) */ defaultExpandAll?: boolean; /** 缩进宽度 (像素,默认 24) */ indent?: number; /** 是否启用搜索功能 (默认 false) */ enableSearch?: boolean; /** 搜索框占位符 */ searchPlaceholder?: string; /** 节点勾选回调 */ onNodeCheck?: (node: BimTreeNode) => void; /** 节点选择回调 */ onNodeSelect?: (node: BimTreeNode) => void; /** 节点展开/折叠回调 */ onNodeExpand?: (node: BimTreeNode) => void; /** * 选中时显示的自定义操作栏渲染函数 * 返回 HTML 字符串或 HTMLElement */ renderActions?: (node: TreeNodeConfig) => HTMLElement | string; } export { }