最近在研究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(); } }
想問問看問題出在哪,還是我有甚麼知識點沒有掌握到的
謝謝大家
待解决
悬赏分:50
- 离问题结束还有
点赞 0反对 0举报 0
收藏 0
分享 4
