Panel not shown while using Forge Viewer extension

Question

I am new to forge viewer api

I referred this code for my practice:

https://github.com/yiskang/forge-au-sample/tree/master/model-structure

I tried using toolbar Extension to make the panel with defined model structure tree

But the panel is not shown on button click

You can see here the panel is not shown

It shows the panel when I open the developer tool but there it cannot change the size of panel.

Here is my code

class ModelStructurePanelExtension extends Autodesk.Viewing.Extension {
    constructor(viewer, options) {
        super(viewer, options);
        this._group = null;
        this._button = null;
        //this.createUI = this.createUI.bind(this);
        //this.onToolbarCreated = this.onToolbarCreated.bind(this);
    }

    onToolbarCreated() {
        this.viewer.removeEventListener(
            Autodesk.Viewing.TOOLBAR_CREATED_EVENT,
            this.onToolbarCreated
        );
        this.createUI();
    }

    createUI() {
        const viewer = this.viewer;

        const modelStructurePanel = new ModelStructurePanel(viewer, '設備列表');

        this.panel = modelStructurePanel;
        //viewer.addPanel(modelStructurePanel);

        const structureButton = new Autodesk.Viewing.UI.Button('toolbar-adnModelStructureTool');
        structureButton.setToolTip('browser');
        structureButton.addClass('AdnModelStructurePanelExtensionIcon');
        structureButton.onClick = function () {
            modelStructurePanel.setVisible(!modelStructurePanel.isVisible());
        };

        const subToolbar = new Autodesk.Viewing.UI.ControlGroup('toolbar-adn-tools');
        subToolbar.addControl(structureButton);
        subToolbar.adnstructurebutton = structureButton;
        this.subToolbar = subToolbar;

        viewer.toolbar.addControl(this.subToolbar);

        modelStructurePanel.addVisibilityListener(function (visible) {
            if (visible)
                viewer.onPanelVisible(modelStructurePanel, viewer);

            structureButton.setState(visible ? Autodesk.Viewing.UI.Button.State.ACTIVE : Autodesk.Viewing.UI.Button.State.INACTIVE);
        });
    }

    load() {
        console.log('ModelStructurePanelExtension has been loaded');
        return true;
    }

    unload() {
        if (this._group) {
            this._group.removeControl(this._button);
            if (this._group.getNumberOfControls() === 0) {
                this.viewer.toolbar.removeControl(this._group);
            }
        }
        console.log('ModelStructurePanelExtension has been unloaded');
        return true;
    }
}

This is my Class :還有panel的class

class ModelStructurePanel extends Autodesk.Viewing.UI.DockingPanel {
    constructor(viewer, title, options) {
        options = options || {};

          //Height adjustment for scroll container, offset to height of the title bar and footer by default.
        if (!options.heightAdjustment)
            options.heightAdjustment = 70;

        if (!options.marginTop)
            options.marginTop = 0;

        if (!options.left)
            options.left = false;

        super(viewer.container, viewer.container.id + 'AdnModelStructurePanel', title, options);

        this.container.classList.add('adn-docking-panel');
        this.container.classList.add('adn-model-structure-panel');
        this.createScrollContainer(options);
        console.log(options,this.options);
        this.viewer = viewer;
        this.options = options;
        this.uiCreated = false;

        this.addVisibilityListener((show) => {
            if (!show) return;

            if (!this.uiCreated)
                this.createUI();
            //this.sizeToContent(this.container);
        });
    }
    hasTask(model, dbId, matches) {
        return new Promise(function (resolve, reject) {
            const instanceTree = model.getData().instanceTree;

            model.getProperties(dbId, function (result) {
                const nodeName = instanceTree.getNodeName(dbId);
                const hasChildren = instanceTree.getChildCount(dbId) > 0;

                if (!result.properties || hasChildren)
                    return resolve();

                //for (let i = 0; i < result.properties.length; ++i) {
                const prop = result.properties[0];
                //check if we have a match
                if (!nodeName.includes("RPC") ) {
                    return resolve();
                }

                let match = matches.find(node => node.text == prop.displayValue);

                if (!match) {
                    match = {
                        id: 'mat-' + guid(),
                        text: prop.displayValue,
                        children: [
                            {
                                id: dbId,
                                text: nodeName
                            }
                        ]
                    };

                    matches.push(match);
                } else {
                    match.children.push({
                        id: dbId,
                        text: nodeName
                    });
                }
                //}

                return resolve();
            }, function () {
                return reject();
            });
        });
    }

    executeTaskOnModelTree(model, task) {
        const taskResults = [];

        function _executeTaskOnModelTreeRec(dbId) {
            instanceTree.enumNodeChildren(dbId,
                function (childId) {
                    taskResults.push(task(model, childId));
                    _executeTaskOnModelTreeRec(childId);
                });
        }

        //get model instance tree and root component
        const instanceTree = model.getData().instanceTree;
        const rootId = instanceTree.getRootId();

        _executeTaskOnModelTreeRec(rootId);

        return taskResults;
    }

    buildTree() {
        const viewer = this.viewer;

        viewer.getObjectTree(() => {
            const matches = [];
            const taskThunk = (model, dbId) => {
                return this.hasTask(
                    model, dbId, matches);
            };
            const taskResults = this.executeTaskOnModelTree(
                viewer.model,
                taskThunk
            );
            Promise.all(taskResults)
                .then(() => {
                    console.log('Found ' + matches.length + ' matches');
                    console.log(matches);

                    $(this.treeContainer)
                        .on('select_node.jstree', function (e, data) {
                            //console.log(e, data);
                            if (!data) return;

                            let dbIds = [];
                            viewer.clearSelection();

                            if (data.node.id.contains('mat-')) {
                                dbIds = data.node.children.map(child => parseInt(child));

                            } else {
                                const dbId = parseInt(data.node.id);
                                dbIds = [dbId];
                            }

                            viewer.select(dbIds);
                            viewer.fitToView(dbIds);
                        })
                        .jstree({
                            core: {
                                data: matches,
                                themes: {
                                    icons: false
                                }
                            }
                        });
                });
        },
            function (code, msg) {
                console.error(code, msg);
            });
    }

    createUI() {
        this.uiCreated = true;

        const div = document.createElement('div');

        const treeDiv = document.createElement('div');
        div.appendChild(treeDiv);
        this.treeContainer = treeDiv;

        this.scrollContainer.appendChild(div);

        this.buildTree();
    }
}

Thank you for your time, please help me.

Answer 1

It sounds like a missing CSS style issue. In that case, you have to give the panel an initial size and position with the CSS style, please check these two styles in the index.css

.adn-docking-panel {
  top: 10px;
  left: 10px;
}

.adn-model-structure-panel .docking-panel-scroll div:first-child {
  width: 370px;
  height: 530px;
  min-width: 370px;
  min-height: 530px;
}

ref: https://github.com/yiskang/forge-au-sample/blob/master/model-structure/styles/index.css