Merge branch 'master' of https://github.com/antvis/g6

2024-12-02 03:38:20 +08:00 · 2018-07-12 09:58:42 +08:00 · 2018-07-12 09:58:42 +08:00 · 86d35539c4
commit 86d35539c4
parent bd03b14a1a 52696115c4
12 changed files with 349 additions and 7 deletions
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@ -1,3 +1,4 @@
+
 # ChangeLog

 ---
--- a/demos/gallery-workflow.html
+++ b/demos/gallery-workflow.html
@ -18,7 +18,7 @@
        const width = 100;   // 一半宽
        const height = 40;  // 一半高
        return G6.Util.getRectPath(-width/2, -height/2, width, height, 10);
-      }
+      },
    });
    const data = {
      nodes: [{
@ -51,10 +51,11 @@
    };
    const graph = new G6.Graph({
      container: 'mountNode',
-      plugins: [new G6.Plugins['layout.dagre']()],
+      fitView: 'cc',
      width: 500,
      height: 500,
-      defaultIntersectBox: 'rect' // 使用
+      plugins: [new G6.Plugins['layout.dagre']()],
+      defaultIntersectBox: 'rect' // 使用矩形包围盒
    });
    graph.node({
      shape: 'rect',
--- a/demos/plugin-tooltip.html
+++ b/demos/plugin-tooltip.html
@ -0,0 +1,58 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <meta http-equiv="X-UA-Compatible" content="ie=edge">
+  <title>插件-提示信息</title>
+</head>
+
+<body>
+  <div id="mountNode"></div>
+  <script src="../build/g6.js"></script>
+  <script src="../build/toolTooltip.js"></script>
+  <script>
+    const plugin = new G6.Plugins['tool.tooltip']();
+    const data = {
+      nodes: [{
+        id: 'node1',
+        x: 100,
+        y: 200
+      }, {
+        id: 'node2',
+        x: 300,
+        y: 200
+      }],
+      edges: [{
+        target: 'node2',
+        source: 'node1'
+      }]
+    };
+    const graph = new G6.Graph({
+      container: 'mountNode',
+      width: 500,
+      height: 500,
+      plugins: [ plugin ]
+    });
+    graph.node({
+      tooltip(model) {
+        return [
+          ['id', model.id],
+          ['x', model.x],
+          ['y', model.y]
+        ];
+      }
+    });
+    graph.edge({
+      tooltip(model) {
+        return [
+          ['来源', model.source],
+          ['去向', model.target]
+        ];
+      }
+    });
+    graph.read(data);
+  </script>
+</body>
+</html>
--- a/package.json
+++ b/package.json
@ -97,7 +97,7 @@
    "screenshot": "node ./bin/screenshot.js",
    "start": "npm run dev",
    "test": "torch --compile --renderer --recursive ./test/unit",
-    "test-live": "torch --compile --interactive --watch --recursive ./test/unit",
+    "test-live": "torch --compile --interactive --watch --recursive ./test/unit/plugins/tool.tooltip-spec.js",
    "watch": "webpack --config webpack-dev.config.js",
    "win-dev": "node ./bin/win-dev.js"
  },
@ -119,4 +119,4 @@
  "engines": {
    "node": ">=8.9.0"
  }
-}
+}
--- a/plugins/index.js
+++ b/plugins/index.js
@ -9,6 +9,7 @@ module.exports = {
  'template.maxSpanningForest': require('./template.maxSpanningForest/'),
  'tool.d3.mapper': require('./tool.d3.mapper/'),
  'tool.minimap': require('./tool.minimap/'),
+  'tool.tooltip': require('./tool.tooltip/'),
  'tool.fisheye': require('./tool.fisheye/'),
  'util.randomData': require('./util.randomData/')
 };
--- a/plugins/tool.tooltip/README.md
+++ b/plugins/tool.tooltip/README.md
@ -0,0 +1,85 @@
+## Tooltip 
+
+Tooltip is used to help users to get the data of detailed information. This plugin help developer to quickly locate tooltip position.
+
+## use
+
+simple use.
+
+```js
+const plugin = new G6.Plugins['tool.tooltip']();
+const data = {
+  nodes: [{
+    id: 'node1',
+    x: 100,
+    y: 200
+  }, {
+    id: 'node2',
+    x: 300,
+    y: 200
+  }],
+  edges: [{
+    target: 'node2',
+    source: 'node1'
+  }]
+};
+const graph = new G6.Graph({
+  container: 'mountNode',
+  width: 500,
+  height: 500
+});
+graph.node({
+  tooltip(model) {
+    return [
+      ['id', model.id],
+      ['x', model.x],
+      ['y', model.y]
+    ];
+  }
+});
+graph.edge({
+  tooltip(model) {
+    return [
+      ['来源', model.source],
+      ['去向', model.target]
+    ];
+  }
+});
+graph.read(data);
+```
+
+custom use
+
+```js
+const plugin = new G6.Plugins['tool.tooltip']({
+  getTooltip({item}) {
+    const model = item.getModel();
+    return `
+      <ul>
+        <li>唯一标识：${model.id}</li>
+      </ul>
+    `;
+  }
+});
+const data = {
+  nodes: [{
+    id: 'node1',
+    x: 100,
+    y: 200
+  }, {
+    id: 'node2',
+    x: 300,
+    y: 200
+  }],
+  edges: [{
+    target: 'node2',
+    source: 'node1'
+  }]
+};
+const graph = new G6.Graph({
+  container: 'mountNode',
+  width: 500,
+  height: 500
+});
+graph.read(data);
+```
--- a/plugins/tool.tooltip/index.js
+++ b/plugins/tool.tooltip/index.js
@ -0,0 +1,144 @@
+/**
+ * @fileOverview tooltip plugin
+ * @author huangtonger@aliyun.com
+ */
+const G6 = require('@antv/g6');
+const Util = G6.Util;
+class Plugin {
+  constructor(options) {
+    this.options = {
+      /**
+       * horizontal offset
+       * @type {number}
+       */
+      dx: 10,
+
+      /**
+       * vertical offset
+       * @type {number}
+       */
+      dy: 10,
+
+      /**
+       * get tooltip dom
+       * @type {function}
+       * @return {string|null} tooltip dom
+       */
+      getTooltip({ item }) {
+        if (item) {
+          const model = item.getModel();
+          const tooltip = model.tooltip;
+          if (tooltip) {
+            let lis = '';
+            tooltip.forEach(subTooltip => {
+              lis += '<li style="font-size: 12px;list-style-type: none;"><span>' + subTooltip[0] + '</span>: ' + subTooltip[1] + '</li>';
+            });
+            return `
+              <div class="g6-tooltip" style="
+                position: absolute;
+                white-space: nowrap;
+                zIndex: 8;
+                transition: visibility 0.2s cubic-bezier(0.23, 1, 0.32, 1), left 0.4s cubic-bezier(0.23, 1, 0.32, 1), top 0.4s cubic-bezier(0.23, 1, 0.32, 1);
+                background-color: rgba(255, 255, 255, 0.9);
+                box-shadow: 0px 0px 10px #aeaeae;
+                border-radius: 3px;
+                color: rgb(87, 87, 87);
+                line-height: 20px;
+                padding: 10px 10px 6px 10px;
+              ">
+                <h4 class="g6-tooltip-title" style="
+                  margin: 0;
+                ">${item.type}</h4>
+                <ul class="g6-tooltip-list" style="
+                  padding: 0;
+                  margin: 0;
+                  margin-top: 4px;
+                ">
+                  ${lis}
+                </ul>
+              </div>
+            `;
+          }
+        }
+        return null;
+      },
+      ...options
+    };
+  }
+  init() {
+    const graph = this.graph;
+    graph.on('mouseenter', ev => {
+      ev.shape && this.onMouseEnter(ev);
+    });
+    graph.on('mousemove', ev => {
+      this.onMouseMove(ev);
+    });
+    graph.on('mouseleave', ev => {
+      this.onMouseLeave(ev);
+    });
+  }
+  onMouseEnter(ev) {
+    const graph = this.graph;
+    const graphContainer = graph.getGraphContainer();
+    const options = this.options;
+    const tooltipHtml = options.getTooltip(ev);
+    let tooltip = this.tooltip;
+    tooltip && this.tooltip.destroy();
+
+    if (tooltipHtml) {
+      tooltip = Util.createDOM(tooltipHtml);
+      tooltip.css({
+        position: 'absolute'
+      });
+      graphContainer.appendChild(tooltip);
+    } else {
+      tooltip = null;
+    }
+    this.tooltip = tooltip;
+  }
+  onMouseMove({ domX, domY }) {
+    const tooltip = this.tooltip;
+    if (tooltip) {
+      const graph = this.graph;
+      const w0 = Util.getOuterWidth(tooltip);
+      const h0 = Util.getOuterHeight(tooltip);
+      const w1 = graph.getWidth();
+      const h1 = graph.getHeight();
+
+      tooltip.css({
+        top: this._getTop(h0, h1, domY),
+        left: this._getLeft(w0, w1, domX)
+      });
+    }
+  }
+  onMouseLeave() {
+    if (this.tooltip) {
+      this.tooltip.destroy();
+      this.tooltip = null;
+    }
+  }
+  _getTop(h0, h1, domY) {
+    const { dy } = this.options;
+    if (h0 * 2 >= h1) {
+      return '0px';
+    }
+    if (domY < h0 + dy) {
+      return domY + dy + 'px';
+    }
+    return domY - h0 - dy + 'px';
+  }
+  _getLeft(w0, w1, domX) {
+    const { dx } = this.options;
+    if (w0 * 2 >= w1) {
+      return '0px';
+    }
+    if (w1 - domX - dx < w0) {
+      return domX - w0 - dx + 'px';
+    }
+    return domX + dx + 'px';
+  }
+}
+
+G6.Plugins['tool.tooltip'] = Plugin;
+
+module.exports = Plugin;
--- a/src/controller/mapper.js
+++ b/src/controller/mapper.js
@ -26,7 +26,9 @@ class Controller extends Base {
  addChannels(inputChannels) {
    const channels = this.channels;
    Util.each(inputChannels, (channel, name) => {
-      channels[name].input = channel;
+      channels[name] = {
+        input: channel
+      };
    });
  }
  /**
--- a/src/shape/edges/common.js
+++ b/src/shape/edges/common.js
@ -34,9 +34,10 @@ Shape.registerEdge('common', {
  },
  getStyle(item) {
    const model = item.getModel();
-    return Util.mix(true, {}, Global.edgeStyle, {
+    return Util.mix(true, {}, {
      stroke: this.getColor(item),
      strokeOpacity: 0.92,
+      lineAppendWidth: 4,
      lineWidth: this.getSize(item)
    }, model.style);
  },
--- a/test/unit/plugins/tool.minimap-spec.js
+++ b/test/unit/plugins/tool.minimap-spec.js
--- a/test/unit/plugins/tool.tooltip-spec.js
+++ b/test/unit/plugins/tool.tooltip-spec.js
@ -0,0 +1,45 @@
+const G6 = require('../../../src/index');
+const Tooltip = require('../../../plugins/tool.tooltip/');
+const expect = require('chai').expect;
+const Util = G6.Util;
+
+document.body.appendChild(Util.createDOM(`
+<div>
+  <div id='mountNode'></div>
+</div>
+`));
+
+describe('tooltip test', () => {
+  const tooltip = new Tooltip({
+    getTooltip() {
+      return `
+        <div>dddd</div>
+      `;
+    }
+  });
+  const data = {
+    nodes: [{
+      id: 'node1',
+      x: 100,
+      y: 200
+    }, {
+      id: 'node2',
+      x: 300,
+      y: 200
+    }],
+    edges: [{
+      target: 'node2',
+      source: 'node1'
+    }]
+  };
+  const graph = new G6.Graph({
+    container: 'mountNode',
+    width: 500,
+    height: 500,
+    plugins: [ tooltip ]
+  });
+  graph.read(data);
+  it('tooltip destroy', () => {
+    graph.destroy();
+  });
+});
--- a/webpack.config.js
+++ b/webpack.config.js
@ -40,6 +40,10 @@ module.exports = {
            babelrc: true
          }
        }
+      },
+      {
+        test: /\.css$/,
+        use: [ 'style-loader', 'css-loader' ]
      }
    ]
  },