Opening and Saving Drawings ​

Opening and Saving mxweb Files ​

Opening and saving drawings actually refer to opening and saving mxweb files. To convert mxweb files into CAD drawings, please refer to Drawing Conversion.

In the Quick Start guide, the created mxcad control instance provides the following methods:

openWebFile - Open

The first parameter you need to provide is the network path of the mxweb file, which is a path that can be accessed via the internet.

Sometimes, you may want to open mxweb files directly from your local device. How can you do that? Here's the code:

const input = document.createElement("input");
input.type = "file";
input.addEventListener("change", (e) => {
    const filePath = URL.createObjectURL(e.target.files[0]);
    mxcad.openWebFile(filePath);
});
document.body.appendChild(input);

When we select a file, it will create a DOMString to access that local file resource, and we can pass this DOMString as a parameter to open the file.

saveFile - Save

1.It is best to call this method within a user-triggered event (usually a click event) to utilize the browser's provided save file dialog. Otherwise, you may encounter errors or the mxweb file might be directly downloaded.

2.If you want to save the mxweb file without compression (for faster opening and a larger file size), you can look at the saveFile method, which has a parameter parameter. Set it to { compression: 0 } to save the uncompressed file.

mxcad.saveFile(void 0, void 0, true, true, { compression: 0 });

3.In some special cases, you may not want to download the file directly. In this case, you can set the appropriate parameters to prevent direct download and instead receive the binary data in a callback function.

mxcad.saveFile(void 0, (data) => {
    let blob: Blob;
    let isSafari = /^((?!chrome|android).)*safari/i.test(navigator.userAgent);
    if (isSafari) {
        blob = new Blob([data.buffer], { type: "application/octet-stream" });
    } else, {
        blob = new Blob([data.buffer], { type: "application/octet-binary" });
    }
}, false, true, { compression: 0 });

Implementing the Way to Open CAD Drawings ​

Sample project link: https://demo.mxdraw3d.com:3000/mxcad/

In the sample project, you can directly open CAD drawings. How is this achieved?

In essence, it still needs to be converted into an mxweb file, as mxcad can only open mxweb files. However, the behavior may appear as if CAD drawings are being opened directly.

First, upload the CAD drawings to our Node service for processing.

The service will call the program provided in Drawing Conversion to convert the CAD drawings into mxweb files and then return the corresponding access address to the frontend.

For our sample project's Node service and specific Node.js code for reference, please click the following link for more details: https://help.mxdraw.com/?pid=115

By default, you can find the corresponding Node service source code in the development package and directly use the corresponding interface. However, it may not fully meet your requirements, and you may need to modify or even rewrite it.

Therefore, we will explain in detail how to implement the interface for converting drawings.

Backend Implementation ​

Firstly, you need to have Node.js installed. You can check if it's installed successfully by running:

node -v

Now, you can use the Node child_process module to call the mxcadassembly program in the CloudDrawing development package.

The location of the mxcadassembly program:

Windows directory: MxDrawCloudServer\Bin\MxCAD\Release\mxcadassembly.exe

Linux directory: MxDrawCloudServer\Bin\Linux\BinMxCAD\mxcadassembly

const { exec } = require('child_process');

const param = {
  srcpath: "path of the file to be converted on the server",
  outpath: "directory path on the server where the converted file will be saved",
  outname: "name of the converted file"
};

exec(`"path to the mxcadassembly program on the server" "${JSON.stringify(param)}"`);

To save a CAD drawing as a DWG file, you only need to change the srcpath and outname.

Upload the CAD drawing to the server, and refer to this link for details.

Then, combine it with the source code of the MxDrawCloudServer\Bin\MxCAD\MxCADSaveFile\server.js file in the CloudDrawing development package to understand how to upload CAD drawings for conversion and save them as DWG files.

Finally, place the converted file on the server, or you can upload it to an object storage service (OSS) or other cloud storage and return the corresponding access URL.

Frontend Implementation ​

The frontend can call the backend API to upload CAD drawings, wait for successful conversion into mxweb files, and then open refer to: Opening and Saving mxweb Files.

