添加折叠面板
This commit is contained in:
2035
dist/bim-engine-sdk.es.js
vendored
2035
dist/bim-engine-sdk.es.js
vendored
File diff suppressed because one or more lines are too long
2
dist/bim-engine-sdk.es.js.map
vendored
2
dist/bim-engine-sdk.es.js.map
vendored
File diff suppressed because one or more lines are too long
388
dist/bim-engine-sdk.umd.js
vendored
388
dist/bim-engine-sdk.umd.js
vendored
File diff suppressed because one or more lines are too long
2
dist/bim-engine-sdk.umd.js.map
vendored
2
dist/bim-engine-sdk.umd.js.map
vendored
File diff suppressed because one or more lines are too long
362
dist/index.d.ts
vendored
362
dist/index.d.ts
vendored
@@ -1,7 +1,7 @@
|
||||
/**
|
||||
* 通用按钮组组件 (BimButtonGroup)
|
||||
*/
|
||||
export declare class BimButtonGroup implements IBimComponent {
|
||||
declare class BimButtonGroup implements IBimComponent {
|
||||
private container;
|
||||
private options;
|
||||
private groups;
|
||||
@@ -156,6 +156,7 @@ export declare class BimEngine extends EventEmitter {
|
||||
dialog: DialogManager | null;
|
||||
engine: EngineManager | null;
|
||||
rightKey: RightKeyManager | null;
|
||||
propertyPanel: PropertyPanelManager | null;
|
||||
constructor(container: HTMLElement | string, options?: {
|
||||
locale?: LocaleType;
|
||||
theme?: ThemeType;
|
||||
@@ -172,121 +173,75 @@ export declare class BimEngine extends EventEmitter {
|
||||
}
|
||||
|
||||
/**
|
||||
* 通用菜单列表组件
|
||||
* 负责渲染一组菜单项,支持分组、排序、图标、快捷键提示和递归多级子菜单。
|
||||
* 它不包含定位逻辑,仅负责内容渲染。
|
||||
* 树节点类
|
||||
* 负责渲染单个节点、处理交互和递归
|
||||
*/
|
||||
export declare class BimMenu implements IBimComponent {
|
||||
declare class BimTreeNode {
|
||||
config: TreeNodeConfig;
|
||||
element: HTMLElement;
|
||||
private options;
|
||||
private unsubscribeLocale;
|
||||
private unsubscribeTheme;
|
||||
private activeSubMenu;
|
||||
constructor(options: MenuOptions);
|
||||
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 结构并订阅语言变更
|
||||
* 创建节点 DOM
|
||||
*/
|
||||
init(): void;
|
||||
private createDom;
|
||||
/**
|
||||
* 设置主题
|
||||
* @param theme 全局主题配置
|
||||
* 设置高亮选中状态 (Select 模式下)
|
||||
*/
|
||||
setTheme(theme: ThemeConfig): void;
|
||||
setSelected(selected: boolean): void;
|
||||
/**
|
||||
* 响应语言变更
|
||||
* 重新渲染整个菜单以更新文本
|
||||
* 更新显示文本 (国际化支持) -> 移除国际化,直接显示
|
||||
*/
|
||||
setLocales(): void;
|
||||
updateLabel(): void;
|
||||
/**
|
||||
* 销毁组件
|
||||
* 清理事件监听、子菜单和 DOM 元素
|
||||
* 切换展开状态
|
||||
*/
|
||||
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;
|
||||
/**
|
||||
* 获取组件根元素
|
||||
* 实现 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 {
|
||||
export declare interface ButtonConfig {
|
||||
id: string;
|
||||
type: ButtonType;
|
||||
label: string;
|
||||
@@ -305,11 +260,6 @@ declare interface ButtonConfig {
|
||||
minWidth?: number;
|
||||
}
|
||||
|
||||
export declare interface ButtonGroup {
|
||||
id: string;
|
||||
buttons: OptButton[];
|
||||
}
|
||||
|
||||
declare interface ButtonGroupColors {
|
||||
backgroundColor?: string;
|
||||
btnBackgroundColor?: string;
|
||||
@@ -352,10 +302,40 @@ export declare interface ButtonGroupOptions extends ButtonGroupColors {
|
||||
|
||||
declare type ButtonType = 'button' | 'menu';
|
||||
|
||||
export declare interface ClickPayload {
|
||||
button: OptButton;
|
||||
action: 'activate' | 'deactivate' | 'trigger';
|
||||
isActive?: boolean;
|
||||
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;
|
||||
}
|
||||
|
||||
/**
|
||||
@@ -381,18 +361,6 @@ declare class ConstructTreeManagerBtn extends BimComponent {
|
||||
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);
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* 弹窗颜色配置
|
||||
*/
|
||||
@@ -446,7 +414,7 @@ declare class DialogManager extends BimComponent {
|
||||
/**
|
||||
* 弹窗配置选项接口
|
||||
*/
|
||||
declare interface DialogOptions extends DialogColors {
|
||||
export declare interface DialogOptions extends DialogColors {
|
||||
/** 弹窗挂载的父容器 */
|
||||
container: HTMLElement;
|
||||
/** 弹窗标题 */
|
||||
@@ -480,12 +448,12 @@ declare interface DialogOptions extends DialogColors {
|
||||
* 可以是预设的字符串位置(如 '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' | {
|
||||
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;
|
||||
};
|
||||
|
||||
declare interface EngineEvents {
|
||||
export declare interface EngineEvents {
|
||||
'ui:open-dialog': {
|
||||
id: string;
|
||||
data?: any;
|
||||
@@ -518,6 +486,9 @@ declare interface EngineEvents {
|
||||
id: string;
|
||||
expanded: boolean;
|
||||
};
|
||||
'ui:collapse-change': {
|
||||
activeIds: string[];
|
||||
};
|
||||
'sys:theme-changed': {
|
||||
theme: string;
|
||||
};
|
||||
@@ -611,7 +582,7 @@ declare type GroupPosition = 'center' | 'top-left' | 'top-center' | 'top-right'
|
||||
* BIM 引擎组件通用接口
|
||||
* 所有受引擎管理的 UI 组件都必须实现此接口
|
||||
*/
|
||||
declare interface IBimComponent {
|
||||
export declare interface IBimComponent {
|
||||
/**
|
||||
* 初始化组件
|
||||
* 用于创建 DOM、绑定事件、加载资源等
|
||||
@@ -634,17 +605,6 @@ declare interface IBimComponent {
|
||||
destroy(): void;
|
||||
}
|
||||
|
||||
declare interface IRightKeyContent {
|
||||
/**
|
||||
* 获取组件的根 DOM 元素
|
||||
*/
|
||||
getElement(): HTMLElement;
|
||||
/**
|
||||
* 销毁组件
|
||||
*/
|
||||
destroy(): void;
|
||||
}
|
||||
|
||||
declare type Listener<T = any> = (payload: T) => void;
|
||||
|
||||
/**
|
||||
@@ -655,7 +615,7 @@ declare type LocaleType = 'zh-CN' | 'en-US';
|
||||
/**
|
||||
* 菜单项配置接口 (用于简化的对象配置)
|
||||
*/
|
||||
export declare interface MenuItemConfig {
|
||||
declare interface MenuItemConfig {
|
||||
id: string;
|
||||
label: string;
|
||||
onClick?: () => void;
|
||||
@@ -667,24 +627,6 @@ export declare interface MenuItemConfig {
|
||||
visible?: boolean;
|
||||
}
|
||||
|
||||
/**
|
||||
* <20><><EFBFBD>单组件配置选项
|
||||
*/
|
||||
declare interface MenuOptions {
|
||||
/**
|
||||
* 菜单项列表
|
||||
* 可以是扁平数组,组件会根据 group 字段自动分组
|
||||
*/
|
||||
items: MenuItemConfig[];
|
||||
/**
|
||||
* 分组显示顺序
|
||||
* 包含组 ID 的字符串数组。
|
||||
* 例如: ['view', 'edit', 'tools']
|
||||
* 未在此数组中定义的组将按默认顺序排在最后。
|
||||
*/
|
||||
groupOrder?: string[];
|
||||
}
|
||||
|
||||
/**
|
||||
* 模型加载选项
|
||||
* 用于配置模型的位置、旋转和缩放
|
||||
@@ -700,10 +642,24 @@ export declare interface ModelLoadOptions {
|
||||
id?: string;
|
||||
}
|
||||
|
||||
export declare interface OptButton extends ButtonConfig {
|
||||
/**
|
||||
* 节点点击行为类型
|
||||
*/
|
||||
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)
|
||||
* 负责协调右键交互流程:
|
||||
@@ -742,22 +698,11 @@ declare class RightKeyManager extends BimComponent {
|
||||
private handleContextMenu;
|
||||
}
|
||||
|
||||
declare interface RightKeyOptions {
|
||||
/** 自定义 CSS 类名 */
|
||||
className?: string;
|
||||
/** 层级 (z-index) */
|
||||
zIndex?: number;
|
||||
/** 监听事件的容器 */
|
||||
container?: HTMLElement;
|
||||
/** 有效右键点击时的回调 */
|
||||
onContext?: (e: MouseEvent) => void;
|
||||
}
|
||||
|
||||
/**
|
||||
* 全局主题配置接口
|
||||
* 定义系统通用的语义化颜色
|
||||
*/
|
||||
declare interface ThemeConfig {
|
||||
export declare interface ThemeConfig {
|
||||
/** 主题名称 */
|
||||
name: string;
|
||||
/** 品牌色/主色 */
|
||||
@@ -789,18 +734,7 @@ declare interface ThemeConfig {
|
||||
/**
|
||||
* 主题类型定义
|
||||
*/
|
||||
declare type ThemeType = 'dark' | 'light' | 'custom';
|
||||
|
||||
/**
|
||||
* 底部工具栏 (Toolbar)
|
||||
* BimButtonGroup 的子类,专门用于加载工具栏默认按钮。
|
||||
*/
|
||||
export declare class Toolbar extends BimButtonGroup {
|
||||
/**
|
||||
* 重写初始化,加载默认按钮
|
||||
*/
|
||||
init(): Promise<void>;
|
||||
}
|
||||
export declare type ThemeType = 'dark' | 'light' | 'custom';
|
||||
|
||||
/**
|
||||
* 底部工具栏管理器 (ToolbarManager)
|
||||
@@ -824,4 +758,74 @@ declare class ToolbarManager extends BimComponent {
|
||||
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 { }
|
||||
|
||||
Reference in New Issue
Block a user