mxcad-app

mxcad-app 是一个在线 CAD 项目, 用户可以直接集成它。

🎯 一句话理解

mxcad-app = 一个开箱即用的在线CAD软件，集成到你的网页就像搭积木一样简单，3分钟就能让你的网站拥有专业CAD功能。

📦 安装

使用 npm 或 yarn 安装 mxcad-app：

npm install mxcad-app --save

或者

yarn add mxcad-app

🚀 使用方法（3分钟搞定）

基于 vite

main.js

import "mxcad-app/style";
import { MxCADView } from "mxcad-app";
new MxCADView().create();

vite.config.js

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

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

基于 webpack

webpack.config.js

const { MxCadAssetsWebpackPlugin } = require("mxcad-app/webpack");
// webpack.config.js
const webpack = require("webpack");

module.exports = {
  // ...
  mode: "development",
  module: {
    rules: [
      {
        test: /\.css$/, // 匹配所有 .css 文件
        use: [
          "style-loader", // 第二步：将 CSS 代码注入到 DOM 的 <style> 标签中
          "css-loader", // 第一步：解析 CSS 文件，处理 @import 和 url()
        ],
        include: [path.resolve(__dirname, "src"), path.resolve(__dirname, "node_modules/mxcad-app")], // 可选：只处理 src 下的 css
      },
    ],
  },
  plugins: [
    new webpack.ContextReplacementPlugin(
      /mxcad-app/, // 匹配包含 mxcad-app 的模块路径
      path.resolve(__dirname, "src") // 限制上下文查找范围
    ),
    new MxCadAssetsWebpackPlugin(),
  ],
  // ...
  devServer: {
    static: "./dist",
    port: 3000,
  },
};

main.js

import "mxcad-app/style";
import { MxCADView } from "mxcad-app";
new MxCADView().create();

🛠️ 进阶配置

自定义容器

<div id="app"></div>

import { MxCADView, mxcadApp } from "mxcad-app";
new MxCADView({
  openFile: new URL("test.mxweb", mxcadApp.getStaticAssetPath()).toString(),
  rootContainer: "#app",
});

静态资源设置

静态资源设置可以通过调用setStaticAssetPath

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

核心依赖库

mxcad-app内置了mxcad 核心库，你可以直接使用mxcad 不需要安装mxcad。

import { MxCpp } from 'mxcad'

如果不是模块化的方式使用,mxcad在window.MxCAD挂载你可以直接使用MxCAD访问到需要的方法和类。

mxcad依赖mxdraw, 你也可以使用mxdraw

import * as Mx from 'mxdraw'

如果不是模块化的方式使用, mxdraw 在 window.Mx 挂载。你可以直接使用Mx访问到需要的方法和类。

直接引入mxcad和mxdraw模块的前提是要使用构建工具构建。我们提供给了webpack和vite的插件, 用于支持模块化开发。

只要使用了插件就可以直接使用import引入mxcad和mxdraw模块。

使用 mxcad-app 依赖映射

你可以直接引入使用mxcad-app内部使用的mxcad和mxdraw模块。同时你也可以添加配置libraryNames使用其他的外部依赖的npm库。 目前支持的依赖映射的库有vue, axios, vuetify, vuetify/components, mapboxgl, pinia 你也可以访问window.MXCADAPP_EXTERNALLIBRARIES获取到所有提供的依赖库，从而不依赖与构建工具的使用。 比如vue框架,只需要添加依赖映射配置， 如: vite.config.js

import { mxcadAssetsPlugin } from "mxcad-app/vite";
// vite.config.js
export default {
  plugins: [
    mxcadAssetsPlugin({
      libraryNames: ["vue"],
    }),
  ],
};

webpack.config.js

import { MxCadAssetsWebpackPlugin } from "mxcad-app/webpack";
// webpack.config.js
module.exports = {
  // 其他配置...
  plugins: [
    new MxCadAssetsWebpackPlugin({
      libraryNames: ["vue"]
    }),
  ],
};

就可以正常使用mxcad-app中的vue模块（mxcad-app打包的内部vue模块）

import { ref } from "vue";
const n = ref(1)

🛠️ 运行时配置修改

在构建时修改配置文件：

vite

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

export default {
  plugins: [
    mxcadAssetsPlugin({
      // 修改UI配置
      transformMxcadUiConfig: (config) => {
        config.title = "我的CAD"; // 修改标题
        return config;
      },
      // 修改服务器配置  
      transformMxServerConfig: (config) => {
        config.serverUrl = "/api/cad"; // 修改API地址
        return config;
      },
      // 修改快捷命令(命令别名)
      // transformMxQuickCommand: (config) => config

      // 修改草图与注释UI模式的配置
      // transformMxSketchesAndNotesUiConfig: (config) => config

      // 修改UI配置
      // transformMxUiConfig: (config) => config,

      // 修改Vuetify主题配置
      // transformVuetifyThemeConfig: (config) => config
    })
  ]
};

webpack

import { MxCadAssetsWebpackPlugin } from "mxcad-app/webpack";

module.exports = {
  plugins: [
    new MxCadAssetsWebpackPlugin({
      transformMxServerConfig: (config) => {
        if (process.env.NODE_ENV === 'production') {
          config.serverUrl = 'https://api.prod.com/cad';
        }
        return config;
      }
    })
  ]
};

📚 常见问题速查

Q: 支持哪些CAD格式？ A: DWG、DXF等主流格式以及自定义文件格式(mxweb)

Q: 是否需要安装CAD软件？ A: 不需要！纯Web方案，浏览器就能用

Q: 能否集成到现有系统？ A: 可以！直接使用mxcad-app就可以无缝集成

📄 许可证

mxcad-app 是自定义许可证。更多信息，请参阅 LICENSE 文件。

如果有任何问题或建议，请随时联系我们。