mky-vent-base/src/components/CADViewer

CAD Viewer 组件说明

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

快速开始

<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嵌入即成的主体应用，编写客制化的操作栏并下发指令对其进行操作。可以通过前期文档了解更多。

有了主体应用（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 文件，需要提供文件的网络路径作为参数，代码就像这样：

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

1. 为 mxcad app 注册该指令：

MxFun.addCommand('MKY_Open_Mxweb', MKY_Open_Mxweb);

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

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

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 在前期文档中下载（不会读到这还没看这个文档吧？）。

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

全文到此结束。