Quick start

mxcad supports rendering files in .mxweb format (the file format is our unique front-end CAD format), CAD drawing file (DWG, DXF) can be converted to .mxweb file by drawing conversion program in mxdraw Cloud Map development Kit provided by us. Specific operation reference drawing conversion tutorial. The converted .mxweb file will be sent to mxcad for browsing and editing in the web page, and the edited mxweb file can also be converted back to the CAD drawing file format by the drawing conversion program.

We have developed a complete CAD application using the mxcad package, which can be quickly integrated into your own project by referring to the following link: MxCAD APP Application Integration

The vue2 project uses the mxcad example demo download link：https://gitee.com/mxcadx/mxcad_docs/blob/master/examples/vue2_cli

The vue3 project uses the mxcad example demo download link：https://gitee.com/mxcadx/mxcad_docs/blob/master/examples/vue3

react project uses mxcad example demo Download link：https://gitee.com/mxcadx/mxcad_docs/blob/master/examples/react

Use mxcad with Vite

In this section, we'll show you how to create a simple mxcad project locally. The project you create will use a Vite based build setup

First make sure you have it installedNode.js,Then go to the directory where you need to create the project：

Run the following commands on the command line to initialize the project and install in Vite and mxcad

npm init -y
npm install vite -D
npm install mxcad

Look out

If you use pnpm installation, you also need to actively install mxdraw

`pnpm install mxdraw`

Create a new index.html file in the project root directory and draw the canvas canvas

html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>vite use mxcad</title>
</head>
<body>
    <div style="height: 600px; overflow: hidden;"> <canvas id="myCanvas"></canvas></div>
</body>
</html>

Create a directory called src under the root directory and create a folder called assets under that directory to store the target mxweb file. (Click Download an mxweb file)
Create an index.ts file in the src directory (vite supports ts by default).

Load the target drawing by calling the create() method in mxcad. The path of the loaded file in this method is the absolute path of the http URL relative to the js call location, that is, the network address of the file. In vite, the correct network address of the file can be obtained through the loading method in the following example code.

import { McObject } from "mxcad"

// Create an mxcad example object.
const mxcad = new McObject()
mxcad.create({
    // id of the canvas element
    canvas: "#myCanvas",
    // 获取加载wasm相关文件(wasm/js/worker.js)路径位置
    locateFile: (fileName)=> new URL(`/node_modules/mxcad/dist/wasm/2d/${fileName}`, import.meta.url).href,
    // The url path of the open file needs to be initialized
    fileUrl: new URL("../src/assets/test.mxweb", import.meta.url).href,
    // Provides the directory path to load the font
    fontspath:  new URL("node_modules/mxcad/dist/fonts", import.meta.url).href,
})

Import the ts file into the html file above.

The create() method in mxcad can only be called after the canvas element is loaded on the page, so the script tag needs to be placed inside the body tag, so that the browser can first complete the parsing of the HTML page, and then download and execute the code in the script tag.

html

<script type="module" src="./src/index.ts"></script>

Create the 'vite.config.ts' file in the root directory.

Mxcad uses SharedArrayBuffer by default, which is a special type in JavaScript that allows multiple Web Worker threads to share the same memory space, so using mxcad requires a corresponding response header to be set on the server side.

import { defineConfig } from "vite"

export default defineConfig({
    server: {
        headers: {
          "Cross-Origin-Opener-Policy": "same-origin",
          "Cross-Origin-Embedder-Policy": "require-corp",
        }
    }
})

After completing the above steps, run the following command to start the project

npx vite

Reference sample source code: https://gitee.com/mxcadx/mxcad_docs/tree/master/examples/vite

Using mxcad through a CDN

You can use mxcad directly from the CDN with the help of the script tag:

We've used unpkg here, but you can also use any CDN that provides the npm package service, or you can download the file and provide your own service

html

<script scr="https://unpkg.com/mxdraw/dist/mxdraw.umd.js" crossorigin="anonymous"></script>
<script scr="https://unpkg.com/mxcad/dist/mxcad.umd.js" crossorigin="anonymous"></script>

Use the global build version

Global build version example:

html

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="https://unpkg.com/mxdraw" crossorigin="anonymous"></script>
    <script src="https://unpkg.com/mxcad" crossorigin="anonymous"></script>
</head>

<body>
    <div style="height: 600px; overflow: hidden;"> <canvas id="myCanvas" style="height: 300px"></canvas></div>
    <script>
        const { McObject } = MxCAD
        const mxobj = new McObject()
        mxobj.create({
            canvas: "#myCanvas",//The id of canvas
            locateFile: (fileName) => "https://unpkg.com/mxcad/dist/wasm/2d-st/" + fileName,
            fontspath: "https://unpkg.com/mxcad/dist/fonts/",
            fileUrl: "./test2.mxweb"//Object drawing path
        })
    </script>
</body>

</html>

Reference sample source code：https://gitee.com/mxcadx/mxcad_docs/tree/master/examples/h5

Build the version using the ES module

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) to tell the browser how to locate the mxdraw module and mxcad module to Import.

You can also add other dependencies to the mapping table - but make sure you are using the ES module version of the library.

html

<div style="height: 600px; overflow: hidden;"> <canvas id="myCanvas" style="height: 300px"></canvas></div>
<script type="importmap">
    {
        "imports": {
        "mxdraw": "https://unpkg.com/mxdraw/dist/mxdraw.esm.js",
        "mxcad": "https://unpkg.com/mxcad/dist/mxcad.es.js"
        }
    }
