fix: fix some plugin bugs.Closed #469 #501 #498

demos/test.html

@@ -48,95 +48,195 @@
     }
   </style>
   <script>
-// 详细文档见 ： https://antv.alipay.com/g6/doc/index.html
+const MaxSpanningForestPlugin = G6.Plugins['template.maxSpanningForest'];
+        const maxSpanningForest = new MaxSpanningForestPlugin();
+
+G6.registerNode('databaseNode', {
+            draw(item) {
+                console.log('item:', item);
+                const group = item.getGraphicGroup();
+
+                const html = G6.Util.createDOM('<div id="parent">test</div>');
+               
+                return group.addShape('dom', {
+                    attrs: {
+                        x: 0,
+                        y: 0,
+                        width: 100,
+                        height: 30,
+                        html
+                    }
+                });
+            }
+        });
+
+
 const data = {
-  name: 'Modeling Methods',
-  children: [
-    {
-      name: 'Classification',
-    },
-    {
-      name: 'Consensus',
-    },
-    {
-      name: 'Regression',
-    },
-  ],
+    nodes: [
+        {
+            id: 0,
+            weight: 42.194703980779714
+        },
+        {
+            id: 1,
+            weight: 72.86640536738712
+        },
+        {
+            id: 2,
+            weight: 82.29983433131834
+        },
+        {
+            id: 3,
+            weight: 23.204885400175424
+        },
+        {
+            id: 4,
+            weight: 100.84964997048472
+        },
+        {
+            id: 5,
+            weight: 72.90971413062293
+        },
+        {
+            id: 6,
+            weight: 15.029159176990348
+        },
+        {
+            id: 7,
+            weight: 24.38308784826313
+        },
+        {
+            id: 8,
+            weight: 78.00164088714241
+        },
+        {
+            id: 9,
+            weight: 53.580641600279954
+        },
+    ],
+    edges: [
+        {
+            id: '1-6',
+            source: 1,
+            target: 6,
+            weight: 89.69805016254719,
+        },
+        {
+            id: '5-3',
+            source: 5,
+            target: 3,
+            weight: 86.31397440928264,
+        },
+        {
+            id: '0-5',
+            source: 0,
+            target: 5,
+            weight: 76.94877138495532,
+        },
+        {
+            id: '5-9',
+            source: 5,
+            target: 9,
+            weight: 63.754902669930644,
+        },
+        {
+            id: '2-7',
+            source: 2,
+            target: 7,
+            weight: 4.449707271000913,
+        },
+        {
+            id: '3-4',
+            source: 3,
+            target: 4,
+            weight: 36.97483959651564,
+        },
+        {
+            id: '9-3',
+            source: 9,
+            target: 3,
+            weight: 50.354719513581635,
+        },
+        {
+            id: '6-4',
+            source: 6,
+            target: 4,
+            weight: 10.02660118138856,
+        },
+        {
+            id: '8-3',
+            source: 8,
+            target: 3,
+            weight: 13,
+        },
+        {
+            id: '8-4',
+            source: 8,
+            target: 4,
+            weight: 13,
+        },
+        {
+            id: '2-1',
+            source: 2,
+            target: 1,
+            weight: 13,
+        },
+        {
+            id: '4-5',
+            source: 4,
+            target: 5,
+            weight: 60,
+        },
+        {
+            id: '4-8',
+            source: 4,
+            target: 8,
+            weight: 63,
+        },
+        {
+            id: '8-5',
+            source: 8,
+            target: 5,
+            weight: 13,
+        },
+        {
+            id: '9-2',
+            source: 9,
+            target: 2,
+            weight: 13,
+        },
+        {
+            id: '1-8',
+            source: 1,
+            target: 8,
+            weight: 19.02660118138856,
+        },
+        {
+            id: '4-2',
+            source: 4,
+            target: 2,
+            weight: 50.02660118138856,
+        },
+    ],
 };
