查看器 GUI 外的 div 中的 ModelStructurePanel 实例 [英] Instance of ModelStructurePanel in div outside the viewer GUI

问题描述

我正在构建一个带有模型查询功能的 html 页面，从查看器开始.我已经实现了一些方法，包括viewer.getProperties() 和viewer.getBulkProperties().在处理这些主题时，我意识到在查看器外部的元素(而不是停靠面板中)中创建面板的实例(模型结构、属性等)、维护功能并在可能的情况下自定义它们将非常有用(例如显示未折叠的元素).第一个问题:是否有可能做到这一点?第二个问题:关于这个主题的一般方法或教程的建议?

I am building an html page with model query functionality starting from the viewer. I have implemented some methods including viewer.getProperties () and viewer.getBulkProperties (). Working on these themes I realized that it would be very useful to create instances of the panels (modelstructure, properties etc ...) in elements external to the viewer (not in the docking panels), maintaining the functionality and if possible customizing them (for example showing the elements not -collapsed). First question: is it possible to do this? Second question: suggestions on a general method or tutorial for this theme?

推荐答案

对于 Q1，可以这样做，将 ModelStructurePanel 的容器附加到查看器容器之外的 div，但不推荐这样做.将 ModelStructurePanel 从查看器容器中移出后，需要额外的努力来修复它的 CSS.

For the Q1, it's possible to do that, appending the container of the ModelStructurePanel to a div outside the viewer container, but it's not recommended. It would take extra effort to fix CSS of the ModelStructurePanel after moving it out from viewer container.

对于 Q2，您可以利用 jstree.js 来制作三个类似的 UI，为了像本地 ModelStructurePanel 那样重建模型层次结构数据，这里有一个代码片段供您使用.您必须修改它以匹配 jstree 的数据要求.

For the Q2, you could take advantage of the jstree.js to make a three like UI, and for rebuilding model hierarchy data as the native ModelStructurePanel does, here is a code snippet for you. You would have to modify it to match jstree's data requirement.

function buildModelTree( model ) {

  //builds model tree recursively
  function _buildModelTreeRec( node ) {

    it.enumNodeChildren( node.dbId, function(childId) {
        node.children = node.children || [];

        var childNode = {
          dbId: childId,
          name: it.getNodeName( childId )
        };

        node.children.push( childNode );

        _buildModelTreeRec( childNode );
      });

  }

  //get model instance tree and root component
  var it = model.getData().instanceTree;

  var rootId = it.getRootId();

  var rootNode = {
    dbId: rootId,
    name: it.getNodeName( rootId )
  };

  _buildModelTreeRec( rootNode );

  return rootNode;
}

var root = buildModelTree( viewer.model );

然后您将需要绑定这些事件以在某些特定情况下更改树 UI 的外观:

Then you will need to bind those events to change tree UI's look in some particular situations:

• Autodesk.Viewing.SELECTION_CHANGED_EVENT:选择树节点.
• Autodesk.Viewing.ISOLATE_EVENT:
• Autodesk.Viewing.HIDE_EVENT:要更改树节点的外观，如果此节点不可见，请将树节点的文本颜色设为灰色.
• Autodesk.Viewing.SHOW_EVENT:将选定的三个节点的文本颜色从灰色更改为黑色
• Autodesk.Viewing.ISOLATE_EVENT:HIDE_EVENT 和 SHOW_EVENT 的组合.

并绑定select_node.jstree事件来隔离，适合根据选中的查看器对象查看三个节点.

And bind select_node.jstree event to isolate, fit to view the viewer objects according to the selected three nodes.

• 隔离:Viewer3D#隔离(dbIds)
• 适合查看:Viewer3D#fitToView( dbIds )

这篇关于查看器 GUI 外的 div 中的 ModelStructurePanel 实例的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！