代码之家  ›  专栏  ›  技术社区  ›  user8265273

Autodesk forge RGraph extension工作不正常

autodesk-forge javascript
  •  0
  • user8265273  · 技术社区  · 7 年前

    我有一个Autodesk Forge扩展(RGraph)。我已遵循中提到的步骤 http://adndevblog.typepad.com/cloud_and_mobile/2016/02/rgraph-chart-library-and-view-data-api.html

    getLeafComponentsRec(parent) 错误是 Cannot read property 'children' of undefined . 

    ///////////////////////////////////////////////////////////////////////////////
// Autodesk.ADN.Viewing.Extension.Chart
// by Philippe Leefsma, July 2015
//
// Dependencies:
//
// Bootstrap: 3.3.5
// http://code.jquery.com/jquery-2.1.4.min.js
// https://rawgit.com/caolan/async/master/dist/async.min.js
// https://rawgit.com/nnnick/Chart.js/master/Chart.min.js
//
///////////////////////////////////////////////////////////////////////////////
AutodeskNamespace('Autodesk.ADN.Viewing.Extension.Chart');

Autodesk.ADN.Viewing.Extension.Chart.RGraph = function(viewer, options) {
  Autodesk.Viewing.Extension.call(this, viewer, options);

  var _self = this;
  var _elementIds = [];
  var _canvasId = null;
  var _components = null;
  var instanceTree;
  var rootId;
  var _graphType = 'pie';
  var _propName = 'label';

  _self.load = function() {

    viewer.addEventListener(Autodesk.Viewing.GEOMETRY_LOADED_EVENT, function() {
      instanceTree = viewer.model.getData().instanceTree;
      rootId = this.rootId = instanceTree.getRootId();
      getAlldbIds(rootId);
      getAllLeafComponents(function(components) {
        _components = components;

        _elementIds.push(createDropdownMenu(
          'Graph Type', {
            top: 50,
            left: 330
          }, [{
            label: 'Pie',
            handler: function() {
              _graphType = 'pie';
              loadChartFromProperty(_graphType, _propName, _components);
            }
          }]
        ));


        getAvailableProperties(components, function(properties) {
          var menuItems = [];
          var labelIdx = 0;
          _propName = properties[0];
          properties.forEach(function(property, idx) {
            if (property === 'label') {
              labelIdx = idx;
              _propName = 'label';
            }

            menuItems.push({
              label: property,
              handler: function() {
                _propName = property;
                loadChartFromProperty(_graphType, _propName, _components);
              }
            })
          });

          _elementIds.push(createDropdownMenu(
            'Property', {
              top: 100,
              left: 330
            },
            menuItems,
            labelIdx));

          loadChartFromProperty(_graphType, _propName, _components);
        });
      });

      console.log('RGraph extension loaded');
      return true;
    });
  };

  ///////////////////////////////////////////////////////////////////////////
  // unload callback
  //
  ///////////////////////////////////////////////////////////////////////////
  _self.unload = function() {
    _elementIds.forEach(function(id) {

      $('#' + id).remove();
    });

    $('#' + _canvasId).remove();
    console.log('RGraph extension unloaded');
    return true;
  };

  /////////////////////////////////////////////////////////////
  ///Gets All DbId
  ///
  ////////////////////////////////////////////////////////////
  function getAlldbIds(rootId) {
    var alldbId = [];
    if (!rootId) {
      console.log(alldbId);
      return alldbId;
    }
    var queue = [];
    queue.push(rootId);
    while (queue.length > 0) {
      var node = queue.shift();
      alldbId.push(node);
      instanceTree.enumNodeChildren(node, function(childrenIds) {
        queue.push(childrenIds);
        //viewer.model.getProperties(childrenIds, function (props) {
        //var propertyname = props.name.split('[')[0];
        //  propsqueue.push(props.name.split('[')[0]);
        //});
      });

    }
    console.log(alldbId);
    //console.log(propsqueue);

  }

  //////////////////////////////////////////////////////////////////////////
  // loadChartFromProperty
  //
  ///////////////////////////////////////////////////////////////////////////
  function loadChartFromProperty(chartType, propName, components) {
    mapComponentsByPropName(propName, components, function(map) {
      // RGraph needs 2 arrays, at least: data & labels
      var data = [];
      var labels = [];
      for (var key in map) {
        data.push(map[key].length);
        labels.push(key);
      }

      // clear previous graphs and create a new canvas element
      $('#' + _canvasId).remove();
      _canvasId = guid();
      createOverlay(_canvasId);
      var graph;

      switch (chartType) {
        case 'pie':
          // Pie chart
          graph = new RGraph.Pie({
              id: _canvasId,
              data: data,
              options: {
                shadow: true,
                shadowOffsety: 7,
                shadowBlur: 25,
                strokestyle: 'rgba(0,0,0,0)',
                tooltips: labels, // let's use the labels as tooltips
                radius: 100
              }
            }).roundRobin({
              frames: 60
            })
            .grow({
              frames: 60
            });
      }

      // on click, let's zoom to the geometry
      graph.onclick = function(e, shape) {
        var key = shape.tooltip;
        viewer.fitToView(map[key]);
      };

      // on mouse move, highligh/isole the geometry
      graph.onmousemove = function(e, shape) {
        var key = shape.tooltip;
        viewer.isolate(map[key]);
      };
    });
  }

  ///////////////////////////////////////////////////////////////////////////
  // Creates overlay canvas element
  //
  ///////////////////////////////////////////////////////////////////////////
  function createOverlay(canvasId) {
    var html = [
      '<canvas class="graph" id="' + canvasId + '" width="300" height="300">',
      '</canvas>',
    ].join('\n');
    $(viewer.container).append(html);
  }

  ///////////////////////////////////////////////////////////////////////////
  // Maps components by property
  //
  ///////////////////////////////////////////////////////////////////////////
  function mapComponentsByPropName(propName, components, onResult) {
    var componentsMap = {};
    async.each(components,
      function(component, callback) {
        getPropertyValue(component, propName, function(value) {
          if (propName === 'label') {
            value = value.split(':')[0];
          }
          if (!componentsMap[value]) {
            componentsMap[value] = [];
          }
          componentsMap[value].push(component);
          callback();
        });
      },
      function(err) {
        onResult(componentsMap);
      });
  }
  ///////////////////////////////////////////////////////////////////////////
  // Gets all existing properties from components list
  //
  ///////////////////////////////////////////////////////////////////////////
  function getAvailableProperties(components, onResult) {
    var propertiesMap = {};
    async.each(components,
      function(component, callback) {
        viewer.getProperties(component, function(result) {
          for (var i = 0; i < result.properties.length; i++) {
            var prop = result.properties[i];
            propertiesMap[prop.displayName] = {};
          }
          callback();
        });
      },
      function(err) {
        onResult(Object.keys(propertiesMap));
      });
  }

  ///////////////////////////////////////////////////////////////////////////
  // Get all leaf components
  //
  ///////////////////////////////////////////////////////////////////////////
  function getAllLeafComponents(callback) {
    var alldbId = [];
    if (!rootId) {
      console.log(alldbId);
      return alldbId;
    }
    var queue = [];
    queue.push(rootId);
    while (queue.length > 0) {
      var node = queue.shift();
      alldbId.push(node);
      instanceTree.enumNodeChildren(node, function(childrenIds) {
        queue.push(childrenIds);
        //viewer.model.getProperties(childrenIds, function (props) {
        //var propertyname = props.name.split('[')[0];
        //  propsqueue.push(props.name.split('[')[0]);
        //});
      });

    }
    console.log(alldbId);
    callback(alldbId);
    viewer.getObjectTree(function(result) {
      var allLeafComponents = rootId;
      callback(allLeafComponents);
      console.log(allLeafComponents);
    });
  };

  ///////////////////////////////////////////////////////////////////////////
  // Get property value from display name
  //
  ///////////////////////////////////////////////////////////////////////////
  function getPropertyValue(dbId, displayName, callback) {
    function _cb(result) {
      if (result.properties) {
        for (var i = 0; i < result.properties.length; i++) {
          var prop = result.properties[i];
          if (prop.displayName === displayName) {
            callback(prop.displayValue);
            return;
          }
        }
        callback('undefined');
      }
    }
    viewer.getProperties(dbId, _cb);
  };

  ///////////////////////////////////////////////////////////////////////////
  // Generates random guid
  //
  ///////////////////////////////////////////////////////////////////////////
  function guid() {
    var d = new Date().getTime();
    var guid = 'xxxx-xxxx-xxxx-xxxx'.replace(
      /[xy]/g,
      function(c) {
        var r = (d + Math.random() * 16) % 16 | 0;
        d = Math.floor(d / 16);
        return (c == 'x' ? r : (r & 0x7 | 0x8)).toString(16);
      });
    return guid;
  };
  ///////////////////////////////////////////////////////////////////////////
  // Creates dropdown menu from input
  //
  ///////////////////////////////////////////////////////////////////////////
  function createDropdownMenu(title, pos, menuItems, selectedItemIdx) {
    var labelId = guid();
    var menuId = guid();
    var listId = guid();
    var html = [
      '<div id ="' + menuId + '" class="dropdown chart-dropdown">',
      '<button class="btn btn-default dropdown-toggle" type="button" data-toggle="dropdown">',
      '<label id="' + labelId + '" style="font: normal 14px Times New Roman">' + title + '</label>',
      '<span class="caret"></span>',
      '</button>',
      '<ul id="' + listId + '"class="dropdown-menu scrollable-menu" >',
      '</ul>',
      '</div>'
    ].join('\n');

    $(viewer.container).append(html);
    $('#' + menuId).css({
      'top': pos.top + 'px',
      'left': pos.left + 'px'
    });
    $('#' + labelId).text(title + ': ' + menuItems[selectedItemIdx || 0].label);
    menuItems.forEach(function(menuItem) {
      var itemId = guid();
      var itemHtml = '<li id="' + itemId + '"><a href="">' + menuItem.label + '</a></li>';
      $('#' + listId).append(itemHtml);
      $('#' + itemId).click(function(event) {
        event.preventDefault();
        menuItem.handler();
        $('#' + labelId).text(title + ': ' + menuItem.label);
      });
    });
    return menuId;
  }

  ///////////////////////////////////////////////////////////////////////////
  // dynamic css styles
  //
  ///////////////////////////////////////////////////////////////////////////
  var css = [
    'canvas.graph {',
    'top:10px;',
    'left:30px;',
    'width:300px;',
    'height:300px;',
    'position:absolute;',
    'overflow:hidden;',
    '}',

    'div.chart-dropdown {',
    'position: absolute;',
    '}',

    '.scrollable-menu {',
    'height: auto;',
    'max-height: 300px;',
    'overflow-x: hidden;',
    'overflow-y: scroll;',
    '}',

  ].join('\n');
  $('<style type="text/css">' + css + '</style>').appendTo('head');
};
Autodesk.ADN.Viewing.Extension.Chart.RGraph.prototype = Object.create(Autodesk.Viewing.Extension.prototype);

