（web cad viewer）Web CAD SDK Integration Method

CAD梦想画图 · 发表于 2025-10-22 14:00:06

Preface

We have created an online CAD project based on mxcad, which includes various CAD functions such as previewing, editing drawings, and operating the drawing database. After user integration, it supports secondary development. Currently, we offer two integration methods: Scheme 1: Integrate the mxcad project through iframe; Scheme 2: Integrate the mxcad-app plugin directly in the project.

Now, let's explain in detail the second mxcad-app integration method. This method is more convenient compared to iframe nested integration, and after integration, only one current system project needs to be maintained.

The initial interface of the MxCAD project is as follows:

I、Basic Integration Steps

#### 1.1、Based on the integration of vite with mxcad-app

Step 1: In `main.js`, import the style files required by the mxCad project and create the initial MxCAD project.

// Introduce the mxcad-app style
import "mxcad-app/style";
// Introduction MxCADView
import { MxCADView } from "mxcad-app";
// Create a default mxcad project
new MxCADView().create();

复制代码

Step 2: Add the configuration resources related to the MxCAD project in `vite.config.js`

import { defineConfig } from "vite";
import { mxcadAssetsPlugin } from "mxcad-app/vite";
export default defineConfig({
plugins: [
...
mxcadAssetsPlugin(),
...
],
});

复制代码

1.2. Integrating mxcad-app with webpack

The first step is to import the required style files for the mxcad project in `main.js`, and create the initial MxCAD project.

// Introduce the mxcad-app style
import "mxcad-app/style";
// Introduce MxCADView
import { MxCADView } from "mxcad-app";
// Create a default mxcad project
new MxCADView().create();

复制代码

Step 2: Add the configuration resources related to the MxCAD project in `vite.config.js`

npm install style-loader css-loader

复制代码

const { MxCadAssetsWebpackPlugin } = require("mxcad-app/webpack");
// webpack.config.js
const webpack = require("webpack");
module.exports = {
// ...
mode: "development",
module: {
rules: [
{
test: / \.css$/, // Match all .css 文件
use: [
"style-loader", // Step 2: Inject the CSS code into the <style> tag within the DOM.
"css-loader", // Step 1: Parse the CSS file and handle @import and url()
],
include: [path.resolve(__dirname, "src"), path.resolve(__dirname, "node_modules/mxcad-app")], // Optional: Only process the CSS files under the "src" directory.
},
],
},
plugins: [
new webpack.ContextReplacementPlugin(
/mxcad-app/, // Match the module path that includes "mxcad-app"
path.resolve(__dirname, "src") // Limit the scope of context search
),
new MxCadAssetsWebpackPlugin(),
],
// ...
devServer: {
static: "./dist",
port: 3000,
},
};

复制代码

II、Higher-order Calls

2.1、Custom Interface Container

If the container element for the page is not specified, `mxcad-app` will automatically create a container with a width and height of 100vw and 100vh directly on the project interface, and the mxcad project will be displayed in full screen. In some situations, we need to dynamically control the visibility or display range of the mxcad project. Therefore, we have set the following related configurations to specify the specific interface container for `mxcad-app`.

<div id="myMxCAD" style="width: 50vw; height: 50vh"></div>

复制代码

// Custom container
import { MxCADView, mxcadApp } from "mxcad-app";
/**
* openFile：The path of the file that needs to be opened
* rootContainer：mxcad Project container name
* map：Do you want to display the map mode?
*/
new MxCADView({
// mxcadApp.getStaticAssetPath()).toString() Obtain the static resource path of mxcad-app. The default used static resource isnodemodules/mxcad-app/dist/mxcadAppAssets
openFile: new URL("test.mxweb", mxcadApp.getStaticAssetPath()).toString(),
rootContainer: "#myMxCAD",
}).create();

复制代码

If you need to modify the static resource path within the MxCAD project, you can do so by calling the `setStaticAssetPath()` method.

import { mxcadApp } from "mxcad-app";
mxcadApp.setStaticAssetPath("https://unpkg.com/mxcad-app/dist/mxcadAppAssets");

