UI interaction ​

In the process of CAD application development, we need to complete the operation of drawings through interface interaction. mxcad provides MxCADUiPrBase class for this purpose to obtain the relevant data and Settings of UI interaction. This class contains the fetch point MxCADUiPrPoint() Obtain distance MxCADUiPrDist(), obtain Angle MxCADUiPrAngle(), obtain user input integer number MxCADUiPrInt(), obtain user input keyword MxCADUiPrKeyWord(), obtain user input string MxCADUiPrString() Select the entity object MxCADUiPrEntity(), and call the corresponding methods in these classes as required to achieve a complete interactive system in CAD applications.

Click MxCADUiPrBase() to check the properties and methods in detail.

Take point object MxCADUiPrPoint() ​

We can instantiate a point object with MxCADUiPrPoint(). The value of the point object is the coordinate position of the mouse click on the canvas, and the combination of the point object and command line to set the keyword list to achieve the complete command function. The following is the basic use of the fetch point object, if you have other requirements can refer to the fetch point object API documentation to achieve their own.

Click MxCADUiPrPoint() to check the properties and methods in detail.

Base take points ​

The user can call the go() method to return the Promise task of the user interaction. When the mouse clicks on the canvas, the Promise is completed and the coordinate point of the click is obtained. Other interactive methods return null.

import { MxCADUiPrPoint } from "mxcad"

const getPoint = new MxCADUiPrPoint()
const point = await getPoint.go()
console.log(point)

Message prompt, keyword list ​

The user can call the setMessage() method to set the prompt string, and set the prompt message, such as the operation prompt, error prompt, and command execution status prompt, through the command behavior. You can also call the setKeyWords() method to set the keyword list, call the keyWords() method to view the keyword list, and then get the user input status by calling the getStatus() method. Calling the isKeyWordPicked() and keyWordPicked() methods can detect whether the user's input is in the list. Here is an example of drawing a basic multisegment line function:

import { MxCADUiPrPoint, McDbPolyline, MxCpp } from "mxcad"
import { MrxDbgUiPrBaseReturn } from "mxdraw"

async function Mx_Test_DrawPolyline(){
let objLines = new McDbPolyline()
const getPoint = new MxCADUiPrPoint()
getPoint.setMessage('\n Specifies the first point:')
const pt1 = await getPoint.go()
if (!pt1) return
objLines.addVertexAt(pt1)
while (true) {
    const numV = objLines.numVerts()
    const getNextPoint = new MxCADUiPrPoint()
    getNextPoint.setMessage('\n Specifies the next point:')
    numV > 2 ? getNextPoint.setKeyWords('[Close(C)/Abandon(U)]') : getNextPoint.setKeyWords('[Surrender(U)]')
    const keyList = getNextPoint.keyWords()
    console.log(keyList)
    getNextPoint.setUserDraw((pt, pw) => {
        let pl_clone = objLines.clone() as McDbPolyline
        pl_clone.addVertexAt(pt)
        pw.drawMcDbEntity(pl_clone)
    })
    let nextPt = await getNextPoint.go()
    const status = getNextPoint.getStatus()
    if (nextPt !== null) {
        objLines.addVertexAt(nextPt)
    } else if (status === MrxDbgUiPrBaseReturn.kKeyWord) {
        // Enter the keyword.
        if (getNextPoint.isKeyWordPicked('C')) {
            // on
            objLines.isClosed = true
            break;
        } else if (getNextPoint.keyWordPicked('U')) {
            // backspace
            objLines.removeVertexAt(numV-1)
        }
    }else{
        break;
    }
}
let mxcad = MxCpp.getCurrentMxCAD();
mxcad.drawEntity(objLines)
}

Get user input ​

You can obtain user input integer number MxCADUiPrInt(), obtain user input keyword MxCADUiPrKeyWord(), obtain user input string MxCADUiPrString() to achieve the basic user interaction function of CAD application.

tap MxCADUiPrInt(), [MxCADUiPrKeyWord()] (https://www.Mxdraw3d.com/mxcad_docs/api/classes/2d.MxCADUiPrInt.html), [MxCADUiPrString()] (https://www.mxdraw3d.com/mxcad_docs/api/classes/2d.MxCADUiPrInt.html) to check the detailed description attributes and methods.

const getInt = new MxCADUiPrInt()
getInt.setMessage("Prompts the user to enter a number:")
const intVal = await getInt.go()
console.log(intVal)

const getKey = new MxCADUiPrKeyWord
getKey.setMessage("Prompt user keywords A、 B、 C:")
getKey.setKeyWords("A B C")
const keyVal = await getKey.go()
console.log(keyVal)

const getStr = new MxCADUiPrString()
getStr.setMessage("Prompts the user for a string:")
const strVal = await getStr.go()
console.log(strVal)

Get distance, Angle ​

We can use MxCADUiPrDist() to instantiate a fetch distance object, which can automatically calculate the length of the line segment based on the length of the line segment drawn by the user in the canvas, so as to obtain the target distance value. MxCADUiPrAngle() instantiates a get Angle object that gets the target Angle based on the Angle of a line segment drawn by the user in the canvas.

tap MxCADUiPrDist(), MxCADUiPrAngle() view detailed properties and methods.

const getDist = new MxCADUiPrDist()
getDist.setMessage("Prompts the user to set the distance:")
const distVal = await getDist.go()
console.log(distVal)

const getAngle = new MxCADUiPrAngle()
getAngle.setMessage("Prompts the user to set the Angle:")
const angleVal = await getAngle.go()
console.log(angleVal)

Select the entity object ​

We can instantiate a select entity object using MxCADUiPrEntity(), which generates the corresponding entity based on the coordinates the user clicks on.

Click MxCADUiPrEntity() to check the properties and methods in detail.

import { MxCADUiPrEntity, MxCpp } from "mxcad"

const mxcad = MxCpp.getCurrentMxCAD();
// Instantiate a class provided by mxcad to obtain a graphic object ID with a mouse click
let getEnt = new MxCADUiPrEntity();
let id = await getEnt.go();
// Get the graph data object from the ID object
let ent = id.getMcDbEntity();
if(ent) {
    const color = ent.trueColor.clone()
    color.setRGB(255, 0, 0)
    ent.trueColor = color
    mxcad.updateDisplay()
}

Demo ​

Effect:

• On the command line, type "Mx_Test_DrawPolyline" and hit enter to start the draw multiple lines command

• Follow the command line prompts to draw in steps