Here's how to save the current mxweb file, which has been opened, rendered, and edited on the web page, as a CAD drawing.

Firstly, obtain the modified mxweb file data, upload it to the server, have the backend write the mxweb data to a file, and finally use the mxcadassembly program to convert the mxweb file into a CAD drawing file. Then, return the corresponding access URL.

By default, we provide the saveFileToUrl method to save CAD drawings. It uploads the current mxweb data to a specified backend endpoint.

Here's how to use it:

import { MxCpp, MxTools } from "mxcad";

MxCpp.getCurrentMxCAD().saveFileToUrl("http://localhost:3337/mxcad/savefiledwg", (iResult, sserverResult) => {
  console.log(sserverResult);

  const filePath = JSON.parse(sserverResult).filePath;

  fetch(filePath).then(async (res) => {
    const blob = await res.blob();
    MxTools.saveAsFileDialog({
      blob,
      filename: "test.dwg",
      types: [{
        description: "DWG drawing",
        accept: {
          "application/octet-stream": [".dwg"],
        },
      }]
    });
  });
});

The http://localhost:3337/mxcad/savefiledwg endpoint is the corresponding Node service provided in the CloudDrawing development package.

Refer to Drawing Conversion and the MxDrawCloudServer\Bin\MxCAD\MxCADSaveFile\server.js file for details.

In actual use, the standard method may not fully meet your requirements. In such cases, you can implement the DWG saving feature yourself. Refer to the following code:

import { MxCpp } from "mxcad";

const mxcad = MxCpp.getCurrentMxCAD();

mxcad.saveFile(void 0, (data) => {
  let blob: Blob;
  const isSafari = /^((?!chrome|android).)*safari/i.test(navigator.userAgent);

  if (isSafari) {
    blob = new Blob([data.buffer], { type: "application/octet-stream" });
  } else {
    blob = new Blob([data.buffer], { type: "application/octet-binary" });
  }

  const file = new File([blob], 'test.mxweb', { type: isSafari ? "application/octet-stream" : "application/octet-binary" });

  fetch('http://localhost:3337/mxcad/savefiledwg', {
    method: 'POST',
    body: file
  });
}, false, true);

Simplest Demo Source Code for Opening and Saving CAD Drawings ​

If you want to quickly understand how the front-end and back-end source code of the MxDraw development package implements opening and saving CAD drawings, please refer to the above description.

Download the simplest DEMO source code to quickly understand the source code.

This DEMO is a Node.js service and requires the installation of Node.js.

Check if Node.js is installed by running the following commands:

node -v
npm -v

Download Source Code

After downloading the demo, unzip it and enter the directory.

node app.js

Finally, the console will prompt you to access: http://localhost:3333

Now you can go to the page and see the results.

In this DEMO, mxcad and mxdraw are imported through CDN. If you find that the CAD drawing is not displayed after opening the page, it may be due to the inability to access CDN resources. You can choose to install and download the mxcad and mxdraw libraries via npm to replace the CDN resources.

npm init
npm install mxcad mxdraw

After installation, the node_modules folder will appear in the directory.

Then, replace the CDN import with the local import of the corresponding resources under the mxcad and mxdraw directories in the node_modules package.

Here are the changes needed. Replace https://unpkg.com with ./node_modules.

index.html:

<!-- Before Changes -->
<script src="https://unpkg.com/mxdraw" crossorigin="anonymous"></script>
<script src="https://unpkg.com/mxcad" crossorigin="anonymous"></script>
createMxCad({
    locateFile: (fileName) => {
        return "https://unpkg.com/mxcad/dist/wasm/2d-st/" + fileName
    },
    fontspath: "https://unpkg.com/mxcad/dist/fonts",
})

<!-- After Changes -->
<script src="./node_modules/mxdraw/dist/mxdraw.umd.js" crossorigin="anonymous"></script>
<script src="./node_modules/mxcad/dist/mxcad.umd.js" crossorigin="anonymous"></script>
createMxCad({
    locateFile: (fileName) => {
        return "./node_modules/mxcad/dist/wasm/2d-st/" + fileName
    },
    fontspath: "./node_modules/mxcad/dist/fonts",
})