fix: fisheye opt; fix: layout compactness

demos/gallery-graphanalyzer.html

@@ -27,7 +27,6 @@
       //the instances of plugins
       let maxSpanningForest = new MaxSpanningForestPlugin({
         layoutCfg: {
-          kg: 12,
           prevOverlapping: true,
           onLayoutComplete: function () {
             const minimap = document.getElementById('minimap');
@@ -37,14 +36,15 @@
           }
         }
       });
-      let nodeSizeMapper = new Mapper('node', 'userview', 'size', [20, 50], {
+      let nodeSizeMapper = new Mapper('node', 'userview', 'size', [15, 50], {
         legendCfg: {
           containerId: 'legend',
+          height: 100,
           title: {
             text: 'UV',
             fill: '#333'
           },
-          layout: 'horizontal',
+          layout: 'vertical',
           itemFormatter(text) {
             if (text >= 100000000) {
               return text / 100000000 + '亿';
@@ -55,7 +55,7 @@
           }
         }
       });
-      let edgeSizeMapper = new Mapper('edge', 'userview', 'size', [1, 16], {
+      let edgeSizeMapper = new Mapper('edge', 'userview', 'size', [1, 8], {
         legendCfg: null
       });
       let nodeColorMapper = new Mapper('node', 'stayTime', 'color', ['#BAE7FF', '#1890FF', '#0050B3'], {
@@ -64,7 +64,8 @@
           title: {
             text: 'Stay Time'
           },
-          layout: 'vertical'
+          layout: 'horizontal',
+          width: 100,
         }
       });
       let minimapPlugin = new G6.Plugins['tool.minimap']({
@@ -77,7 +78,7 @@
 
       graph = new G6.Graph({
         id: 'mountNode', // dom id
-        fitView: 'autoZoom',
+        // fitView: 'autoZoom',
         plugins: [
           maxSpanningForest, 
           nodeColorMapper, 
@@ -90,11 +91,16 @@
         },
         height: 500,
       });
-      graph.read(Util.cloneDeep(data));
-      // graph.getNodes().forEach(node=>{
-      //   graph.toFront(node);
-      //   // node.getGraphicGroup().toFront();
+      // graph.on('afterrender', ()=>{
+      //   const nodes = graph.getNodes();
+      //   let centerNode = nodes[0];
+      //   nodes.forEach(node => {
+      //     if(centerNode.getModel().userview < node.getModel().userview) centerNode = node;
+      //   });
+      //   graph.focus(centerNode);
       // });
+      graph.read(Util.cloneDeep(data));
+
       // graph.on('afterchange', ()=>{
       //   graph.getNodes().forEach(node=>{
       //     // graph.toFront(node);

package.json

@@ -108,8 +108,8 @@
     "run": []
   },
   "dependencies": {
-    "@antv/g": "~3.1.0-beta.7",
-    "@antv/g2": "~3.2.7-beta.5",
+    "@antv/g": "~3.1.0-beta.11",
+    "@antv/g2": "~3.2.7-beta.4",
     "@antv/hierarchy": "~0.3.13",
     "@antv/scale": "^0.0.1",
     "d3": "^5.4.0",

plugins/layout.forceAtlas2/layout.js

@@ -35,13 +35,13 @@ class Layout {
        * larger the kr, looser the layout
        * @type  {number}
        */
-      kr: 10,
+      kr: 0,
 
       /**
        * the parameter for gravity forces
        * @type  {number}
        */
-      kg: 1.0,
+      kg: 1,
 
       /**
        * modes:
@@ -150,18 +150,20 @@ class Layout {
     }
     if (this.maxIteration === 0) {
       maxIteration = 250;
-      if (size <= 200 && size > 100) {
-        maxIteration = 1000;
-      } else if (size <= 300 && size > 200) {
-        maxIteration = 1500;
-      } else if (size > 300 && size <= 600) {
-        maxIteration = 2000;
-      } else if (size > 600) {
-        maxIteration = 2200;
-      }
+      if (size <= 200 && size > 100) maxIteration = 1000;
+      else if (size > 200) maxIteration = 1200;
       this.maxIteration = maxIteration;
     }
-
+    if (kr === 0) {
+      kr = 50;
+      if (size > 100 && size <= 500) kr = 20;
+      else if (size > 500) kr = 1;
+    }
+    // if (kg === 0) {
+    //   kg = 20;
+    //   if (size > 100 && size <= 500) kg = 35;
+    //   else if (size > 500) kg = 50;
+    // }
     const obj = {
       nodes,
       edges,
@@ -191,7 +193,7 @@ class Layout {
       loading.style.setProperty('width', divWidth + 'px');
       loading.style.setProperty('height', divHeight + 'px');
       loading.style.setProperty('margin-top', -parent.offsetHeight + 'px');
-      loading.style.zIndex = 3;
+      loading.style.zIndex = 4;
       parent.appendChild(loading);
        // the loading image
       const imgSize = 200;

plugins/template.maxSpanningForest/index.js

@@ -38,8 +38,8 @@ class Plugin {
         }]
       },
       layoutCfg: {
-        kr: 120,
-        kg: 8.0,
+        kr: 0,
+        kg: 20,
         prevOverlapping: true,
         maxIteration: 0,
         barnesHut: false,

plugins/tool.fisheye/index.js

@@ -32,7 +32,7 @@ class Plugin {
         }
         graph.updateNodePosition(this.preMoveNodes);
         this.preMoveNodes = fisheye.zoom(ev.x, ev.y);
-      }, 16)
+      }, 30)
     );
     });
     const cacheLocation = Util.debounce(ev => {
@@ -49,7 +49,7 @@ class Plugin {
       } else {
         this.oriPos.set(ev.originModel.id, { x: ev.updateModel.x, y: ev.updateModel.y });
       }
-    }, 16);
+    }, 30);
     // record the layout positions, in order to restore the positions after fisheye zooming
     graph.on('afterchange', cacheLocation);
     graph.on('afterlayout', cacheLocation);

plugins/tool.mapper/index.js

@@ -277,9 +277,6 @@ class Plugin {
     legend.move(-bbox.minX + padding, -bbox.minY + padding);
     canvas.changeSize(legendWidth + 2 * padding, legendHeight + 2 * padding);
     this.legend = legend;
-    this.legendCanvas = canvas;
-    this.legendWidth = legendWidth;
-    this.legendHeight = legendHeight;
     canvas.draw();
   }
   _createCatLegend(canvas) {
@@ -308,7 +305,7 @@ class Plugin {
   }
   _getLegendCfg(defaultCfg) {
     const legendCfg = this.legendCfg;
-    if (Util.isNil(legendCfg.width)) {
+    if (Util.isNil(legendCfg.width) && Util.isNil(legendCfg.height)) {
       if (legendCfg.layout === 'horizontal') {
         legendCfg.width = 150;
         legendCfg.height = 15;
@@ -317,6 +314,19 @@ class Plugin {
         legendCfg.height = 150;
       }
     }
+    if (!Util.isNil(legendCfg.width) && Util.isNil(legendCfg.height)) {
+      if (legendCfg.layout === 'horizontal') {
+        legendCfg.height = legendCfg.width / 10;
+      } else {
+        legendCfg.height = legendCfg.width * 10;
+      }
+    } else if (Util.isNil(legendCfg.width) && !Util.isNil(legendCfg.height)) {
+      if (legendCfg.layout === 'horizontal') {
+        legendCfg.width = legendCfg.height * 10;
+      } else {
+        legendCfg.width = legendCfg.height / 10;
+      }
+    }
     return Util.mix(true, {}, defaultCfg, legendCfg);
   }
   _createContinuousColorLegend(canvas) {