临时提交

2024-12-02 19:58:46 +08:00 · 2019-08-28 11:30:40 +08:00 · 2019-08-28 11:30:40 +08:00 · a7d8f36f48
commit a7d8f36f48
parent afd45fdf1f
4 changed files with 470 additions and 22 deletions
--- a/.travis.yml
+++ b/.travis.yml
@ -12,6 +12,7 @@ addons:
  apt:
    packages:
      - xvfb
+      - libgconf-2-4

 install:
  - export DISPLAY=':99.0'
--- a/package.json
+++ b/package.json
@ -98,7 +98,7 @@
    "screenshot": "node ./bin/screenshot.js",
    "start": "npm run dev",
    "test": "torch --compile --renderer --opts test/mocha.opts --recursive ./test/unit",
-    "test-live": "torch --compile --interactive --watch --opts test/mocha.opts --recursive ./test/unit/graph/graph-group-spec.js",
+    "test-live": "torch --compile --interactive --watch --opts test/mocha.opts --recursive ./test/unit/graph/controller/custom-group-spec.js",
    "test-live-tree": "torch --compile --interactive --watch --opts test/mocha.opts --recursive ./test/unit/graph/tree-graph-spec.js",
    "test-bugs": "torch --compile --renderer --recursive ./test/bugs",
    "test-bugs-live": "torch --compile --interactive --watch --recursive ./test/bugs",
--- a/test/unit/behavior/drag-group-spce.js
+++ b/test/unit/behavior/drag-group-spce.js
@ -3,10 +3,11 @@
 * @Date: 2019-07-31 11:54:41
 * @LastEditors: moyee
 * @LastEditTime: 2019-08-23 14:16:27
- * @Description: file content
+ * @Description: Group Behavior单测文件
 */
 const expect = require('chai').expect;
 const G6 = require('../../../src');
+const Util = G6.Util;
 const { groupBy } = require('lodash');

 const div = document.createElement('div');
@ -28,22 +29,25 @@ G6.registerNode('circleNode', {
  }
 }, 'circle');

