g6/tests/unit/shape/edges/polyline-spec.ts

import Graph from '../../../../src/graph/graph'
import '../../../../src/shape/node'
import '../../../../src/shape/nodes'
import '../../../../src/shape/edge'
import '../../../../src/shape/edges'
import '../../../../src/behavior'

const div = document.createElement('div');
div.id = 'graph-spec';
document.body.appendChild(div);

describe('polyline e test', () => {
  describe('default polyline test', () => {
    const graph = new Graph({
      container: div,
      width: 500,
      height: 500,
      defaultNode: {
        shape: 'polyline'
      }
    });
    it('default polyline config', () => {
      const data = {
        nodes: [
          {
            id: 'node1',
            x: 200,
            y: 200
          },
          {
            id: 'node2',
            x: 150,
            y: 100
          }
        ],
        edges: [
          {
            source: 'node1',
            target: 'node2',
            shape: 'polyline'
          }
        ]
      };
      graph.data(data);
      graph.render();

      const edges = graph.getEdges();
      expect(edges.length).toEqual(1);
      const edge = edges[0];
      const keyShape = edge.getKeyShape();
      expect(keyShape.attr('lineWidth')).toEqual(1);
      expect(keyShape.attr('stroke')).toEqual('#333');
    });

    it('polyline radius and default offset', () => {
      const data = {
        nodes: [
          {
            id: 'node1',
            x: 200,
            y: 200
          },
          {
            id: 'node2',
            x: 150,
            y: 100
          }
        ],
        edges: [
          {
            source: 'node1',
            target: 'node2',
            shape: 'polyline',
            style: {
              radius: 10,
            }
          }
        ]
      };
      graph.data(data);
      graph.render();

      const edges = graph.getEdges();
      expect(edges.length).toEqual(1);
      const edge = edges[0];
      const keyShape = edge.getKeyShape();
      expect(keyShape.attr('lineWidth')).toEqual(1);
      expect(keyShape.attr('stroke')).toEqual('#333');
    });
    it('polyline radius and no offset', () => {
      const data = {
        nodes: [
          {
            id: 'node1',
            x: 200,
            y: 200
          },
          {
            id: 'node2',
            x: 150,
            y: 100
          }
        ],
        edges: [
          {
            source: 'node1',
            target: 'node2',
            shape: 'polyline',
            style: {
              radius: 10,
              offset: null
            }
          }
        ]
      };
      graph.data(data);
      graph.render();

      const edges = graph.getEdges();
      expect(edges.length).toEqual(1);
      const edge = edges[0];
      const keyShape = edge.getKeyShape();
      expect(keyShape.attr('lineWidth')).toEqual(1);
      expect(keyShape.attr('stroke')).toEqual('#333');
    });
    it('polyline with label', () => {
      const data = {
        nodes: [
          {
            id: 'node1',
            x: 200,
            y: 200
          },
          {
            id: 'node2',
            x: 150,
            y: 100
          }
        ], edges: [{
          source: 'node1',
          target: 'node2',
          shape: 'polyline',
          label: 'polyline1-2'
        }]
      };
      graph.data(data);
      graph.render();

      const edges = graph.getEdges();
      expect(edges.length).toEqual(1);
      const edge = edges[0];
      const group = edge.get('group');
      expect(group.getCount()).toEqual(2);

      const label = group.find(g => {
        return g.get('className') === 'edge-label';
      });
      expect(label).not.toBe(undefined);
      expect(label.attr('fill')).toEqual('#595959');
      const type = label.get('type');
      expect(type).toEqual('text');
    });

    it('polyline with controlPoints', () => {
      const data = {
        nodes: [
          {
            id: 'node1',
            x: 200,
            y: 200
          },
          {
            id: 'node2',
            x: 150,
            y: 100
          }
        ], edges: [{
          source: 'node1',
          target: 'node2',
          shape: 'polyline',
          controlPoints: [{ x: 170, y: 160 }]
        }]
      };
      graph.data(data);
      graph.render();

      const edges = graph.getEdges();
      expect(edges.length).toEqual(1);
      const edge = edges[0];
      const keyShape = edge.getKeyShape();
      const path = keyShape.attr('path');
      expect(path.length).toEqual(3);
      expect(path[1]).toEqual([ 'L', 170, 160 ]);
      graph.destroy();
      expect(graph.destroyed).toBe(true);
    });
  });

  describe('update', () => {
    const graph = new Graph({
      container: div,
      width: 500,
      height: 500
    });
    it('styles', () => {
      const data = {
        nodes: [
          {
            id: 'node1',
            x: 200,
            y: 200
          },
          {
            id: 'node2',
            x: 150,
            y: 100
          }
        ],
        edges: [
          {
            source: 'node1',
            target: 'node2',
            shape: 'polyline',
            style: {
              stroke: 'red'
            }
          }
        ]
      };
      graph.data(data);
      graph.render();

      const edges = graph.getEdges();
      expect(edges.length).toEqual(1);
      const edge = edges[0];
      const keyShape = edge.getKeyShape();
      expect(keyShape.attr('lineWidth')).toEqual(1);
      expect(keyShape.attr('stroke')).toEqual('red');

      edge.update({
        style: {
          stroke: 'blue',
          lineWidth: 3
        }
      })
      expect(keyShape.attr('lineWidth')).toEqual(3);
      expect(keyShape.attr('stroke')).toEqual('blue');

      edge.update({
        style: {
          shadowColor: 'black',
          shadowBlur: 5,
        }
      })
      expect(keyShape.attr('lineWidth')).toEqual(3);
      expect(keyShape.attr('stroke')).toEqual('blue');
      expect(keyShape.attr('shadowColor')).toEqual('black');
      expect(keyShape.attr('shadowBlur')).toEqual(5);
    });
    it('label', () => {
      const data = {
        nodes: [
          {
            id: 'node1',
            x: 200,
            y: 200
          },
          {
            id: 'node2',
            x: 150,
            y: 100
          }
        ],
        edges: [
          {
            source: 'node1',
            target: 'node2',
            shape: 'polyline',
            label: 'polyline'
          }
        ]
      };
      graph.data(data);
      graph.render();

      const edges = graph.getEdges();
      const edge = edges[0];
      const group = edge.get('group');
      const label = group.find(g => {
        return g.get('className') === 'edge-label';
      });
      expect(label.attr('text')).toEqual('polyline');

      // the position should be used after G, graphics.ts
      edge.update({
        label: 'new label',
        labelCfg: {
          // position: 'end',
          style: {
            fill: '#0ff'
          }
        }
      })
      expect(label.attr('fill')).toEqual('#0ff');
      expect(label.attr('text')).toEqual('new label');

      edge.update({
        labelCfg: {
          style: {
            shadowColor: 'black',
            shadowBlur: 5,
          }
        }
      })
      expect(label.attr('fill')).toEqual('#0ff');
      expect(label.attr('text')).toEqual('new label');
      expect(label.attr('shadowColor')).toEqual('black');
      expect(label.attr('shadowBlur')).toEqual(5);
    });
    it('label from none', () => {
      const data = {
        nodes: [
          {
            id: 'node1',
            x: 200,
            y: 200
          },
          {
            id: 'node2',
            x: 150,
            y: 100
          }
        ],
        edges: [
          {
            source: 'node1',
            target: 'node2',
            shape: 'polyline',
          }
        ]
      };
      graph.data(data);
      graph.render();

      const edges = graph.getEdges();
      const edge = edges[0];
      const group = edge.get('group');

      edge.update({
        label: 'new label',
        labelCfg: {
          style: {
            fill: '#0ff'
          }
        }
      })
      const label = group.find(g => {
        return g.get('className') === 'edge-label';
      });
      expect(label.attr('fill')).toEqual('#0ff');
      expect(label.attr('text')).toEqual('new label');

      edge.update({
        labelCfg: {
          style: {
            shadowColor: 'black',
            shadowBlur: 5,
          }
        }
      })
      expect(label.attr('fill')).toEqual('#0ff');
      expect(label.attr('text')).toEqual('new label');
      expect(label.attr('shadowColor')).toEqual('black');
      expect(label.attr('shadowBlur')).toEqual(5);
    });
    it('label position', () => {
      const data = {
        nodes: [
          {
            id: 'node1',
            x: 200,
            y: 200
          },
          {
            id: 'node2',
            x: 150,
            y: 100
          }
        ],
        edges: [
          {
            source: 'node1',
            target: 'node2',
            shape: 'polyline',
          }
        ]
      };
      graph.data(data);
      graph.render();

      const edges = graph.getEdges();
      const edge = edges[0];
      const group = edge.get('group');

      edge.update({
        label: 'new label',
        labelCfg: {
          position: 'end',
          style: {
            fill: '#0ff'
          }
        }
      })
      const label = group.find(g => {
        return g.get('className') === 'edge-label';
      });
      expect(label.attr('fill')).toEqual('#0ff');
      expect(label.attr('text')).toEqual('new label');
    });
  });
});