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

Autodesk forge RGraph extension工作不正常

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