-describe.only('create graph group', () => {
-  const graph = new G6.Graph({
-    container: div,
-    width: 1500,
-    height: 1000,
-    pixelRatio: 2,
-    modes: {
-      default: [ 'drag-group' ]
-    },
-    defaultNode: {
-      shape: 'circleNode'
-    },
-    defaultEdge: {
-      color: '#bae7ff'
-    }
-  });
+const graph = new G6.Graph({
+  container: div,
+  width: 1500,
+  height: 1000,
+  pixelRatio: 2,
+  modes: {
+    default: [ 'drag-group' ]
+  },
+  defaultNode: {
+    shape: 'circleNode'
+  },
+  defaultEdge: {
+    color: '#bae7ff'
+  }
+});
+
+const groupControll = graph.get('customGroupControll');
+
+describe('signle layer group', () => {

  const nodes = [
    {
@ -95,8 +99,6 @@ describe.only('create graph group', () => {
  graph.data(data);
  graph.render();

-  const groupControll = graph.get('customGroupControll');
-
  it('render signle group test', () => {
    const group = graph.get('customGroup');
    const children = group.get('children');
@ -125,7 +127,7 @@ describe.only('create graph group', () => {
    }
  });

-  it.only('drag signle group', () => {
+  it('drag signle group', () => {

    const { nodeGroup } = groupControll.getDeletageGroupById('group1');
    const keyShape = nodeGroup.get('keyShape');
@ -167,8 +169,10 @@ describe.only('create graph group', () => {
    expect(bbox.height).eql(height);

  });
+});

-  it('nesting group test', () => {
+describe('nesting layer group', () => {
+  it.only('render nesting layer group', () => {
    const data = {
      nodes: [
        {
@ -263,5 +267,46 @@ describe.only('create graph group', () => {

    const { groups } = graph.save();
    expect(groups.length).equal(5);
+
+    // 渲染的每个group的位置和坐标是否和计算的一致
+    const groupNodes = Util.getAllNodeInGroups(data);
+    for (const groupId in groupNodes) {
+      const nodeIds = groupNodes[groupId];
+      const { x, y, width, height } = groupControll.calculationGroupPosition(nodeIds);
+      const r = width > height ? width / 2 : height / 2;
+      const cx = (width + 2 * x) / 2;
+      const cy = (height + 2 * y) / 2;
+
+      const groupShape = groupControll.getDeletageGroupById(groupId);
+
+      const { groupStyle } = groupShape;
+      expect(groupStyle.x).eql(cx);
+      expect(groupStyle.y).eql(cy);
+      expect(groupStyle.r).eql(r);
+    }
+
+    // 指定groupId，验证渲染后的位置是否正确
+    const shape = groupControll.getDeletageGroupById('group2');
+    const shapeStyle = shape.groupStyle;
+    expect(shapeStyle.r).eql(30.5);
+    expect(shapeStyle.x).eql(299.5);
+    expect(shapeStyle.y).eql(99.5);
+  });
+
+  it('drag node out from group', () => {
+    // 拖动node2
+    const nodeItem = graph.findById('node2');
+
+    graph.emit('node:dragstart', {
+      item: nodeItem,
+      canvasX: 0,
+      canvasY: 0
+    });
+
+    graph.emit('node:drag', {
+      item: nodeItem,
+      canvasX: 100,
+      canvasY: 100
+    });
  });
 });
--- a/test/unit/graph/controller/custom-group-spec.js
+++ b/test/unit/graph/controller/custom-group-spec.js
@ -0,0 +1,402 @@
+/*
+ * @Author: moyee
+ * @Date: 2019-07-31 11:54:41
+ * @LastEditors: moyee
+ * @LastEditTime: 2019-08-23 14:16:27
+ * @Description: Group单测文件
+ */
+const expect = require('chai').expect;
+const G6 = require('../../../../src');
+const Util = G6.Util;
+const { groupBy } = require('lodash');
+
+const div = document.createElement('div');
+div.id = 'graph-group-spec';
+document.body.appendChild(div);
+
+G6.registerNode('circleNode', {
+  drawShape(cfg, group) {
+    const keyShape = group.addShape('circle', {
+      attrs: {
+        x: 0,
+        y: 0,
+        r: 30,
+        fill: '#87e8de'
+      }
+    });
+
+    return keyShape;
+  }
+}, 'circle');
+
+const graph = new G6.Graph({
+  container: div,
+  width: 1500,
+  height: 1000,
+  pixelRatio: 2,
+  modes: {
+    default: [ 'drag-group' ]
+  },
+  defaultNode: {
+    shape: 'circleNode'
+  },
+  defaultEdge: {
+    color: '#bae7ff'
+  }
+});
+
+const groupControll = graph.get('customGroupControll');
+
+describe('signle layer group', () => {
+
+  const nodes = [
+    {
+      id: 'node1',
+      label: 'node1',
+      groupId: 'group1',
+      x: 100,
+      y: 100
+    },
+    {
+      id: 'node2',
+      label: 'node2',
+      groupId: 'group1',
+      x: 150,
+      y: 100
+    },
+    {
+      id: 'node3',
+      label: 'node3',
+      groupId: 'group2',
+      x: 300,
+      y: 100
+    },
+    {
+      id: 'node7',
+      groupId: 'p1',
+      x: 200,
+      y: 200
+    },
+    {
+      id: 'node6',
+      groupId: 'bym',
+      label: 'rect',
+      x: 100,
+      y: 300,
+      shape: 'rect'
+    },
+    {
+      id: 'node9',
+      label: 'noGroup',
+      x: 300,
+      y: 210
+    }
+  ];
+  const data = {
+    nodes
+  };
+
+  graph.data(data);
+  graph.render();
+
+  it('render signle group test', () => {
+    const group = graph.get('customGroup');
+    const children = group.get('children');
+    // group的数量
+    expect(children.length).equal(4);
+
+    // 每个group的圆心坐标
+    const nodesInGroup = groupBy(data.nodes, 'groupId');
+    for (const node in nodesInGroup) {
+      if (node === 'undefined') {
+        continue;
+      }
+      const currentNodes = nodesInGroup[node];
+      const nodeIds = currentNodes.map(nodeId => nodeId.id);
+      const { x, y, width, height } = groupControll.calculationGroupPosition(nodeIds);
+      const r = width > height ? width / 2 : height / 2;
+      const cx = (width + 2 * x) / 2;
+      const cy = (height + 2 * y) / 2;
+
+      const groupShape = groupControll.getDeletageGroupById(node);
+
+      const { groupStyle } = groupShape;
+      expect(groupStyle.x).eql(cx);
+      expect(groupStyle.y).eql(cy);
+      expect(groupStyle.r).eql(r);
+    }
+  });
+
+  it('setGroupStyle', () => {
+    const { nodeGroup } = groupControll.getDeletageGroupById('group2');
+    const keyShape = nodeGroup.get('keyShape');
+    groupControll.setGroupStyle(keyShape, 'hover');
+
+    // 这里的hover样式和定义custom group时指定的一样
+    const hover = {
+      stroke: '#faad14',
+      fill: '#ffe58f',
+      fillOpacity: 0.3,
+      opacity: 0.3,
+      lineWidth: 3
+    };
+
+    expect(keyShape.attr('stroke')).eql(hover.stroke);
+    expect(keyShape.attr('fill')).eql(hover.fill);
+    expect(keyShape.attr('fillOpacity')).eql(hover.fillOpacity);
+    expect(keyShape.attr('opacity')).eql(hover.opacity);
+    expect(keyShape.attr('lineWidth')).eql(hover.lineWidth);
+    expect(keyShape.attr('customStyle')).eql(undefined);
+
+    // 设置自定义样式属性customStyle
+    groupControll.setGroupStyle(keyShape, { customStyle: true });
+    expect(keyShape.attr('customStyle')).eql(true);
+  });
+
+  it('setGroupOriginBBox / getGroupOriginBBox', () => {
+    const { nodeGroup } = groupControll.getDeletageGroupById('group1');
+    const keyShape = nodeGroup.get('keyShape');
+    const bbox = keyShape.getBBox();
+    // 调用setGroupOriginBBox方法存储group1的bbox
+    groupControll.setGroupOriginBBox('group1', bbox);
+
+    const groupBBox = groupControll.getGroupOriginBBox('group1');
+    expect(groupBBox).eql(bbox);
+  });
+
+  it('setDeletageGroupByStyle / getDeletageGroupById', () => {
+    // setDeletageGroupByStyle方法是在创建的时候就调用的，这里测试创建时候存进去的值通过getDeletageGroupById取出来后是否相同
+    const group2 = groupControll.getDeletageGroupById('group2');
+    const { groupStyle, nodeGroup } = group2;
+
+    expect(nodeGroup).not.null;
+    expect(nodeGroup.get('id')).eql('group2');
+    expect(nodeGroup.get('destroyed')).to.be.false;
+
+    const nodeInGroup2 = data.nodes.filter(node => node.groupId === 'group2').map(node => node.id);
+    const { width, height, x, y } = groupControll.calculationGroupPosition(nodeInGroup2);
+
+    const r = width > height ? width / 2 : height / 2;
+    const cx = (width + 2 * x) / 2;
+    const cy = (height + 2 * y) / 2;
+
+    expect(groupStyle.x).eql(cx);
+    expect(groupStyle.y).eql(cy);
+    expect(groupStyle.r).eql(r);
+    expect(groupStyle.width).eql(width);
+    expect(groupStyle.height).eql(height);
+
+    // 通过不存在的groupId查询
+    const notGroup = groupControll.getDeletageGroupById('group5');
+    expect(notGroup).to.be.undefined;
+  });
+
+  it('collapseExpandGroup', () => {
+    const { nodeGroup } = groupControll.getDeletageGroupById('group1');
+    expect(nodeGroup.get('hasHidden')).to.be.undefined;
+
+    groupControll.collapseExpandGroup('group1');
+    expect(nodeGroup.get('hasHidden')).to.be.true;
+
+    groupControll.collapseExpandGroup('group1');
+    expect(nodeGroup.get('hasHidden')).to.be.false;
+  });
+
+  it.only('collapseGroup / expandGroup', () => {
+    const nodes = graph.getNodes();
+    const groupNodes = nodes.filter(node => {
+      const model = node.getModel();
+      return model.groupId === 'group1';
+    });
+
+    // 没有收起群组之前，所有节点都应该是显示状态
+    for (const node of groupNodes) {
+      const isVisible = node.isVisible();
+      expect(isVisible).to.be.true;
+    }
+
+    groupControll.collapseGroup('group1');
+
+    // group收起后，隐藏所有节点
+    for (const node of groupNodes) {
+      const isVisible = node.isVisible();
+      expect(isVisible).to.be.false;
+    }
+
+    // 同时检测之前的group是否正确
+    const { nodeGroup, groupStyle } = groupControll.getDeletageGroupById('group1');
+    const keyShape = nodeGroup.get('keyShape');
+    // 延迟下判断，因为收起会有一个动画效果
+    setTimeout(() => {
+      expect(keyShape.attr('r')).eql(30);
+      expect(keyShape.attr('x')).eql(groupStyle.x);
+      expect(keyShape.attr('y')).eql(groupStyle.y);
+    }, 2000);
+
+    // group 展开
+    groupControll.expandGroup('group1');
+
+    setTimeout(() => {
+      // 展开后，所有node都是显示状态
+      for (const node of groupNodes) {
+        const isVisible = node.isVisible();
+        expect(isVisible).to.be.true;
+      }
+
+      expect(keyShape.attr('r')).eql(groupStyle.r);
+      expect(keyShape.attr('x')).eql(groupStyle.x);
+      expect(keyShape.attr('y')).eql(groupStyle.y);
+
+
+      const nodeIds = groupNodes.map(node => {
+        const model = node.getModel();
+        return model.id;
+      });
+
+      const { width, height } = groupControll.calculationGroupPosition(nodeIds);
+      expect(width).eql(groupStyle.width);
+      expect(height).eql(groupStyle.height);
+    }, 5500);
+  });
+
+});
+
+describe('nesting layer group', () => {
+  it('render nesting layer group', () => {
+    const data = {
+      nodes: [
+        {
+          id: 'node6',
+          groupId: 'group3',
+          label: 'rect',
+          x: 100,
+          y: 300
+        },
+        {
+          id: 'node1',
+          label: 'fck',
+          groupId: 'group1',
+          x: 100,
+          y: 100
+        },
+        {
+          id: 'node9',
+          label: 'noGroup1',
+          groupId: 'p1',
+          x: 300,
+          y: 210
+        },
+        {
+          id: 'node2',
+          label: 'node2',
+          groupId: 'group1',
+          x: 150,
+          y: 200
+        },
+        {
+          id: 'node3',
+          label: 'node3',
+          groupId: 'group2',
+          x: 300,
+          y: 100
+        },
+        {
+          id: 'node7',
+          groupId: 'p1',
+          label: 'node7-p1',
+          x: 200,
+          y: 200
+        },
+        {
+          id: 'node10',
+          label: 'noGroup',
+          groupId: 'p2',
+          x: 300,
+          y: 210
+        }
+      ],
+      edges: [
+        {
+          source: 'node1',
+          target: 'node2'
+        },
+        {
+          source: 'node2',
+          target: 'node3'
+        }
+      ],
+      groups: [
+        {
+          id: 'group1',
+          title: '1',
+          parentId: 'p1'
+        },
+        {
+          id: 'group2',
+          title: '2',
+          parentId: 'p1'
+        },
+        {
+          id: 'group3',
+          title: '2',
+          parentId: 'p2'
+        },
+        {
+          id: 'p1',
+          title: '3'
+        },
+        {
+          id: 'p2',
+          title: '3'
+        }
+      ]
+    };
+
+    graph.data(data);
+    graph.render();
+
+    const { groups } = graph.save();
+    expect(groups.length).equal(5);
+
+    // 渲染的每个group的位置和坐标是否和计算的一致
+    const groupNodes = Util.getAllNodeInGroups(data);
+    for (const groupId in groupNodes) {
+      const nodeIds = groupNodes[groupId];
+      const { x, y, width, height } = groupControll.calculationGroupPosition(nodeIds);
+      const r = width > height ? width / 2 : height / 2;
+      const cx = (width + 2 * x) / 2;
+      const cy = (height + 2 * y) / 2;
+
+      const groupShape = groupControll.getDeletageGroupById(groupId);
+
+      const { groupStyle } = groupShape;
+      expect(groupStyle.x).eql(cx);
+      expect(groupStyle.y).eql(cy);
+      expect(groupStyle.r).eql(r);
+    }
+
+    // 指定groupId，验证渲染后的位置是否正确
+    const shape = groupControll.getDeletageGroupById('group2');
+    const shapeStyle = shape.groupStyle;
+    expect(shapeStyle.r).eql(30.5);
+    expect(shapeStyle.x).eql(299.5);
+    expect(shapeStyle.y).eql(99.5);
+  });
+
+  it('drag node out from group', () => {
+    // 拖动node2
+    const nodeItem = graph.findById('node2');
+
+    graph.emit('node:dragstart', {
+      item: nodeItem,
+      canvasX: 0,
+      canvasY: 0
+    });
+
+    graph.emit('node:drag', {
+      item: nodeItem,
+      canvasX: 100,
+      canvasY: 100
+    });
+  });
+});