MxCADApp Npm application integration

mxcad-app is a complete online CAD application plugin developed by us based on the mxcad development package. Users can directly install this plugin and integrate it into their own systems or projects. In just 3 minutes, your website can have professional CAD functions.

1. Installation

Install using npm or yarn mxcad-app：

npm install mxcad-app --save

yarn add mxcad-app

2. Preliminary integration

Integrate mxcad-app based on vite

1.The first step is to import the style files required for the mxcad project in main.js to 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();

The second step is to add the resource configuration related to the MxCAD project in vite.config.js

import { defineConfig } from "vite";
import { mxcadAssetsPlugin } from "mxcad-app/vite";

export default defineConfig({
  plugins: [
      ...
      mxcadAssetsPlugin(),
      ...
  ],
});

Integrate mxcad-app based on webpack

The first step is to import the style files required for the mxcad project in main.js to 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();

The second step is to add the resource configuration 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 files
        use: [
          "style-loader", // Step 2: Inject the CSS code into the <style> tag of 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 handle css under src
      },
    ],
  },
  plugins: [
    new webpack.ContextReplacementPlugin(
      /mxcad-app/, // Match the module path containing mxcad-app
      path.resolve(__dirname, "src") // Limit the scope of context lookup
    ),
    new MxCadAssetsWebpackPlugin(),
  ],
  // ...
  devServer: {
    static: "./dist",
    port: 3000,
  },
};

3. High-level invocation

Custom interface container

If the container element of the mxcad-app page is not specified, it will default to creating a container with a width and height of 100vw or 100vh directly in the project interface, and the mxcad project will also be displayed in full screen. In some scenarios, we need to dynamically control the visibility or display range of mxcad projects. Therefore, we set up the following relevant configurations to specify the specific interface container of 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 to be opened
 * rootContainer：mxcad project container name
 * map：Whether to display the map mode
 */
new MxCADView({
  // mxcadApp.getStaticAssetPath()).toString() to obtain mxcad - app static resource path, the default use static resource for nodemodules/mxcad-app/dist/mxcadAppAssets
  openFile: new URL("test.mxweb", mxcadApp.getStaticAssetPath()).toString(),
  rootContainer: "#myMxCAD",
}).create();

Among them, if it is necessary to modify the static resource path within the MxCAD project, it can be done by calling the 'setStaticAssetPath()' method.

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

Build configuration Settings

The mxCAD-App plugin provides the mxcadAssetsPlugin method to set the loading wasm mode of MxCAD projects, third-party dependencies, subdirectory names where resources are stored, interface UI, shortcut commands, service configuration, theme styles, etc. Users can modify the internal configuration of MxCAD projects in different scenarios according to their own needs.

Configuration based on vite：

