# 新建 Vue3 + TypeScript 項目
npm create vite@latest cad-viewer -- --template vue-ts
cd cad-viewer
npm install

# 安裝 mxcad 核心包
npm install mxcad
# 若使用 pnpm，請額外安裝 mxdraw (通常 mxcad 已包含，視具體版本策略而定)
# pnpm add mxdraw

// vite.config.ts
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'

export default defineConfig({
  plugins: [vue()],
  server: {
    // 開發環境：直接在此處配置響應頭
    headers: {
      "Cross-Origin-Opener-Policy": "same-origin",
      "Cross-Origin-Embedder-Policy": "require-corp",
    }
  },
  build: {
    target: 'esnext' // 確保編譯目標支持最新特性
  }
})

<template>
  <!-- CAD 渲染區域 -->
  <div style="width: 100vw; height: 95vh; overflow: hidden;">
    <canvas id="myCanvas"></canvas>
  </div>

  <!-- 控制欄 -->
  <div style="margin-top: 10px; padding: 10px; background: #f5f5f5;">
    <!-- 隱藏的文件輸入框 -->
    <input
      type="file"
      ref="fileInput"
      accept=".dwg,.dxf,.mxweb"
      @change="openDwgFile"
      style="display:none"
    />
    
    <!-- 功能按鈕 -->
    <button @click="$refs.fileInput.click()" :disabled="!mxcadReady">打開圖紙</button>
    <button @click="startCloudMark" :disabled="!mxcadReady">繪製雲線批註</button>
    <button @click="saveMarkup" :disabled="!mxcadReady">保存批註</button>
    <button @click="loadMarkup" :disabled="!mxcadReady">加載批註</button>
  </div>
</template>

<script setup lang="ts">
import { onMounted, ref } from 'vue';
import { createMxCad, MxCpp } from 'mxcad';

const mxcadReady = ref(false);
const fileInput = ref<HTMLInputElement | null>(null);

onMounted(() => {
  // 自動檢測瀏覽器環境：支持 SharedArrayBuffer 則啟用多線程 (2d)，否則降級為單線程 (2d-st)
  const mode = "SharedArrayBuffer" in window ? "2d" : "2d-st";

  createMxCad({
    canvas: "#myCanvas",
    // 動態定位 WASM 文件路徑，兼容 Vite/Webpack 等構建工具
    locateFile: (fileName: string) => {
      return new URL(
        `../../node_modules/mxcad/dist/wasm/${mode}/${fileName}`,
        import.meta.url
      ).href;
    },
    fileUrl: "", // 初始不加載文件，等待用戶通過 UI 選擇
    fontspath: new URL(
      "../../node_modules/mxcad/dist/fonts",
      import.meta.url
    ).href,
    // 初始化完成回調
    onInit: () => {
      console.log("MxCAD 引擎初始化完成");
      mxcadReady.value = true;
    }
  });
});
</script>

// vite.config.ts
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'

export default defineConfig({
  plugins: [vue()],
  server: {
    // ....其他配置 
    // 開發環境跨域代理配置
    proxy: {
      // 匹配所有以 /api 開頭的請求（建議前端請求時加上 /api 前綴）
      '/api': {
        target: 'http://localhost:3000', // 圖紙轉換服務地址
        changeOrigin: true,              // 修改 Host 頭為 target
        rewrite: (path) => path.replace(/^\/api/, ''), // 去掉 /api 前綴再轉發
      },
      // 或者直接代理特定的轉換接口路徑
      //'/uploadfile': {
      //  target: 'http://localhost:3000',
      //  changeOrigin: true,
      // },
      // '/demo': {
      //  target: 'http://localhost:3000',
      //  changeOrigin: true,
      // }
    }
  }
})

// 原地址：http://localhost:3000/uploadfile
// 代理後地址：/api/uploadfile (需在 proxy 中配置 rewrite) 或直接 /uploadfile
const res = await fetch("/api/uploadfile", { // Vite 會自動攔截並轉發到 localhost:3000/uploadfile
  method: "POST",
  body: formData,
});

<script setup lang="ts">
// ... 上述初始化代碼 ...

