在 Autodesk Forge 查看器中打开新实例时如何关闭停靠面板 api?
How to close a docking panel when opening a new instance in the autodesk forge viewer 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
我建议您使用查看器扩展来管理您的面板,以便重复使用相同的面板实例。这里有一些例子供您参考:
- https://github.com/yiskang/forge-au-sample/blob/master/properties/scripts/AdnPropsPanel.js
- https://github.com/yiskang/forge-au-sample/blob/master/model-structure/scripts/AdnStructurePanel.js
如果您不想实现扩展,您可以将 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 );
})
希望对您有所帮助!
我一直在使用 自定义停靠面板 在查看器中显示附加到几个节点的数据。我已经在单击这些节点时附加了侦听器事件并实例化了一个新的停靠面板实例。
它工作正常。每次单击节点时都会显示新的自定义面板。有一个关闭处理程序附加到关闭面板的关闭按钮。
但是,如何在打开新面板之前关闭现有面板?我尝试使用 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
我建议您使用查看器扩展来管理您的面板,以便重复使用相同的面板实例。这里有一些例子供您参考:
- https://github.com/yiskang/forge-au-sample/blob/master/properties/scripts/AdnPropsPanel.js
- https://github.com/yiskang/forge-au-sample/blob/master/model-structure/scripts/AdnStructurePanel.js
如果您不想实现扩展,您可以将 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 );
})
希望对您有所帮助!