Merge remote-tracking branch 'remotes/origin/dev3.0.0' into tree-graph

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@antv/g6",
-  "version": "3.0.0-beta.9",
+  "version": "3.0.0-beta.10",
   "description": "graph visualization frame work",
   "main": "build/g6.js",
   "homepage": "https://github.com/antvis/g6",
@@ -98,8 +98,8 @@
     "prepublishOnly": "npm run build-lib && npm run build",
     "screenshot": "node ./bin/screenshot.js",
     "start": "npm run dev",
-    "test": "torch --compile --renderer --recursive ./test/unit",
-    "test-live": "torch --interactive --watch --recursive ./test/unit",
+    "test": "torch --compile --renderer --opts test/mocha.opts --recursive ./test/unit",
+    "test-live": "torch --interactive --watch --opts test/mocha.opts --recursive ./test/unit",
     "watch": "webpack --config webpack-dev.config.js",
     "win-dev": "node ./bin/win-dev.js"
   },

src/behavior/drag-node.js

@@ -71,7 +71,7 @@ module.exports = {
     if (this.get('updateEdge')) {
       this.graph.updateItem(item, { x, y });
     } else {
-      item.update({ x, y });
+      item.updatePosition({ x, y });
       this.graph.paint();
     }
   },

src/behavior/index.js

