cad-viewer-plus

一个框架无关的 CAD（DXF/DWG）查看与标注组件，基于 @mlightcad/cad-simple-viewer 与 @mlightcad/data-model 封装。

可以在任意 HTML / Vue / React / 原生项目中使用，提供：

• 通过 URL 直接打开 dxf 或 dwg 图纸（也支持 File / ArrayBuffer）
• drawEntity() 通过类型 + 名称 + 样式 创建点 / 线要素，支持多种点符号（圆、方、三角、十字、加号、实心点）
• flyTo(id) 缩放并高亮选中要素
• clickEntity 事件，用户点击图上要素时回调业务方
• getNewFile() 拿到内存中最新编辑后的图纸（File 对象），由业务系统自己决定怎么上传
• 完整的 TypeScript 类型声明

安装

npm install cad-viewer-plus @mlightcad/cad-simple-viewer @mlightcad/data-model

@mlightcad/cad-simple-viewer 和 @mlightcad/data-model 是 peerDependency， 由使用方安装，避免重复打包。

Worker 文件（Vite 默认开箱）

底层依赖几个 web worker（dxf / dwg 解析、mtext 渲染）。Vite 项目只需挂上内置插件，组件默认从 ./workers/ 加载，不必再传 workerBaseUrl，也不必手写 viteStaticCopy：

// vite.config.ts
import { defineConfig } from 'vite'
import cadViewerPlus from 'cad-viewer-plus/vite'

export default defineConfig({
  plugins: [cadViewerPlus()]
})

import { CadViewerPlus } from 'cad-viewer-plus'

const cad = new CadViewerPlus({
  container: document.getElementById('cad-container')!
})

非 Vite、或 worker 不在默认目录时，仍可显式传 workerBaseUrl / workers。

使用

import { CadViewerPlus } from 'cad-viewer-plus'

const cad = new CadViewerPlus({
  container: document.getElementById('cad-container')!
})

// 1) 通过 URL 打开
await cad.openFromUrl('https://your-cdn.example.com/site.dxf')

// 2) 绘制一个点（提供坐标 → 直接落点；不提供 → 进入交互拾取）
const point = await cad.drawEntity({
  kind: 'point',
  type: 'pump',
  name: '一号泵',
  style: {
    color: 0xff4d4f,
    symbol: 'circle',
    size: 5,
    showLabel: true
  },
  location: [120.5, 88.3]
})
console.log('drawn:', point) // -> DrawnEntity

// 3) 绘制一条折线（不传 points 则交互拾取）
await cad.drawEntity({
  kind: 'line',
  type: 'pipeline',
  name: '主管线',
  style: {
    color: 0x52c41a,
    lineType: 'CVP_DASHED', // 内置可用：Continuous / CVP_DASHED / CVP_DOT / CVP_DASHDOT
    lineWeight: 35
  }
})

// 4) 飞行定位
cad.flyTo(point!.id)

// 5) 监听点击事件
cad.on('clickEntity', e => {
  console.log('clicked feature:', e.id, e.name, e.type)
  // → 这里调用你自己的业务弹窗，展示该要素的详细信息
})

// 6) 拿到最新文件交给业务系统上传（这里展示最常见的两种上法）
const file = await cad.getNewFile()

// 6a) FormData 上传
const fd = new FormData()
fd.append('file', file)
await fetch('/api/cad/upload', { method: 'POST', body: fd })

// 6b) 或者拿到原始二进制
const arrayBuffer = await file.arrayBuffer()

API 速查

new CadViewerPlus(options)

| 选项 | 类型 | 说明 | |---|---|---| | container | HTMLElement | 必填，宿主容器（必须已挂载到 DOM） | | workerBaseUrl | string | worker 文件目录前缀，缺省 './workers/'（一般不必传） | | workers | { dxfParser?, dwgParser?, mtextRender? } | 精确指定每个 worker 的 URL（优先级最高） | | autoResize | boolean | 容器尺寸变化时自动 resize，缺省 true |

打开图纸

• openFromUrl(url, options?) — 通过 URL 拉取并打开
• openFromFile(file) — File（来自 <input type=file> 或拖拽）
• openFromBuffer(buffer, fileName) — 直接传 ArrayBuffer

绘制 / 操作要素

• drawEntity(input) — 绘制点或线，返回 DrawnEntity，同时触发 entityDrawn 事件

• flyTo(id) — 定位 + 高亮 + 选中

• clearHighlight() — 清除当前高亮

• removeEntity(id) — 删除一条要素（同时擦除 CAD 实体）

• getEntities() / getEntity(id) — 内存索引查询

• getNewFile(options?) — 输出最新 dxf 文件给外部系统上传

  默认 mode: 'preserve'：完整保留打开时拿到的原始 dxf 字节，只把 drawEntity 新增出来的实体追加到 ENTITIES 段，并把所需的 APPID/LAYER/LTYPE 增量注入 TABLES 段。 这样原图（HATCH 填充、闭合多段线、复杂边界、3D 信息等）零丢失。

  也可以传 { mode: 'rebuild' } 切回"调用 db.dxfOut() 重新序列化整张图" 的旧行为。不推荐：受 @mlightcad/data-model 自身 dxfOut 实现完整度 限制，实测会丢一部分原图属性（这就是历史上"导出后填充消失"的原因）。

  当原始来源是 dwg 等无法获得 dxf 字节的情况，会自动 fallback 到 rebuild。

事件

• on('fileLoaded', e => ...) — 文件已加载
• on('entityDrawn', e => ...) — 要素绘制完成
• on('entityRemoved', e => ...) — 要素删除
• on('clickEntity', e => ...) — 在 CAD 上点击了由本组件创建的要素

所有 on(...) 调用都会返回一个取消订阅函数。

销毁

• destroy() — 取消事件订阅 / 清空内部索引

由于 mlightcad 的 AcApDocManager 是全局单例，多个 CadViewerPlus 实例会共享同一个 docManager； 大多数场景下应只创建一个组件实例。

内置点符号

| 名称 | 视觉 | 说明 | |---|---|---| | circle | ○ | 圆形（默认） | | dot | ● | 实心点（小圆 + 加粗） | | square | □ | 正方形 | | triangle | △ | 等边三角形 | | cross | × | 对角线 | | plus | ＋ | 十字 |

开发 / 构建

npm install
npm run build       # 构建产物到 dist/，并把 workers 拷贝到 workers/
npm run clean

License

MIT