mxcad 1.0.340 → 1.0.342
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.
- package/README.md +202 -106
- package/dist/mxcad.d.ts +110 -2
- package/dist/mxcad.es.js +226 -160
- package/dist/mxcad.umd.js +3 -3
- package/dist/wasm/2d/mxdrawassembly_min.js +1955 -1943
- package/dist/wasm/2d/mxdrawassembly_min.wasm +0 -0
- package/dist/wasm/2d-st/mxdrawassembly_min.js +1959 -1946
- package/dist/wasm/2d-st/mxdrawassembly_minst.wasm +0 -0
- package/package.json +1 -1
package/README.md
CHANGED
|
@@ -1,37 +1,41 @@
|
|
|
1
|
-
# Quick Start
|
|
2
1
|
|
|
3
|
-
|
|
2
|
+
# Preface
|
|
4
3
|
|
|
5
|
-
|
|
4
|
+
The development of mxcad requires dependency on mxdraw, and the two need to work together. Therefore, if you are unfamiliar with the mxdraw library, please refer to：<https://github.com/mxcad/mxdraw/>
|
|
6
5
|
|
|
7
|
-
|
|
8
|
-
**Official Website:** <https://www.webcadsdk.com/>
|
|
6
|
+
If you have any questions during the use of mxcad, feel free to contact us. Contact: 710714273@qq.com
|
|
9
7
|
|
|
10
|
-
|
|
8
|
+
;
|
|
11
9
|
|
|
12
|
-
|
|
10
|
+
Official mxcad website: <https://www.webcadsdk.com/>
|
|
11
|
+
|
|
12
|
+
# Quick Start with mxcad
|
|
13
|
+
|
|
14
|
+
mxcad supports online rendering of `.mxweb` format files (this file format is our unique front-end CAD format). CAD drawing files (DWG, DXF) can be converted into .mxweb files via the drawing conversion program provided in our [mxdraw CloudDraw development package](https://www.webcadsdk.com/). The converted `.mxweb` files will be handed over to mxcad for browsing and editing in web pages. The edited `.mxweb` files can similarly be converted back into CAD drawing files through the drawing conversion program.
|
|
15
|
+
|
|
16
|
+
For specific steps on converting CAD drawing files to `.mxweb` format, please refer to the [drawing conversion steps](#drawing-conversion-steps) below.
|
|
13
17
|
|
|
14
18
|
## Using mxcad with Vite
|
|
15
19
|
|
|
16
|
-
In this section, we
|
|
20
|
+
In this section, we will introduce how to create a simple mxcad project locally. The created project will use a build setup based on Vite.
|
|
17
21
|
|
|
18
|
-
|
|
22
|
+
First, ensure that you have installed [Node.js](https://nodejs.org/en), then navigate to the directory where you need to create the project:
|
|
19
23
|
|
|
20
|
-
1. Run the following commands in
|
|
24
|
+
1. Run the following commands in the command line to initialize the project and install Vite and mxcad
|
|
21
25
|
|
|
22
26
|
```sh
|
|
23
27
|
npm init -y
|
|
24
28
|
npm install vite -D
|
|
25
29
|
npm install mxcad
|
|
26
30
|
```
|
|
27
|
-
:::tip Note
|
|
28
|
-
If using `pnpm
|
|
31
|
+
:::tip tip Note
|
|
32
|
+
If using `pnpm` for installation, you also need to manually install mxdraw
|
|
29
33
|
```sh
|
|
30
|
-
pnpm install mxdraw
|
|
34
|
+
`pnpm install mxdraw`
|
|
31
35
|
```
|
|
32
36
|
:::
|
|
33
37
|
|
|
34
|
-
2. Create
|
|
38
|
+
2. Create a new index.html file in the project root directory and draw a canvas.
|
|
35
39
|
|
|
36
40
|
```html
|
|
37
41
|
<!DOCTYPE html>
|
|
@@ -40,46 +44,51 @@ pnpm install mxdraw
|
|
|
40
44
|
<meta charset="UTF-8">
|
|
41
45
|
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
|
42
46
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
43
|
-
<title>
|
|
47
|
+
<title>vite use mxcad</title>
|
|
44
48
|
</head>
|
|
45
49
|
<body>
|
|
46
|
-
<div style="height: 600px; overflow: hidden;">
|
|
47
|
-
<canvas id="myCanvas"></canvas>
|
|
48
|
-
</div>
|
|
50
|
+
<div style="height: 600px; overflow: hidden;"> <canvas id="myCanvas"></canvas></div>
|
|
49
51
|
</body>
|
|
50
52
|
</html>
|
|
51
53
|
```
|
|
52
54
|
|
|
53
|
-
3. Create a `src` directory in the root, and
|
|
55
|
+
3. Create a new `src` directory in the root directory, and create an `assets` folder within this directory to store the target `mxweb` file. ([Click to download an mxweb file](https://gitee.com/mxcadx/mxcad_docs/blob/master/examples/public/test2.mxweb))
|
|
54
56
|
|
|
55
|
-
4.
|
|
57
|
+
4. Create a new `index.ts` file in the `src` directory (Vite supports ts by default).。
|
|
56
58
|
|
|
57
|
-
|
|
59
|
+
By calling the `create()` method in mxcad, load the target drawing. The file paths loaded in this method are all absolute HTTP URL paths relative to the position of the JavaScript call, i.e., the **web address** of the file. In Vite, you can obtain the correct **web address** of the file using the loading method shown in the example code below.
|
|
58
60
|
|
|
59
61
|
```ts
|
|
60
62
|
import { McObject } from "mxcad"
|
|
61
63
|
|
|
62
|
-
//
|
|
64
|
+
// Place both 2d and 2d-st into static resources to ensure normal operation regardless of whether SharedArrayBuffer is enabled
|
|
65
|
+
const mode = "SharedArrayBuffer" in window ? "2d" : "2d-st"
|
|
66
|
+
// Create an mxcad instance object
|
|
63
67
|
const mxcad = new McObject()
|
|
64
68
|
mxcad.create({
|
|
65
|
-
|
|
66
|
-
|
|
69
|
+
// ID of the canvas element
|
|
70
|
+
canvas: "#myCanvas",
|
|
71
|
+
// Get the path location of the wasm-related files (wasm/js/worker.js)
|
|
72
|
+
locateFile: (fileName)=> new URL(`/node_modules/mxcad/dist/wasm/${mode}/${fileName}`, import.meta.url).href,
|
|
73
|
+
// URL path of the file to be initialized and opened
|
|
67
74
|
fileUrl: new URL("../src/assets/test.mxweb", import.meta.url).href,
|
|
68
|
-
|
|
75
|
+
// Provide the directory path for loading fonts
|
|
76
|
+
fontspath: new URL("node_modules/mxcad/dist/fonts", import.meta.url).href,
|
|
69
77
|
})
|
|
78
|
+
|
|
70
79
|
```
|
|
71
80
|
|
|
72
|
-
|
|
81
|
+
Import this ts file into the above html file.
|
|
82
|
+
|
|
83
|
+
The `create()` method in mxcad needs to be called after the canvas element has finished loading on the page, so the script tag needs to be placed inside the body tag, allowing the browser to parse the HTML page first before downloading and executing the code in the script tag.
|
|
73
84
|
|
|
74
85
|
```html
|
|
75
86
|
<script type="module" src="./src/index.ts"></script>
|
|
76
87
|
```
|
|
77
88
|
|
|
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
89
|
5. Create a `vite.config.ts` file in the root directory.
|
|
81
90
|
|
|
82
|
-
mxcad uses
|
|
91
|
+
mxcad uses SharedArrayBuffer by default, which is a special type in JavaScript that allows multiple Web Worker threads to share the same memory space. Therefore, using mxcad requires setting the corresponding response headers on the server side.
|
|
83
92
|
|
|
84
93
|
```ts
|
|
85
94
|
import { defineConfig } from "vite"
|
|
@@ -94,34 +103,32 @@ export default defineConfig({
|
|
|
94
103
|
})
|
|
95
104
|
```
|
|
96
105
|
|
|
97
|
-
6. After completing the steps
|
|
106
|
+
6. After completing the above steps, run the following command to start the project
|
|
98
107
|
|
|
99
108
|
```sh
|
|
100
109
|
npx vite
|
|
101
110
|
```
|
|
102
111
|
|
|
103
|
-
|
|
104
|
-
|
|
105
|
-
---
|
|
112
|
+
Reference example source code: <https://gitee.com/mxcadx/mxcad_docs/tree/master/examples/vite>
|
|
106
113
|
|
|
107
114
|
## Using mxcad via CDN
|
|
108
115
|
|
|
109
|
-
You can use mxcad directly
|
|
116
|
+
You can use mxcad directly through a script tag with a CDN:
|
|
110
117
|
|
|
111
|
-
|
|
118
|
+
Here we use [unpkg](https://unpkg.com/), but you can use any CDN that provides npm package services, or you can download this file and serve it yourself
|
|
112
119
|
|
|
113
120
|
```html
|
|
114
|
-
<script
|
|
115
|
-
<script
|
|
121
|
+
<script scr="https://unpkg.com/mxdraw/dist/mxdraw.umd.js" crossorigin="anonymous"></script>
|
|
122
|
+
<script scr="https://unpkg.com/mxcad/dist/mxcad.umd.js" crossorigin="anonymous"></script>
|
|
116
123
|
```
|
|
124
|
+
### Using the Global Build Version
|
|
117
125
|
|
|
118
|
-
|
|
119
|
-
|
|
120
|
-
Example with global build:
|
|
126
|
+
Example of the global build version:
|
|
121
127
|
|
|
122
128
|
```html
|
|
123
129
|
<!DOCTYPE html>
|
|
124
130
|
<html lang="en">
|
|
131
|
+
|
|
125
132
|
<head>
|
|
126
133
|
<meta charset="UTF-8">
|
|
127
134
|
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
|
@@ -130,41 +137,41 @@ Example with global build:
|
|
|
130
137
|
<script src="https://unpkg.com/mxdraw" crossorigin="anonymous"></script>
|
|
131
138
|
<script src="https://unpkg.com/mxcad" crossorigin="anonymous"></script>
|
|
132
139
|
</head>
|
|
140
|
+
|
|
133
141
|
<body>
|
|
134
|
-
<div style="height: 600px; overflow: hidden;">
|
|
135
|
-
<canvas id="myCanvas" style="height: 300px"></canvas>
|
|
136
|
-
</div>
|
|
142
|
+
<div style="height: 600px; overflow: hidden;"> <canvas id="myCanvas" style="height: 300px"></canvas></div>
|
|
137
143
|
<script>
|
|
138
144
|
const { McObject } = MxCAD
|
|
139
145
|
const mxobj = new McObject()
|
|
140
146
|
mxobj.create({
|
|
141
|
-
canvas: "#myCanvas"
|
|
147
|
+
canvas: "#myCanvas",//canvas's id
|
|
142
148
|
locateFile: (fileName) => "https://unpkg.com/mxcad/dist/wasm/2d-st/" + fileName,
|
|
143
149
|
fontspath: "https://unpkg.com/mxcad/dist/fonts/",
|
|
144
|
-
fileUrl: "./test2.mxweb"
|
|
150
|
+
fileUrl: "./test2.mxweb"//path to the target drawing
|
|
145
151
|
})
|
|
146
152
|
</script>
|
|
147
153
|
</body>
|
|
154
|
+
|
|
148
155
|
</html>
|
|
149
156
|
```
|
|
150
157
|
|
|
151
|
-
|
|
158
|
+
参考示例源码：<https://gitee.com/mxcadx/mxcad_docs/tree/master/examples/h5>
|
|
152
159
|
|
|
153
|
-
###
|
|
160
|
+
### Build the version using the ES module
|
|
154
161
|
|
|
155
|
-
|
|
162
|
+
Most modern browsers already natively support the ES module, so we can use mxcad like this through the CDN and the native ES module. Because they depend on mxdraw mxcad library, so [Import mapping table (Import Maps)](https://caniuse.com/import-maps) to tell the browser how to locate the mxdraw module and mxcad module to Import.
|
|
163
|
+
|
|
164
|
+
You can also add other dependencies to the mapping table - but make sure you are using the ES module version of the library.
|
|
156
165
|
|
|
157
166
|
```html
|
|
158
|
-
<div style="height: 600px; overflow: hidden;">
|
|
159
|
-
<canvas id="myCanvas" style="height: 300px"></canvas>
|
|
160
|
-
</div>
|
|
167
|
+
<div style="height: 600px; overflow: hidden;"> <canvas id="myCanvas" style="height: 300px"></canvas></div>
|
|
161
168
|
<script type="importmap">
|
|
162
|
-
{
|
|
163
|
-
|
|
169
|
+
{
|
|
170
|
+
"imports": {
|
|
164
171
|
"mxdraw": "https://unpkg.com/mxdraw/dist/mxdraw.esm.js",
|
|
165
172
|
"mxcad": "https://unpkg.com/mxcad/dist/mxcad.es.js"
|
|
173
|
+
}
|
|
166
174
|
}
|
|
167
|
-
}
|
|
168
175
|
</script>
|
|
169
176
|
<script type="module">
|
|
170
177
|
import { McObject } from "mxcad"
|
|
@@ -179,65 +186,61 @@ Modern browsers support ES modules natively. Use import maps to resolve `mxdraw`
|
|
|
179
186
|
</script>
|
|
180
187
|
```
|
|
181
188
|
|
|
182
|
-
|
|
183
|
-
|
|
184
|
-
## Using mxcad with Webpack
|
|
185
|
-
|
|
186
|
-
mxcad can also be used with other bundlers like Webpack.
|
|
189
|
+
## Use mxcad with webpack
|
|
187
190
|
|
|
188
|
-
|
|
191
|
+
mxcad is also supported in other packaging tools, and building mxcad projects based on webpack is described below.
|
|
189
192
|
|
|
193
|
+
1. Project initialization and installation of webpack and mxcad.
|
|
190
194
|
```sh
|
|
191
195
|
npm init -y
|
|
192
196
|
npm install webpack webpack-cli copy-webpack-plugin@5 html-webpack-plugin -D
|
|
193
197
|
npm install mxcad
|
|
194
198
|
```
|
|
195
199
|
|
|
196
|
-
2. Create `index.html` in the root
|
|
197
|
-
|
|
200
|
+
2. Create a new `index.html` file in the root directory and draw the canvas.
|
|
198
201
|
```html
|
|
199
202
|
<!DOCTYPE html>
|
|
200
203
|
<html>
|
|
201
204
|
<head>
|
|
202
205
|
<meta charset="utf-8" />
|
|
203
|
-
<title>
|
|
206
|
+
<title>start</title>
|
|
207
|
+
<script src="https://unpkg.com/lodash@4.17.20"></script>
|
|
204
208
|
</head>
|
|
205
209
|
<body>
|
|
206
|
-
<div style="height: 600px; overflow: hidden;">
|
|
207
|
-
<canvas id="myCanvas"></canvas>
|
|
208
|
-
</div>
|
|
210
|
+
<div style="height: 600px; overflow: hidden;"> <canvas id="myCanvas"></canvas></div>
|
|
209
211
|
</body>
|
|
210
212
|
</html>
|
|
211
213
|
```
|
|
212
214
|
|
|
213
|
-
3. Create a `src` directory and `
|
|
215
|
+
3. Create a `src` directory in the root directory and a `index.js` file in the ` src` directory to load the target file
|
|
214
216
|
|
|
215
217
|
```js
|
|
216
|
-
import {
|
|
218
|
+
import { McObject } from "mxcad"
|
|
217
219
|
|
|
218
220
|
const mxcad = new McObject()
|
|
219
221
|
mxcad.create({
|
|
220
222
|
canvas: "#myCanvas",
|
|
221
|
-
|
|
223
|
+
// Access http:xxx.com/test.mxweb to obtain the corresponding file
|
|
224
|
+
// Please provide the document yourself
|
|
225
|
+
fileUrl: "test.mxweb"
|
|
222
226
|
})
|
|
223
227
|
```
|
|
224
|
-
|
|
225
|
-
Include the script in `index.html`:
|
|
226
|
-
|
|
228
|
+
Introduce the js file under the `index.html` file. Put the script tag inside the body tag and let the browser finish parsing the HTML page before downloading and executing the code in the script tag.
|
|
227
229
|
```html
|
|
228
230
|
<script src="./src/index.js"></script>
|
|
229
231
|
```
|
|
230
232
|
|
|
231
|
-
4. Create `webpack.config.js
|
|
233
|
+
4. Create the `webpack.config.js` file in the root directory.
|
|
232
234
|
|
|
233
|
-
Copy
|
|
235
|
+
Copy the mxcad required files to a static resource.
|
|
234
236
|
|
|
235
237
|
```js
|
|
236
238
|
const path = require('path');
|
|
239
|
+
// Please feel free to use copy-webpack-plugin@5 compatible webpack4 and 5 compatible versions
|
|
237
240
|
const CopyWebpackPlugin = require("copy-webpack-plugin");
|
|
238
241
|
|
|
239
242
|
module.exports = {
|
|
240
|
-
mode: process.env.
|
|
243
|
+
mode: process.env.development === "development" ? "development" : "production",
|
|
241
244
|
entry: './src/index.js',
|
|
242
245
|
devServer: {
|
|
243
246
|
static: './dist',
|
|
@@ -252,11 +255,13 @@ module.exports = {
|
|
|
252
255
|
},
|
|
253
256
|
plugins: [
|
|
254
257
|
new CopyWebpackPlugin([
|
|
258
|
+
// Copy mxcad WASM-related core code The default mxcad request path is /* All files need to be placed under dist2d
|
|
255
259
|
{
|
|
256
260
|
from: "node_modules/mxcad/dist/wasm/2d/*",
|
|
257
261
|
to: path.resolve(__dirname, "dist"),
|
|
258
262
|
flatten: true
|
|
259
263
|
},
|
|
264
|
+
// The font file must be required to display the text in the drawing. The mxcad library default request URL path is /fonts/* All need to be placed under dist/fonts
|
|
260
265
|
{
|
|
261
266
|
from: "node_modules/mxcad/dist/fonts",
|
|
262
267
|
to: path.resolve(__dirname, "dist/fonts"),
|
|
@@ -265,66 +270,157 @@ module.exports = {
|
|
|
265
270
|
},
|
|
266
271
|
])
|
|
267
272
|
],
|
|
273
|
+
// mxcad and mxdraw libraries have js code packages that exceed the size of webpack's default limit and need to set hints: false to close the warning
|
|
268
274
|
performance: {
|
|
269
275
|
hints: false,
|
|
270
276
|
}
|
|
271
277
|
};
|
|
272
278
|
```
|
|
273
279
|
|
|
274
|
-
5. After configuring `
|
|
280
|
+
5. After configuring the `packge.json` file as required, run the 'npx webpack serve' command to see the effect
|
|
275
281
|
|
|
276
|
-
|
|
277
|
-
|
|
278
|
-
|
|
282
|
+
Reference sample source code:
|
|
283
|
+
|
|
284
|
+
<https://gitee.com/mxcadx/mxcad_docs/tree/master/examples/webpack-v4>
|
|
285
|
+
|
|
286
|
+
<https://gitee.com/mxcadx/mxcad_docs/tree/master/examples/webpack-v5>
|
|
287
|
+
|
|
288
|
+
## Other knowledge points
|
|
289
|
+
|
|
290
|
+
### Parameter description of the mxcad.create() function
|
|
291
|
+
|
|
292
|
+
1. canvas：canvas id of the canvas instance
|
|
293
|
+
|
|
294
|
+
2. locateFile：The core of mxcad relies on the wasm file in the corresponding category (` 2d `|` 2d-st `) under the directory `/mxcad/dist/wasm` in mxcad library (the file is compiled and generated by c++), wherein the 2d directory is multi-threaded programs, and the 2D-ST directory is single-threaded programs. This parameter specifies the network path of the wasm program.
|
|
295
|
+
|
|
296
|
+
3. fontspath：Specifies the font file load path in a cad drawing. The default path is `dist/fonts`, where you can add all the font files you need to open your drawings.
|
|
297
|
+
|
|
298
|
+
4. fileUrl：Specifies the network path to open the mxweb drawing.
|
|
299
|
+
|
|
300
|
+
:::tip Tips
|
|
301
|
+
The parameters fontspath, fileUrl and locateFile in the `create()` function that creates mxcad objects in mxcad are network paths.
|
|
302
|
+
:::
|
|
303
|
+
5. onOpenFileComplete: Listen for the callback event when opening a file is successful. Operations to be performed after the drawing is opened can be executed within this method.
|
|
304
|
+
|
|
305
|
+
6. viewBackgroundColor: Set the background color of the view area, with the value in RGB format.
|
|
306
|
+
|
|
307
|
+
7. browse: Whether to set as browse mode. When the value is true or 1, browse mode is enabled and CAD objects cannot be selected; when the value is 2, browse mode is enabled and CAD objects can be selected but cannot be edited by grips; when the value is false, edit mode is enabled.
|
|
279
308
|
|
|
280
|
-
|
|
309
|
+
8. middlePan: Set the operation mode for moving the view. Set to 0 to move the view by clicking the left mouse button; set to 1 to move the view by clicking the middle mouse button; set to 2 to move the view by clicking either the middle or left mouse button.
|
|
281
310
|
|
|
282
|
-
|
|
311
|
+
9. enableUndo: Whether to enable the undo function. If set to true, the Mx_Undo command can be called to undo operations; if set to false, the undo command is disabled. The default setting is false.
|
|
283
312
|
|
|
284
|
-
|
|
313
|
+
10. enableIntelliSelect: Whether to enable the object selection function. Set to true to enable; set to false to disable.
|
|
285
314
|
|
|
286
|
-
|
|
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.
|
|
315
|
+
11. multipleSelect: Whether to enable multiple selection. Set to true to enable; set to false to disable.
|
|
300
316
|
|
|
301
|
-
For more
|
|
317
|
+
For more initialization parameter settings of createMxCad, please refer to the [MxCadConfig Configuration Description](../../api/interfaces/2d.MxCadConfig.md)
|
|
302
318
|
|
|
303
|
-
###
|
|
319
|
+
### Description of multi-thread and single-thread mode
|
|
304
320
|
|
|
305
|
-
mxcad
|
|
321
|
+
mxcad supports multithreading by default for performance reasons. Among them, support for multithreading mode needs to open SharedArrayBuffer permissions, open can use `/wasm/2d` under the multithreaded program, otherwise use `/wasm/ 2d-ST/` under the single-threaded program.
|
|
322
|
+
|
|
323
|
+
The SharedArrayBuffer permission needs to be configured in the server responder, for example, node.js server program to enable SharedArrayBuffer permission set as follows:
|
|
306
324
|
|
|
307
325
|
```js
|
|
308
326
|
const http = require('http');
|
|
309
|
-
http.createServer((req, res)
|
|
327
|
+
http.createServer((req, res)=> {
|
|
310
328
|
res.setHeader("Cross-Origin-Opener-Policy", "same-origin");
|
|
311
329
|
res.setHeader("Cross-Origin-Embedder-Policy", "require-corp");
|
|
312
330
|
})
|
|
313
331
|
```
|
|
314
332
|
|
|
315
|
-
|
|
333
|
+
How to determine whether SharedArrayBuffer permissions are enabled in front-end js, and then automatically use the correct program loading, the code is as follows:
|
|
316
334
|
|
|
317
335
|
```js
|
|
318
336
|
import { McObject } from "mxcad"
|
|
337
|
+
// Putting both 2d and 2D-ST into a static resource ensures that it works regardless of whether SharedArrayBuffer is turned on or not
|
|
319
338
|
const mode = "SharedArrayBuffer" in window ? "2d" : "2d-st"
|
|
320
339
|
const mxobj = new McObject()
|
|
321
340
|
mxobj.create({
|
|
322
|
-
|
|
341
|
+
// ...
|
|
342
|
+
locateFile: (fileName)=> {
|
|
323
343
|
new URL(`/node_modules/mxcad/dist/wasm/${mode}/${fileName}`, import.meta.url).href
|
|
324
|
-
|
|
344
|
+
},
|
|
325
345
|
})
|
|
326
346
|
```
|
|
347
|
+
:::tip Tips
|
|
348
|
+
To use SharedArrayBuffer permissions, Google's browser requires access using HTTPS or the local path (http://localhost).
|
|
349
|
+
:::
|
|
350
|
+
|
|
351
|
+
# Drawing Conversion Steps
|
|
352
|
+
|
|
353
|
+
Due to the large size, multiple versions, and complex format of AutoCAD files (DWG, DXF), directly loading them into web pages is inefficient, occupies large memory space, and is prone to loading failures. Therefore, we have designed and provided a unique web CAD file format: `.mxweb`, which effectively solves the aforementioned numerous issues. mxweb files and CAD drawing files can be converted back and forth using the CloudDraw development package we provide.
|
|
354
|
+
|
|
355
|
+
## Download the CloudDraw Development Package
|
|
356
|
+
|
|
357
|
+
We need to download the [MxDraw CloudDraw development package](https://www.webcadsdk.com/)
|
|
358
|
+
|
|
359
|
+
|
|
360
|
+
|
|
361
|
+
After downloading the `MxDrawCloudServer1.0TryVersion.7z` compressed package, decompress it,
|
|
362
|
+
Go to the directory `MxDrawCloudServer\Bin\MxCAD\Release` under the decompressed MxDrawCloudServer directory, which is the program directory responsible for converting `.mxweb` format.
|
|
363
|
+
|
|
364
|
+
|
|
365
|
+
|
|
366
|
+
|
|
367
|
+
## Convert CAD Drawings to mxweb Format
|
|
368
|
+
|
|
369
|
+
### Method One
|
|
370
|
+
|
|
371
|
+
Open the command window in the directory where the decompressed `MxDraw CloudDraw development package` is located, find the path of the target drawing, then run the command line: mxcadassembly target drawing path.
|
|
372
|
+
|
|
373
|
+
Example code as follows:
|
|
374
|
+
```bash
|
|
375
|
+
cd C:\Users\MxDev\Downloads\MxDrawCloudServer1.0TryVersion\MxDrawCloudServer\Bin\MxCAD\Release
|
|
376
|
+
|
|
377
|
+
mxcadassembly D:\test2.dwg
|
|
378
|
+
```
|
|
327
379
|
|
|
328
|
-
|
|
329
|
-
|
|
330
|
-
|
|
380
|
+
Wait for the command line to output `{"code":0 }` indicating the drawing conversion is successful. The successfully converted `.mxweb` format file will be automatically saved in the same directory as the target drawing.
|
|
381
|
+
|
|
382
|
+
|
|
383
|
+
|
|
384
|
+
### Method Two
|
|
385
|
+
|
|
386
|
+
Open the command window in the directory where the decompressed `MxDraw CloudDraw development package` is located, find the path of the target drawing, then run the command line: mxcadassembly JSON string.
|
|
387
|
+
|
|
388
|
+
Example code as follows:
|
|
389
|
+
```bash
|
|
390
|
+
mxcadassembly.exe {"srcpath":"D:\test2.dwg","outpath":"D:\","outname":"test", "compression":0}
|
|
391
|
+
```
|
|
392
|
+
|
|
393
|
+
| Parameter | Description |
|
|
394
|
+
| --- | --- |
|
|
395
|
+
| srcpath | Path of the file to be converted |
|
|
396
|
+
| outpath | outpath|Output file path |
|
|
397
|
+
| outname | outname|Output file name (suffix needs to be added when converting mxweb to CAD drawings) |
|
|
398
|
+
| compression | 0 means no compression, if this attribute is not written, it means compression |
|
|
399
|
+
|
|
400
|
+
## Convert mxweb Format to CAD Drawings
|
|
401
|
+
|
|
402
|
+
We can also use this program to convert `.mxweb` format files back to `.dwg` format files by executing the following command:
|
|
403
|
+
```bash
|
|
404
|
+
mxcadassembly.exe {"srcpath":"D:\test.mxweb","outpath":"D:\","outname":"test.dwg"}
|
|
405
|
+
```
|
|
406
|
+
:::tip Note
|
|
407
|
+
The parameter outname must include the suffix of the CAD drawing, generally .dwg
|
|
408
|
+
:::
|
|
409
|
+
|
|
410
|
+
## Linux Version
|
|
411
|
+
|
|
412
|
+
For the Linux version of the CloudDraw development package, authorization operation is required before operation:
|
|
413
|
+
Enter the `Bin/Linux/MxCAD` directory, we should first give these files permission and copy some directories to the specified location:
|
|
414
|
+
```bash
|
|
415
|
+
sudo chmod -R 777 mxcadassembly
|
|
416
|
+
|
|
417
|
+
sudo chmod -R 777 ./mx/so/*
|
|
418
|
+
|
|
419
|
+
sudo cp -r -f ./mx/locale /usr/local/share/locale
|
|
420
|
+
```
|
|
421
|
+
|
|
422
|
+
Then we can refer to the Windows version file format conversion method for drawing conversion. For example, call the following command to convert CAD drawings to mxweb format:
|
|
423
|
+
```bash
|
|
424
|
+
./mxcadassembly "{'srcpath':'/home/mx/test.dwg','outpath':'/home/mx/Test','outname':'xxx'}"
|
|
425
|
+
```
|
|
426
|
+
where srcpath: the path where the target CAD file is located, outpath: the specified path where the converted drawing file is located, outname: specifies the filename of the output mxweb file.
|