时间戳

首页 > 解决方案 > 在 Autodesk forge 查看器 api 中打开新实例时如何关闭停靠面板？

autodesk-forge - 在 Autodesk forge 查看器 api 中打开新实例时如何关闭停靠面板？

问题描述

我一直在使用自定义停靠面板显示附加到查看器中的几个节点的数据。我已在单击这些节点时附加了侦听器事件并实例化了一个新的停靠面板实例。

它工作正常。每次单击节点时都会显示新的自定义面板。有一个关闭处理程序附加到关闭面板的关闭按钮。

但是，如何在打开新面板之前关闭现有面板？我尝试使用 initializeCloseHandler 初始化查看器，以便在单击的任何位置关闭打开的停靠面板。但它不起作用。我无法在那里获得查看器实例。

现在两个实例都被添加到另一个之上。我附上它的截图以供参考 - https://i.stack.imgur.com/lT5Y1.png

我怎样才能做到这一点？这是我到目前为止所尝试的，

示例代码：

<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 = "250px";
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 = document.createElement("span");
this.closer = this.createCloseButton();
this.initializeCloseHandler(this.closer);
this.container.appendChild(this.closer);

var op = {left:false,heightAdjustment:45,marginTop:0};
this.scrollcontainer = this.createScrollContainer(op);
// console.log("id - "+viewer.model.getFragmentList().fragments.fragId2dbId);
console.log(viewer.getSelection());
var id = viewer.getSelection();
var dataItem;
var data = [
    {
        id:"2648",
        name:"Chiller",
        temp:"300 deg",
        serviceReq:true,
        reservations:"3"
    },
    {
        id:"2228",
        name:"Door",
        temp:"150 deg",
        serviceReq:false,
        reservations:"4"
    },
    {
        id:"2198",
        name:"Cooler",
        temp:"400 deg",
        serviceReq:true,
        reservations:"2"
    }
]

data.forEach(item => {
    if(item.id == id){
        dataItem = item;
    }
})

var html = [
    '<div class="uicomponent-panel-controls-container">',
    '<div class="panel panel-default">',
    '<table class="table table-hover table-responsive" id = "clashresultstable">',
    '<thead>',
    '<th>Key</th><th>Value</th>',
    '</thead>',
    '<tbody>',
    '<tr><td>ID</td><td>'+dataItem.id+'</td></tr>',
    '<tr><td>Name</td><td>'+dataItem.name+'</td></tr>',
    '<tr><td>Temperature</td><td>'+dataItem.temp+'</td></tr>',
    '<tr><td>Service Requests</td><td>'+dataItem.serviceReq+'</td></tr>',
    '<tr><td>Reservations</td><td>'+dataItem.reservations+'</td></tr>',
    '</tbody>',
    '</table>',
    '</div>',
    '</div>'
].join('\n');


$(this.scrollContainer).append(html);

this.initializeMoveHandlers(this.title);    
};



    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)';
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=>{

        var content = document.createElement('div');
        var mypanel = new  SimplePanel(NOP_VIEWER.container,'mypanel','My Panel',content,20,20);
        mypanel.setVisible(true);
})
}

// function closer(){     -- tried to attach this handler to the viewer instance,but didn't work
//     SimplePanel.setVisible(false);
// }

function onDocumentLoadFailure() {
    console.error('Failed fetching Forge manifest');
}


   </script>
</html>````


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

标签： autodesk-forgeautodesk-viewer

解决方案

我建议您使用查看器扩展来管理您的面板，以便重用相同的面板实例。以下是一些示例：

如果您不想实现扩展，您可以将mypanel变量存储在某处，并if在创建新面板之前使用语句销毁旧面板。

var mypanel = null;

// Other code snippet

viewer.addEventListener( Autodesk.Viewing.SELECTION_CHANGED_EVENT, event=> {
        if( mypanel != null ) {
           //NOP_VIEWER.container.removeChild( mypanel.container );
           mypanel.uninitialize();
           mypanel = null;
        }

        var content = document.createElement('div');
        mypanel = new  SimplePanel(NOP_VIEWER.container,'mypanel','My Panel',content,20,20);
        mypanel.setVisible( true );

})

希望能帮助到你！

推荐阅读