Basic Usage of Command Pattern

What is the Command Pattern?

Usually in CAD drawing, specific commands can be called by entering certain commands, and parameterized drawing can be performed during dynamic drawing. For example, drawing a circle can be done by entering the radius of the circle in the command line during the drawing process to determine the size of the circle.

The command pattern provided by the mxdraw.js library is a way to draw graphics by inputting your own commands.

The following are the basic steps for inputting your own command pattern:

1. registering and executing command mechanism using addCommand (opens new window) and sendStringToExecute (opens new window) methods.

2. Instantiating a point acquisition object (opens new window) in the callback method of the registered command.

3. The point acquisition object can use the setMessage method to provide necessary operation information to the user who is currently drawing and obtain the user's input information/keywords (provided that an input box is provided for the user).

4. You can use Mx.MxFun.listenForCommandLineInput to listen for the latest prompt message and the user's input and command name. See API details (opens new window)

5. When user input is required, you can use Mx.MxFun.setCommandLineInputData to set the user's current input and the keyCode of the current key press. See API details (opens new window)

Register and Execute Command

import Mx from "mxdraw"
// Function for drawing a line
function BR_Line() {
  // Instantiate point acquisition object
  const getPoint = new Mx.MrxDbgUiPrPoint();
  // Instantiate dynamic drawing object
  const worldDrawComment = new Mx.McEdGetPointWorldDrawObject();
  // Start dynamic dragging. Behavior: The callback function is executed only when the mouse clicks on the canvas, and subsequent clicks are invalid.
  getPoint.go((status) => {
    if (status !== 0) {
      return;
    }
    // Prompt the user
    getPoint.setMessage("\nSpecify the first point:");

    // Get the first point where the mouse clicks on the canvas
    const pt1 = getPoint.value();
    // Use the first point as the starting point
    let lastPt = pt1.clone();
    // Set the callback function for dynamic drawing
    worldDrawComment.setDraw((currentPoint, pWorldDraw) => {
      // Draw a line segment from the current mouse moving point to the starting point
      pWorldDraw.drawLine(currentPoint, lastPt);
    });
    // Set the dynamic drawing call object during the interactive process of the point acquisition object
    getPoint.setUserDraw(worldDrawComment)
    
    // Start dynamic dragging, continuous point acquisition, until ESC quits. Behavior: The callback function is executed once with each click of the mouse.
    getPoint.goWhile((status) => {
        
      if (status === 0) {
        getPoint.setMessage("\nSpecify the next point:");
        // Get the position of the second point
        const pt2 = getPoint.value();

        // Get the Three scene object
        let sence = Mx.MxFun.getCurrentDraw().getScene();

        // Create a line segment from the starting point to the current click position
        let line = Mx.MxThreeJS.createLine(lastPt, pt2, 0xffffff);
        
        // Add the line segment to the scene
        sence.add(line);

        // Use the second point as the starting point
        lastPt = pt2
      }
    });
  });
}

// Register the command
Mx.MxFun.addCommand("BR_Line", ()=> {
  // Check if a command is currently running
  if(Mx.MxFun.isRunningCommand()) {
      return
  }
  BR_Line()
})
// Execute the command
Mx.MxFun.sendStringToExecute("BR_Line")

Input and Output Listening

<input name="mxCmdText"/>

// Listen for changes in key presses and input contents
getElementsByName('mxCmdText')[0].onkeydown = function(e) {
     Mx.MxFun.setCommandLineInputData(this.value, e.keyCode)
}

// Listen for the current command prompt during drawing
Mx.MxFun.listenForCommandLineInput(({msCmdTip, msCmdDisplay, msCmdText})=> {
    console.log(msCmdTip, msCmdDisplay, msCmdText)

})

Effect:

View the complete source code of this example: github (opens new window) | gitee (opens new window)