autodesk-forge - 如何创建停靠面板

Question

如何创建停靠面板？我正在使用示例https://developer.autodesk.com/en/docs/viewer/v2/reference/javascript/dockingpanel/ 中的代码，它应该继承并覆盖所需的方法。

SimplePanel = function(parentContainer, id, title, content, x, y)
{
  this.content = content;
  Autodesk.Viewing.UI.DockingPanel.call(this, parentContainer, id, '');

  // Auto-fit to the content and don't allow resize.  Position at the coordinates given.
  //
  this.container.style.height = "auto";
  this.container.style.width = "auto";
  this.container.style.resize = "none";
  this.container.style.left = x + "px";
  this.container.style.top = y + "px";
};

SimplePanel.prototype = Object.create(Autodesk.Viewing.UI.DockingPanel.prototype);
SimplePanel.prototype.constructor = SimplePanel;

SimplePanel.prototype.initialize = function()
{
  // Override DockingPanel initialize() to:
  // - create a standard title bar
  // - click anywhere on the panel to move
  // - create a close element at the bottom right
  //
  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("div");
  this.closer.className = "simplePanelClose";
  this.closer.textContent = "Close";
  this.initializeCloseHandler(this.closer);
  this.container.appendChild(this.closer);
};

在此之后，我调用创建的简单面板：

var parent = document.getElementsByClassName('adsk-viewing-viewer')[0];
var panel = SimplePanel(parent, 'panel1', 'panel1');

它返回错误：“未捕获的 TypeError：this.setVisible 不是 DockingPanel 的函数 (viewer3D.js?v=2.11:34343)”

似乎从

Autodesk.Viewing.UI.DockingPanel.call(this, parentContainer, id, '');

至

var DockingPanel = function (parentContainer, id, title, options) {

并在里面崩溃。

在查看器停靠面板功能“this”内部似乎指的是窗口元素。也许它应该是别的东西？例如，当查看器创建搜索窗口时，它似乎指的是某个 div。

score 1 · Accepted Answer

我没有收到像您这样的错误，但是我遇到了另一个由空内容引起的问题。所以我明确地创建了一个 div 作为参数的内容。另外，宽度和高度也是必需的，否则面板不会显示出来。

面板类如下。

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"; 

};

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);        
};

我在控制台脚本上加载了这个面板。

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

如果您仍然有问题，请提供一个小示例文件。我可以在我身边做一个测试。

autodesk-forge - 如何创建停靠面板

1 回答 1

Related

Reference