复制代码

2.2、Configure settings

The `mxcad-app` plugin provides the `mxcadAssetsPlugin` method to set the loading method of wasm for MxCAD projects, third-party dependencies, subdirectory names for resource storage, interface UI, shortcut commands, service configuration, theme styles, etc. Users can modify the internal configuration of the MxCAD project according to their own needs in different scenarios. Based on the Vite configuration:

import { mxcadAssetsPlugin } from "mxcad-app/vite";
// vite.config.js
export default {
plugins: [
mxcadAssetsPlugin({
isWasmSt:true,
libraryNames: ["vue"],
outputDir:'testName',
// Modify UI configuration
transformMxUiConfig: (config) => {
config.title = "My CAD"; // Modified title
return config;
},
// Modify the server configuration
transformMxServerConfig: (config) => {
config.serverUrl = "/api/cad"; // Modify the API address
return config;
},
// Modify shortcut command (command alias)
// transformMxQuickCommand: (config) => config
// Modify the configuration of the sketch and annotation UI mode
// transformMxSketchesAndNotesUiConfig: (config) => config
// Modify the Vuetify theme configuration
// transformVuetifyThemeConfig: (config) => config
}),
],
};

import { mxcadAssetsPlugin } from "mxcad-app/vite"; 
   // vite.config.js 
   export default { 
     plugins: [ 
       mxcadAssetsPlugin({ 
         isWasmSt:true, 
         libraryNames: ["vue"], 
         outputDir:'testName', 
               // Modify UI configuration 
         transformMxUiConfig: (config) => { 
           config.title = "My CAD"; // Modified title 
           return config; 
         }, 
         // Modify the server configuration 
         transformMxServerConfig: (config) => { 
           config.serverUrl = "/api/cad"; // Modify the API address 
           return config; 
         }, 
         // Modify shortcut command (command alias) 
         // transformMxQuickCommand: (config) => config 
         // Modify the configuration of the sketch and annotation UI mode 
         // transformMxSketchesAndNotesUiConfig: (config) => config 
         // Modify the Vuetify theme configuration 
         // transformVuetifyThemeConfig: (config) => config 
       }), 
     ], 
   };

Configuration based on webpack:

import { MxCadAssetsWebpackPlugin } from "mxcad-app/webpack";
module.exports = {
plugins: [
new MxCadAssetsWebpackPlugin({
isWasmSt:true,
libraryNames: ["vue"],
outputDir:'testName',
transformMxServerConfig: (config) => {
if (process.env.NODE_ENV === 'production') {
config.serverUrl = 'https://api.prod.com/cad';
}
return config;
}
...
})
]
};

复制代码

Set the loading method for WASM:

In the MxCAD project, multi-threaded loading of wasm resources is the default setting. If you need to set it to single-threaded loading, you can modify the `isWasmSt` property in the `mxcadAssetsPlugin` method.

/** Whether to load WASM in single-thread mode (default is to use multi-threading and load)*/
isWasmSt:true

复制代码

Third-party dependency

Users can directly incorporate the mxcad and mxdraw modules used internally by `mxcad-app`. If users need to use other dependencies within `mxcad-app`, they can simply add these external npm libraries to the `libraryNames` attribute in the `mxcadAssetsPlugin` method, and then use them directly.

The currently supported dependency mapping libraries include `vue`, `axios`, `vuetify`, `vuetify/components`, `mapboxgl`, and `pinia`. You can also access `window.MXCADAPP_EXTERNALLIBRARIES` to obtain all the provided dependency libraries, thus avoiding the need to use a build tool.

libraryNames: ["vue","axios"...]

复制代码

// After adding it to the configuration file, you can use the Vue module in mxcad-app (the internal Vue module packaged by mxcad-app) normally.
import { ref } from "vue";
const n = ref(1);

复制代码

Construct the subdirectory name for storing the static resources of the "mxcad-app" after packaging.

