如何创建对接面板(在较新版本的Autodesk Forge Viewer中) [英] How to create a Docking Panel (in the newer version of autodesk forge viewer)
问题描述
注意:我已经使用下面答案中提供的建议更新了我以前的代码.
Note: I have updated my previous code with the suggestions provided below in the answer.
遵循建议后，我发现对接面板已添加到DOM.但不会显示(即使z-index设置为2)
After following the suggestion, I've found that the docking panel is added to the DOM. But not being displayed(even though z-index is set to 2)
这是我到目前为止尝试过的.另外，在下面找到控制台结果的屏幕截图.
This is what I have tried so far. Also, find the screenshot of the console result below.
<html lang="en">
<head>
<meta name="viewport" content="width=device-width, minimum-scale=1.0, initial-scale=1, user-scalable=no" />
<meta charset="utf-8">
<link rel="stylesheet" href="https://developer.api.autodesk.com/modelderivative/v2/viewers/7.*/style.min.css" type="text/css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://developer.api.autodesk.com/modelderivative/v2/viewers/7.*/viewer3D.min.js"></script>
<style>
body {
margin: 0;
}
#forgeViewer {
width: 100%;
height: 100%;
margin: 0;
background-color: #F0F8FF;
}
</style>
</head>
<body>
<div id="forgeViewer"></div>
</body>
<script>
var viewer;
var options = {
env: 'AutodeskProduction',
api: 'derivativeV2', // for models uploaded to EMEA change this option to 'derivativeV2_EU'
getAccessToken: function(onTokenReady) {
var token = 'access token here';
var timeInSeconds = 3600; // Use value provided by Forge Authentication (OAuth) API
onTokenReady(token, timeInSeconds);
}
};
SimplePanel = function(parentContainer, id, title, content, x, y)
{
this.content = content;
Autodesk.Viewing.UI.DockingPanel.call(this, parentContainer, id, title,{shadow:false});
// Auto-fit to the content and don't allow resize. Position at the coordinates given.
//
this.container.style.height = "150px";
this.container.style.width = "450px";
this.container.style.resize = "auto";
this.container.style.left = x + "px";
this.container.style.top = y + "px";
this.container.style.zIndex = 2;
};
SimplePanel.prototype = Object.create(Autodesk.Viewing.UI.DockingPanel.prototype);
SimplePanel.prototype.constructor = SimplePanel;
SimplePanel.prototype.initialize = function()
{
this.title = this.createTitleBar(this.titleLabel || this.container.id);
this.container.appendChild(this.title);
this.container.appendChild(this.content);
this.initializeMoveHandlers(this.container);
this.closer = this.createCloseButton();
this.title.appendChild(this.closer);
var op = {left:false,heightAdjustment:45,marginTop:0};
this.scrollcontainer = this.createScrollContainer(op);
var html = [
'<div class="uicomponent-panel-controls-container">',
'<div class="panel panel-default">',
'<table class="table table-hover table-responsive" id = "clashresultstable">',
'<thead>',
'<th>Name</th><th>Status</th><th>Found</th><th>Approved By</th><th>Description</th>',
'</thead>',
'<tbody>',
'<tr><td>test</td><td>test</td><td>test</td><td>test</td><td>test</td></tr>',
'<tr><td>test</td><td>test</td><td>test</td><td>test</td><td>test</td></tr>',
'<tr><td>test</td><td>test</td><td>test</td><td>test</td><td>test</td></tr>',
'<tr><td>test</td><td>test</td><td>test</td><td>test</td><td>test</td></tr>',
'<tr><td>test</td><td>test</td><td>test</td><td>test</td><td>test</td></tr>',
'<tr><td>test</td><td>test</td><td>test</td><td>test</td><td>test</td></tr>',
'<tr><td>test</td><td>test</td><td>test</td><td>test</td><td>test</td></tr>',
'</tbody>',
'</table>',
'</div>',
'</div>'
].join('\n');
$(this.scrollContainer).append(html);
this.initializeMoveHandlers(this.title);
this.initializeCloseHandler(this.closer);
};
Autodesk.Viewing.Initializer(options, function() {
var htmlDiv = document.getElementById('forgeViewer');
viewer = new Autodesk.Viewing.GuiViewer3D(htmlDiv);
var startedCode = viewer.start();
if (startedCode > 0) {
console.error('Failed to create a Viewer: WebGL not supported.');
return;
}
console.log('Initialization complete, loading a model next...');
});
var documentId = 'urn:urn here';
Autodesk.Viewing.Document.load(documentId, onDocumentLoadSuccess, onDocumentLoadFailure);
function onDocumentLoadSuccess(viewerDocument) {
var defaultModel = viewerDocument.getRoot().getDefaultGeometry();
viewer.loadDocumentNode(viewerDocument, defaultModel);
viewer.addEventListener( Autodesk.Viewing.SELECTION_CHANGED_EVENT, event=>{
//console.log(viewer.model.getData());
console.log(viewer.model.getDocumentNode());
// console.log(SimplePanel.container)
viewer.getPropertyPanel(true).setVisible(true)
var content = document.createElement('div');
var mypanel = new SimplePanel(NOP_VIEWER.container,'mypanel','My Panel',content);
mypanel.setVisible(true);
})
}
function onDocumentLoadFailure() {
console.error('Failed fetching Forge manifest');
}
</script>
</html>```[![console output for the dom][1]][1]
[![DOM screenshot on console][1]][1]
[1]: https://i.stack.imgur.com/Lp1rm.png
推荐答案
您需要显式调用 Autodesk.Viewing.UI.DockingPanel.setVisible(true)以使面板可见并放置并在视口中重叠元素前面的正确 z-index 位置上位于所需位置:
You'd need to explicitly call Autodesk.Viewing.UI.DockingPanel.setVisible(true) to make the panel visible and put in the desired position with the correct z-index ahead of overlapping elements in the viewport as well:
SimplePanel.container.style.width = width
SimplePanel.container.style.height = height
SimplePanel.container.style.left = left
SimplePanel.container.style.top = top
SimplePanel.container.style.z-index = 2 // or another value to suit the rest of your UI
SimplePanel.setVisible(true)
否则，您会注意到它已经存在于DOMtree中，并且 display 设置为 none 或在可见视口之外(位于 top:0处)渲染，left:0 等)或在其他元素后面(被其他元素阻止)...
Otherwise you'd notice it's already present in the DOMtree with display set to none or either rendered outside of the visible viewport (positioned at top:0,left:0 etc) or behind(blocked by) other elements ...
如果该面板仍然没有出现，请尝试寻找相关的控制台输出esp.触发选择事件并检查面板是否已在浏览器的开发人员工具中呈现给DOMtree时出现错误消息
If the panel still does not appear try to look for relevant console output esp. error messages when you trigger the selection event and check if the panel is already rendered to the DOMtree in the browser's developer tool but somehow still not visible
这篇关于如何创建对接面板(在较新版本的Autodesk Forge Viewer中)的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
