import { 
  MxCAD3DObject,
  /** NEW START **/
  Mx3dGePoint,
  Mx3dMkBox,
  /** NEW END **/
} from "mxcad"

// Create an MxCAD3DObject
const mxcad3d = new MxCAD3DObject()

// Initialize the MxCAD3DObject
mxcad3d.create({
    // CSS selector string of the canvas element (in this example, it's an id selector) or the canvas element object
    canvas: "#myCanvas",
    // Get the path location of the wasm-related files (wasm/js/worker.js)
    locateFile: (fileName)=> new URL(`/node_modules/mxcad/dist/wasm/3d/${fileName}`, import.meta.url).href,
})

/** NEW START **/
// Utility function to create a button and set its onclick event
function createButton(text: string, fn: () => void) {
    const button = document.createElement("button");
    button.innerText = text;
    document.body.appendChild(button);
    button.onclick = fn;
}
/** NEW END **/

/** NEW START **/
// This function creates and displays a box
function drawBox()
{
    // Get the document
    const doc = mxcad3d.getDocument();
    const pt1 = new Mx3dGePoint(5, 5, 5);
    const pt2 = new Mx3dGePoint(15, 15, 15);
    // Create a BOX
    const boxMaker = new Mx3dMkBox(pt1, pt2);
    // Get the topological shape
    const boxShape = boxMaker.Shape();
    // Create a label in the document
    const boxLabel = doc.addShapeLabel();
    // Set the topological shape in the label
    boxLabel.setShape(boxShape);
    // Update the display (this will update the model displayed in the canvas)
    mxcad3d.update();
}
/** NEW END **/


// Initialization is complete
mxcad3d.on("init", ()=>{
    console.log("Initialization complete");
    /** NEW START **/
    // Create a button with the title "Draw Box" and set its onclick event to execute drawBox()
    createButton("Draw Box", drawBox);
    /** NEW END **/
});