After installing `mxcad-app` in your own project and importing the MxCAD project, when building and packaging, a folder named "mxcadAppAssets" will be automatically created to store all the static resources related to MxCAD. If the user needs to modify the folder name where the static resources are placed, they can directly call the value of the `outputDir` attribute in the `mxcadAssetsPlugin` method.

outputDir:'testName'

复制代码

Modify the interface UI, CAD shortcut commands, service configuration, theme styles, etc.

Call the provided `transform` method within the `mxcadAssetsPlugin` method to deeply configure the MxCAD project.

// Modify UI Configuration
/** For more UI configuration options, click inside the config to view */
transformMxUiConfig: (config) => {
config.title = "My CAD"; // Modify the title
config.mTopButtonBarData.push({
"icon": "textIcon",
"prompt": "test",
"cmd": "Mx_test"
});// Add top button bar button
...
return config;
}
// The configuration for modifying the Sketch and Annotations UI mode is the same as above
// transformMxSketchesAndNotesUiConfig: (config) => config

复制代码

// Modify CAD Quick Commands (Command Aliases)
/** For more CAD quick command configuration options, click inside the config to view */
transformMxQuickCommand: (config) => {
// Add aliases '_test', 't' for command Mx_test
// config is the internal MxCAD named alias array object
config.push(['Mx_test','_test','t'])
return config
}

复制代码

// 修改服务器配置
/** 更多修改服务器配置可点击config内部查看 */
transformMxServerConfig: (config) => {
config.serverUrl = "/api/cad"; // 修改API地址
config.font.push('txt.shx', 'gdt.shx');// 添加MxCAD项目初始需要加载的字体文件
...
return config;
}

复制代码

// Modify Vuetify Theme Configuration
/** For more Vuetify theme configuration options, click inside the config to view */
transformVuetifyThemeConfig: (config) => {
config.defaultTheme = 'light';//dark or light
return config
}

复制代码

2.3、Core dependency library

The `mxcad-app` includes the core library of [`mxcad`]. Users can directly use `mxcad` without having to install the `mxcad` plugin in the project again. If not using in a modular way, `mxcad` is mounted in `window.MxCAD` and you can directly use `MxCAD` to access the required methods and classes.

import { MxCpp } from 'mxcad'
// Obtain the current mxcad object const mxcad = MxCpp.getCurrentMxCAD();

复制代码

`mxcad` relies on `mxdraw`, and users can also directly use `mxdraw` in the project. If not using in a modular way, `mxdraw` is mounted in `window.Mx`. You can directly access the required methods and classes by using `Mx`.

import { MxFun } from 'mxdraw'
// Output command line content
MxFun.acutPrintf('Test output')

复制代码

To directly import the `mxcad` and `mxdraw` modules, it is necessary to build using the build tool. We have provided plugins for webpack and vite to support modular development.

As long as you use the plugin, you can directly import the `mxcad` and `mxdraw` modules using `import`.

III、Example of Secondary Development of the MxCAD Project

Based on the above operations, we have integrated the MxCAD project into our project and completed the initialization configuration. Next, we can directly conduct secondary development based on this CAD project. As an example, let's take the implementation of parametric drawing of multiple straight lines in the project. After achieving the drawing command in our own system, register it, and then call our command for drawing straight lines in the MxCAD project and execute the corresponding parameter operations.

3.1、Add methods for drawing various types of straight lines