import { mxcadAssetsPlugin } from "mxcad-app/vite";
// vite.config.js
export default {
  plugins: [
    mxcadAssetsPlugin({
      isWasmSt: true,
      libraryNames: ["vue"],
      outputDir: "testName",
      // Modify the UI configuration
      transformMxUiConfig: (config) => {
        config.title = "MyCAD"; // Modify the title
        return config;
      },
      // Modify the server configuration
      transformMxServerConfig: (config) => {
        config.serverUrl = "/api/cad"; // Modify the API address
        return config;
      },
      // Modify the 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 mode of wasm

By default, MxCAD projects use multi-threading to load wasm resources. If you need to set single-threaded loading, you can configure the isWasmSt property in the mxcadAssetsPlugin method.

/** Whether to load wasm in a single thread (by default, multi-threading and loading are used) */
  isWasmSt:true

Third-party dependency

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

The currently supported libraries for dependency mapping include 'vue', 'axios',' vuetify ', 'vuetify/components', and' mapboxgl '. You can also visit window.MXCADAPP_EXTERNALLIBRARIES to obtain all the provided dependent libraries, thus not relying on the use of build tools.

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

// After adding it in 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);

Build the subdirectory name for storing the static resources of 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 created by default to store all static resources related to MxCAD, that is, /dist/mxcadAppAssets. If the user needs to modify the folder name where static resources are placed, they can directly call the value of the 'outputDir' attribute in the mxcadAssetsPlugin method.

// Output result:/dist/testName
outputDir: "testName";

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

Call the transform method provided in the mxcadAssetsPlugin method to set the depth of the MxCAD project.

// Modify the UI configuration
/** For more UI configurations, please click "config" to view inside */
transformMxUiConfig: (config) => {
    config.title = "MyCAD"; // Modify the title
    config.mTopButtonBarData.push({
        "icon": "textIcon",
        "prompt": "test",
        "cmd": "Mx_test"
    });// Add a top button bar button
    ...
    return config;
}

// The configuration for modifying the sketch and annotation UI mode is the same as above
   // transformMxSketchesAndNotesUiConfig: (config) => config

// Modify CAD shortcut commands (command aliases)
/** For more modifications to the CAD shortcut command configuration, please click on "config" to view it internally */
transformMxQuickCommand: (config) => {
  // Add the aliases '_test' and 't' of the command 'Mx_test' to see
  // "config" is used to name the alias array object within MxCAD
  config.push(["Mx_test", "_test", "t"]);
  return config;
};

// Modify the server configuration
/** For more information on modifying server configurations, please click on "config" to view it internally */
transformMxServerConfig: (config) => {
    config.serverUrl = "/api/cad"; // Modify the API address
    config.font.push('txt.shx', 'gdt.shx');// Add the font files that need to be loaded initially for the MxCAD project
    ...
 return config;
}

// Modify the Vuetify theme configuration
/** For more modifications to Vuetify theme configurations, please click on the "config" section to view */
transformVuetifyThemeConfig: (config) => {
  config.defaultTheme = "light"; //dark or light
  return config;
};

Core dependency library
mxcad-app with built-in mxcad core library, users can directly use mxcad don't need in the project to install again mxcad plug-in. If not used in a modular way, mxcad mounts in window.MxCAD, and you can directly access the required methods and classes using MxCAD.
ts
```
import { MxCpp } from "mxcad";

// Obtain the current mxcad object
const mxcad = MxCpp.getCurrentMxCAD();
```
mxcad depends on mxdraw, and users can also directly use mxdraw in their projects. If not used in a modular way, mxdraw is mounted in window.Mx. You can directly use Mx to access the required methods and classes.
ts
```
import { MxFun } from "mxdraw";

// Output the content and class of the command line.
MxFun.acutPrintf("Test output");
```
The prerequisite for directly introducing the mxcad and mxdraw modules is to use the build tool for construction. We have provided webpack and vite plugins to support modular development.
As long as the plugin is used, the mxcad and mxdraw modules can be directly imported using import。

4. MxCAD Project Secondary Development

By following the steps above, we can obtain the original MxCAD project integrated with the mxcad-app plugin. If we need to perform secondary development on the original MxCAD project, we can directly use the mxcad and mxdraw core dependency libraries of mxcad-app to extend the functionality of the MxCAD project. Below is an example of implementing parametric drawing and calling internal MxCAD commands in a Vue project.

1. Parametric Drawing Extension

import { McGePoint3d, MxCpp } from "mxcad";

// Draw a circle in MxCAD with the center at (0, 0) and a radius of 100
const drawCircle = () => {
  // Get the current mxcad object
  const mxcad = MxCpp.getCurrentMxCAD();
  // Create a new canvas
  mxcad.newFile();
  mxcad.drawCircle(0, 0, 100);
  mxcad.zoomAll();
};
// Execute the drawCircle() method to draw the target circle in the drawing
drawCircle();

2. Directly Calling MxCAD Internal Commands

import { MxFun } from "mxdraw";
// Call the MxCAD internal line drawing command
MxFun.sendStringToExecute('Mx_line');

Registering commands follows the same process as above. First, implement the CAD functionality using the mxcad API, then register the command using the MxFun internal API.

import { MxFun } from "mxdraw";

const testFun = () => {
  ....
};
// Register the command
MxFun.addCommand("Mx_testFun", testFun);

5. Functional Practice Demo

To facilitate user understanding and usage, we have included demos related to mxcad-app calls in the MxDraw development kit. Users can choose the appropriate usage method for their project framework, such as webpack4, webpack+react, vite+vue, html+js, CDN, etc.

Click Download MxDraw Development Kit to download the SDK package. After extracting it, navigate to the MxDrawCloudServer\SRC\sample\app directory. All target projects are stored in this directory, with the following structure:

Note

MxCADApp: Vue3 project calling mxcad-app.
sample: Other frameworks calling mxcad-app (webpack4, webpack+react, vite+vue, html+js, CDN).

Running the Demo

Navigate to the MxCADApp directory and run npm install to install dependencies.
Run the npm run dev command to start the MxCADApp Npm project.

After running, access http://localhost:8081/. The effect is as follows:

For other framework demos in the MxDrawCloudServer\SRC\sample\app\sample directory, the running method is the same. Navigate to the corresponding directory, run npm install to install dependencies, and then run npm run dev to start the project. After running, access the corresponding project address.

Start

Guide

Basic Drawing

Interactive Drawing

Drawing Editing

Archive

Best Practice

Mx CADAPP Application Integration

Function Example Demo

Labeling Measurement

Drawing Tool

Editing Tool

Type Tool

Other

MxCADApp Npm application integration

1. Installation

2. Preliminary integration

Integrate mxcad-app based on vite

Integrate mxcad-app based on webpack

3. High-level invocation

4. MxCAD Project Secondary Development

1. Parametric Drawing Extension

2. Directly Calling MxCAD Internal Commands

5. Functional Practice Demo

Running the Demo

Mx CADAPP Application Integration

Function Example Demo

Labeling Measurement

Drawing Tool

Editing Tool

Type Tool

Other

MxCADApp Npm application integration ​

1. Installation ​

2. Preliminary integration ​

Integrate mxcad-app based on vite ​

Integrate mxcad-app based on webpack ​

3. High-level invocation ​

4. MxCAD Project Secondary Development ​

1. Parametric Drawing Extension ​

2. Directly Calling MxCAD Internal Commands ​

5. Functional Practice Demo ​

Running the Demo ​

MxCADApp Npm application integration

1. Installation

2. Preliminary integration

Integrate mxcad-app based on vite

Integrate mxcad-app based on webpack

3. High-level invocation

4. MxCAD Project Secondary Development

1. Parametric Drawing Extension

2. Directly Calling MxCAD Internal Commands

5. Functional Practice Demo

Running the Demo