Clearing the build

Summary

In this chapter, we will wrap up our application by enabling resetting of the configurator.

Concepts

• Clearing the model

• Resetting the build

---

Resetting your application

The next step in this tutorial is to hook up the “Reset Build” button. This is relatively straightforward. We want to clear our model from the main assembly viewer, reset our Map data structure that holds our selections, and reset the DOM to clear the selection information.

document.getElementById("reset-build-btn").onclick = () => {
        let opt = confirm("Are you sure would you like to reset your build? (This will clear all current selections!)")
        if (opt) {
                this._viewer.model.clear();

                document.getElementById("breakdown-frame").innerHTML = "Not Selected";
                document.getElementById("breakdown-fork").innerHTML = "Not Selected";
                document.getElementById("breakdown-frontwheel").innerHTML = "Not Selected";
                document.getElementById("breakdown-rearwheel").innerHTML = "Not Selected";
                document.getElementById("breakdown-seat").innerHTML = "Not Selected";
                document.getElementById("breakdown-crankset").innerHTML = "Not Selected";
                document.getElementById("breakdown-handlebar").innerHTML = "Not Selected";

                this._buildSelections.clear();
        }
}

As a final touch, we will add one more callback to resize our canvas if the window is resized. This good practice to do for any web application using HOOPS Communicator.

window.onresize = () => {
        this._viewer.resizeCanvas();
        this._compViewer.resizeCanvas();
};

With this, all pieces of your tutorial should be complete. Feel free to build upon this example or experiment with additional APIs to further your learning.