Files
bim_engine/dist/index.d.ts
2025-12-16 11:57:44 +08:00

828 lines
22 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)
*/
export 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;
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;
}
/**
* 通用菜单列表组件
* 负责渲染一组菜单项,支持分组、排序、图标、快捷键提示和递归多级子菜单。
* 它不包含定位逻辑,仅负责内容渲染。
*/
export declare class BimMenu implements IBimComponent {
element: HTMLElement;
private options;
private unsubscribeLocale;
private unsubscribeTheme;
private activeSubMenu;
constructor(options: MenuOptions);
/**
* 初始化组件
* 渲染 DOM 结构并订阅语言变更
*/
init(): void;
/**
* 设置主题
* @param theme 全局主题配置
*/
setTheme(theme: ThemeConfig): void;
/**
* 响应语言变更
* 重新渲染整个菜单以更新文本
*/
setLocales(): void;
/**
* 销毁组件
* 清理事件监听、子菜单和 DOM 元素
*/
destroy(): void;
/**
* 获取组件根元素
* 实现 IRightKeyContent 接口,允许被 RightKey 容器挂载
*/
getElement(): HTMLElement;
/**
* 核心渲染逻辑
* 处理分组、排序和 DOM 生成
*/
private render;
/**
* 创建单个菜单项的 DOM 元素
*/
private createItemElement;
/**
* 打开子菜单
* @param item 当前菜单项
* @param parentLi 触发的 DOM 元素(用于定位)
*/
private openSubMenu;
/**
* 关闭当前激活的子菜单
*/
private closeSubMenu;
}
/**
* 右键浮层容器组件 (RightKey)
* 这是一个纯粹的定位容器,负责在屏幕指定位置显示内容。
* 它不关心具体内容是什么,只处理定位、边界检测和关闭逻辑。
*/
export declare class BimRightKey implements IBimComponent {
private element;
private content;
private isVisible;
private onCloseCallback?;
private options?;
private mouseDownTime;
private readonly CLICK_THRESHOLD;
constructor(options?: RightKeyOptions);
init(): void;
setTheme(_theme: ThemeConfig): void;
setLocales(): void;
destroy(): void;
private handleContainerMouseDown;
private handleContainerMouseUp;
private handleContainerContextMenu;
/**
* 设置关闭时的回调函数
* 通常用于通知 Manager 状态变更
*/
setOnClose(callback: () => void): void;
/**
* 挂载内容组件
* @param content 实现了 IRightKeyContent 接口的组件实例
*/
mount(content: IRightKeyContent): void;
/**
* 卸载当前内容
*/
unmountContent(): void;
/**
* 在指定位置显示容器
* 包含智能边界检测逻辑,防止溢出屏幕
* @param x 目标 X 坐标 (通常是鼠标点击位置)
* @param y 目标 Y 坐标
*/
show(x: number, y: number): void;
/**
* 隐藏容器
*/
hide(): void;
/**
* 处理全局点击事件
* 用于检测是否点击了容器外部
*/
private handleGlobalClick;
}
/** 按钮内部文字图标排列 */
declare type ButtonAlign = 'vertical' | 'horizontal';
/** 按钮配置 */
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;
}
export declare interface ButtonGroup {
id: string;
buttons: OptButton[];
}
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 ClickPayload {
button: OptButton;
action: 'activate' | 'deactivate' | 'trigger';
isActive?: boolean;
}
/**
* 底部工具栏管理器 (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 function createEngine(s) {
const e = s.version || "v1";
switch (e) {
case "v2":
return new Fc(s);
case "v1":
return new O_(s);
:
return console.warn(`Version '${e}' not found. Falling back to v2.`), new Fc(s);
}
}
/**
* 弹窗颜色配置
*/
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;
}
/**
* 弹窗配置选项接口
*/
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 }
*/
declare type DialogPosition = 'center' | 'top-left' | 'top-center' | 'top-right' | 'left-center' | 'right-center' | 'bottom-left' | 'bottom-center' | 'bottom-right' | {
x: number;
y: number;
};
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;
};
'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 组件都必须实现此接口
*/
declare interface IBimComponent {
/**
* 初始化组件
* 用于创建 DOM、绑定事件、加载资源等
* 支持同步或异步操作
*/
init(): void | Promise<void>;
/**
* 设置主题
* 组件应在此方法中将 ThemeConfig 映射为自身的 CSS 变量或样式
*/
setTheme(theme: ThemeConfig): void;
/**
* 设置语言
*/
setLocales(): void;
/**
* 销毁组件
* 清理 DOM 事件监听、定时器和引用
*/
destroy(): void;
}
declare interface IRightKeyContent {
/**
* 获取组件的根 DOM 元素
*/
getElement(): HTMLElement;
/**
* 销毁组件
*/
destroy(): void;
}
declare type Listener<T = any> = (payload: T) => void;
/**
* 语言代码类型
*/
declare type LocaleType = 'zh-CN' | 'en-US';
/**
* 菜单项配置接口 (用于简化的对象配置)
*/
export declare interface MenuItemConfig {
id: string;
label: string;
onClick?: () => void;
icon?: string;
group?: string;
order?: number;
children?: MenuItemConfig[];
disabled?: boolean;
visible?: boolean;
}
/**
* <20><><EFBFBD>单组件配置选项
*/
declare interface MenuOptions {
/**
* 菜单项列表
* 可以是扁平数组,组件会根据 group 字段自动分组
*/
items: MenuItemConfig[];
/**
* 分组显示顺序
* 包含组 ID 的字符串数组。
* 例如: ['view', 'edit', 'tools']
* 未在此数组中定义的组将按默认顺序排在最后。
*/
groupOrder?: string[];
}
/**
* 模型加载选项
* 用于配置模型的位置、旋转和缩放
*/
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 interface OptButton extends ButtonConfig {
children?: OptButton[];
}
/**
* 右键菜单管理器 (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;
}
declare interface RightKeyOptions {
/** 自定义 CSS 类名 */
className?: string;
/** 层级 (z-index) */
zIndex?: number;
/** 监听事件的容器 */
container?: HTMLElement;
/** 有效右键点击时的回调 */
onContext?: (e: MouseEvent) => void;
}
/**
* 全局主题配置接口
* 定义系统通用的语义化颜色
*/
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;
}
/**
* 主题类型定义
*/
declare type ThemeType = 'dark' | 'light' | 'custom';
/**
* 底部工具栏 (Toolbar)
* BimButtonGroup 的子类,专门用于加载工具栏默认按钮。
*/
export declare class Toolbar extends BimButtonGroup {
/**
* 重写初始化,加载默认按钮
*/
init(): Promise<void>;
}
/**
* 底部工具栏管理器 (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 { }