Question

命令行

CAD中的命令行是可以用来显示输入的参数、命令等信息，类似于操作流程的记录。它可以让我们清楚地了解操作进行的步骤，并有助于检查操作的正确性。mxcad 中没有提供直接实现命令行的方法，但可以依赖 mxdraw库 中的命令功能实现命令行的以下主要功能：

1. 快捷命令：通过在命令行输入目标命令，用户可以快速绘图或其他命令操作。

2. 操作流程记录：命令行能够记录用户执行过的操作信息，可以帮助用户回溯之前的操作步骤。

3. 数据交互：命令行能将用户的输入传递给软件的内部程序，并根据命令执行状态给予相应的反馈信息。

4. 步骤提示：命令行能够为用户提供步骤提示，使用户能更高效的完成绘制。

UI界面搭建

命令行最基础的界面搭建依赖于canvas画布、input输入框和textarea文本框。在该界面中的canvas画布用于展示图纸，input输入框用于监听用户输入的命令，textarea文本框用于展示历史操作信息，步骤提示，命令反馈等。

<div style="height: 80vh; overflow: hidden;">
    <canvas id="myCanvas"></canvas>
</div>
<div style="width: 100%;height: 12vh;">
    <textarea id="myArea" style="width: 100%;height: 8vh;background-color: #000;color: #fff;border-radius: 5px" readonly="true"></textarea>
    <input id="myInput" style="width:100%;height: 2vh;background-color: #000;color: #fff;" />
</div>

监听、注册命令

搭建好基础的命令行UI界面后就需要监听用户输入，同时调用MxFun.setCommandLineInputData()方法设置命令行消息数据； 调用MxFun.listenForCommandLineInput()方法来监听命令行消息动态更新的数据，在取点对象中设置的命令以及我们提供的图形对象中是有一套命令提示和参数化绘图。

import { MxFun } from "mxdraw"

const inputBox = document.getElementById("myInput")
const cmdWindow = document.getElementById("myArea")

// 监听命令行输入
let inputText = ""
inputBox.oninput = () => {
    inputText = inputBox.value
}
inputBox.onkeydown = (e) => {
    MxFun.setCommandLineInputData(inputText, e.keyCode)
    if (e.keyCode === 13) inputText = inputBox.value = ""
}

// 显示命令消息变化
MxFun.listenForCommandLineInput(({
    msCmdTip,
    msCmdDisplay,
    msCmdText
}) => {
    inputText = msCmdText
    cmdWindow.value = msCmdDisplay + "\n" + msCmdTip
    cmdWindow.scrollTop = cmdWindow.scrollHeight
})

注册命令需要依赖 mxdraw库 中提供的MxFun.addCommand()方法。下面以注册绘直线命令为例：

import { MxFun } from "mxdraw"

// 注册命令
MxFun.addCommand("Mx_Pline", async () => {
    let getFristPoint = new MxCADUiPrPoint();
    getFristPoint.setMessage("请点击确定起始点");
    let fristPoint: any = await getFristPoint.go();
    if (!fristPoint) return
    let getSecondPoint = new MxCADUiPrPoint();
    getSecondPoint.setMessage("请点击确定终点");
    getSecondPoint.setUserDraw((pt, pw) => {
        let line = new McDbLine(fristPoint.x, fristPoint.y, fristPoint.z, pt.x, pt.y, pt.z);
        pw.drawMcDbEntity(line)
    })
    let secondPoint: any = await getSecondPoint.go();
    if (!secondPoint) return
    let line = new McDbLine(fristPoint.x, fristPoint.y, fristPoint.z, secondPoint.x, secondPoint.y, secondPoint.z);
    let mxcad = MxCpp.App.getCurrentMxCAD();
    mxcad.drawEntity(line)
});

执行命令

手动执行命令需要依赖 mxdraw库 中提供的MxFun.sendStringToExecute()方法。

import { MxFun } from "mxdraw"

MxFun.sendStringToExecute("Mx_Line");

演示

完整效果演示如下：

• 在命令行输入“Mx_Pline”命令，点击enter键执行命令

• 再根据命令行输出的提示步骤绘制直线

:::demo

import {  McObject, MxCADUiPrPoint, McDbLine } from "mxcad"
import { MxFun } from "mxdraw"

export default () => {
    const mxcad = new McObject()
    mxcad.create({
      canvas: "#myCanvas",
      locateFile: (fileName: string)=> {
            // CDN 加载必须使用wasm/2d-st中的资源、因为github的限制无法使用wasm/2d 资源
            // 需要使用wasm/2d需要遵循浏览器同源策略或使用其他手段规避浏览器同源策略
            return "https://unpkg.com/mxcad/dist/wasm/2d-st/" + fileName
      },
      // 加载字体的目录位置
      fontspath: self.location.origin + "/mxcad_docs/fonts",
      // 加载转换后的图纸文件
      fileUrl: self.location.origin + "/mxcad_docs/test2.mxweb",
      onOpenFileComplete:()=>{
            const inputBox: any = document.getElementById("myInput")
            const cmdWindow: any = document.getElementById("myArea")

            // 监听命令行输入
            let inputText = ""
            inputBox.oninput = () => {
                inputText = inputBox.value
            }
            inputBox.onkeydown = (e) => {
                MxFun.setCommandLineInputData(inputText, e.keyCode)
                if (e.keyCode === 13) inputText = inputBox.value = ""
            }
            // 显示命令行消息变化
            MxFun.listenForCommandLineInput(({
                msCmdTip,
                msCmdDisplay,
                msCmdText
            }) => {
                inputText = msCmdText
                cmdWindow.value = msCmdDisplay + "\n" + msCmdTip
                cmdWindow.scrollTop = cmdWindow.scrollHeight
            })
            // 注册命令
            MxFun.addCommand("Mx_Pline", async () => {
                let getFristPoint = new MxCADUiPrPoint();
                getFristPoint.setMessage("请点击确定起始点");
                let fristPoint: any = await getFristPoint.go();
                if (!fristPoint) return
                let getSecondPoint = new MxCADUiPrPoint();
                getSecondPoint.setMessage("请点击确定终点");
                getSecondPoint.setUserDraw((pt, pw) => {
                    let line = new McDbLine(fristPoint.x, fristPoint.y, fristPoint.z, pt.x, pt.y, pt.z);
                    pw.drawMcDbEntity(line)
                })
                let secondPoint: any = await getSecondPoint.go();
                if (!secondPoint) return
                let line = new McDbLine(fristPoint.x, fristPoint.y, fristPoint.z, secondPoint.x, secondPoint.y, secondPoint.z);
                mxcad.drawEntity(line)
                });
            }
    })
    return (<div style="height: 650px; overflow: hidden;">
        <div style="height: 500px; overflow: hidden;"><canvas id="myCanvas"></canvas></div>
        <div style="width: 100%;height: 150px;margin:10px 0px">
        <textarea style="width: 100%;height: 100px;background-color: #000;color: #fff;border-radius: 5px" id="myArea" readonly="true"></textarea>
        <input style="width:100%;height:30px;background-color: #000;color: #fff;" id="myInput"/>
        </div>
    </div>)
}

:::