## CAD Viewer 组件说明

该组件旨在提供一个Viewer以预览、下载、编辑、打开DWG等通用格式的CAD文件。

### 快速开始

```vue
<template>
  <CADViewer style="width: 1920px" :height="1080" />
</template>

<script lang="ts" setup>
  import { CADViewer } from '/@/components/CADViewer';
</script>
`
```

### Prop解读

详见`/@/components/CADViewer/src/CADViewer.vue`

### 实现原理

通过iframe嵌入即成的主体应用，编写客制化的操作栏并下发指令对其进行操作。可以通过[前期文档](https://mxcad.github.io/mxcad_docs/zh/7.%E6%9C%80%E4%BD%B3%E5%AE%9E%E8%B7%B5/1.MxCAD%20APP%E5%BA%94%E7%94%A8%E9%9B%86%E6%88%90.html)了解更多。

有了主体应用（mxcad app）后，使用 postMessage 技术与其通信以下达指令即可完成操作。需要额外说明的，预设的某些指令可能不足以满足需求，此时需要在 mxcad app 中修改源码以添加客制化指令。本组件中的 MKY_Download_DWG、MKY_Open_DWG 即是客制化指令，具体细节参考[实现细节](#关于操作配置及其实现细节)。

对于操作栏，使用时首先应该向`/@/components/CADViewer/src/operationMap.ts`里注册操作配置。具体说明见`/@/components/CADViewer/src/types`和`/@/components/CADViewer/src/operationMap.ts`

### 关于操作配置及其实现细节

阅读完[实现原理](#实现原理)里操作相关的内容后，我们了解了如何注册操作配置，但对于如何完整的实现还不清楚，那么它的细节如下：

1. 所支持的mxcad app指令在`/public/mxcad/mxQuickCommand.json`中可以查阅。
2. 如果没有发现可用的指令，需要自行在 mxcad app 的源码中实现指令。
3. 实现指令后，使用`MxFun.addCommand`添加指令到 mxcad app 中。
4. 配合着该指令的实现，在对应操作里实现业务。

这里以 MKY_Open_DWG 举例，这个指令不在 mxcad app 的默认指令集中，我们需要手动添加它，步骤如下：

1. 在 mxcad app 的源码中，找到添加 cadfile 相关指令的文件 `mxcad_app/2d/MxCAD/src/cadfile.ts`。
2. 添加指令，该指令将打开一个 .mxweb 文件，需要提供文件的网络路径作为参数，代码就像这样：

```ts
/** 打开指定的文件 */
export async function MKY_Open_Mxweb({ param }: { param: string }) {
  MxCpp.getCurrentMxCAD().openWebFile(param);
}
```

3. 为 mxcad app 注册该指令：

```ts
MxFun.addCommand('MKY_Open_Mxweb', MKY_Open_Mxweb);
```

4. 在项目中更新 mxcad app，即将其打包后把新的文件`mxcad_app/2d/dist/plugins/test.js`、`mxcad_app/2d/dist/plugins/test.js.map`替换到项目的`public/mxcad/plugins`中。

5. 注册操作配置，使用该指令：

```ts
operationMap.set('MKY_Open_Mxweb', {
  name: 'MKY_Open_Mxweb',
  alias: '打开DWG文件',
  component: OpenFile,
  on: {
    select: (file: File) => {
      processFile(file).then((path) => {
        postMessage('MKY_Open_Mxweb', path);
      });
    },
  },
});
```

### 关于钩子方法

钩子方法本质上和操作配置的实现细节一致，就是在 mxcad_app 中发送消息，我们接受到消息后执行钩子函数。目前仅支持为事件注册单个钩子

### 其他

上文中提到的 mxcad app 在[前期文档](https://mxcad.github.io/mxcad_docs/zh/7.%E6%9C%80%E4%BD%B3%E5%AE%9E%E8%B7%B5/1.MxCAD%20APP%E5%BA%94%E7%94%A8%E9%9B%86%E6%88%90.html)中下载（不会读到这还没看这个文档吧？）。

关于客制化指令的实现未在git上同步。需要添加了客制化指令的项目源码的可以联系@houzekong。

全文到此结束。