如何创建停靠面板(在较新版本的 autodesk forge 查看器中) [英] How to create a Docking Panel (in the newer version of autodesk forge viewer)

查看：28
本文介绍了如何创建停靠面板(在较新版本的 autodesk forge 查看器中)的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

注意:我已经使用以下答案中提供的建议更新了我之前的代码.

根据建议，我发现停靠面板已添加到 DOM 中.但是没有显示(即使z-index设置为2)

这是我迄今为止尝试过的.另外，请在下面找到控制台结果的屏幕截图.

<头><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><风格>身体 {边距:0；}#forgeViewer {宽度:100%；高度:100%；边距:0；背景色:#F0F8FF；}</风格><身体><div id="forgeViewer"></div><脚本>var 查看器；变量选项 = {env: 'AutodeskProduction',api: 'derivativeV2',//对于上传到 EMEA 的模型，将此选项更改为 'derivativeV2_EU'getAccessToken:函数(onTokenReady){var token = '这里的访问令牌';var timeInSeconds = 3600;//使用 Forge Authentication (OAuth) API 提供的值onTokenReady(token, timeInSeconds);}};SimplePanel = function(parentContainer, id, title, content, x, y){this.content = 内容；Autodesk.Viewing.UI.DockingPanel.call(this, parentContainer, id, title,{shadow:false});//自动适应内容并且不允许调整大小.给定坐标的位置.//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="panel panel-default">','','<头>','<名称</th><th>状态</th><th>Found</th><th>Approved By</th><th>Description</th>','</thead>','','<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>','</表>','</div>','</div>'].join('
');$(this.scrollContainer).append(html);this.initializeMoveHandlers(this.title);this.initializeCloseHandler(this.closer);};Autodesk.Viewing.Initializer(选项，函数(){var htmlDiv = document.getElementById('forgeViewer');查看器 = 新 Autodesk.Viewing.GuiViewer3D(htmlDiv);var startedCode = viewer.start();如果(开始代码 > 0){console.error('无法创建查看器:不支持 WebGL.');返回;}console.log('初始化完成，接下来加载模型...');});var documentId = 'urn:urn here';Autodesk.Viewing.Document.load(documentId, onDocumentLoadSuccess, onDocumentLoadFailure);函数 onDocumentLoadSuccess(viewerDocument) {var defaultModel = viewerDocument.getRoot().getDefaultGeometry();viewer.loadDocumentNode(viewerDocument, defaultModel);viewer.addEventListener(Autodesk.Viewing.SELECTION_CHANGED_EVENT，事件=>{//console.log(viewer.model.getData());console.log(viewer.model.getDocumentNode());//console.log(SimplePanel.container)查看器.getPropertyPanel(true).setVisible(true)var content = document.createElement('div');var mypanel = new SimplePanel(NOP_VIEWER.container,'mypanel','My Panel',content);mypanel.setVisible(true);})}函数 onDocumentLoadFailure() {console.error('获取伪造清单失败');}</html>```[![dom 的控制台输出][1]][1][![控制台上的DOM屏幕截图][1]][1][1]:https://i.stack.imgur.com/Lp1rm.png
 解决方案 
您需要显式调用 Autodesk.Viewing.UI.DockingPanel.setVisible(true) 使面板可见并放置在视口中重叠元素之前使用正确的 z-index 位于所需位置:
SimplePanel.container.style.width = 宽度SimplePanel.container.style.height = 高度SimplePanel.container.style.left = 左SimplePanel.container.style.top = 顶部SimplePanel.container.style.z-index = 2//或其他适合 UI 其余部分的值SimplePanel.setVisible(true)
否则你会注意到它已经存在于 DOMtree 中，并且 display 设置为 none 或者呈现在可见视口之外(位于 top:0,left:0 等)或在其他元素后面(被阻止)...
如果面板仍然没有出现，请尝试查找相关的控制台输出，尤其是.触发选择事件并检查面板是否已在浏览器的开发人员工具中呈现到 DOMtree 但不知何故仍不可见时的错误消息
Note: I have updated my previous code with the suggestions provided below in the answer.
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('
');


$(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



 解决方案 
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)

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 ...
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 查看器中)的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！

                        查看全文
                    

                            
                        

            



        

            
相关文章

            
        

            



        

        

            
其他开发最新文章

            
        

        

            

                热门教程
            

            
        

        

            

                热门工具
            

            
        

        
    

    

        

            登录
            关闭
        

        

            

                扫码关注1秒登录
            

            

                
            

            

                
                
            

            

                发送“验证码”获取
                |
                15天全站免登陆
            

            

        

    



    

		

			友情链接：
            IT屋
            Chrome插件
            谷歌浏览器插件
        

        

            IT屋
            ©2016-2022 琼ICP备2021000895号-1
            站点地图
            站点标签
            SiteMap
            <免责申明>
            本站内容来源互联网,如果侵犯您的权益请联系我们删除.