// 打開圖紙處理函數
const openDwgFile = async (event: Event) => {
  const target = event.target as HTMLInputElement;
  const file = target.files?.[0];
  if (!file) return; 
  const fileName = file.name;
  // 獲取文件後綴並轉為小寫
  const fileExt = fileName.slice(fileName.lastIndexOf(".")).toLowerCase();
  const mxcad = MxCpp.getCurrentMxCAD();

  if (fileExt === ".dwg" || fileExt === ".dxf") {
    // DWG/DXF 需要後端轉換
    const formData = new FormData();
    formData.append("file", file);
    
    try {
      // 調用代理後的上傳接口
      const res = await fetch("/upfile/mxcad", {
        method: "POST",
        body: formData,
      });
      
      if (!res.ok) throw new Error(`請求失敗：${res.status}`);
      
      // 約定：轉換後的文件位於 /demo/ 目錄下，文件名不變，後綴變為 .mxweb
      const mxwebFullUrl = `/demo/${fileName}.mxweb`;
      mxcad.openWebFile(mxwebFullUrl);
      
    } catch (err) {
      console.error(err);
      alert("上傳或轉換失敗，請檢查後端服務是否啟動");
    }
  } else if (fileExt === ".mxweb") {
    // MXWEB 直接讀取
    const tempUrl = URL.createObjectURL(file);
    mxcad.openWebFile(tempUrl);
  } else {
    alert("不支持該文件格式，請上傳 .dwg, .dxf 或 .mxweb");
  }
  // 重置 input value，允許重複選擇同一文件
  target.value = "";
};
</script>

import {
  MxFun,
  MrxDbgUiPrPoint,
  McEdGetPointWorldDrawObject,
  MrxDbgUiPrBaseReturn,
  MxDbRectBoxLeadComment,
} from "mxdraw";
// 繪製雲線批註函數
function startCloudMark() {
  const point = new MrxDbgUiPrPoint(); // 獲取點交互對象
  const mxDraw = MxFun.getCurrentDraw(); // 獲取當前繪圖對象
  const worldDrawComment = new McEdGetPointWorldDrawObject(); // 動態繪製輔助對象
  const mxCheckDraw = new MxDbRectBoxLeadComment(); // 雲線批註實體對象
  // 設置雲線半徑（屏幕座標轉文檔座標）
  mxCheckDraw.radius = MxFun.screenCoordLong2Doc(5);
  mxCheckDraw.setLineWidth(3);
  mxCheckDraw.setLineWidthByPixels(true);
  // 第一步：獲取起始點
  point.setMessage("\n雲線框起始點: ");
  point.go((status) => {
    if (status != MrxDbgUiPrBaseReturn.kOk) return;    
    mxCheckDraw.point1 = point.value();    
    // 動態預覽：移動鼠標時繪製矩形
    worldDrawComment.setDraw((currentPoint) => {
      mxCheckDraw.point2 = currentPoint;
      worldDrawComment.drawCustomEntity(mxCheckDraw);
    });
    point.setUserDraw(worldDrawComment);
    point.setMessage("\n雲線框結束點: ");
    // 第二步：獲取結束點
    point.go((status) => {
      if (status != MrxDbgUiPrBaseReturn.kOk) return;     
      mxCheckDraw.point2 = point.value();      
      // 動態預覽：確定文本位置
      worldDrawComment.setDraw((currentPoint) => {
        mxCheckDraw.point3 = currentPoint;
        worldDrawComment.drawCustomEntity(mxCheckDraw);
      });
      // 設置批註文本屬性
      mxCheckDraw.text = "審圖批註";
      mxCheckDraw.textWidth = MxFun.screenCoordLong2Doc(100);
      mxCheckDraw.textHeight = MxFun.screenCoordLong2Doc(50);
      mxCheckDraw.fixedSize = true;
      if (mxCheckDraw.fixedSize) {
        mxCheckDraw.textHeight = 20;
        mxCheckDraw.textWidth = 130;
      }
      point.setMessage("\n審圖標註點: ");
      // 第三步：獲取文本引出點
      point.go((status) => {
        if (status != MrxDbgUiPrBaseReturn.kOk) return;
        mxCheckDraw.point3 = point.value();
        // 將實體添加到圖紙數據庫
        mxDraw.addMxEntity(mxCheckDraw);
      });
    });
  });
}

import { MxFun } from "mxdraw";
// 保存圖紙批註
const saveMarkup = () => {
  const draw = MxFun.getCurrentDraw();
  if (!draw) return;  
  // 序列化批註數據
  const jsonData = draw.saveMxEntityToJson();
  localStorage.setItem("mx-markup-data", jsonData);
  alert("批註已保存至本地存儲");
};

import { MxFun } from "mxdraw";

// 恢復圖紙批註
const loadMarkup = () => {
  const draw = MxFun.getCurrentDraw();
  if (!draw) return;

  const jsonData = localStorage.getItem("mx-markup-data");
  if (jsonData) {
    draw.loadMxEntityFromJson(jsonData);
    alert("批註已加載");
  } else {
    alert("未找到保存的批註數據");
  }
};