import { MxCpp, McCmColor } from "mxcad";
function Mx_Test_DrawLine() {
let mxcad = MxCpp.getCurrentMxCAD();
// Clear current display content
mxcad.newFile();
// Change color back to black and white
mxcad.drawColorIndex = 0;
// Change linetype to solid line
mxcad.drawLinetype = "";
// Set line width 4
mxcad.drawLineWidth = 0;
// Create a layer named "LineLayer"
mxcad.addLayer("LineLayer");
// Set current layer to "LineLayer"
mxcad.drawLayer = "LineLayer";
// Directly draw a solid line
// Parameter 1: start point x coordinate of the line, parameter 2: start point y coordinate of the line, parameter 3: end point x coordinate of the line, parameter 4: end point y coordinate of the line
mxcad.drawLine(0, 0, 100, 0);
// Draw a solid diagonal line
mxcad.drawLine(200, 0, 300, 100);
//----------------------------------------------------------------------------------------------------------
// Draw a dashed line
// Define dashed line data, "MyLineType" is the linetype name, "6,-8" is the unit definition of the dashed line, 6 is the solid line length, -8 is the space length.
mxcad.addLinetype("MyLineType", "6,-10");
// Set current linetype to "MyLineType"
mxcad.drawLinetype = "MyLineType";
// Draw a dashed line
mxcad.drawLine(0, 30, 100, 30);
// Draw a diagonal dashed line
mxcad.drawLine(200, 30, 300, 130);
//---------------------------------------------------------------------------------------------------------
// Change drawing color to 16711680 (blue), 16711680 converted to hexadecimal is 0xFF 00 00, where FF is blue, 00 is green, and the second 00 is red.
mxcad.drawColor = new McCmColor(0, 0, 255);
// Draw a blue dashed line
mxcad.drawLine(0, 60, 100, 60);
// Draw a blue diagonal dashed line
mxcad.drawLine(200, 60, 300, 160);
//---------------------------------------------------------------------------------------------------------
// Change color back to black and white
mxcad.drawColorIndex = 0;
// Change linetype to solid line
mxcad.drawLinetype = "";
// Set line width 4
mxcad.drawLineWidth = 4;
// Draw a line with width
mxcad.drawLine(0, 90, 100, 90);
// Draw a diagonal line with width
mxcad.drawLine(200, 90, 300, 190);
//---------------------------------------------------------------------------------------------------------
// Draw a center line (dash-dot line)
mxcad.addLinetype("MyLineType2", "10,-2,3,-2");
// Change linetype to center line
mxcad.drawLinetype = "MyLineType2";
// Change drawing color to 255 (red), 255 converted to hexadecimal is 0x00 00 FF, where 00 is blue, the second 00 is green, FF is red.
mxcad.drawColor = new McCmColor(255, 0, 0);
// Draw a red center line with width
mxcad.drawLine(0, 120, 100, 120);
// Draw a red diagonal center line with width
mxcad.drawLine(200, 120, 300, 220);
//---------------------------------------------------------------------------------------------------------
// Add a linetype with shape
mxcad.addTextStyle("MyLineTypeTextStyle", "txt.shx", "hztxt.shx", 1);
mxcad.addLinetypeEx("MyLineType3", "(12.7,("T=MxDraw","S=2.54","L=-5.08","R=0.0","X=-2.54","Y=-1.27"),-10.08)", "MyLineTypeTextStyle");
mxcad.drawLinetype = "MyLineType3";
mxcad.drawLineWidth = 0;
// Draw a red center line with width
mxcad.drawLine(350, 120, 600, 120);
//---------------------------------------------------------------------------------------------------------
// Add a linetype with shape
// Change color back to black and white
mxcad.drawColorIndex = 0;
mxcad.drawLineWidth = 4;
// Draw a red center line with width
mxcad.drawLine(350, 220, 600, 220);
// Zoom all entities to current display viewport
mxcad.zoomAll();
// Update viewport display
mxcad.updateDisplay();
}

复制代码

3.2、Register drawing command

import { MxFun } from 'mxdraw';
MxFun.addCommand("Mx_Test_DrawLine", Mx_Test_DrawLine);

复制代码

3.3、Binding call logic (taking the example of clicking a button)

<button onclick="MyTestFun('Mx_Test_DrawLine')"> Draw a straight line </button>

复制代码

const MyTestFun = (str:string)=> MxFun.sendStringToExecute(str);

复制代码

3.4、Function Effect Demonstration:

For more examples of mxcad-app related projects, you can download our mxdraw cloud chart development package to learn more details.

账号		自动登录	找回密码
密码			注册

（web cad viewer）Web CAD SDK Integration Method

本帖子中包含更多资源