forge viewer panel不會顯示?

Question

最近在研究forge viewer api
然後參考這個程式碼:https://github.com/yiskang/fo...
我也嘗試用toolbar Extension 寫一個panel自定義數據樹
但每次開啟視窗按下按鈕後 面板都不會出現
除非改變視窗大小(例如:全螢幕,開啟f12,縮放瀏覽器視窗) 面板才會出現

按下去是沒有反應

開啟開發人員工具才會出現面板在右下角
且面板大小也不能拉大拉小
以下是我這個extension的程式碼

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

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

想問問看問題出在哪，還是我有甚麼知識點沒有掌握到的
謝謝大家