更新图钉 API 文档及代码
This commit is contained in:
yuding
@@ -206,6 +206,26 @@ ComponentDetailManager
|
||||
|
||||
---
|
||||
|
||||
## 9) 保存主视图
|
||||
|
||||
文件：`src/components/engine/index.ts`
|
||||
|
||||
```text
|
||||
点击"将当前视图设为主视图"
|
||||
-> Engine.saveMainView()
|
||||
-> rawEngine.viewCube.saveMainViewPort() -> 返回 viewData
|
||||
-> registry.emit('view:main-view-saved', { viewData })
|
||||
```
|
||||
|
||||
外部订阅：
|
||||
|
||||
```text
|
||||
bimEngine.on('view:main-view-saved', handler)
|
||||
-> ManagerRegistry.on('view:main-view-saved', handler)
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## 9) 注意事项
|
||||
|
||||
- 旧写法 `registry.engine3d?.xxx()`（大量透传）已不再推荐
|
||||
|
||||
285
docs/外部API总览.md
285
docs/外部API总览.md
@@ -216,6 +216,82 @@ bimEngine.on('encoding:error', (data) => {
|
||||
|
||||
// 启动编码
|
||||
engineComp?.startOneClickEncoding();
|
||||
|
||||
// 需要时取消订阅
|
||||
// unsubStart();
|
||||
// unsubComplete();
|
||||
// unsubError();
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## 10) 视图控制（主视图保存/恢复）
|
||||
|
||||
### 所属模块
|
||||
|
||||
- 调用入口：`bimEngine.engine?.getEngineComponent()`
|
||||
- 事件总线：`bimEngine`（通过 `ManagerRegistry` 桥接）
|
||||
- 源码位置：`src/components/engine/index.ts`
|
||||
|
||||
### 方法签名
|
||||
|
||||
```ts
|
||||
// 保存主视图
|
||||
saveMainView(): any
|
||||
|
||||
// 恢复主视图（重置）
|
||||
restoreMainView(): void
|
||||
|
||||
// 设置主视图（传入缓存数据）
|
||||
setMainViewPort(viewData: any): void
|
||||
```
|
||||
|
||||
### 事件列表
|
||||
|
||||
| 事件名 | 触发时机 | payload |
|
||||
|--------|---------|---------|
|
||||
| `view:main-view-saved` | 用户点击"将当前视图设为主视图"后 | `{ viewData: any }` |
|
||||
| `view:main-view-restored` | 用户点击"重置主视图"后 | `{}` |
|
||||
|
||||
### 行为约定
|
||||
|
||||
- `saveMainView()`：调用底层 `viewCube.saveMainViewPort()` 获取视点数据，并触发 `view:main-view-saved` 事件。
|
||||
- `restoreMainView()`：调用底层 `viewCube.resetMainViewPort()` 恢复默认主视图，并触发 `view:main-view-restored` 事件。
|
||||
- `setMainViewPort(viewData)`：调用底层 `viewCube.setMainViewPort(viewData)` 恢复指定视点，**不触发事件**（用于程序初始化时恢复缓存）。
|
||||
- 所有事件经 `Engine` 组件桥接后冒泡到 `bimEngine` 事件总线。
|
||||
- 订阅方式与 SDK 其他事件一致：使用 `bimEngine.on(event, handler)`，返回的函数可用于取消订阅。
|
||||
|
||||
### 调用示例
|
||||
|
||||
```ts
|
||||
const engineComp = bimEngine.engine?.getEngineComponent();
|
||||
|
||||
// 1. 保存主视图（用户操作触发）
|
||||
engineComp?.saveMainView();
|
||||
|
||||
// 2. 监听保存事件，持久化到 localStorage
|
||||
const unsubSaved = bimEngine.on('view:main-view-saved', ({ viewData }) => {
|
||||
console.log('主视图已保存:', viewData);
|
||||
localStorage.setItem('mainView', JSON.stringify(viewData));
|
||||
});
|
||||
|
||||
// 3. 监听重置事件，清理缓存
|
||||
const unsubRestored = bimEngine.on('view:main-view-restored', () => {
|
||||
console.log('主视图已重置');
|
||||
localStorage.removeItem('mainView');
|
||||
});
|
||||
|
||||
// 4. 模型加载完成后，自动恢复缓存的主视图
|
||||
bimEngine.on('engine:model-loading-completed', () => {
|
||||
const cached = localStorage.getItem('mainView');
|
||||
if (cached) {
|
||||
engineComp?.setMainViewPort(JSON.parse(cached));
|
||||
}
|
||||
});
|
||||
|
||||
// 需要时取消订阅
|
||||
// unsubSaved();
|
||||
// unsubRestored();
|
||||
```
|
||||
|
||||
---
|
||||
@@ -332,3 +408,212 @@ bimEngine.engine?.getEngineComponent()?.startOneClickEncoding();
|
||||
// unsubComplete();
|
||||
// unsubError();
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## 11) 图钉（DrawingPin）管理
|
||||
|
||||
### 所属模块
|
||||
|
||||
- 调用入口：`bimEngine.engine?.getEngineComponent()` / `bimEngine.emit()` / `bimEngine.on()`
|
||||
- 源码位置：`src/components/engine/index.ts`、`src/components/component-tree-drawer/pin-tab.ts`
|
||||
- 初始化要求：需先调用 `bimEngine.initConstructTreeBtn()` 初始化构件树面板
|
||||
|
||||
### 概述
|
||||
|
||||
图钉功能用于保存和展示 3D 视图中的相机视角，支持文件夹分组管理。**外部系统完全掌控图钉的创建、编辑、删除和持久化**，SDK 仅负责渲染展示。
|
||||
|
||||
对接方式：
|
||||
- **批量传入配置**：`setPinRecords()` 一次性设置完整图钉列表
|
||||
- **增删改**：通过 `bimEngine.emit()` 发送 `drawingPin:create|update|delete` 事件
|
||||
- **监听变更**：订阅 `drawingPin:list-updated` 获取用户操作后的最新列表
|
||||
|
||||
### 数据类型
|
||||
|
||||
```ts
|
||||
interface DrawingPinRecord {
|
||||
id: string; // 唯一标识（外部生成）
|
||||
parentId?: string | null; // 父文件夹 ID，null/undefined 表示根节点
|
||||
name: string; // 显示名称
|
||||
type: 'pin' | 'folder'; // 类型：图钉 或 文件夹
|
||||
seq: number; // 排序序号（同级内排序）
|
||||
data?: any; // 视角数据（仅 type='pin' 时有值，由外部系统生成）
|
||||
}
|
||||
```
|
||||
|
||||
### API 列表
|
||||
|
||||
#### A. 批量传入图钉配置
|
||||
|
||||
```ts
|
||||
bimEngine.engine?.getEngineComponent()?.setPinRecords(
|
||||
records: DrawingPinRecord[]
|
||||
): void
|
||||
```
|
||||
|
||||
- **作用**：外部一次性传入完整图钉列表（平铺结构），SDK 内部自动构建树形层级。
|
||||
- **场景**：初始化时从后端/缓存加载已有图钉配置。
|
||||
- **注意**：会触发 `drawingPin:list-updated` 事件。
|
||||
|
||||
#### B. 创建 / 更新 / 删除（事件接口）
|
||||
|
||||
外部通过 `bimEngine.emit()` 向 SDK 发送操作指令：
|
||||
|
||||
| 事件 | payload | 说明 |
|
||||
|------|---------|------|
|
||||
| `drawingPin:create` | `{ record: DrawingPinRecord }` | 创建图钉或文件夹 |
|
||||
| `drawingPin:update` | `{ id: string; patch: Partial<Pick<DrawingPinRecord, 'name' \| 'parentId' \| 'seq' \| 'data'>> }` | 编辑图钉/文件夹 |
|
||||
| `drawingPin:delete` | `{ id: string }` | 删除图钉或文件夹 |
|
||||
|
||||
#### C. 监听列表变更
|
||||
|
||||
| 事件 | 方向 | payload | 说明 |
|
||||
|------|------|---------|------|
|
||||
| `drawingPin:list-updated` | SDK → 外部 | `{ records: DrawingPinRecord[] }` | 列表发生任何变更时触发（含用户界面操作） |
|
||||
|
||||
### 调用示例
|
||||
|
||||
#### 1. 初始化时批量传入图钉配置
|
||||
|
||||
```ts
|
||||
const engineComp = bimEngine.engine?.getEngineComponent();
|
||||
|
||||
// 从后端获取已有配置
|
||||
const pinRecords: DrawingPinRecord[] = [
|
||||
{
|
||||
id: 'folder_001',
|
||||
parentId: null,
|
||||
name: '一层图钉',
|
||||
type: 'folder',
|
||||
seq: 0,
|
||||
},
|
||||
{
|
||||
id: 'pin_001',
|
||||
parentId: 'folder_001',
|
||||
name: '入口视角',
|
||||
type: 'pin',
|
||||
seq: 0,
|
||||
data: { /* 外部系统保存的视角数据 */ },
|
||||
},
|
||||
{
|
||||
id: 'pin_002',
|
||||
parentId: 'folder_001',
|
||||
name: '大厅视角',
|
||||
type: 'pin',
|
||||
seq: 1,
|
||||
data: { /* 外部系统保存的视角数据 */ },
|
||||
},
|
||||
];
|
||||
|
||||
// 一次性传入
|
||||
engineComp?.setPinRecords(pinRecords);
|
||||
```
|
||||
|
||||
#### 2. 创建图钉（外部生成视角数据）
|
||||
|
||||
```ts
|
||||
// 外部系统自行生成视角数据
|
||||
const viewData = { /* 外部系统生成的视角数据 */ };
|
||||
|
||||
const record: DrawingPinRecord = {
|
||||
id: `pin_${Date.now()}`,
|
||||
parentId: null, // 或指定文件夹 ID，实现分组
|
||||
name: '新图钉',
|
||||
type: 'pin',
|
||||
seq: 0,
|
||||
data: viewData,
|
||||
};
|
||||
|
||||
bimEngine.emit('drawingPin:create', { record });
|
||||
```
|
||||
|
||||
#### 3. 创建文件夹
|
||||
|
||||
```ts
|
||||
const record: DrawingPinRecord = {
|
||||
id: `folder_${Date.now()}`,
|
||||
parentId: null, // 或指定父文件夹 ID，实现嵌套
|
||||
name: '新文件夹',
|
||||
type: 'folder',
|
||||
seq: 0,
|
||||
};
|
||||
|
||||
bimEngine.emit('drawingPin:create', { record });
|
||||
```
|
||||
|
||||
#### 4. 编辑（重命名 / 移动分组 / 调序）
|
||||
|
||||
```ts
|
||||
// 重命名
|
||||
bimEngine.emit('drawingPin:update', {
|
||||
id: 'pin_001',
|
||||
patch: { name: '入口视角（已更新）' },
|
||||
});
|
||||
|
||||
// 移动到另一个文件夹
|
||||
bimEngine.emit('drawingPin:update', {
|
||||
id: 'pin_001',
|
||||
patch: { parentId: 'folder_002' },
|
||||
});
|
||||
|
||||
// 调整排序
|
||||
bimEngine.emit('drawingPin:update', {
|
||||
id: 'pin_001',
|
||||
patch: { seq: 2 },
|
||||
});
|
||||
```
|
||||
|
||||
#### 5. 删除
|
||||
|
||||
```ts
|
||||
bimEngine.emit('drawingPin:delete', { id: 'pin_001' });
|
||||
```
|
||||
|
||||
#### 6. 监听变更并持久化
|
||||
|
||||
```ts
|
||||
bimEngine.on('drawingPin:list-updated', ({ records }) => {
|
||||
console.log('图钉列表已更新:', records);
|
||||
// 同步到后端或 localStorage
|
||||
localStorage.setItem('drawingPins', JSON.stringify(records));
|
||||
});
|
||||
```
|
||||
|
||||
#### 7. 完整对接示例（初始化 + 双向同步）
|
||||
|
||||
```ts
|
||||
const engineComp = bimEngine.engine?.getEngineComponent();
|
||||
|
||||
// 1. 监听变更，持久化到后端
|
||||
bimEngine.on('drawingPin:list-updated', ({ records }) => {
|
||||
fetch('/api/save-pins', {
|
||||
method: 'POST',
|
||||
body: JSON.stringify(records),
|
||||
});
|
||||
});
|
||||
|
||||
// 2. 模型加载完成后，从后端恢复图钉配置
|
||||
bimEngine.on('engine:model-loading-completed', () => {
|
||||
fetch('/api/get-pins')
|
||||
.then((res) => res.json())
|
||||
.then((records: DrawingPinRecord[]) => {
|
||||
engineComp?.setPinRecords(records);
|
||||
});
|
||||
});
|
||||
|
||||
// 3. 业务层提供"添加图钉"按钮
|
||||
function onAddPinClick() {
|
||||
// 外部系统自行生成视角数据
|
||||
const viewData = { /* 外部系统生成的视角数据 */ };
|
||||
|
||||
const record: DrawingPinRecord = {
|
||||
id: `pin_${Date.now()}`,
|
||||
parentId: null,
|
||||
name: '新视角',
|
||||
type: 'pin',
|
||||
seq: 0,
|
||||
data: viewData,
|
||||
};
|
||||
bimEngine.emit('drawingPin:create', { record });
|
||||
}
|
||||
```
|
||||
|
||||
Reference in New Issue
Block a user