MxDraw雲圖點選事件教程

下面演示使用MxDraw雲圖編輯模式，在圖上點選一個文字物件，然後得到文字內容，彈出檔案內容提示視窗。

1、修改後臺程式，增加一個函式，得到一個點的文字物件

（1）使用VSCODE開啟安裝目錄Bin\MxDrawNode\MxDrawNode工程

（2）修改src\mxcaduser\MxCADUser.ts檔案，增加一個MxCAD_FindEntAtPoint函式，該用來前臺呼叫得到滑鼠點選處的文字物件

（3）程式碼如下：

namespace MxCADUserFun {
    export function MxCAD_FindEntAtPoint(param: object): object {
        //let pt: Mx.McGePoint3d = new Mx.McGePoint3dClass();
        // 得到前臺傳過來的點座標
        let pt: Mx.McGePoint3d =  Mx.Mx2DDraw.worldCoord2Doc(param["x"],param["y"]);
        // 得到搜尋範圍.
        let tol = Mx.Mx2DDraw.worldLong2Doc(param["tol"]);
        // 建立一個選擇過濾條件.
        let filter: Mx.MrxDbgRbList = new Mx.MrxDbgRbListClass();
        // 只選擇文字物件.
        filter.addString("TEXT",5020)
        let ss: Mx.MrxDbgSelSet = new Mx.MrxDbgSelSetClass();
        // 把pt點位的物件選擇到選擇集中.
        ss.selectAtPoint(pt, filter, tol);
        let txtString = "";
        if(ss.count > 0){
            // 選擇集不為空.
            let txt:Mx.McDbText  = Mx.MxType.MxCastFromId<Mx.McDbText>(ss.item(0), Mx.MxType.TypeString.kMcDbText);   
            // 得到文字物件，文字內容.
            if(txt){
                txtString = txt.textString;
            }   
        }
        // 返回文字內容.
        let ret = {text:txtString};
        return ret;
    }
}
export function initMxCADUser() {
    // 在後臺註冊一個函式，用來前臺JS呼叫。
    MxFun.registFun("MxCAD_FindEntAtPoint", MxCADUserFun.MxCAD_FindEntAtPoint); 
}

（4）編譯程式碼，把Bin\MxDrawNode\MxDrawNode\dist下面的所有檔案，拷到Bin\Release目錄覆蓋原來檔案，後臺程式重啟後，就會使用最新編譯的程式。

2、修改前臺程式，響應滑鼠的點選事件

（1）使用VSCODE開啟安裝目錄SRC\sample\Edit\DevMxCAD工程，修改src\MxCADUser\MxUser.ts，增加滑鼠事件的響應，在滑鼠左鍵按下事件中，呼叫後臺MxCAD_FindEntAtPoint得到點選的文字內容

（2）程式碼如下：

enum MouseButton {
  kInvalid = -1,
  kLeft = 0,
  kMid = 1,
  kRight = 2
};
class MxUserMouseEventTest
{
  
  public regist(mxFun:any) {
    mxFun.addWindowsEvent((type:string,event:any)=>{
      if(type == "mousedown"){
        // 如果當前有命令在執行，就不處理滑鼠事件。
        if(mxFun.isRunningCommand() ){
          return 0;
        }
        // 只處理滑鼠左鍵按下事件.
        if(event.button != MouseButton.kLeft)
        {
          return 0;
        }
        var srcElement = event.srcElement;
        if (srcElement && srcElement.tagName == "CANVAS") {
            // 得到滑鼠點選的控制元件物件.
            let mxObj: MxDrawObject = mxFun.getMxObjectFormElement(srcElement);
            if (mxObj == null) {
                0;
            }
            // 把滑鼠的螢幕座標，轉成圖紙的顯示座標。
            //@ts-ignore
            const pt:THREE.Vector3 = mxObj.screenCoord2World(event.offsetX, event.offsetY, 0);
            //@ts-ignore
            const tol:number = mxObj.screenCoordLong2World(30);
            
            // 呼叫後臺函式，得到滑鼠點的物件.
            mxFun.call("MxCAD_FindEntAtPoint",{x:pt.x,y:pt.y,tol:tol},(ret:any)=>{
              // 得到文字.
              let str:string = ret["text"];
              if(str && str.length > 0){
                alert("點選文字:" + str);
              }
              else{
                console.log("點選文字為空");
              }
            });
            return 1;
          }
      }
      return 0;
    });
  };
}
export namespace MxUser {
  let mouseEventTest:MxUserMouseEventTest = null;
  export function Init(mxFun:MxFun):void{
    
    if(mxFun.getQueryString("mousetest") == "y"){
        // 註冊滑鼠事件.
        mouseEventTest = new MxUserMouseEventTest();
        mouseEventTest.regist(mxFun);
        // 禁用MxCAD本身的選擇功能，這樣不會與我們的滑鼠點選發生衝突.
        mxFun.setIniset({ "EnableIntelliSelect": false });
    }
  }
};

（3）編譯程式碼，把SRC\sample\Edit\DevMxCAD\dist的所有檔案拷到SRC\TsWeb\public\mxcad目錄覆蓋原來的檔案，在重新訪問mxcad頁面時，就會使用最新程式了。

（4）使用VSCODE開啟安裝目錄SRC\sample\Edit\VueMxCAD目錄，修改SRC\sample\Edit\VueMxCAD\src\components\Home.vue檔案，在啟動訪問mxcad頁面加上訪問引數，這些引數會在src\MxCADUser\MxUser.ts程式碼使用，用來啟用滑鼠測試功能。

（5）程式碼如下：

const src = "../../mxcad/?usemode=y&mousetest=y&file=test10.dwg";

（6）如下圖:

（7）編譯程式碼，把SRC\sample\Edit\VueMxCAD\distr的所有檔案拷到SRC\TsWeb\public\sample\vuemxcad目錄下，覆蓋原來的檔案，在重新訪問vuemxcad頁面時，就會使用最新程式了。

3、把測試圖紙test10.dwg拷到SRC\TsWeb\public\demo目錄下， 啟動程式

啟動第一步，第二步,啟動VueMxCAD，如下圖：