bim_engine/docs/components/right-key.md

RightKey 组件文档

1. 组件概述

BimRightKey 是一个通用的右键浮层容器组件。

• 位置: src/components/right-key/index.ts
• 功能: 负责在指定坐标 (x, y) 显示内容，处理边界检测防止溢出屏幕，以及点击外部自动关闭。
• 特点: 它不关心内容是什么，通过 mount() 方法挂载任意实现 IRightKeyContent 接口的内容组件。

2. 组件类 API

BimRightKey

方法

方法名	参数	返回值	描述
init	()	void	初始化，绑定全局点击事件
mount	(content: IRightKeyContent)	void	挂载内容组件
show	(x: number, y: number)	void	<EFBFBD><EFBFBD><EFBFBD>指定位置显示，会自动调整位置防止溢出
hide	()	void	隐藏容器
destroy	()	void	销毁容器，解绑事件
setOnClose	(callback: () => void)	void	设置关闭时的回调

3. Manager API

RightKeyManager

• 位置: src/managers/right-key-manager.ts
• 功能: 监听容器的 contextmenu 事件，决定显示什么内容。

方法

方法名	参数	返回值	描述
registerHandler	(handler: (e) => BimMenuItem[])	void	注册上下文处理器
showMenu	(x, y, items, groupOrder?)	void	手动显示菜单
hide	()	void	隐藏

4. UI 详细描述

• 容器: <div class="bim-right-key"></div>
• 定位: position: fixed
• 层级: z-index: 10000 (默认)

5. 实现细节

• 边界检测: 在 show(x, y) 时，会计算容器宽高和视口宽高。如果 x + width > viewportWidth，则 x = x - width（向左展开）。同理处理垂直方向。
• 点击外部关闭: 监听 document 的 mousedown 事件，如果点击目标不在容器内，则调用 hide()。

6. 类型定义

export interface IRightKeyContent {
    getElement(): HTMLElement;
    destroy(): void;
}