mxcad 1.0.329 → 1.0.330

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (15) hide show
  1. package/README.md +209 -204
  2. package/dist/mxcad.d.ts +42 -10434
  3. package/dist/mxcad.es.js +60815 -24614
  4. package/dist/mxcad.umd.js +13 -6
  5. package/dist/wasm/2d/mxdrawassembly_min.js +1484 -1482
  6. package/dist/wasm/2d/mxdrawassembly_min.wasm +0 -0
  7. package/dist/wasm/2d-st/mxdrawassembly_min.js +1485 -1483
  8. package/dist/wasm/2d-st/mxdrawassembly_minst.wasm +0 -0
  9. package/package.json +5 -7
  10. package/dist/fonts/CXGDT.ttf +0 -0
  11. package/dist/fonts/spds.shx +0 -0
  12. package/dist/fonts/stadobe.otf +0 -0
  13. package/dist/wasm/3d/mxdraw3d_min.data +0 -0
  14. package/dist/wasm/3d/mxdraw3d_min.js +0 -21
  15. package/dist/wasm/3d/mxdraw3d_min.wasm +0 -0
package/README.md CHANGED
@@ -1,95 +1,123 @@
1
+ # Quick Start
1
2
 
2
- # 快速入门
3
+ > **mxcad must be used together with mxdraw.** If you are not familiar with the mxdraw library, please refer to: <https://mxcadx.gitee.io/mxdraw_docs/>
3
4
 
4
- > mxcad必须和mxdraw一起使用 如果你不了解mxdraw库 请参考：<https://mxcadx.gitee.io/mxdraw_docs/>
5
+ > **Contact:** 710714273@qq.com
5
6
 