-var layout = new G6.Layouts.CompactBoxTree({
-  direction: 'TB', // 方向（LR/RL/H/TB/BT/V）
-  getHGap: function getHGap() /* d */ {
-    // 横向间距
-    return 100;
-  },
-  getVGap: function getVGap() /* d */ {
-    // 竖向间距
-    return 24;
-  },
-});
-var tree = new G6.Tree({
-  id: 'mountNode', // 容器ID
-  height: 300, // 画布高
-  renderer: 'svg',
-  plugins: [
-    new G6.Plugins['tool.minimap']({
-      container: 'minimap',
-      width: 500,
-      height: 120,
-    }),
-  ],
-  layout: layout,
-});
-G6.registerNode('transactionNode', {
-  anchor: {
-    // 相交盒模型
-    intersectBox: 'rect',
-  },
-  draw(item) {
-    const group = item.getGraphicGroup();
-    const { name, id, cnt,color } = item.getModel();
-    const width = 100;
-    const height = 40;
-    const html = G6.Util.createDOM(`
-            <div style="border: 1px solid #CCC;height:38px;text-align:center;background: ${color}">
-              <strong class="main-text">${name}</strong>
-            </div>
-          `);
-    const keyShape = group.addShape('dom', {
-      attrs: {
-        x: 0,
-        y: 0,
-        width,
-        height,
-        html,
-      },
-    });
-    return keyShape;
-  },
-  anchor: [[0.5, 0], [0.5, 1]],
-});
-tree.node({
-  shape: 'transactionNode',
-});
-tree.edge({
-  shape: 'polyline',
-});
-tree.on('node:mouseenter', ev => {
-  console.log('mouseenter');
-  tree.update(ev.item, {
-    color: 'orange',
-  });
-});
-tree.on('node:mouseleave', ev => {
-  console.log('mouseleave');
-  tree.update(ev.item, {
-    color: 'blue',
-  });
-});
-tree.read({
-  roots: [data],
+
+const graph = new G6.Graph({
+    id: 'mountNode',
+    renderer: 'svg',
+    width: 1000,
+    height: window.innerHeight,
+    fitView: 'cc',
+    fitViewPadding: true,
+    plugins: [maxSpanningForest]
 });
 
+// 注释掉node的shape设置后，就可以显示了
+graph.node({
+  shape: 'databaseNode'
+});
+
+
+graph.read(data);
   </script>
 </body>
 </html>

plugins/template.maxSpanningForest/menu.js

@@ -47,6 +47,7 @@ class Menu {
         if (Util.isFunction(list[i].callBack)) {
           list[i].callBack(node);
         }
+        this.hide();
       });
     }
     this.menu = menu;

plugins/tool.fisheye/index.js

@@ -39,6 +39,8 @@ class Plugin {
       if (graph.destroyed) return;
       const nodes = graph.getNodes();
       const size = nodes.length;
+      this.preMoveNodes = [];
+
       if (ev === undefined || ev.item === undefined) {
         for (let i = 0; i < size; i++) {
           if (nodes[i].getModel().x === undefined) return;

plugins/tool.textDisplay/index.js

@@ -1,5 +1,5 @@
 /**
- * @fileOverview fisheye zoom
+ * @fileOverview text display
  * @author shiwu.wyy@antfin.com
  */
 
@@ -26,24 +26,31 @@ class Plugin {
       this.textDisplay();
     };
   }
+  _textDisplay(text, nodeBox) {
+    if (!text) return;
+    const graph = this.graph;
+    const textBox = text.getBBox();
+    const zoom = graph.getZoom();
+    const labelWidth = (textBox.maxX - textBox.minX) * (1 / zoom);
+    const nodeWidth = nodeBox.maxX - nodeBox.minX;
+
+    if (labelWidth === 0) return;
+    const ratio = labelWidth / nodeWidth;
+    if (ratio > this.ratio) {
+      text.hide();
+    } else {
+      text.show();
+    }
+  }
   textDisplay() {
     const graph = this.graph;
     const nodes = graph.getNodes();
     Util.each(nodes, node => {
-      const label = node.getLabel();
-      const labelBox = label.getBBox();
-      const zoom = graph.getZoom();
-      const labelWidth = (labelBox.maxX - labelBox.minX) * (1 / zoom);
+      const group = node.getGraphicGroup();
       const nodeBox = node.getBBox();
-      const nodeWidth = nodeBox.maxX - nodeBox.minX;
-
-      if (labelWidth === 0) return;
-      const ratio = labelWidth / nodeWidth;
-      if (ratio > this.ratio) {
-        label.hide();
-      } else {
-        label.show();
-      }
+      group.deepEach(child => {
+        child.get('type') === 'text' && this._textDisplay(child, nodeBox);
+      });
     });
     graph.draw();
   }