Monday, 30 October 2023

Customizing Autodesk Forge Viewer Document Browser Extension for Multi-Model Support

I am working with the Autodesk Forge Viewer and using the Autodesk.DocumentBrowser extension. My goal is to extend the functionality of the Document Browser to support multiple models simultaneously. Currently, the extension only shows sheets and views for a single model, and I want to customize it to display sheets and views from all the loaded models in the viewer.

I've looked into the existing answer here and it seems that this feature is not implemented by default. Therefore, I'm trying to create a custom extension based on the source code of the Document Browser extension here.

In the Document Browser source code, there's a method _hookToModel which is used to set up the Autodesk.Viewing.UI.Tree root node. The TreeView currently accepts one parent BubbleNode, which can be retrieved from a single model. I tried to create a parent node containing all the models' root nodes as illustrated in the below code but it shows an empty tree. What are the issues in the below trial?

_hookToModel() {
                var models = this.viewer.getVisibleModels();//Get array of all loaded models
                this.rootNodes = models.map(model => {
                    var docNode = model.getDocumentNode();
                    if (!docNode) return null;
                    this.currNode = docNode.findParentGeom2Dor3D();
                    let rootNode = docNode.getRootNode();
                    this.geometries = rootNode.search({ 'type': 'geometry' });
                    return rootNode;
                }).filter(node => node !== null);


                let cache = this.getCache();
                if (cache.ui) {
                    this.ui = cache.ui;
                    cache.ui = null;
                } else {
                    this.ui = new _uiController__WEBPACK_IMPORTED_MODULE_0__.UiController(this.viewer);
                }
                this.ui.createUi(this.currNode, this.options, this.rootNodes); // Here, I'm trying to pass the models' root nodes to adjust the tree and thumbnails to the active models
                this.ui.setChangeModelHandler(this._changeModel.bind(this));
            }
/**
* Creates the UI.
* @param {Autodesk.Viewing.BubbleNode} currNode  - The node loaded into the Viewer
* @param {Object} [options]
* @param {bool} [options.openDocumentBrowserOnLoad=false] - Whether the panel is opened when the extension loads.
* @param {bool} [options.showThumbnails=true] - show or hide thumbnails in the document browser. By default, thumbnails will be shown.
*/
createUi(currNode, options, rootNodes) {

                    this.currNode = currNode;
                    this.rootNodes = rootNodes;
                    this._addToolbarButton();

                    if (!this.panel) {
                        this.panel = new _Panel__WEBPACK_IMPORTED_MODULE_0__.Panel(this.viewer, this.currNode, this.rootNodes);//send rootNodes to the panel constructor
                        this.panel.setChangeModelHandler(this._changeModelFn);
                        this.panel.addVisibilityListener(this._onPanelVisibilityChange);

                        // Show or hide the thumbnails
                        if (options && options.showThumbnails !== undefined) {
                            this.panel.setThumbnailVisibility(options.showThumbnails);
                        }

                        if (options && options.openDocumentBrowserOnLoad) {
                            this.panel.toggleVisibility();
                        }
                    } else {
                        // Some UI change to sync the selection status change triggered by hyperlink
                        this.panel.setCurrentNode(currNode);
                    }

                    this._updateButtonState();
                }

_createTreeView() {
                        if (this.myTree) return;
                        var rootNode = new Autodesk.Viewing.BubbleNode("Aggregated-Models", this.rootNodes);//try to create parent root node but seems incorrect and shows an empty tree
                        //var rootNode = this.currNode.getRootNode();//loads one model only

                        var delegate = (0, _TreeViewDelegate__WEBPACK_IMPORTED_MODULE_1__.createTreeViewDelegate)(rootNode, this);
                        var options = {
                            leafClassName: 'docBrowserLeaf',
                            selectedClassName: 'selected-ex'
                        };

                        var container = this._getTabDiv(TAB_ID_TREE);

                        this.myTree = new Autodesk.Viewing.UI.Tree(
                            delegate,
                            rootNode,
                            container,
                            options
                        );
                    }

Output_Tree



from Customizing Autodesk Forge Viewer Document Browser Extension for Multi-Model Support

No comments:

Post a Comment