</script>
<script type="module">
    import { McObject } from "mxcad"

    const mxobj = new McObject()
    mxobj.create({
        canvas: "#myCanvas",
        locateFile: (fileName) => "https://unpkg.com/mxcad/dist/wasm/2d-st/" + fileName,
        fontspath: "https://unpkg.com/mxcad/dist/fonts/",
        fileUrl: "/test2.mxweb"
    })
</script>

Use mxcad with webpack

mxcad is also supported in other packaging tools, and building mxcad projects based on webpack is described below.

Project initialization and installation of webpack and mxcad.

npm init -y
npm install webpack webpack-cli copy-webpack-plugin@5 html-webpack-plugin -D
npm install mxcad

Create a new index.html file in the root directory and draw the canvas.

html

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>start</title>
    <script src="https://unpkg.com/lodash@4.17.20"></script>
  </head>
  <body>
     <div style="height: 600px; overflow: hidden;"> <canvas id="myCanvas"></canvas></div>
  </body>
</html>

Create a src directory in the root directory and a index.js file in the src directory to load the target file

import {  McObject } from "mxcad"

const mxcad = new McObject()
mxcad.create({
    canvas: "#myCanvas",
    // Access http:xxx.com/test.mxweb to obtain the corresponding file
    // Please provide the document yourself
    fileUrl: "test.mxweb"
})

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.

html

<script src="./src/index.js"></script>

Create the webpack.config.js file in the root directory.

Copy the mxcad required files to a static resource.

const path = require('path');
//  Please feel free to use copy-webpack-plugin@5 compatible webpack4 and 5 compatible versions
const CopyWebpackPlugin = require("copy-webpack-plugin");

module.exports = {
  mode: process.env.development === "development" ? "development" : "production",
  entry: './src/index.js',
  devServer: {
    static: './dist',
    headers: {
      "Cross-Origin-Opener-Policy": "same-origin",
      "Cross-Origin-Embedder-Policy": "require-corp"
    }
  },
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: 'main.js',
  },
  plugins: [
    new CopyWebpackPlugin([
      // Copy mxcad WASM-related core code The default mxcad request path is /* All files need to be placed under dist2d
      {
        from: "node_modules/mxcad/dist/wasm/2d/*",
        to: path.resolve(__dirname, "dist"),
        flatten: true
      },
      // 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
      {
        from: "node_modules/mxcad/dist/fonts",
        to: path.resolve(__dirname, "dist/fonts"),
        flatten: true,
        toType: "dir"
      },
    ])
  ],
  // 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
  performance: {
    hints: false,
  }
};

After configuring the packge.json file as required, run the 'npx webpack serve' command to see the effect

Reference sample source code:

https://gitee.com/mxcadx/mxcad_docs/tree/master/examples/webpack-v4

https://gitee.com/mxcadx/mxcad_docs/tree/master/examples/webpack-v5

Other knowledge points

Parameter description of the mxcad.create() function

canvas：canvas id of the canvas instance
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.
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.
fileUrl：Specifies the network path to open the mxweb drawing.

Tips

The parameters fontspath, fileUrl and locateFile in the create() function that creates mxcad objects in mxcad are network paths.

Description of multi-thread and single-thread mode

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.

The SharedArrayBuffer permission needs to be configured in the server responder, for example, node.js server program to enable SharedArrayBuffer permission set as follows:

const http = require('http');
http.createServer((req, res)=> {
    res.setHeader("Cross-Origin-Opener-Policy", "same-origin");
    res.setHeader("Cross-Origin-Embedder-Policy", "require-corp");
})

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:

import { McObject } from "mxcad"
// Putting both 2d and 2D-ST into a static resource ensures that it works regardless of whether SharedArrayBuffer is turned on or not
const mode = "SharedArrayBuffer" in window ? "2d" : "2d-st"
const mxobj = new McObject()
mxobj.create({
  // ...
   locateFile: (fileName)=> {
    new URL(`/node_modules/mxcad/dist/wasm/${mode}/${fileName}`, import.meta.url).href
   },
})

Tips

To use SharedArrayBuffer permissions, Google's browser requires access using HTTPS or the local path (http://localhost).

Online presentation

Operating instructions:

Click on the drawing graph to select the element, you can click on the operation clip to change the graph;

Press the mouse wheel press and move the mouse to drag the drawing;

Scroll the mouse wheel to zoom in and out of the drawing;

Press Esc to cancel all selections

Note

github and network issues may load slowly and may take a few minutes...

Function Example demo

Labeling measurement

Drawing tool

Editing tool

Type tool

Other

Quick start

Use mxcad with Vite

Using mxcad through a CDN

Use the global build version

Build the version using the ES module

Use mxcad with webpack

Other knowledge points

Parameter description of the mxcad.create() function

Description of multi-thread and single-thread mode

Online presentation

Labeling measurement

Drawing tool

Editing tool

Type tool

Other

Quick start ​

Use mxcad with Vite ​

Using mxcad through a CDN ​

Use the global build version ​

Build the version using the ES module ​

Use mxcad with webpack ​

Other knowledge points ​

Parameter description of the mxcad.create() function ​

Description of multi-thread and single-thread mode ​

Online presentation ​

Quick start

Use mxcad with Vite

Using mxcad through a CDN

Use the global build version

Build the version using the ES module

Use mxcad with webpack

Other knowledge points

Parameter description of the mxcad.create() function

Description of multi-thread and single-thread mode

Online presentation