6
- > 联系方式: 710714273@qq.com
7
+ [](https://www.webcadsdk.com/img/WX-Two-dimensional-code.png)
8
+ **Official Website:** <https://www.webcadsdk.com/>
7
9
 
8
- ![](https://www.webcadsdk.com/img/WX-Two-dimensional-code.png)
10
+ mxcad supports rendering `.mxweb` format files (a proprietary frontend CAD format). CAD drawing files (DWG, DXF) can be converted into `.mxweb` files using the file conversion tool provided in our [mxdraw CloudDraw Development Kit](https://help.mxdraw.com/?pid=32). The converted `.mxweb` files can then be loaded and edited in a web browser via mxcad. Edited `.mxweb` files can also be converted back to standard CAD file formats using the same conversion tool.
9
11
 
10
- ## 安装
12
+ ---
11
13
 
12
- ### CDN
14
+ ## Using mxcad with Vite
13
15
 
14
- ```html
15
- <script scr="https://unpkg.com/mxdraw/dist/mxdraw.umd.js" ></script>
16
- <script scr="https://unpkg.com/mxcad/dist/mxcad.umd.js"></script>
17
- ```
16
+ In this section, we'll walk through creating a simple mxcad project using Vite.
17
+
18
+ Ensure you have [Node.js](https://nodejs.org/en) installed, then navigate to your desired project directory:
18
19
 
19
- ### NPM
20
+ 1. Run the following commands in your terminal to initialize the project and install Vite and mxcad:
20
21
 
21
22
  ```sh
22
- npm install mxdraw mxcad
23
+ npm init -y
24
+ npm install vite -D
25
+ npm install mxcad
23
26
  ```
27
+ :::tip Note
28
+ If using `pnpm`, you must manually install `mxdraw`:
29
+ ```sh
30
+ pnpm install mxdraw
31
+ ```
32
+ :::
24
33
 
25
- ## 基本用法
34
+ 2. Create an `index.html` file in the project root and set up a canvas:
26
35
 
27
- ::: tip 重要提示
36
+ ```html
37
+ <!DOCTYPE html>
38
+ <html lang="en">
39
+ <head>
40
+ <meta charset="UTF-8">
41
+ <meta http-equiv="X-UA-Compatible" content="IE=edge">
42
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
43
+ <title>Vite with mxcad</title>
44
+ </head>
45
+ <body>
46
+ <div style="height: 600px; overflow: hidden;">
47
+ <canvas id="myCanvas"></canvas>
48
+ </div>
49
+ </body>
50
+ </html>
51
+ ```
28
52
 
29
- 因为mxcad默认使用了`SharedArrayBuffer`
30
- 需要在服务端设置相应对应的响应头:
53
+ 3. Create a `src` directory in the root, and inside it, create an `assets` folder to store your `.mxweb` file. (You can [download a sample mxweb file here](https://gitee.com/mxcadx/mxcad_docs/blob/master/examples/public/test2.mxweb).)
31
54
 
32
- ```js
33
- // nodejs 为例
34
- const http = require('http');
35
- http.createServer((req, res)=> {
36
- res.setHeader("Cross-Origin-Opener-Policy", "same-origin");
37
- res.setHeader("Cross-Origin-Embedder-Policy", "require-corp");
38
- })
55
+ 4. Inside the `src` directory, create an `index.ts` file (Vite supports TypeScript by default).
39
56
 
40
- ```
57
+ Use the `create()` method from mxcad to load the target drawing. The `fileUrl` and other file paths in `create()` must be absolute **network URLs** relative to the script's location. In Vite, you can obtain the correct URL using `import.meta.url`.
41
58
 
42
- :::
59
+ ```ts
60
+ import { McObject } from "mxcad"
61
+
62
+ // Create an mxcad instance
63
+ const mxcad = new McObject()
64
+ mxcad.create({
65
+ canvas: "#myCanvas", // canvas element ID
66
+ locateFile: (fileName) => new URL(`/node_modules/mxcad/dist/wasm/2d/${fileName}`, import.meta.url).href,
67
+ fileUrl: new URL("../src/assets/test.mxweb", import.meta.url).href,
68
+ fontspath: new URL("node_modules/mxcad/dist/fonts", import.meta.url).href,
69
+ })
70
+ ```
43
71
 
44
- 需要canvas元素
72
+ Include this script in your `index.html`:
45
73
 
46
74
  ```html
47
- <div style="height: 600px; overflow: hidden;"> <canvas id="myCanvas"></canvas></div>
75
+ <script type="module" src="./src/index.ts"></script>
48
76
  ```
49
77
 
50
- 推荐使用vite作为构建工具
78
+ > ⚠️ The `create()` method must be called **after** the canvas element is loaded in the DOM. Therefore, place the `<script>` tag inside the `<body>` to ensure the HTML is parsed first.
79
+
80
+ 5. Create a `vite.config.ts` file in the root directory.
81
+
82
+ mxcad uses `SharedArrayBuffer`, which requires specific HTTP headers for cross-origin isolation. Configure your server accordingly:
51
83
 
52
84
  ```ts
53
- import { createMxCad } from "mxcad"
54
- createMxCad({
55
- canvas: "#myCanvas",
56
- locateFile: (fileName)=> new URL(`/node_modules/mxcad/dist/wasm/2d/${fileName}`, import.meta.url).href,
57
- fileUrl: new URL("../assets/test.mxweb", import.meta.url).href
58
- }).then((mxcad)=> {
59
- // 我想换一个文件显示?
60
- mxcad.openWebFile(new URL("../assets/test2.mxweb", import.meta.url).href)
61
- // 我想保存我修改后的文件？
62
- // (你可以在dom元素事件函数中调用，这样可以使用一些最新的浏览器特性保存文件)
63
- mxcad.saveFile()
85
+ import { defineConfig } from "vite"
86
+
87
+ export default defineConfig({
88
+ server: {
89
+ headers: {
90
+ "Cross-Origin-Opener-Policy": "same-origin",
91
+ "Cross-Origin-Embedder-Policy": "require-corp",
92
+ }
93
+ }
64
94
  })
65
95
  ```
66
96
 
67
- ## 示例参考
68
-
69
- 在git中查看示例 [github](https://github.com/mxcad/mxcad_docs/tree/master/examples)
70
- | [gitee](https://gitee.com/mxcadx/mxcad_docs/tree/master/examples)
71
-
72
- 或者通过 执行以下命令查看所有实例
97
+ 6. After completing the steps above, start the project:
73
98
 
74
99
  ```sh
75
- git clone https://github.com/mxcad/mxcad_docs
76
- cd examples
77
- npm install -g pnpm
78
- pnpm install
79
- pnpm run -r dev
100
+ npx vite
80
101
  ```
81
102
 
82
- 你还可以通过[演练场](#演练场)在线编辑修改代码查看运行后的效果
103
+ **Example Source Code:** <https://gitee.com/mxcadx/mxcad_docs/tree/master/examples/vite>
83
104
 
84
- ## 在vite中使用
105
+ ---
85
106
 
86
- 1.安装vite
107
+ ## Using mxcad via CDN
87
108
 
88
- ```sh
89
- npm install vite -D
109
+ You can use mxcad directly via a CDN using `<script>` tags.
110
+
111
+ We use [unpkg](https://unpkg.com/) here, but any npm CDN works. You can also self-host the files.
112
+
113
+ ```html
114
+ <script src="https://unpkg.com/mxdraw/dist/mxdraw.umd.js" crossorigin="anonymous"></script>
115
+ <script src="https://unpkg.com/mxcad/dist/mxcad.umd.js" crossorigin="anonymous"></script>
90
116
  ```
91
117
 
92
- 2.在项目根目录新建html文件
118
+ ### Using the Global Build
119
+
120
+ Example with global build:
93
121
 
94
122
  ```html
95
123
  <!DOCTYPE html>
@@ -98,69 +126,118 @@ npm install vite -D
98
126
  <meta charset="UTF-8">
99
127
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
100
128
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
101
- <title>vite use mxcad</title>
129
+ <title>Document</title>
130
+ <script src="https://unpkg.com/mxdraw" crossorigin="anonymous"></script>
131
+ <script src="https://unpkg.com/mxcad" crossorigin="anonymous"></script>
102
132
  </head>
103
133
  <body>
104
- <div style="height: 600px; overflow: hidden;"> <canvas id="myCanvas"></canvas></div>
105
- <script type="module" src="./src/index.ts"></script>
134
+ <div style="height: 600px; overflow: hidden;">
135
+ <canvas id="myCanvas" style="height: 300px"></canvas>
136
+ </div>
137
+ <script>
138
+ const { McObject } = MxCAD
139
+ const mxobj = new McObject()
140
+ mxobj.create({
141
+ canvas: "#myCanvas",
142
+ locateFile: (fileName) => "https://unpkg.com/mxcad/dist/wasm/2d-st/" + fileName,
143
+ fontspath: "https://unpkg.com/mxcad/dist/fonts/",
144
+ fileUrl: "./test2.mxweb"
145
+ })
146
+ </script>
106
147
  </body>
107
148
  </html>
108
149
  ```
109
150
 
110
- 3.在根目录下新建`src`目录 在`src`目录下新建`index.ts`文件（vite默认支持ts）代码如下:
151
+ **Example Source Code:** <https://gitee.com/mxcadx/mxcad_docs/tree/master/examples/h5>
111
152
 
112
- ```ts
113
- import { createMxCad } from "mxcad"
114
- import { MxFun } from "mxdraw"
153
+ ### Using ES Module Build
115
154
 
116
- createMxCad({
117
- canvas: "#myCanvas",
118
- locateFile: (fileName)=> new URL(`/node_modules/mxcad/dist/wasm/2d/${fileName}`, import.meta.url).href,
119
- fileUrl: new URL("../assets/test.mxweb", import.meta.url).href
120
- })
155
+ Modern browsers support ES modules natively. Use import maps to resolve `mxdraw` and `mxcad` modules:
121
156
 
157
+ ```html
158
+ <div style="height: 600px; overflow: hidden;">
159
+ <canvas id="myCanvas" style="height: 300px"></canvas>
160
+ </div>
161
+ <script type="importmap">
162
+ {
163
+ "imports": {
164
+ "mxdraw": "https://unpkg.com/mxdraw/dist/mxdraw.esm.js",
165
+ "mxcad": "https://unpkg.com/mxcad/dist/mxcad.es.js"
166
+ }
167
+ }
168
+ </script>
169
+ <script type="module">
170
+ import { McObject } from "mxcad"
171
+
172
+ const mxobj = new McObject()
173
+ mxobj.create({
174
+ canvas: "#myCanvas",
175
+ locateFile: (fileName) => "https://unpkg.com/mxcad/dist/wasm/2d-st/" + fileName,
176
+ fontspath: "https://unpkg.com/mxcad/dist/fonts/",
177
+ fileUrl: "/test2.mxweb"
178
+ })
179
+ </script>
122
180
  ```
123
181
 
124
- 4.在`src`目录下创建`assets`并复制`test.mxweb`文件到该目录下
182
+ ---
125
183
 
126
- 5.在根目录下创建`vite.config.ts`文件
184
+ ## Using mxcad with Webpack
127
185
 
128
- ```ts
129
- import { defineConfig } from "vite"
186
+ mxcad can also be used with other bundlers like Webpack.
130
187
 
131
- export default defineConfig({
132
- server: {
133
- headers: {
134
- "Cross-Origin-Opener-Policy": "same-origin",
135
- "Cross-Origin-Embedder-Policy": "require-corp",
136
- }
137
- }
138
- })
188
+ 1. Initialize the project and install dependencies:
189
+
190
+ ```sh
191
+ npm init -y
192
+ npm install webpack webpack-cli copy-webpack-plugin@5 html-webpack-plugin -D
193
+ npm install mxcad
139
194
  ```
140
195
 
141
- 6.完成以上步骤在根目录执行如下命令
196
+ 2. Create `index.html` in the root:
142
197
 
143
- ```sh
144
- npx vite
198
+ ```html
199
+ <!DOCTYPE html>
200
+ <html>
201
+ <head>
202
+ <meta charset="utf-8" />
203
+ <title>Getting Started</title>
204
+ </head>
205
+ <body>
206
+ <div style="height: 600px; overflow: hidden;">
207
+ <canvas id="myCanvas"></canvas>
208
+ </div>
209
+ </body>
210
+ </html>
145
211
  ```
146
212
 
147
- ## 在webpack中使用
213
+ 3. Create a `src` directory and `src/index.js` to load the file:
148
214
 
149
- 1.安装
215
+ ```js
216
+ import { McObject } from "mxcad"
150
217
 
151
- ```sh
152
- npm install webpack webpack-cli copy-webpack-plugin@5 -D
218
+ const mxcad = new McObject()
219
+ mxcad.create({
220
+ canvas: "#myCanvas",
221
+ fileUrl: "test.mxweb" // Ensure this file is accessible at http://your-domain/test.mxweb
222
+ })
223
+ ```
224
+
225
+ Include the script in `index.html`:
226
+
227
+ ```html
228
+ <script src="./src/index.js"></script>
153
229
  ```
154
230
 
155
- 2.在根目录下创建`webpack.config.js`文件
231
+ 4. Create `webpack.config.js`:
232
+
233
+ Copy required mxcad assets to the output directory:
156
234
 
157
235
  ```js
158
236
  const path = require('path');
159
- // copy-webpack-plugin@5 兼容webpack4和5的版本请放心使用
160
237
  const CopyWebpackPlugin = require("copy-webpack-plugin");
161
238
 
162
239
  module.exports = {
163
- mode: process.env.development === "development" ? "development" : "production",
240
+ mode: process.env.NODE_ENV === "development" ? "development" : "production",
164
241
  entry: './src/index.js',
165
242
  devServer: {
166
243
  static: './dist',
@@ -175,13 +252,11 @@ module.exports = {
175
252
  },
176
253
  plugins: [
177
254
  new CopyWebpackPlugin([
178
- // 拷贝mxcad wasm 相关的核心代码 mxcad默认请求的路径是 /* 所有 需要把文件放dist2d下
179
255
  {
180
256
  from: "node_modules/mxcad/dist/wasm/2d/*",
181
257
  to: path.resolve(__dirname, "dist"),
182
258
  flatten: true
183
259
  },
184
- // 必须要字体文件来显示图纸中的文字，mxcad库默认请求URL路径为 /fonts/* 所有需要放在dist/fonts下
185
260
  {
186
261
  from: "node_modules/mxcad/dist/fonts",
187
262
  to: path.resolve(__dirname, "dist/fonts"),
@@ -190,136 +265,66 @@ module.exports = {
190
265
  },
191
266
  ])
192
267
  ],
193
- // mxcad 和 mxdraw库的js代码打包超过webpack默认限制的大小，需要设置hints: false关闭警告
194
268
  performance: {
195
269
  hints: false,
196
270
  }
197
271
  };
198
272
  ```
199
273
 
200
- 3.在根目录新建`index.html`文件
201
-
202
- ```html
203
- <!DOCTYPE html>
204
- <html>
205
- <head>
206
- <meta charset="utf-8" />
207
- <title>起步</title>
208
- <script src="https://unpkg.com/lodash@4.17.20"></script>
209
- </head>
210
- <body>
211
- <div style="height: 600px; overflow: hidden;"> <canvas id="myCanvas"></canvas></div>
212
- <script src="./src/index.js"></script>
213
- </body>
214
- </html>
215
- ```
274
+ 5. After configuring `package.json`, run:
216
275
 
217
- 4.在根目录新建`src`目录 并在`src`目录下新建`index.js`文件
218
-
219
- ```js
220
- createMxCad({
221
- canvas: "#myCanvas",
222
- // 通过需要访问：http:xxx.com/test.mxweb 获取对应的文件
223
- // 请你自行提供该文件
224
- fileUrl: "test.mxweb"
225
- })
276
+ ```sh
277
+ npx webpack serve
226
278
  ```
227
279
 
228
- 5.完成上述步骤执行`npx webpack serve`命令运行查看效果
280
+ ---
229
281
 
282
+ ## Additional Notes
230
283
 
231
- ## 在h5中直接使用
284
+ ### `create()` Configuration Parameters
232
285
 
233
- ```html
234
- <!DOCTYPE html>
235
- <html lang="en">
286
+ 1. **canvas**: ID of the canvas element.
287
+ 2. **locateFile**: URL path to the WASM files in `mxcad/dist/wasm/2d` (multithreaded) or `2d-st` (single-threaded).
288
+ 3. **fontspath**: Path to font files used in CAD drawings. Default: `/fonts`.
289
+ 4. **fileUrl**: Network path to the `.mxweb` file.
290
+ :::tip Tip
291
+ All paths (`fontspath`, `fileUrl`, `locateFile`) must be **absolute network URLs**.
292
+ :::
293
+ 5. **onOpenFileComplete**: Callback when file opens successfully.
294
+ 6. **viewBackgroundColor**: Background color of the view (RGB).
295
+ 7. **browse**: Browsing mode. `true` or `1`: browsing, no selection; `2`: browsing with selection (no editing); `false`: editing mode.
296
+ 8. **middlePan**: View panning behavior. `0`: left-click; `1`: middle-click; `2`: both.
297
+ 9. **enableUndo**: Enable undo functionality (`true`/`false`).
298
+ 10. **enableIntelliSelect**: Enable intelligent object selection.
299
+ 11. **multipleSelect**: Enable multiple selection.
236
300
 
237
- <head>
238
- <meta charset="UTF-8">
239
- <meta http-equiv="X-UA-Compatible" content="IE=edge">
240
- <meta name="viewport" content="width=device-width, initial-scale=1.0">
241
- <title>Document</title>
301
+ For more details, see [MxCadConfig Interface](../../api/interfaces/2d.MxCadConfig.md).
242
302
 
243
- <script src="https://unpkg.com/mxdraw" crossorigin="anonymous"></script>
244
- <script src="https://unpkg.com/mxcad" crossorigin="anonymous"></script>
245
- <script>
246
- const { MxFun } = Mx
247
- const { createMxCad } = mxcad
248
- window.onload = function() {
249
- createMxCad({
250
- canvas: "#myCanvas",
251
- locateFile(fileName) {
252
- /***
253
- * 你可以不设置locateFile属性，
254
- * 默认通过该https://unpkg.com CDN加载或者无法使用SharedArrayBuffer的情况
255
- * mxcad会自动引入2d-st的资源
256
- * 2d与2d-st的区别就是2d-st未使用worker多线程优化，
257
- * 导致在打开图纸时会阻塞js线程导致打开图纸过程中页面卡死的情况
258
- * 推荐使用2d wasm资源，你需要在服务器设置响应头：
259
- * "Cross-Origin-Opener-Policy": "same-origin",
260
- * "Cross-Origin-Embedder-Policy": "require-corp"
261
- *
262
- * 并对于2d wasm资源遵从浏览器同源策略
263
- * (也就是说 locateFile返回的url需要是和自己的服务器域名相同的域名端口才行)
264
- * */
265
- return "https://unpkg.com/mxcad/dist/wasm/2d-st/" + fileName
266
- },
267
- // 请自行在静态服务器上添加test.mxweb文件 如http://xxx.com/test.mxweb
268
- fileUrl: "test.mxweb"
269
- })
270
- }
271
- </script>
272
- </head>
303
+ ### Multithreaded vs. Single-threaded Mode
273
304
 
274
- <body>
275
- <div style="height: 600px; overflow: hidden;"> <canvas id="myCanvas" style="height: 300px"></canvas></div>
276
- </body>
305
+ mxcad defaults to multithreaded mode for performance. Multithreading requires `SharedArrayBuffer`, which needs proper HTTP headers:
277
306
 
278
- </html>
307
+ ```js
308
+ const http = require('http');
309
+ http.createServer((req, res) => {
310
+ res.setHeader("Cross-Origin-Opener-Policy", "same-origin");
311
+ res.setHeader("Cross-Origin-Embedder-Policy", "require-corp");
312
+ })
279
313
  ```
280
314
 
315
+ To detect `SharedArrayBuffer` support and choose the correct mode:
281
316
 
282
- ## createMxCad 的实现
283
-
284
- ```tsx
285
- // 这是createMxCad 实现的大致代码
286
- // 如果你希望整个创建过程是透明公开的,
287
- // 你可以不使用createMxCad 而是使用下面的代码自行创建
288
- import { MxFun, loadCoreCode } from "mxdraw";
289
- import { loadMxCADassembly } from "mxcad"
290
- export default () => {
291
- loadCoreCode()
292
- .then(() => loadMxCADassembly((MxCpp)=> {
293
- MxFun.setIniset({
294
- EnableIntelliSelect: true
295
- })
296
- MxFun.createMxObject({
297
- canvasId: "myCanvas",
298
- isCPPMxCAD: true,
299
- callback(mxDraw, dom) {
300
- mxDraw.initRendererParam({ webgl2: true });
301
- mxDraw.setMouseMiddlePan(true);
302
- mxDraw.on("initObject", () => {
303
- const THREE = MxFun.getMxFunTHREE()
304
- let size = new THREE.Vector2();
305
- mxDraw.getRenderer().getSize(size);
306
- const mxcadObj = MxCpp.App.CreateMxCAD(size.width, size.height, "myCanvas", mxDraw.isWebgl2(), mxDraw.getId());
307
- mxDraw.initMxCpp(mxcadObj);
308
- mxcadObj.openWebFile("test2.mxweb");
309
- });
310
- }
311
- })
312
- }
313
- ,
314
- (fileName: string)=> {
315
- // CDN 加载必须使用wasm/2d-st中的资源、因为github的限制无法使用wasm/2d 资源
316
- // 需要使用wasm/2d需要遵循浏览器同源策略或使用其他手段规避浏览器同源策略
317
- return "https://unpkg.com/mxcad/dist/wasm/2d-st/" + fileName
318
- }),
319
- )
320
- return (<div style="height: 600px; overflow: hidden;"><canvas id="myCanvas" style="height: 300px"></canvas></div>)
321
- }
322
-
323
-
317
+ ```js
318
+ import { McObject } from "mxcad"
319
+ const mode = "SharedArrayBuffer" in window ? "2d" : "2d-st"
320
+ const mxobj = new McObject()
321
+ mxobj.create({
322
+ locateFile: (fileName) => {
323
+ new URL(`/node_modules/mxcad/dist/wasm/${mode}/${fileName}`, import.meta.url).href
324
+ },
325
+ })
324
326
  ```
325
327
 
328
+ :::tip Note
329
+ `SharedArrayBuffer` requires HTTPS or `http://localhost` in modern browsers (e.g., Chrome).
330
+ :::