I have a next.js app using v7 of the APS Viewer. At the size that we want the window to display, several buttons on the toolbar are missing. Make it wider, they reappear. The only way I’ve found to stop this is to remove these buttons, and re-add them. However, when I do this, some of them do not work anymore. What am I doing wrong, and do I need to do this at all? Eventually, I want to add extension functionality to custom buttons, but it is not at all clear how to do this from the documentation.

I set up an event listener to pull the toolbar, and pull out each of the toolbar groups. I’ve listed the tools on each toolbar group barbarian style and then removed them all. I then try to re-add them. This has given me the permanent buttons I want, but I don’t see why Zoom doesn’t work and I’ve totally lost the collapsable button for the section tool.

What am I doing wrong, and how do I do this better?

newViewer.addEventListener(Autodesk.Viewing.GEOMETRY_LOADED_EVENT, () => {
      newViewer.fitToView();

      const toolbar = newViewer.toolbar;

      // define then list the contents of the navTools group
      const navTools = toolbar.getControl("navTools");
      console.log("navTools: ", navTools);
      let firstToolId = navTools.getControlId(0);
      console.log("1stToolId: ", firstToolId);
      let secondToolId = navTools.getControlId(1);
      console.log("2ndToolId: ", secondToolId);
      let thirdToolId = navTools.getControlId(2);
      console.log("3rdToolId: ", thirdToolId);
      let fourthToolId = navTools.getControlId(3);
      console.log("4thToolId: ", fourthToolId);
      let fifthToolId = navTools.getControlId(4);
      console.log("5thToolId: ", fifthToolId);

      // remove the tools so we can repopulate them
      navTools.removeControl("toolbar-orbitTools");
      navTools.removeControl("toolbar-panTool");
      navTools.removeControl("toolbar-zoomTool");
      navTools.removeControl("toolbar-bimWalkTool");
      navTools.removeControl("toolbar-cameraSubmenuTool");

      // define then list the contents of the modelTools group
      const modelTools = toolbar.getControl("modelTools");
      console.log("modelTools: ", modelTools);
      let firstModelToolId = modelTools.getControlId(0);
      console.log("1stToolId: ", firstModelToolId);
      let secondModelToolId = modelTools.getControlId(1);
      console.log("2ndToolId: ", secondModelToolId);
      let thirdModelToolId = modelTools.getControlId(2);
      console.log("3rdToolId: ", thirdModelToolId);
      let fourthModelToolId = modelTools.getControlId(3);
      console.log("4thToolId: ", fourthModelToolId);
      let fifthModelToolId = modelTools.getControlId(4);
      console.log("5thToolId: ", fifthModelToolId);

      //remove the tools so we can repopulate them
      modelTools.removeControl("toolbar-explodeTool");
      // modelTools.removeControl("toolbar-sectionTool");
      let sectionTool = modelTools.getControl("toolbar-sectionTool");
      console.log("sectionTool: ", sectionTool);

      let orbitButton = new Autodesk.Viewing.UI.Button("orbitToolButton");
      orbitButton.onClick = function () {
        newViewer.setActiveNavigationTool("orbit");
      };
      orbitButton.setToolTip("Orbit");
      orbitButton.setIcon("adsk-icon-orbit-constrained");

      let controlGroup = toolbar.getControl("navTools"); // You can use an existing group like navTools
      controlGroup.addControl(orbitButton);

      let panButton = new Autodesk.Viewing.UI.Button("panToolButton");
      panButton.onClick = function () {
        newViewer.setActiveNavigationTool("pan");
      };
      panButton.setToolTip("Pan");
      panButton.setIcon("adsk-icon-pan");
      controlGroup.addControl(panButton);

      // zoom dosent work
      let zoomButton = new Autodesk.Viewing.UI.Button("zoomToolButton");
      zoomButton.onClick = function () {
        newViewer.setActiveNavigationTool("zoom");
      };
      zoomButton.setToolTip("Zoom");
      zoomButton.setIcon("adsk-icon-zoom");
      controlGroup.addControl(zoomButton);

      let fitToViewButton = new Autodesk.Viewing.UI.Button(
        "fitToViewToolButton"
      );
      fitToViewButton.onClick = function () {
        newViewer.fitToView();
      };
      fitToViewButton.setToolTip("fitToView");
      fitToViewButton.setIcon("adsk-icon-fit-to-view");
      controlGroup.addControl(fitToViewButton);

      let firstPersonButton = new Autodesk.Viewing.UI.Button(
        "firstPersonToolButton"
      );
      firstPersonButton.onClick = function () {
        newViewer.setActiveNavigationTool("bimwalk");
      };
      firstPersonButton.setToolTip("First Person");
      firstPersonButton.setIcon("adsk-icon-first-person");
      controlGroup.addControl(firstPersonButton);
      //model tool group
      let modelGroup = toolbar.getControl("modelTools");

      // dosent work
      let sectionAnalysisButton = new Autodesk.Viewing.UI.Button(
        "sectionAnalysisToolButton"
      );
      sectionAnalysisButton.onClick = function () {
        newViewer.setActiveNavigationTool("section");
      };
      sectionAnalysisButton.setToolTip("Section Analysis");
      sectionAnalysisButton.setIcon("adsk-icon-section-analysis");
      modelGroup.addControl(sectionAnalysisButton);
    });