Autodesk.ADN.Viewing.Extension.Chart.RGraph.prototype.constructor = Autodesk.ADN.Viewing.Extension.Chart.RGraph;

Autodesk.Viewing.theExtensionManager.registerExtension('Autodesk.ADN.Viewing.Extension.Chart.RGraph', Autodesk.ADN.Viewing.Extension.Chart.RGraph);

    在这段修改后的代码中,我的扩展加载良好,甚至显示了图表类型和属性的下拉列表。但是当我选择它时,我没有得到图表。这里的问题存在于 getAvailableProperties(components, onResult) 作用我还注意到 createDropdownMenu

    1 回复  |  直到 7 年前
        1
  •  0
  •   Augusto Goncalves    7 年前

    此代码示例已过时,并且使用了不受支持的功能, see more here .

    您可以更换 getAllLeafComponents 方法: 

    function getAllLeafComponents(callback) {
    var cbCount = 0; // count pending callbacks
    var components = []; // store the results
    var tree; // the instance tree

    function getLeafComponentsRec(parent) {
        cbCount++;
        if (tree.getChildCount(parent) != 0) {
            tree.enumNodeChildren(parent, function (children) {
                getLeafComponentsRec(children);
            }, false);
        } else {
            components.push(parent);
        }
        if (--cbCount == 0) callback(components);
    }
    viewer.getObjectTree(function (objectTree) {
        tree = objectTree;
        var allLeafComponents = getLeafComponentsRec(tree.getRootId());
    });
}
    推荐文章
    artobii  ·  锻造查看器3。Meshlambert材质
    7 年前
    v.slobodzian  ·  Autodesk Forge API。如何获取项目的特定版本?
    7 年前
    AimInfosys  ·  如何使用autodesk viewer api进行查看。我的网站上的dxf文件?
    7 年前
    stonecompass  ·  使用forge viewer搜索多个属性
    7 年前
    T. Pex  ·  Forge Viewer-自定义背景图像
    7 年前
    T. Pex  ·  锻造查看器:材质无法从中正确显示。rvt公司
    7 年前
    Mykita  ·  Forge viewer:带文本的三维标记
    7 年前
    Changyoon Yang  ·  403调用Autodesk Forge的DerivativeApi时出错
    7 年前
    Joni Turunen  ·  在更新相机之前更正要侦听的事件
    7 年前
    ZMik  ·  360浏览器的价格是多少?
    7 年前
    关于   移动版
    代码之家 - 一站式码农服务社区
    沪ICP备11025650号