CAD Drawing Operations · Frontend mxcad Guide

Scope: previewing, browsing, editing, drawing, annotating, and measuring CAD drawings in a web page (mxcad frontend). Routing rules: see Entry Guide; backend operations: see Backend MxServiceCode Guide.

Contents

I. Program & Resources
II. Official Documentation Chapter Index
III. Task → Doc Lookup Guide

I. Program & Resources

1.0 Acquiring the Program

Two ways to get the conversion program: download the standalone MxConvert zip (conversion program only, recommended) or the backend service zip (which also contains the conversion program). Fixed temp path (download once, reuse across sessions): Windows = %TEMP%\MxCAD\, Linux = /tmp/MxCAD/; follow the check steps in the Entry Guide — when the conversion program is missing, take the URL from the "standalone conversion program" row of the "Link List", download it, and extract to the temp path (clear the temp path first when re-downloading); when it already exists, check for expiry before use. Trial version: 6 months.

Conversion program directory: both zips extract to a single top-level dir named after the zip. From the backend service zip — Windows = MxServiceCode_TryVersion\MxCAD\Release\ under the temp path, Linux = MxServiceCode_TryVersion\Linux\MxCAD\; from the standalone MxConvert zip — the MxConvert_TryVersion\ dir IS the conversion program directory (mxcadassembly and the files below sit directly in it). That directory contains mxcadassembly.exe / mxcadassembly plus: runtime dependency dll/so, mxcad_ini.json, mxcode.bin, mxiconv.data, fonts\ (font directory), and files\.

Three resource sources:

Resource	Source
Format conversion program (DWG→mxweb)	Standalone MxConvert zip (recommended) or backend service zip (includes the conversion program)
mxcad frontend core (JS + wasm)	Official npm packages `mxcad`, `mxdraw`, or CDN `https://unpkg.com/mxcad/dist/...`, `https://unpkg.com/mxdraw/dist/...` (NOT included in the conversion program zip)
Frontend font directory	Copy `fonts\` directly from the conversion program directory

Conversion executable: mxcadassembly.exe (Windows) / mxcadassembly (Linux); mutual conversion among DWG/DXF/MXWEB/PDF/JPG; usage in II-(8) Drawing Conversion Details
First use on Linux: chmod 777 mxcadassembly and mx/so/*

The mxcad frontend only accepts the mxweb format (wgh is deprecated). DWG→mxweb conversion via mxcadassembly must be done before the browser can display anything.

1.1 Previewing a DWG in the Browser (tested workflow)

Convert: use mxcadassembly to generate t1.mxweb (parameter encoding in "Deployment and Startup Notes", section 3). ⚠️ The outpath directory must already exist (the program does not create it automatically; a missing directory returns {"code":2,"message":"write file error"})
Fonts: copy the entire fonts\ directory from the conversion program directory into the web project's font directory (e.g. web/fonts/)
Preview page web/index.html (frontend libs via CDN, fonts and drawing via local HTTP):
html
```
<!DOCTYPE html>
<html lang="en"><head><meta charset="utf-8">
<title>t1 Drawing Preview</title>
<script type="importmap">
{ "imports": {
    "mxdraw": "https://unpkg.com/mxdraw/dist/mxdraw.esm.js",
    "mxcad":  "https://unpkg.com/mxcad/dist/mxcad.es.js"
} }
</script>
</head><body style="margin:0">
<div id="box" style="width:100%;height:100vh;overflow:hidden"><canvas id="c"></canvas></div>
<script type="module">
  import { McObject } from "mxcad";
  new McObject().create({
    canvas: '#c',
    // a browser-accessible network URL: here the mxweb sits in the same directory as the page
    // (under the static server root), so the browser resolves the relative path against the
    // page URL into a full address (same as the official CDN example "./test2.mxweb")
    fileUrl: 't1.mxweb',
    // a browser-accessible network URL: the official CDN example uses
    // "https://unpkg.com/mxcad/dist/fonts/" (a full CDN URL also works), but that directory
    // is missing some font files in practice, so this example copies the converter's fonts\
    // into a local directory instead
    fontspath: 'fonts/',
    locateFile: (n) => 'https://unpkg.com/mxcad/dist/wasm/2d-st/' + n, // wasm via CDN (same as the official docs)
    onOpenFileComplete: () => console.log('drawing opened')
  });
