[英]Autodesk Forge: Viewer Extension cant use .getExternalIdMapping()
[英]Panel not shown while using Forge Viewer extension
我是forge viewer
api 的新手
我在实践中引用了此代码:
https://github.com/yiskang/forge-au-sample/tree/master/model-structure
我尝试使用工具栏扩展来制作具有定义模型结构树的面板
但是单击按钮时未显示面板
你可以在这里看到面板没有显示
当我打开开发人员工具时它会显示面板,但它无法更改面板的大小。
这是我的代码
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();
}
}
谢谢你的时间,请帮助我。
这听起来像是缺少 CSS 样式问题。 在这种情况下,您必须使用 CSS 样式为面板指定初始大小和位置,请在 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;
}
参考: https : //github.com/yiskang/forge-au-sample/blob/master/model-structure/styles/index.css
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.