Autodesk forge 如何在autodesk viewer中显示隐藏的对接面板?

Autodesk forge 如何在autodesk viewer中显示隐藏的对接面板?,autodesk-forge,autodesk-viewer,Autodesk Forge,Autodesk Viewer,我一直试图在单击查看器中的任何特定节点时显示自定义停靠面板 最初遵循这个文件 错误-未捕获类型错误:this.setVisible不是DockingPanel上的函数 遵循这个StackOverflow解决方案, 这次没有错误,但面板没有出现。因此提出了这个问题,并得到了一个建议,明确调用并设置面板的尺寸 但这个问题由于反复编辑和不明确的修改而变得一团糟。因此,在这里再次提出更多细节。这样我就可以得到适当的帮助 正在创建自定义停靠面板并将其添加到DOM中。我可以在DOM中指定的所有维度中找到

我一直试图在单击查看器中的任何特定节点时显示自定义停靠面板

最初遵循这个文件

错误-未捕获类型错误:this.setVisible不是DockingPanel上的函数

遵循这个StackOverflow解决方案,

这次没有错误,但面板没有出现。因此提出了这个问题,并得到了一个建议,明确调用并设置面板的尺寸

但这个问题由于反复编辑和不明确的修改而变得一团糟。因此,在这里再次提出更多细节。这样我就可以得到适当的帮助

正在创建自定义停靠面板并将其添加到DOM中。我可以在DOM中指定的所有维度中找到它们,z-index也设置为2。但在显示时仍然存在问题

我将附加屏幕截图的链接-显示添加的mypanel部分和附加的CSS

[![Console屏幕截图][1][1]

下面是我的实现

<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 = 'eyJhbGciOiJIUzI1NiIsImtpZCI6Imp3dF9zeW1tZXRyaWNfa2V5In0.eyJzY29wZSI6WyJidWNrZXQ6Y3JlYXRlIiwiYnVja2V0OnJlYWQiLCJkYXRhOnJlYWQiLCJkYXRhOndyaXRlIl0sImNsaWVudF9pZCI6Ikp2Vk40bzdBQ0V0ZE81TVpnZ21QMk9WM1RoNFJnRW54IiwiYXVkIjoiaHR0cHM6Ly9hdXRvZGVzay5jb20vYXVkL2p3dGV4cDYwIiwianRpIjoic1c2N2R1MUFrS2JTbVp0bEVPb2F5TVNmSjRGSUthcWV2cUxEcFAyU0VkYlZrd1lRYTdTR2JacWc4NUZzWUVPaiIsImV4cCI6MTU4NzY1NDA4M30.zt7dAGOS58TEzyWKyA-Y6YiLGsRNWTy6fcIPLiaCCM4';
            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:dXJuOmFkc2sub2JqZWN0czpvcy5vYmplY3Q6ZmFjaWxpb25ld2NsaWVudGJ1Y2tldC9yYWNfYWR2YW5jZWRfc2FtcGxlX3Byb2plY3QucnZ0';
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> ```


  [1]: https://i.stack.imgur.com/MwcD7.png

身体{
保证金:0;
}
#伪造者{
宽度:100%;
身高:100%;
保证金:0;
背景色:#F0F8FF;
}
变量查看器;
变量选项={
环境:“AutodeskProduction”,
api:'derivativeV2',//对于上传到EMEA的模型,将此选项更改为'derivativeV2_-EU'
getAccessToken:函数(onTokenReady){
1.2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 LRYTDTR2JACWC4NuzzwuvpaisiMV4CCI6MTU4NZY1NDA4M30。zt7dAGOS58TEzyWKyA-Y6YILGSRNWTY6FCIPLIACM4’;
var timeInSeconds=3600;//使用Forge身份验证(OAuth)API提供的值
onTokenReady(令牌,timeUnseconds);
}
};
SimplePanel=函数(父容器、id、标题、内容、x、y)
{
this.content=内容;
调用(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=函数()
{ 
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);
变量html=[
'',
'',
'',
'',
“NameStatusFoundApproved ByDescription”,
'',
'',
“测试”,
“测试”,
“测试”,
“测试”,
“测试”,
“测试”,
“测试”,
'',
'',
'',
''
].join('\n');
$(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');
返回;
}
log('初始化完成,下一步加载模型…');
});
var documentId='urn:dxjuomfkc2sub2jqzwn0czpvcy5vymply3q6zmfjawxpb25ld2nawvudgj1tldc9yyywnfywr2yw5jzwrfc2ftcgxlxbyb2ply3qucnz0';
Autodesk.Viewing.Document.load(documentId、onDocumentLoadSuccess、onDocumentLoadFailure);
函数onDocumentLoadSuccess(viewerDocument){
var defaultModel=viewerDocument.getRoot().getDefaultGeometry();
loadDocumentNode(viewerDocument,defaultModel);
viewer.addEventListener(Autodesk.Viewing.SELECTION_CHANGED_事件,事件=>{
//log(viewer.model.getData());
log(viewer.model.getDocumentNode());
//console.log(SimplePanel.container)
//viewer.getPropertyPanel(true).setVisible(true)
var content=document.createElement('div');
var mypanel=newsimplepanel(NOP_VIEWER.container,'mypanel','mypanel',content);
mypanel.setVisible(true);
})
}
函数onDocumentLoadFailure(){
console.error('获取伪造清单失败');
}
```
[1]: https://i.stack.imgur.com/MwcD7.png

就像我在另一个答案中建议的那样,尝试在面板的样式/CSS中设置正确的位置(左侧和顶部等),并且代码中似乎缺少该位来初始化面板…:

    var mypanel = new  SimplePanel(NOP_VIEWER.container,'mypanel','My Panel',content); // x,y are not being set.
        mypanel.setVisible(true);

在您的屏幕截图中,面板在视口外被渲染,坐标值无效…

如何获取特定节点的唯一id(dbid)?我尝试了一些,但仍然没有得到一些独特的节点点击。接着是这个,但它说dbId没有定义。我使用
viewer.model.getDocumentNode().data.guid
检索guid,但无论单击哪个节点,所有节点的guid似乎都是相同的。关于@Bryan HuangI的任何帮助都会为
viewer.getSelection()
上的选择获取唯一的id,这是否正确?这里什么都没有