</script>
</body></html>
```
⚠️ Value rules for fileUrl / fontspath / locateFile (consistent with the official Quick Start; adjust per creation mode): All three must ultimately resolve to a browser-accessible network URL (official wording: "the values of the fontspath, fileUrl and locateFile parameters in create() are all network paths"). The form of the value is decided by "who resolves it and where the resource is deployed", and varies with how you create mxcad — do not lock in one style, and do not copy the values from the example above verbatim; pick according to your project:
- CDN / ESM importmap / UMD (no bundler): write a relative path (e.g. "t1.mxweb", "fonts/"); the browser resolves it against the page URL into a full address — provided the resource is deployed under the page's directory (the official CDN example works exactly this way); if the resource lives on a CDN, write the full CDN URL directly (the official example's fontspath uses "https://unpkg.com/mxcad/dist/fonts/"). ⚠️ Do NOT hand-build an absolute URL from location.protocol + host + pathname: in practice this requests a malformed URL like :8080/://127.0.0.1:8080/t1.mxweb (404, onOpenFileComplete never fires)
- Vite / bundlers: use new URL("../src/assets/t1.mxweb", import.meta.url).href to compute the full address relative to the module's location (the style in the official Vite chapter)
- webpack: write a static-asset relative path (e.g. "test.mxweb"); the resource directory and new URL handling are configured in webpack.config.js (CopyWebpackPlugin copies into dist, see the official webpack chapter)
Sanity check: open DevTools → Network and confirm the .mxweb / font / .wasm requests hit real, reachable URLs (no malformed concatenation, no 404s).
(For local offline testing you can use the UMD libs from the dev package mxcadAppAssets\: include mxdraw.umd.js first, then mxcad.umd.js, use the global MxCAD.McObject, and point wasm at mxcadAppAssets\wasm\2d-st\.)
⚠️ The ESM build does NOT define a MxCAD global (tested, 2026-11): the page above uses the ESM importmap approach, importing named members from the "mxcad" module — in this build there is no MxCAD global object. Writing UMD-style code like MxCAD.MxCpp.getCurrentMxCAD() or ent instanceof MxCAD.McDbLine inside an ESM page throws ReferenceError: MxCAD is not defined (all verification code in section 1.2 is UMD-tested style and cannot be pasted straight into an ESM page). In ESM use named imports instead; the module-level singleton MxCpp is the equivalent of the UMD MxCAD.MxCpp:
js
```
import { McObject, MxCpp, McDbLine } from "mxcad";
MxCpp.getCurrentMxCAD().zoomAll();   // view control
ent instanceof McDbLine;             // entity type check
```
How to tell which you're on: does the page use import ... from "mxcad" (ESM) or src="...mxcad.umd.js" (UMD)? UMD uses the MxCAD. global, ESM uses named imports — the two must not be mixed.
Start a static server: web\ must be served over HTTP (file:// does not work with wasm), and the .wasm MIME type must be application/wasm
Open: visit http://127.0.0.1:<port>/index.html in the browser. The onOpenFileComplete callback is the success criterion (the wasm is ~3.9MB; locally about 10–15 seconds). If the drawing is not in the viewport, call zoom-to-extents: MxCpp.getCurrentMxCAD().zoomAll() (ESM) / MxCAD.MxCpp.getCurrentMxCAD().zoomAll() (UMD, see the ESM warning above)

⚠️ Runtime-conversion features (user uploads and opens their own drawings) differ from the one-shot flow above: 1.1 is "AI converts once, then displays". If you build a feature where the user uploads drawings and conversion happens at runtime, the conversion program is a runtime dependency of that feature — do NOT hard-code the temp path: the temp path is wiped (before switching packages) or auto-cleaned by the OS, and the feature will break and will not self-heal. Follow the "two usage modes" rule in SKILL.md (Acquiring the Program): recommended is to copy the entire conversion program directory into the project (e.g. tools/mxcad/) and have the feature code reference the in-project path (re-copy a fresh one when the 6-month trial expires); or resolve it dynamically at runtime by searching the two possible temp-path locations in order (Windows: MxConvert_TryVersion\ → MxServiceCode_TryVersion\MxCAD\Release\; Linux: MxConvert_Ubuntu20_TryVersion/ → MxServiceCode_TryVersion/Linux/MxCAD/). Once fonts are copied into the project per step 2 there is no runtime dependency on them — unaffected under either approach.

1.2 Verification & Troubleshooting Key Points (tested)

The canvas is WebGL: 2D getImageData/drawImage sampling reads the cleared black buffer; pixel-based verification is unreliable
Leave canvas sizing to mxcad: never set canvas.width/height manually and do NOT add a window.resize listener — it repeatedly clears the WebGL canvas and creates a size feedback loop, so the UI flickers continuously. Leave <canvas> without width/height attributes and let CSS fill the container (#box canvas{width:100%;height:100%})

Reliable verification: read the mxcad database, count entities, and cross-check against the backend extraction results:

// All of the following is UMD style (MxCAD global); for an ESM page, first
// `import { MxCpp, McDbLine } from "mxcad"`, then replace MxCAD.MxCpp with MxCpp
// and MxCAD.McDbLine with McDbLine (see the ESM warning in 1.1)
const db = MxCAD.MxCpp.getCurrentMxCAD().getDatabase();
const ids = db.currentSpace.getAllEntityId();          // frontend API; note the name differs from the backend
const ent = ids[0].getMcDbObject();                    // frontend is getMcDbObject, not getObject
ent instanceof MxCAD.McDbLine; ent.layer; ent.startPoint.x

Frontend API names differ from backend API names (based on UMD testing): currentSpace is a property, not a method; getting entities from a space uses getAllEntityId() (backend uses getAllEntity); getting an object from an id uses getMcDbObject() (backend uses getObject)
UMD and ESM styles differ: UMD uses the MxCAD. global; ESM (importmap / npm ESM) has no MxCAD global, use named imports import { MxCpp, McDbLine, ... } from "mxcad" (see the 1.1 warning)
Other usable view APIs: zoomAll, zoomCenter, zoomScale, getViewBackgroundColor (0 = black background), openWebFile(url)
Troubleshooting order: onOpenFileComplete never fires = file/resources failed to load (check 404s / MIME); it fires but nothing is visible = viewport issue, call zoomAll() first

II. Official Documentation Chapter Index

All links in this section are site-relative (the official docs live on the same site as this guide, so they resolve automatically under any published domain).

2.1 Getting Started

Doc	Link
Introduction	link
Quick Start (Vite/CDN/ES/webpack integration + sample code)	link
Drawing Conversion	link
Opening and Saving Drawings	link

2.2 Guides

Doc	Link
Math Library	link

2.3 Basic Drawing (17 primitives)

Primitive	Link
Point	link
Line	link
Polyline	link
Circle	link
Arc	link
Ellipse	link
Dimension	link
Text	link
Custom Entity	link
Hatch	link
Path	link
Block	link
Image	link
Spline	link
Region	link
Ray	link
Xline (construction line)	link

2.4 Interactive Drawing

Doc	Link
Command Line	link
UI Interaction	link
Dynamic Rendering	link

2.5 Drawing Editing

Doc	Link
Selecting Objects	link
Common Edit Operations	link
Viewport Settings	link
Event Listeners	link

2.6 Database

Doc	Link
Overview	link
Layer Table	link
Text Style Table	link
System Variables	link
Block Table	link
Global Dictionary	link
Entities	link
Linetype Table	link
Dimension Style Table	link

2.7 Best Practices

Doc	Link
MxCADApp Npm App Integration (npm package mxcad-app, Vite/webpack plugins)	link
Project Integration Basic Description	link
Extension Plugin Development	link
Extension Plugin Secondary Development Map	link
Combining mapbox with CAD Drawings	link
Packaging a Desktop MxCAD APP	link
FAQ (Frequently Asked Questions)	link

Feature examples:

Measurement & Annotation

Feature	Link
Measure Circle	link
Measure Area	link
Distance from a Point to a Line	link
Arc Length	link
Continuous Measurement	link
Local Magnification	link
Measure Coordinates	link
Measure Angle	link
Arrow Annotation	link
Leader Annotation	link
Elevation Marking	link

Drawing Tools

Feature	Link
Centered Rectangle	link
Star Shape	link
Insulation Cotton	link
Draw a North Arrow	link
Add Break Lines	link
Draw Axis of Symmetry	link

Editing Tools

Feature	Link
Rectangular Scaling	link
Temporary Hide	link
Break/Interrupt	link
Move	link
Zoom	link
Mirror	link
Rotate	link
Offset	link

Text Tools

Feature	Link
Text Framing	link
Extract Text	link
Text Search	link

Others

Feature	Link
Export JPG	link
Export PDF	link
Output DWG for a Specified Range	link

Doc	Link
MxCAD Product Introduction	link
Cloud Map Development Kit Instructions (overall dev package structure)	link
Drawing Conversion Details (mxcadassembly command line + HTTP full parameters, incl. cut_dwg / print_to_pdf / JPG export)	link
MxCAD/MxDraw Web Preview & Annotation in Practice	link
Implementing View Control and a Layer Management System	link
Command-line Drive and Parametric Plotting	link
From Browsing Drawings to Editing Drawings	link
Implementing Drawing Save in mxcad	link
MxServiceCode In-Depth (backend; see the backend guide)	link
Drawing Barcodes and QR Codes in mxcad	link
MxCAD Multi-Line Text Extension	link
Group-related Feature Development in mxcad	link
Implementing Roughness Annotation Drawing	link
Professional CAD in the Browser	link
Object Snap (OSMODE)	link
MxCAD Basic Graphic Drawing	link
MxCAD Advanced Basic Drawing	link
mxcad-app Integration Instructions	link
Calling the Internal Pop-up Box in MxCAD APP	link
Detailed Introduction to CAD Project Configuration Properties in mxcad	link
The MxPluginContext Plug-in Context in MxCAD Projects	link

2.9 API Documentation

Full class/enum/interface reference (McDb* entity classes, selection sets, plugin base classes, tools.MxCanvas2Image, mapbox.MxMap):

<../../api/README.html>

III. Task → Doc Lookup Guide

Task Type	Doc(s) to Visit
Integration/deployment (npm, CDN, Vite, webpack, Vue, React)	2.1 Quick Start + 2.7 Npm App Integration + 2.8 mxcad-app Integration Instructions
View/open/save drawings	2.1 Opening and Saving Drawings + 2.8 Implementing Drawing Save in mxcad
Preview a DWG in the browser (local static)	this guide 1.1 hands-on + 2.1 Quick Start
Draw a primitive (line/circle/polyline/annotation/text/hatch/block…)	2.3 Basic Drawing, the matching entry
Custom commands/toolbar/interaction	2.4 Interactive Drawing + 2.8 MxPluginContext + 2.7 Extension Plugin Development
Select/move/copy/edit	2.5 Drawing Editing + 2.7 Feature Examples – Editing Tools
Layers/linetypes/text styles/dimension styles/system variables	2.6 Database, the matching entry
Measurement (area/distance/angle/coordinates/radius)	2.7 Feature Examples – Measurement & Annotation
Export (PDF/JPG/range DWG)	2.7 Feature Examples – Others + 2.8 Drawing Conversion Details
Format conversion (DWG/DXF/MXWEB/PDF mutual)	2.1 Drawing Conversion + 2.8 Drawing Conversion Details
Events/callbacks	2.5 Event Listeners
Object snap	2.8 Object Snap (OSMODE)
Troubleshooting	2.7 FAQ
Full signature/parameters of an API	2.9 API Documentation

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

Related Articles

Introduction Guide

Mx CAD Function Introduction

CAD Function Development

Application Integration

AI Manual

Backend Reference Docs

CAD Drawing Operations · Frontend mxcad Guide

I. Program & Resources

1.0 Acquiring the Program

1.1 Previewing a DWG in the Browser (tested workflow)

1.2 Verification & Troubleshooting Key Points (tested)

II. Official Documentation Chapter Index

2.1 Getting Started

2.2 Guides

2.3 Basic Drawing (17 primitives)

2.4 Interactive Drawing

2.5 Drawing Editing

2.6 Database

2.7 Best Practices

2.9 API Documentation

III. Task → Doc Lookup Guide

Mx CADAPP Application Integration

Function Example Demo

Labeling Measurement

Drawing Tool

Editing Tool

Type Tool

Other

Introduction Guide

Mx CAD Function Introduction

CAD Function Development

Application Integration

Backend Reference Docs

CAD Drawing Operations · Frontend mxcad Guide ​

I. Program & Resources ​

1.0 Acquiring the Program ​

1.1 Previewing a DWG in the Browser (tested workflow) ​

1.2 Verification & Troubleshooting Key Points (tested) ​

II. Official Documentation Chapter Index ​

2.1 Getting Started ​

2.2 Guides ​

2.3 Basic Drawing (17 primitives) ​

2.4 Interactive Drawing ​

2.5 Drawing Editing ​

2.6 Database ​

2.7 Best Practices ​

2.8 Related Articles ​

2.9 API Documentation ​

III. Task → Doc Lookup Guide ​

CAD Drawing Operations · Frontend mxcad Guide

I. Program & Resources

1.0 Acquiring the Program

1.1 Previewing a DWG in the Browser (tested workflow)

1.2 Verification & Troubleshooting Key Points (tested)

II. Official Documentation Chapter Index

2.1 Getting Started

2.2 Guides

2.3 Basic Drawing (17 primitives)

2.4 Interactive Drawing

2.5 Drawing Editing

2.6 Database

2.7 Best Practices

2.8 Related Articles

2.9 API Documentation

III. Task → Doc Lookup Guide