WEB CAD Edit DWG (MxCAD Development SDK)

preamble

Many enterprises have online browsing and editing of DWG files within the demand, today to give you a talk about online CAD SDK how to integrate and secondary development to complete the editing function, the following project is mainly used for the integration of MxCad online editing page, through a number of configurations and plug-ins to achieve their own drawings editing page, MxCad online editing front-end project is based on Vue3 and vuetify3 MxCad online editing front-end project is based on Vue3 and vuetify3 UI framework.

H5 version

Demo address. https://demo.mxdraw3d.com:3000/mxcad/
Packaging source code download location. https://demo.mxdraw3d.com:3562/MxCADCode.7z
After decompressing the directory, there are the following directories.
dist: MxCad online editing project packaged front-end resources MxCAD: Plug-in for secondary extensions to MxCad for online editing project projects MxCADiframe: Sample Demo for Embedding MxCad Online Editing Project via iframe

First, go to the MxCAD and MxCADiframe directories, open the command line and run the command npm install. Run the command to debug the MxCAD project: npm run dev
The result after running.

Run debugging MxCADiframe project command: npm run serve , at this time directly open may not be able to get the drawing or iframe prompts localhost has refused to connect the situation, this is because it must be the same source to work, here on the visit : http://localhost:8081/?debug=true That is to say, you have to load the front-end resources in the dist directory on the same port under the server of your own project.
Then the front-end through the iframe introduced to their own projects. The result after running.

