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
}),
],
};
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.