添加折叠面板

This commit is contained in:
yuding
2025-12-22 15:39:58 +08:00
parent 005535a26d
commit ed0414c75b
29 changed files with 2759 additions and 1416 deletions

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

362
dist/index.d.ts vendored
View File

@@ -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 { }