@@ -4,7 +4,8 @@ const behaviors = {
   'drag-canvas': require('./drag-canvas'),
   'zoom-canvas': require('./zoom-canvas'),
   'drag-node': require('./drag-node'),
-  'click-select': require('./click-select')
+  'click-select': require('./click-select'),
+  tooltip: require('./tooltip')
 };
 Util.each(behaviors, (behavior, type) => {
   Behavior.registerBehavior(type, behavior);

src/behavior/tooltip.js

@@ -0,0 +1,93 @@
+const Util = require('../../src/util');
+const OFFSET = 12;
+
+module.exports = {
+  getDefaultCfg() {
+    return {
+      formatText(model) { return model.label; }
+    };
+  },
+  getEvents() {
+    return {
+      'node:mouseenter': 'onMouseEnter',
+      'node:mouseleave': 'onMouseLeave',
+      'node:mousemove': 'onMouseMove'
+    };
+  },
+  onMouseEnter(e) {
+    const self = this;
+    if (!self.shouldBegin(e)) {
+      return;
+    }
+    const item = e.item;
+    self.currentTarget = item;
+    self.showTooltip(e);
+  },
+  onMouseMove(e) {
+    if (!this.shouldUpdate(e)) {
+      return;
+    }
+    this.updatePosition(e);
+  },
+  onMouseLeave(e) {
+    if (!this.shouldEnd(e)) {
+      return;
+    }
+    this.currentTarget = null;
+    this.hideTooltip();
+  },
+  showTooltip(e) {
+    const self = this;
+    if (!e.item) {
+      return;
+    }
+    let container = self.container;
+    if (!container) {
+      container = self._createTooltip(self.graph.get('canvas'));
+    }
+    const text = self.formatText(e.item.get('model'), e);
+    container.innerHTML = text;
+    this.updatePosition(e);
+    Util.modifyCSS(this.container, { visibility: 'visible' });
+  },
+  hideTooltip() {
+    Util.modifyCSS(this.container, {
+      visibility: 'hidden'
+    });
+  },
+  updatePosition(e) {
+    const width = this.width;
+    const height = this.height;
+    const container = this.container;
+    let x = e.x;
+    let y = e.y;
+    const bbox = container.getBoundingClientRect();
+    if (x > width / 2) {
+      x -= (bbox.width + OFFSET);
+    } else {
+      x += OFFSET;
+    }
+    if (y > height / 2) {
+      y -= (bbox.height + OFFSET);
+    } else {
+      y += OFFSET;
+    }
+    const left = x + 'px';
+    const top = y + 'px';
+    Util.modifyCSS(this.container, { left, top });
+  },
+  _createTooltip(canvas) {
+    const el = canvas.get('el');
+    el.style.position = 'relative';
+    const container = Util.createDom('<div class="g6-tooltip"></div>');
+    el.parentNode.appendChild(container);
+    Util.modifyCSS(container, {
+      position: 'absolute',
+      visibility: 'visible'
+    });
+    this.width = canvas.get('width');
+    this.height = canvas.get('height');
+    this.container = container;
+    return container;
+  }
+};

src/global.js

@@ -4,7 +4,7 @@
  */
 
 module.exports = {
-  version: '3.0.0-beta.9',
+  version: '3.0.0-beta.10',
   rootContainerClassName: 'root-container',
   nodeContainerClassName: 'node-container',
   edgeContainerClassName: 'edge-container',

src/graph/controller/event.js

@@ -91,11 +91,11 @@ class Event {
     e.target = target;
     e.item = item;
     graph.emit(eventType, e);
-    graph.emit(type + ':' + eventType, e);
     // g的事件会冒泡，如果target不是canvas，可能会引起同个节点触发多次，需要另外判断
     if (eventType === 'mouseenter' || eventType === 'mouseleave' || eventType === 'dragenter' || eventType === 'dragleave') {
       return;
     }
+    graph.emit(type + ':' + eventType, e);
     if (eventType === 'dragstart') {
       self.dragging = true;
     }

src/graph/controller/mode.js

@@ -18,9 +18,13 @@ function mergeBehaviors(modeBehaviors, behaviors) {
 }
 
 function filterBehaviors(modeBehaviors, behaviors) {
-  return modeBehaviors.filter(behavior => {
-    return behaviors.indexOf(behavior.type) < 0;
+  const result = [];
+  modeBehaviors.forEach(behavior => {
+    if (behaviors.indexOf(behavior.type) < 0) {
+      result.push(behavior);
+    }
   });
+  return result;
 }
 
 class Mode {

src/shape/node.js

@@ -143,7 +143,7 @@ Shape.registerNode('rect', {
     const size = this.getSize(cfg);
     const width = size[0];
     const height = size[1];
-    const color = cfg.color || Global.color;
+    const color = cfg.color || Global.defaultNode.color;
     const style = Util.mix({}, Global.defaultNode.style, {
       x: 0 - width / 2, // 节点的位置在上层确定，所以这里仅使用相对位置即可
       y: 0 - height / 2,

src/util/base.js

@@ -14,6 +14,7 @@ const BaseUtil = {
   isNil: require('@antv/util/lib/type/is-nil'),
   isArray: require('@antv/util/lib/type/is-array'),
   createDom: require('@antv/util/lib/dom/create-dom'),
+  modifyCSS: require('@antv/util/lib/dom/modify-css'),
   isPlainObject: require('@antv/util/lib/type/is-plain-object'),
   isNumber: require('@antv/util/lib/type/is-number'),
   isString: require('@antv/util/lib/type/is-string'),

test/mocha.opts

@@ -0,0 +1 @@
+--preload test/support/preload.css

test/support/preload.css

@@ -0,0 +1,3 @@
+.g6-tooltip {
+  font-family: 'Arial';
+}

test/unit/behavior/drag-node-spec.js

@@ -156,6 +156,29 @@ describe('drag-node', () => {
     expect(matrix[6]).to.equal(50);
     expect(matrix[7]).to.equal(50);
   });
+  it('drag node not update edge', () => {
+    const graph = new G6.Graph({
+      container: div,
+      width: 500,
+      height: 500,
+      modes: {
+        default: [{
+          type: 'drag-node',
+          delegate: false,
+          updateEdge: false
+        }]
+      },
+      pixelRatio: 2
+    });
+    const src = graph.addItem('node', { id: 'source', color: '#666', x: 50, y: 50, style: { lineWidth: 2, fill: '#666' } });
+    const target = graph.addItem('node', { id: 'target', color: '#666', x: 300, y: 300, shape: 'rect', style: { lineWidth: 2, fill: '#666' } });
+    const edge = graph.addItem('edge', { source: src, target, label: 'test label', labelCfg: { autoRotate: true } });
+    const keyShape = edge.get('keyShape');
+    const path = keyShape.attr('path');
+    graph.emit('node:dragstart', { item: src, clientX: 55, clientY: 55 });
+    graph.emit('node:drag', { item: src, clientX: 66, clientY: 66 });
+    expect(keyShape.attr('path')).to.equal(path);
+  });
   it('unbind', () => {
     const graph = new G6.Graph({
       container: div,

test/unit/behavior/drag-spec.js

@@ -117,4 +117,36 @@ describe('drag-canvas', () => {
     graph.emit('canvas:mouseup', { clientX: 200, clientY: 200 });
     expect(start).to.be.false;
   });
+  it('drag offset', () => {
+    const graph = new G6.Graph({
+      container: div,
+      width: 500,
+      height: 500,
+      modes: {
+        default: [{
+          type: 'drag-canvas'
+        }]
+      },
+      pixelRatio: 2
+    });
+    let triggered = false;
+    let dragging = false;
+    graph.on('canvas:dragstart', () => {
+      triggered = true;
+    });
+    graph.on('canvas:drag', () => {
+      dragging = true;
+    });
+    graph.emit('canvas:mousedown', { clientX: 150, clientY: 150 });
+    graph.emit('canvas:mousemove', { clientX: 150, clientY: 150 });
+    expect(triggered).to.be.false;
+    expect(dragging).to.be.false;
+    graph.emit('canvas:mousemove', { clientX: 160, clientY: 160 });
+    expect(triggered).to.be.true;
+    expect(dragging).to.be.true;
+    dragging = false;
+    graph.emit('canvas:click', { clientX: 170, clientY: 170 });
+    graph.emit('canvas:mousemove', { clientX: 170, clientY: 170 });
+    expect(dragging).to.be.false;
+  });
 });

test/unit/behavior/tooltip-spec.js

@@ -0,0 +1,77 @@
+const expect = require('chai').expect;
+const G6 = require('../../../src');
+
+describe('tooltip', () => {
+  const div = document.createElement('div');
+  div.id = 'tooltip-spec';
+  document.body.appendChild(div);
+  const graph = new G6.Graph({
+    container: div,
+    width: 500,
+    height: 500,
+    pixelRatio: 2,
+    modes: { default: [] }
+  });
+  it('basic tooltip', () => {
+    graph.addBehaviors({
+      type: 'tooltip'
+    }, 'default');
+    const node = graph.addItem('node', { color: '#666', x: 50, y: 50, r: 20, style: { lineWidth: 2, fill: '#666' }, label: 'text' });
+    graph.emit('node:mouseenter', { x: 52, y: 52, item: node });
+    const tooltip = div.childNodes[1];
+    expect(tooltip).not.to.be.null;
+    const bbox = tooltip.getBoundingClientRect();
+    expect(bbox.width).to.equal(25.796875);
+    expect(bbox.height).to.equal(18);
+    const style = tooltip.style;
+    expect(style.position).to.equal('absolute');
+    expect(style.left).to.equal('64px');
+    expect(style.top).to.equal('64px');
+    expect(style.visibility).to.equal('visible');
+    expect(tooltip.innerHTML).to.equal('text');
+    graph.emit('node:mousemove', { x: 54, y: 54, item: node });
+    expect(style.left).to.equal('66px');
+    expect(style.top).to.equal('66px');
+    div.removeChild(tooltip);
+    graph.removeBehaviors('tooltip', 'default');
+  });
+  it('four places tooltip', () => {
+    graph.addBehaviors('tooltip', 'default');
+    const lt = graph.addItem('node', { id: 'lt', color: '#666', x: 50, y: 50, r: 20, style: { lineWidth: 2, fill: '#666' }, label: 'text' });
+    const rb = graph.addItem('node', { id: 'rb', color: '#666', x: 400, y: 400, r: 20, style: { lineWidth: 2, fill: '#666' }, label: 'text' });
+    const rt = graph.addItem('node', { id: 'rt', color: '#666', x: 400, y: 50, r: 20, style: { lineWidth: 2, fill: '#666' }, label: 'text' });
+    const lb = graph.addItem('node', { id: 'lb', color: '#666', x: 50, y: 400, r: 20, style: { lineWidth: 2, fill: '#666' }, label: 'text' });
+    graph.paint();
+    graph.emit('node:mouseenter', { x: 52, y: 52, item: lt });
+    const tooltip = div.childNodes[1];
+    const style = tooltip.style;
+    expect(tooltip).not.to.be.null;
+    expect(style.left).to.equal('64px');
+    expect(style.top).to.equal('64px');
+    graph.emit('node:mouseenter', { x: 410, y: 52, item: rt });
+    expect(style.left).to.equal('372.203px');
+    expect(style.top).to.equal('64px');
+    graph.emit('node:mouseenter', { x: 410, y: 410, item: rb });
+    expect(style.left).to.equal('372.203px');
+    expect(style.top).to.equal('380px');
+    graph.emit('node:mouseenter', { x: 52, y: 410, item: lb });
+    expect(style.left).to.equal('64px');
+    expect(style.top).to.equal('380px');
+    graph.removeBehaviors('tooltip', 'default');
+    div.removeChild(tooltip);
+  });
+  it('custom text', () => {
+    const node = graph.findById('lb');
+    graph.addBehaviors([{
+      type: 'tooltip',
+      formatText(model, e) {
+        expect(model.id).to.equal('lb');
+        expect(e.item).to.equal(node);
+        return 'custom label';
+      }
+    }], 'default');
+    graph.emit('node:mouseenter', { x: 52, y: 52, item: node });
+    const tooltip = div.childNodes[1];
+    expect(tooltip.innerHTML).to.equal('custom label');
+  });
+});