资产预览树

src/view/Manage/AssetManage/Component/PreviewTree.jsx

@@ -5,37 +5,13 @@ let graph = null;
 const globalFontSize = 20;
 const maxTextWidth = 160;
 
-const COLLAPSE_ICON = function COLLAPSE_ICON(x, y, r) {
-  return [
-    ['M', x - r, y - r],
-    ['a', r, r, 0, 1, 0, r * 2, 0],
-    ['a', r, r, 0, 1, 0, -r * 2, 0],
-    ['M', x + 2 - r, y - r],
-    ['L', x + r - 2, y - r],
-  ];
-};
-const EXPAND_ICON = function EXPAND_ICON(x, y, r) {
-  return [
-    ['M', x - r, y - r],
-    ['a', r, r, 0, 1, 0, r * 2, 0],
-    ['a', r, r, 0, 1, 0, -r * 2, 0],
-    ['M', x + 2 - r, y - r],
-    ['L', x + r - 2, y - r],
-    ['M', x, y - 2 * r + 2],
-    ['L', x, y - 2],
-  ];
-};
-
 class PreviewTree extends React.Component {
 
   componentDidMount() {
-    const { type, loadMoreData } = this.props;
-
-    const container = document.getElementById('container');
-    if (!container) return;
+    const container = document.getElementById('preview-tree');
 
     const width = container.scrollWidth;
-    const height = container.scrollHeight || 500;
+    const height = container.scrollHeight || 300;
 
     G6.registerNode(
       'tree-node',
@@ -50,7 +26,7 @@ class PreviewTree extends React.Component {
             },
           });
           
-          const content = (cfg.text||'').replace(/(.{19})/g, '$1\n');
+          const content = (cfg.label||'').replace(/(.{19})/g, '$1\n');
 
           const text = group.addShape('text', {
             attrs: {
@@ -100,7 +76,7 @@ class PreviewTree extends React.Component {
     });
 
     graph = new G6.TreeGraph({
-      container: 'container',
+      container: 'preview-tree',
       width,
       height,
       maxZoom: 1,
@@ -185,22 +161,19 @@ class PreviewTree extends React.Component {
     const { data } = this.props;
 
     if(graph && data){
-
-      console.log('data', data);
-
       graph.data(data);
       graph.render();
       graph.fitView();
     }
   }
 
-  componentDidUpdate(prevProps, prevState){
+  componentDidUpdate(prevProps, prevState) {
     this.layoutGraph();
   }
 
   render() {
     return (
-      <div id='container' style={{ width: '100%', height: '100%' }} />
+      <div id='preview-tree' style={{ width: '100%', height: '100%' }} />
     );
   }
 }