Files
bim_engine/dist/index.d.ts
2025-12-22 15:39:58 +08:00

832 lines
23 KiB
TypeScript
Raw Blame History

This file contains ambiguous Unicode characters

This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

/**
* 通用按钮组组件 (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<K extends keyof EngineEvents>(event: K, payload: EngineEvents[K]): void;
private initContainer;
/**
* 设置事件拦截防止事件<E4BA8B><E4BBB6>泡到下层元素如 3D 引擎)
*/
private setupEventInterception;
private updatePosition;
/**
* 应用样式到容器
*/
private applyStyles;
/**
* 设置主题颜色
* 只会应用到没有被用户自定义的颜色属性上
*/
setTheme(theme: ThemeConfig): void;
/**
* 直接设置颜色(强制覆盖)
* 设置的颜色会被标记为自定义,后续的 setTheme 不会覆盖它们
*/
setColors(colors: ButtonGroupColors): void;
init(): Promise<void>;
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<K extends keyof EngineEvents>(event: K, payload: EngineEvents[K]): void;
/**
* Helper to listen to events easily
* Returns an unsubscribe function
*/
protected on<K extends keyof EngineEvents>(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<K extends keyof EngineEvents>(event: K, payload: EngineEvents[K]): void;
on<K extends keyof EngineEvents>(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<ButtonGroupOptions, 'container'>): 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<string, boolean>;
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;
}
/**
* 弹窗颜色配置
*/
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<DialogOptions, 'container'>): 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<EngineOptions, 'container'>): boolean;
/**
* 检<><E6A380><EFBFBD> 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<void>;
/**
* 设置主题
* 组件应在此方法中将 ThemeConfig 映射为自身的 CSS 变量或样式
*/
setTheme(theme: ThemeConfig): void;
/**
* 设置语言
*/
setLocales(): void;
/**
* 销毁组件
* 清理 DOM 事件监听、定时器和引用
*/
destroy(): void;
}
declare type Listener<T = any> = (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[];
}
declare class PropertyPanelManager extends BimComponent {
constructor(engine: BimEngine);
init(): void;
show(): void;
private createBaseInfoContent;
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 { }