Merge pull request #393 from antvis/improveGGA

dev gallery graph analyzer

demos/gallery-graphanalyzer.html

@@ -6,15 +6,8 @@
   <title>graph analyzer</title>
   <script src="../build/g6.js"></script>
   <script src="../build/plugin.template.maxSpanningForest.js"></script>
-  <script src="../build/plugin.behaviour.analysis.js"></script>
   <script src="../build/plugin.tool.mapper.js"></script>
-  <script src="../build/plugin.tool.fisheye.js"></script>
-  <script src="../build/plugin.util.extractSubgraph.js"></script>
-  <!-- <script src="../build/plugin.util.maxSpanningForest.js"></script> -->
-  <script src="../build/plugin.tool.highlightSubgraph.js"></script>
-  <script src="../build/plugin.edge.quadraticCurve.js"></script>
   <script src="../build/plugin.tool.minimap.js"></script>
-  <script src="../build/plugin.tool.textDisplay.js"></script>
   <script src="./assets/jquery-3.2.1.min.js"></script>
   <style>
     ul,
@@ -71,8 +64,6 @@
       //the plugins
       const Mapper = G6.Plugins['tool.mapper'];
       const MaxSpanningForestPlugin = G6.Plugins['template.maxSpanningForest'];
-      const Highlighter = G6.Plugins['tool.highlightSubgraph'];
-      const FisheyePlugin = G6.Plugins['tool.fisheye'];
       //the instances of plugins
       const maxSpanningForest = new MaxSpanningForestPlugin({
         layoutCfg: {
@@ -87,13 +78,9 @@
           }
         }
       });
-      const fisheye = new FisheyePlugin({
-        radius: 200
-      });
       const nodeSizeMapper = new Mapper('node', 'userview', 'size', [20, 50], {
         legendCfg: {
-          comtainerId: 'legend',
-          scale: 0.5
+          containerId: 'legend',
         }
       });
       const edgeSizeMapper = new Mapper('edge', 'userview', 'size', [1, 16], {
@@ -101,8 +88,7 @@
       });
       const nodeColorMapper = new Mapper('node', 'stayTime', 'color', ['#BAE7FF', '#1890FF', '#0050B3'], {
         legendCfg: {
-          comtainerId: 'legend',
-          scale: 0.5
+          containerId: 'legend',
         }
       });
       const minimapPlugin = new G6.Plugins['tool.minimap']({
@@ -110,23 +96,19 @@
         width: 180,
         height: 120
       });
-      const highlighter = new Highlighter();
-      const textDisplay = new G6.Plugins['tool.textDisplay']();
 
       const Util = G6.Util;
 
       graph = new G6.Graph({
         id: 'mountNode', // dom id
-        // fitView: 'cc',
+        fitView: 'cc',
         plugins: [
-          maxSpanningForest, nodeSizeMapper, nodeColorMapper, edgeSizeMapper, minimapPlugin, highlighter,
-          textDisplay, fisheye
+          maxSpanningForest, nodeSizeMapper, nodeColorMapper, edgeSizeMapper, minimapPlugin
         ],
-        minZoom: 0,
         modes: {
           default: ['panCanvas', 'wheelZoom']
         },
-        height: 1000,
+        height: 600,
       });
       graph.read(data);
       const minimap = document.getElementById('minimap');
@@ -135,5 +117,4 @@
       if (legend !== undefined) legend.style.display = 'none';
     });
   </script>
-
 </body>

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@antv/g6",
-  "version": "2.0.5-beta.1",
+  "version": "2.0.5-beta.3",
   "description": "graph visualization frame work",
   "main": "build/g6.js",
   "homepage": "https://github.com/antvis/g6",

plugins/template.maxSpanningForest/index.js

@@ -11,6 +11,12 @@ const G6 = require('@antv/g6');
 const maxSpanningForest = require('./maxSpanningForest');
 const Layout = require('../layout.forceAtlas2/layout');
 const Util = G6.Util;
+require('../tool.textDisplay/');
+require('../tool.highlightSubgraph/');
+require('../tool.fisheye/');
+require('../util.extractSubgraph/');
+require('../edge.quadraticCurve/');
+require('../behaviour.analysis/');
 
 class Plugin {
   constructor(options) {
@@ -36,6 +42,14 @@ class Plugin {
   }
   init() {
     const graph = this.graph;
+    const highlighter = new G6.Plugins['tool.highlightSubgraph']();
+    const fisheye = new G6.Plugins['tool.fisheye']({
+      radius: 200
+    });
+    const textDisplay = new G6.Plugins['tool.textDisplay']();
+    graph.addPlugin(highlighter);
+    graph.addPlugin(fisheye);
+    graph.addPlugin(textDisplay);
     graph.on('beforeinit', () => {
       const layout = graph.get('layout');
       if (!layout) {

plugins/tool.mapper/index.js

@@ -50,7 +50,6 @@ class Plugin {
        * @type  {object}
        */
       legendCfg: {
-        comtainerId: 'legend_container',
         legendTitle: '',
         scale: 1
       },
@@ -177,19 +176,19 @@ class Plugin {
     const scaleType = this._getScaleType(data);
     const channel = this.channel;
     const graph = this.graph;
-    let comtainerId = this.legendCfg.comtainerId;
+    const containerId = this.legendCfg.containerId;
+    let legendContainer;
 
-    if (comtainerId === undefined) {
-      comtainerId = 'legend_container';
-      let legendContainer = document.getElementById(comtainerId);
-      legendContainer = Util.createDOM('<div id="' + comtainerId + '"class="legend-container"></div>');
+    if (containerId === undefined) {
+      legendContainer = Util.createDOM('<div class="legend-container"></div>');
       const container = graph.getGraphContainer();
       container.appendChild(legendContainer);
     }
 
     const Constructor = graph.getConstructor('Canvas');
     const canvas = new Constructor({
-      containerId: comtainerId, // dom_id,
+      containerId, // dom_id,
+      containerDOM: legendContainer,
       width: 500,
       height: 500
     });

src/graph.js

@@ -52,18 +52,6 @@ class Graph extends Base {
        */
       height: undefined,
 
-      /**
-       * Modes list
-       * @type {object}
-       */
-      modes: {},
-
-      /**
-       * Current mode
-       * @type {string}
-       */
-      mode: 'default',
-
       /**
        * Plugins
        * @type {array}
@@ -148,10 +136,13 @@ class Graph extends Base {
   _pluginInit() {
     const plugins = this.get('plugins');
     plugins.forEach(plugin => {
-      plugin.graph = this;
-      plugin.init && plugin.init();
+      this._initPlugin(plugin);
     });
   }
+  _initPlugin(plugin) {
+    plugin.graph = this;
+    plugin.init && plugin.init();
+  }
   _getTimer(name) {
     return this.get('_timers')[name];
   }
@@ -251,6 +242,14 @@ class Graph extends Base {
   getMouseEventWrapper() {
     return this.get('_htmlElementContaniner');
   }
+  /**
+   * @param  {object} plugin - plugin instance
+   */
+  addPlugin(plugin) {
+    const plugins = this.get('plugins');
+    this._initPlugin(plugin);
+    plugins.push(plugin);
+  }
   /**
    * @return  {domobject} graphcontainer
    */

src/mixin/mode.js

@@ -10,7 +10,8 @@ Mixin.CFG = {
     * mode list  key - value, key - mode name, value - behaviors
     * @type {object}
     */
-  modes: null,
+  modes: {},
+
   /**
     * current mode name
     * @type {string}

src/version.js

@@ -1 +1 @@
-module.exports = '2.0.5-beta.1';
+module.exports = '2.0.5-beta.3';