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();
        }
}

Note

The previous version of this tutorial ended with a window.onresize callback that called resizeCanvas() on both viewers whenever the browser window was resized. With the Web Components UI kit, that’s no longer necessary – <hoops-web-viewer> listens for window resize events itself and calls resizeCanvas() on its underlying WebViewer automatically, for every <hoops-web-viewer> on the page. You don’t need to write anything for this to work correctly.

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.