test: menu-spec, path-spec, image-minimap-spec

src/plugins/fisheye/index.ts

@@ -141,7 +141,7 @@ export default class Fisheye extends Base {
     const nodes = graph.getNodes();
     const nodeLength = nodes.length;
     let mCenter = mousePos ? { x: mousePos.x, y: mousePos.y } : { x: e.x, y: e.y };
-    if (self.get('dragging') && self.get('trigger') === 'mousemove') {
+    if (self.get('dragging') && (self.get('trigger') === 'mousemove' || self.get('trigger') === 'click')) {
       mCenter = self.get('cacheCenter');
     }
     const delegateCenterDiff = self.get('delegateCenterDiff');
@@ -272,37 +272,34 @@ export default class Fisheye extends Base {
         name: 'lens-shape',
         draggable: true
       });
-      // self.get('trigger') !== 'drag' && lensDelegate.set('capture', false);
-      if (self.get('trigger') === 'mousemove') {
-        lensDelegate.on('dragstart', e => {
-          self.set('dragging', true);
-          self.set('cacheCenter', { x: e.x, y: e.y });
-          self.set('dragPrePos', { x: e.x, y: e.y });
+      if (this.get('scaleRByWheel')) {
+        lensDelegate.on('mousewheel', evt => {
+          self.scaleRange(evt);
         });
-        lensDelegate.on('drag', e => {
-          const dragPrePos = self.get('dragPrePos');
-          const delta = e.x - dragPrePos.x > 0 ? 0.1 : -0.1;
-          const d = self.get('d');
-          const newD = d + delta;
-          const maxD = self.get('maxD');
-          const minD = self.get('minD');
-          if (newD < maxD && newD > minD) {
-            self.set('d', newD);
-            r = self.get('r');
-            self.set('molecularParam', (newD + 1) * r);
-            self.magnify(e);
-          }
-          self.set('dragPrePos', { x: e.x, y: e.y });
-        });
-        lensDelegate.on('dragend', e => {
-          self.set('dragging', false)
-        });
-        if (this.get('scaleRByWheel')) {
-          lensDelegate.on('mousewheel', evt => {
-            self.scaleRange(evt);
-          });
-        }
       }
+      lensDelegate.on('dragstart', e => {
+        self.set('dragging', true);
+        self.set('cacheCenter', { x: e.x, y: e.y });
+        self.set('dragPrePos', { x: e.x, y: e.y });
+      });
+      lensDelegate.on('drag', e => {
+        const dragPrePos = self.get('dragPrePos');
+        const delta = e.x - dragPrePos.x > 0 ? 0.1 : -0.1;
+        const d = self.get('d');
+        const newD = d + delta;
+        const maxD = self.get('maxD');
+        const minD = self.get('minD');
+        if (newD < maxD && newD > minD) {
+          self.set('d', newD);
+          r = self.get('r');
+          self.set('molecularParam', (newD + 1) * r);
+          self.magnify(e);
+        }
+        self.set('dragPrePos', { x: e.x, y: e.y });
+      });
+      lensDelegate.on('dragend', e => {
+        self.set('dragging', false)
+      });
     } else {
       lensDelegate.attr({
         x: mCenter.x,

src/plugins/imageMinimap/index.ts

@@ -81,7 +81,6 @@ export default class ImageMiniMap extends Base {
     // cWidth and cHeight are the width and height of the minimap's container
     const { graph } = cfgs;
     if (this.destroyed) return;
-    // const canvas = this.get('canvas');
 
     const containerDOM = this.get('container');
     const viewport = createDOM(
@@ -430,14 +429,6 @@ export default class ImageMiniMap extends Base {
     this.updateViewport();
   }
 
-  /**
-   * 获取minimap的画布
-   * @return {GCanvas} G的canvas实例
-   */
-  public getCanvas(): GCanvas {
-    return this.get('canvas');
-  }
-
   /**
    * 获取minimap的窗口
    * @return {HTMLElement} 窗口的dom实例
@@ -475,8 +466,6 @@ export default class ImageMiniMap extends Base {
   }
 
   public destroy() {
-    this.get('canvas').destroy();
-
     const container = this.get('container');
     container.parentNode.removeChild(container);
   }

tests/unit/plugins/fisheye-spec.ts

@@ -0,0 +1,127 @@
+import G6 from '../../../src';
+
+const div = document.createElement('div');
+div.id = 'fisheye-spec';
+document.body.appendChild(div);
+
+describe('fisheye', () => {
+  const graph = new G6.Graph({
+    container: div,
+    width: 800,
+    height: 600,
+  });
+
+  graph.addItem('node', { id: '0', x: 100, y: 100 });
+  graph.addItem('node', { id: '1', x: 200, y: 200 });
+
+  it('default fisheye', () => {
+    const fisheye = new G6.Fisheye();
+    graph.addPlugin(fisheye);
+    graph.emit('mousemove', { x: 100, y: 100 })
+    const node0 = graph.getNodes()[0].getModel();
+    const node1 = graph.getNodes()[1].getModel();
+
+    expect(node0.x).toEqual(100);
+    expect(node0.y).toEqual(100);
+    expect(node1.x).toEqual(246.44660940672625);
+    expect(node1.y).toEqual(246.44660940672625);
+
+    graph.emit('mousemove', { x: 200, y: 200 })
+    expect(node0.x).toEqual(53.55339059327375);
+    expect(node0.y).toEqual(53.55339059327375);
+    expect(node1.x).toEqual(200);
+    expect(node1.y).toEqual(200);
+
+    fisheye.clear()
+    expect(node0.x).toEqual(100);
+    expect(node0.y).toEqual(100);
+    expect(node1.x).toEqual(200);
+    expect(node1.y).toEqual(200);
+
+    graph.removePlugin(fisheye);
+  });
+
+  it('fisheye with click and wheel/drag to adjust', () => {
+    const fisheye = new G6.Fisheye({
+      trigger: 'click',
+      scaleRByWheel: true
+    });
+    graph.addPlugin(fisheye);
+    graph.emit('click', { x: 100, y: 100 })
+    const node0 = graph.getNodes()[0].getModel();
+    const node1 = graph.getNodes()[1].getModel();
+
+    expect(node0.x).toEqual(100);
+    expect(node0.y).toEqual(100);
+    expect(node1.x).toEqual(246.44660940672625);
+    expect(node1.y).toEqual(246.44660940672625);
+
+    graph.emit('click', { x: 200, y: 200 })
+    expect(node0.x).toEqual(53.55339059327375);
+    expect(node0.y).toEqual(53.55339059327375);
+    expect(node1.x).toEqual(200);
+    expect(node1.y).toEqual(200);
+
+    // wheel to adjust the radius
+    expect(fisheye.get('r')).toEqual(300);
+    const lens = fisheye.get('delegate');
+    const clientPos = graph.getClientByPoint(200, 200);
+    lens.emit('mousewheel', { originalEvent: { wheelDelta: 120 }, clientX: clientPos.x, clientY: clientPos.y });
+    expect(fisheye.get('r')).toEqual(315.7894736842105);
+    lens.emit('mousewheel', { originalEvent: { wheelDelta: -120 }, clientX: clientPos.x, clientY: clientPos.y });
+    expect(fisheye.get('r')).toEqual(300);
+
+    // drag to adjust the magnify coefficient
+    expect(fisheye.get('d')).toEqual(1.5);
+    lens.emit('dragstart', { x: 200, y: 200 })
+    lens.emit('drag', { x: 250, y: 250 })
+    expect(fisheye.get('d')).toEqual(1.6);
+    expect(node0.x).toEqual(51.78827985608831);
+    expect(node0.y).toEqual(51.78827985608831);
+    expect(node1.x).toEqual(200);
+    expect(node1.y).toEqual(200);
+
+    fisheye.clear()
+    expect(node0.x).toEqual(100);
+    expect(node0.y).toEqual(100);
+    expect(node1.x).toEqual(200);
+    expect(node1.y).toEqual(200);
+
+    graph.removePlugin(fisheye);
+  });
+
+  it('fisheye with drag, updateParams', () => {
+    const fisheye = new G6.Fisheye({
+      trigger: 'drag'
+    });
+    graph.addPlugin(fisheye);
+    const node0 = graph.getNodes()[0].getModel();
+    const node1 = graph.getNodes()[1].getModel();
+
+    graph.emit('click', { x: 100, y: 100 })
+    const lens = fisheye.get('delegate');
+
+    lens.emit('dragstart', { x: 100, y: 100 })
+    lens.emit('drag', { x: 200, y: 200 })
+    expect(node0.x).toEqual(51.78827985608831);
+    expect(node0.y).toEqual(51.78827985608831);
+    expect(node1.x).toEqual(200);
+    expect(node1.y).toEqual(200);
+
+    fisheye.updateParams({
+      d: 3,
+      r: 100
+    });
+    expect(fisheye.get('r')).toEqual(100);
+    expect(fisheye.get('r2')).toEqual(10000);
+    expect(fisheye.get('d')).toEqual(3);
+
+    fisheye.clear()
+    expect(node0.x).toEqual(100);
+    expect(node0.y).toEqual(100);
+    expect(node1.x).toEqual(200);
+    expect(node1.y).toEqual(200);
+
+    graph.removePlugin(fisheye);
+  });
+});

tests/unit/plugins/image-minimap-spec.ts

@@ -0,0 +1,105 @@
+import G6 from '../../../src';
+import Simulate from 'event-simulate';
+
+const div = document.createElement('div');
+div.id = 'image-minimap-spec';
+document.body.appendChild(div);
+
+describe('image minimap', () => {
+  let graph;
+  const minimap = new G6.ImageMinimap({
+    width: 200,
+    padding: 10,
+    graphImg: 'https://gw.alipayobjects.com/mdn/rms_f8c6a0/afts/img/A*DcGMQ7AN3Z0AAAAAAAAAAABkARQnAQ',
+  });
+  fetch('https://gw.alipayobjects.com/os/antvdemo/assets/data/algorithm-category.json')
+    .then((res) => res.json())
+    .then((data) => {
+      graph = new G6.TreeGraph({
+        container: div,
+        width: 800,
+        height: 600,
+        plugins: [minimap],
+        defaultNode: {
+          size: 26,
+          anchorPoints: [
+            [0, 0.5],
+            [1, 0.5],
+          ],
+          style: {
+            fill: '#C6E5FF',
+            stroke: '#5B8FF9',
+          },
+        },
+        defaultEdge: {
+          type: 'cubic-horizontal',
+          style: {
+            stroke: '#A3B1BF',
+          },
+        },
+        layout: {
+          type: 'dendrogram',
+          direction: 'LR', // H / V / LR / RL / TB / BT
+          nodeSep: 30,
+          rankSep: 100,
+        },
+      });
+      graph.node(function (node) {
+        return {
+          label: node.id,
+          labelCfg: {
+            position: node.children && node.children.length > 0 ? 'left' : 'right',
+            offset: 5,
+          },
+        };
+      });
+      graph.data(data);
+      graph.render();
+    });
+
+  it('default image minimap', done => {
+    setTimeout(() => {
+      const container = minimap.getContainer();
+      expect(container).not.toBe(undefined);
+      const viewport = minimap.getViewport();
+      expect(viewport).not.toBe(undefined);
+      expect(viewport.style.left).toEqual('62.3249px');
+      expect(viewport.style.top).toEqual('90.1585px');
+      expect(viewport.style.width).toEqual('137.675px');
+      expect(viewport.style.height).toEqual('59.8415px');
+
+      Simulate.simulate(viewport, 'mousedown', {
+        clientX: 100,
+        clientY: 100,
+        target: viewport,
+      });
+
+      Simulate.simulate(viewport, 'mousemove', {
+        clientX: 50,
+        clientY: 100,
+      });
+
+      Simulate.simulate(viewport, 'mouseup', {
+        clientX: 50,
+        clientY: 100,
+      });
+      console.log(viewport.style.left, viewport.style.top, viewport.style.width, viewport.style.height)
+
+      expect(viewport.style.left).toEqual('29.6865px');
+      expect(viewport.style.top).toEqual('90.1585px');
+      expect(viewport.style.width).toEqual('158.52px');
+      expect(viewport.style.height).toEqual('59.8415px');
+
+      minimap.updateGraphImg(
+        'https://gw.alipayobjects.com/mdn/rms_f8c6a0/afts/img/A*7QSRRJwAWxQAAAAAAAAAAABkARQnAQ',
+      );
+      const imgDOM = minimap.get('imgDOM');
+      expect(imgDOM.src).toEqual('https://gw.alipayobjects.com/mdn/rms_f8c6a0/afts/img/A*7QSRRJwAWxQAAAAAAAAAAABkARQnAQ');
+
+      graph.destroy();
+      expect(minimap.destroyed).toEqual(true)
+
+      done();
+    }, 800);
+  });
+});

tests/unit/plugins/menu-spec.ts

@@ -1,4 +1,6 @@
 import G6 from '../../../src';
+import { G6GraphEvent } from '../../../src/interface/behavior';
+import { IG6GraphEvent } from '../../../src/types';
 const div = document.createElement('div');
 div.id = 'menu';
 document.body.appendChild(div);
@@ -34,7 +36,7 @@ describe('menu', () => {
 
     graph.data(data);
     graph.render();
-    // graph.destroy()
+    graph.destroy()
   });
   it('menu with dom', () => {
     const menu = new G6.Menu({
@@ -114,9 +116,21 @@ describe('menu', () => {
         },
       ],
     };
-
     graph.data(data);
     graph.render();
-    graph.destroy();
+
+    const event = new G6GraphEvent('contextmenu', {
+      item: graph.getNodes()[0],
+      canvasX: 100,
+      canvasY: 100,
+      bubbles: false,
+    } as IG6GraphEvent);
+    graph.emit('contextmenu', event)
+    const menuDOM = document.getElementsByClassName('g6-component-contextmenu')[0];
+    expect(menuDOM.style.visibility).toEqual('visible')
+    expect(menuDOM.style.top).toEqual('106px')
+    expect(menuDOM.style.left).toEqual('106px')
+
+    // graph.destroy();
   });
 });

tests/unit/util/path-spec.ts

@@ -1,4 +1,12 @@
-import { getControlPoint, getSpline, pointsToPolygon } from '../../../src/util/path';
+import {
+  getControlPoint,
+  getSpline,
+  pointsToPolygon,
+  pathToPoints,
+  getClosedSpline,
+  roundedHull,
+  paddedHull
+} from '../../../src/util/path';
 
 describe('Path Util Test', () => {
   it('getSpline', () => {
@@ -151,4 +159,50 @@ describe('Path Util Test', () => {
     const polygonPoint = pointsToPolygon(points, true);
     expect(polygonPoint).toEqual('M1 2L{x} {y}Z');
   });
+
+  it('pathToPoints', () => {
+    const path = [['M', 0, 0], ['L', 10, 10], ['L', 100, 40]];
+    const points = pathToPoints(path);
+    expect(points[0][0]).toBe(0);
+    expect(points[1][0]).toBe(10);
+    expect(points[2][0]).toBe(100);
+  });
+
+  it('getClosedSpline', () => {
+    const points = [{ x: 0, y: 0 }, { x: 10, y: 10 }, { x: 100, y: 40 }];
+    const res = getClosedSpline(points);
+    expect(res[0][0]).toBe('M');
+    expect(res[0][1]).toBe(100);
+    expect(res[0][2]).toBe(40);
+    expect(res[1][0]).toBe('C');
+    expect(res[1][3]).toBe(15);
+    expect(res[1][4]).toBe(5);
+    expect(res[2][0]).toBe('C');
+    expect(res[2][1]).toBe(-15);
+    expect(res[2][2]).toBe(-5);
+    expect(res[4][0]).toBe('C');
+    expect(res[4][3]).toBe(15);
+    expect(res[4][4]).toBe(5);
+  });
+
+  it('roundedHull', () => {
+    const points = [[0, 0], [10, 10], [100, 40]];
+    const res = roundedHull(points, 10);
+    const splits = res.split(' ');
+    expect(splits[0]).toEqual('M');
+    expect(splits[1]).toEqual('96.83772233983161,49.48683298050514');
+    expect(splits[2]).toEqual('A');
+    expect(splits[3]).toEqual('10,10,0,0,0,103.71390676354103,30.715233091147407');
+  });
+
+  it('paddedHull', () => {
+    const points = [[0, 0], [10, 10], [100, 40]];
+    const res: any = paddedHull(points, 10);
+    expect(res[0].x).toEqual(-8.348410922382678);
+    expect(res[0].y).toEqual(-5.504910087462066);
+    expect(res[1].x).toEqual(4.742688878808661);
+    expect(res[1].y).toEqual(18.506508083520398);
+    expect(res[2].x).toEqual(109.38985166381534);
+    expect(res[2].y).toEqual(43.439576388386264);
+  });
 });