The entire secondary development process of the MxCad online editing front-end project is as follows.
(1)Download the source code and unzip it, then go to the MxCAD directory and run npm install to install the dependencies;
(2)Run npm run dev to debug and develop your own requirements;
(3)Run npm run build to package the plugin, and a js file will be generated in the dist directory;
(4)Copy the entire dist directory of front-end resources to your own project's (debugging) server;
(5)Go to the MxCADiframe project and run npm install to install the dependencies;
(6)Set the src attribute of the iframe in its src/components/Home.vue to the address of the front-end resource you just copied to your project server;
(7)Finally, you can see the effect without problems, in accordance with the MxCADiframe catalog this Demo way, in their own front-end project with iframe embedded MxCad online editing project.
The above only describes the front-end part of what needs to be done, but in fact we need the back-end cooperation, and the implementation of some of the necessary back-end interfaces, the entire project complete functionality such as uploading drawings, save the dwg and so on need to be realized, so we also need to download the MxDraw cloud map development kit ( https://www.mxdraw.com/download.html So, we also need to download the MxDraw package (), unzip it after downloading, and then learn how to use the MxDraw package Getting Started document: ( https://help.mxdraw.com/?pid=32 )

We can directly copy all the files of the whole dist to MxDrawCloudServer\SRC\TsWeb\public\mxcad to directly overwrite all the files , as shown:

Then double click to run Mx3dServer.exe , as follows:

Click "Start Web Services" and then click "Start MxCAD" as shown in the figure:

At this point you can see the full page of your modifications. One of the MxCADiframe buttons that opens the page in the MxCADiframe directory extracted from MxCADCode.7z is its source code.
As mentioned above, you can know the whole front-end need to do some of the secondary development process, and for the need to realize their own upload drawings to save drawings of the service interface, you need to read the MxDraw cloud map development kit related documents: https://help.mxdraw.com/?pid=32 For those who need to realize the service interface of uploading and saving drawings by themselves, they need to read the related documents of MxDraw Development Kit: . Then refer to the corresponding interface source code in the MxDraw package, and realize it according to your own needs or directly reuse the interface provided by the MxDraw package. Below we have a detailed look at the dist directory, through the configuration and plug-ins to achieve the needs of secondary development.

Understanding the dist catalog

The dist directory is the packaged front-end resources, which we can directly deploy on our own server. the Node service started by the MxCAD project for debugging is accessing the index.html file in the dist directory. The MxCAD project package npm run build is just responsible for generating a test.js file (the default sample test plugin) for the plugins directory in the dist directory.
A few important configuration files.
(1)mxUiConfig.json: mxUiConfig.json file configuration under dist, mainly for some simple configuration of UI;
(2)title: Browser title, as shown:

(3)headerTitle: Add to automatically replace it with the version number, as shown:

(4)mTitleButtonBarData: array element where prompt represents a prompt and cmd represents a command, clicking the button executes a command, as shown:

(5)The mRightButtonBarData and mLeftButtonBarData: isShow indicate whether or not to show, as shown:

(6)mMenuBarData: list menu list can always be nested in the list to form a multi-level menu, as shown in the figure:

(7)footerRightBtnSwitchData: ["Raster", "Orthogonal", "PolarAxis", "ObjectSnap", "ObjectTrack", "DYN"] Show buttons with the corresponding names, empty arrays are not shown , as shown:

More configuration file details

mxServerConfig.json.
uploadFileConfig: is based on the WebUploader is based on the WebUploader implementation of the file upload, part of the configuration parameters it, the back-end upload interface description is as follows.
(1)baseUrl: the same backend server address, the following relative interfaces are all based on the same server address Default backend service source code location in the CloudMap development package location:.
Windows:

linux:

(2)fileisExist: This interface returns data.ret === "fileAlreadyExist" which means that the file is already existed by md5 checking, if not, it needs to be uploaded. The POST request will carry two parameters { fileHash: "file md5", filename: "file name" } can be based on their own request to achieve the corresponding back-end logic Default upload service related interface implementation in the cloud map development kit location, windows the same, as shown:

(3)chunkisExist: This POST interface request carries the parameters { chunk: "chunk", chunks: "total chunks", fileName: "file name", fileHash: "file md5", size: "size of the chunk file", } backend returns data.ret === " data.ret === " chunkAlreadyExist" means the chunk already exists otherwise it does not exist.
(4)mxfilepath: Indicates which directory in the server static resource directory the uploaded drawing file and converted to mxweb file format is stored in, and the back-end file saved to that location must be this path must be this: fileHash + "." + type + ".mxweb" fileHash represents the md5 value of the cad drawing source file type represents the original file extension of the cad drawing.
(5)saveDwgUrl: save DWG file service address, the interface how to implement the follow-up can provide the development kit Default save file Node service location.

(6)wasmConfig: the configuration here to distinguish which wasm related files to use, specifically look at the configuration file in the dist has a detailed description.

Plugin configuration file plugins/config.json.

plugins: is to store the plugin name of the file, it will load the corresponding current directory in order of the name of the corresponding js script, such as a plugins/test.js fill in a test, and the MxCAD directory is designed to create dist/plugins in the corresponding js file as follows.

MxCAD Catalog Description.

a.Based on vite, you can run npm run dev directly to start the server to browse the pages in the dist directory, and modify the .ts and .vue files in MxCAD will be compiled automatically, and the page will be refreshed automatically.
b.Based on vite, you need to run npm run build manually to package the dist directory, and after packaging, the dist directory will be placed directly in dist/plugins.
c.import introduces mxcad, mxdraw, vue actually used in the dist packaged front-end resources, not a brand new mxcad, mxdraw, vue
d.The configurations of vite.config.ts in the MxCAD directory and the plugins in dist/plugins/config.json should correspond to each other
Tip: For secondary development you can read the mxcad front-end library documentation and the mxdraw front-end library documentation to refer to the API and the Getting Started documentation to realize some of your needs.
In the src of the MxCAD directory we provide a large number of test cases for various functions implemented in the mxcad library, which can be run during debugging, either through the test buttons on the page or by typing commands from the command line, as shown in the figure:

The code corresponding to a function on a button can also be found by searching the source code for the corresponding implementation, as shown in the following figure:

development is completed after the plugin, run npm run build can be packaged into the dist/plugins directory, now we just need to put the dist directory on the server, through the iframe embedding, and the MxCADiframe project is such a simple demo, you can refer to it to complete a simple dist front-end resources integrated into your You can refer to it to complete the simple integration of dist front-end resources into your project. In the src directory of MxCAD directory, there is an iframe.ts file, which corresponds to the postMessage in MxCADiframe project. As shown in the picture:

We recommend this approach for custom requirements and integrated deployments.

electron version

We offer an electron version for desktop applications, download it here:
https://gitee.com/mxcadx/mxdraw-article/blob/master/MxCad项目二次开发插件集成/MxCADAppElectron.zip
Once downloaded and extracted, install the dependency npm install and then run npm run dev to start the electron project.
For electron version, the front-end secondary development plugin (that is, the js file generated by the MxCAD directory mentioned above) does not have any change, we just need to copy the corresponding js script packaged under dist/plugins to the electron project project now downloaded and unpacked under the dist/2d/dist/plugins directory to overwrite it. That's it.
The only difference is that the electron version has a new MxElectronAPI object on the window, which provides the ability to communicate with the main thread. We can write front-end secondary development plug-ins through the MxElectronAPI to determine whether the electron environment. The electron project , there are also their own plug-ins for electron main thread for some secondary development needs . The plugin is written in ts file and packaged based on vite The corresponding vite configuration: vite.plugins.config.ts
Steps to create a new electron project plugin.
(1)Create the src/plugins directory if it exists;
(2)Create a plugin directory such as testPlugin, and then create an index.ts as the plugin entry file in that directory;
(3)vite.plugins.config.ts New plugin entry configuration pluginEntryFileName: "plugins/testPlugin/index.ts"Run command to debug: dev:plugins
(5)Run the command package: build:plugins
(6)If you create preload.ts in the testPlugin and export an object by default, this object holds the API used to communicate with the page, you can refer to the preload script if it is difficult to understand: https://www.electronjs.org/zh/docs/latest/tutorial/tutorial-preload
The preload.ts here is the preload script. The default exported object is the front-end window.MxElectronAPi.plugin directory name (namespace) object defined by contextBridge.exposeInMainWorld, such as the testPlugin directory created now, then the front-end access is window. MxElectronAPi.testPlugin is the default exported object. Similarly the preload2d.ts exported object will override the same values of the properties in the preload.ts exported object, but preload2d.ts is only valid for pages displaying 2D drawings. preload3d.ts is different from preload2d.ts in that it only works on pages displaying in 3D. preload.ts is a public
(7)plugins can exist many plug-ins, each directory below it is a plug-in, the plug-in directory name is the namespace name, the front-end page access to the object is also window.MxElectronAPI.namespace name.
In the electron project plugin's ts file, we keep the mxAppContext up and down You can access it via global.mxAppContext, which currently mounts several properties and methods: getMainWindow, showMessage, showMessageBoxSync, MainTabs. MainTabs There are corresponding type hints and descriptions in ts.
The following descriptions of the corresponding directories in the electron project: