g6/tests/unit/behavior/drag-node-spec.ts

import '../../../src/behavior'
import Behavior from '../../../src/behavior/behavior'
import { IBehavior } from '../../../src/interface/behavior';

import Simulate from 'event-simulate';
import Graph from '../../../src/graph/graph'
import { G } from '@antv/g/lib'


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

describe('drag-node', () => {
  it('drag node', () => {
    const graph = new Graph({
      container: div,
      width: 500,
      height: 500,
      modes: {
        default: [{
          type: 'drag-node',
          delegate: false
        }]
      },
      pixelRatio: 2
    });
    const node = graph.addItem('node', { color: '#666', x: 50, y: 50, r: 20, style: { lineWidth: 2, fill: '#666' } });
    graph.paint();
    graph.emit('node:dragstart', { x: 100, y: 100, item: node });
    graph.emit('node:drag', { x: 120, y: 120, item: node });
    const dragMatrix = node.get('group').getMatrix();
    expect(dragMatrix[6]).toEqual(50);
    expect(dragMatrix[7]).toEqual(50);

    graph.emit('node:dragend', { x: 120, y: 120, item: node });
    const matrix = node.get('group').getMatrix();
    expect(matrix[0]).toEqual(1);
    expect(matrix[6]).toEqual(70);
    expect(matrix[7]).toEqual(70);
    graph.destroy();
  });
  it('delegate drag node with edge', () => {
    const graph = new Graph({
      container: div,
      width: 500,
      height: 500,
      renderer: 'svg',
      modes: {
        default: [{
          type: 'drag-node',
          delegateStyle: {
            fillOpacity: 0.8
          }
        }]
      },
      pixelRatio: 2
    });
    const src = graph.addItem('node', { id: 'source', color: '#666', x: 50, y: 50, size: 20, style: { lineWidth: 2, fill: '#666' } });
    const target = graph.addItem('node', { id: 'target', color: '#666', x: 300, y: 300, size: 20, shape: 'rect', style: { lineWidth: 2, fill: '#666' } });
    const edge = graph.addItem('edge', { source: src, target });
    graph.paint();
    let path = edge.get('group').get('children')[0].attr('path');
    expect(path[0][1]).toEqual(57.77817459305202);
    expect(path[0][2]).toEqual(57.77817459305202);
    expect(path[1][1]).toEqual(289);
    expect(path[1][2]).toEqual(289);
    graph.emit('node:dragstart', { x: 100, y: 100, item: src });
    graph.emit('node:drag', { x: 120, y: 120, item: src });
    path = edge.get('group').get('children')[0].attr('path');
    expect(path[0][1]).toEqual(57.77817459305202);
    expect(path[0][2]).toEqual(57.77817459305202);
    expect(path[1][1]).toEqual(289);
    expect(path[1][2]).toEqual(289);
    const delegateShape = src.get('delegateShape');
    expect(delegateShape).not.toBe(undefined);
    graph.emit('node:dragend', { x: 140, y: 140, item: src });
    path = edge.get('group').get('children')[0].attr('path');
    expect(path[0][1]).toEqual(97.77817459305203);
    expect(path[0][2]).toEqual(97.77817459305203);
    expect(path[1][1]).toEqual(289);
    expect(path[1][2]).toEqual(289);
    expect(!!src.get('delegateShape')).toBe(false);
    graph.destroy();
  });
  it('drag node without size', () => {
    const graph = new Graph({
      container: div,
      width: 500,
      height: 500,
      renderer: 'svg',
      modes: {
        default: [{ type: 'drag-node' }]
      },
      pixelRatio: 2
    });
    let clicked = false;
    graph.on('node:click', () => {
      clicked = true;
    });
    const node = graph.addItem('node', { id: 'source', color: '#666', x: 50, y: 50, style: { lineWidth: 2, fill: '#666' } });
    graph.emit('node:dragstart', { x: 100, y: 100, item: node });
    graph.emit('node:drag', { x: 120, y: 120, item: node });
    const delegateShape: G.Group = node.get('delegateShape');
    const bbox = delegateShape.getBBox();
    expect(bbox.width).toEqual(63);
    expect(bbox.height).toEqual(63);
    graph.emit('node:dragend', { x: 120, y: 120, item: node });
    expect(clicked).toBe(false);
    expect(node.get('delegateShape')).toBe(null);
  });
  // TODO: wait for .findByClassName defined by G
  // it('drag node & edge & label', () => {
  //   const graph = new Graph({
  //     container: div,
  //     width: 500,
  //     height: 500,
  //     renderer: 'svg',
  //     modes: {
  //       default: [{
  //         type: 'drag-node',
  //         delegateStyle: {
  //           fillOpacity: 0.8
  //         }
  //       }]
  //     },
  //     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 label = edge.get('group').findByClassName('edge-label');
  //   expect(label).not.toBe(undefined);
  //   let matrix = label.getMatrix();
  //   expect(matrix[0]).toEqual(0.7071067811865476);
  //   expect(matrix[1]).toEqual(0.7071067811865475);
  //   expect(matrix[3]).toEqual(-0.7071067811865475);
  //   expect(matrix[4]).toEqual(0.7071067811865476);
  //   graph.emit('node:dragstart', { x: 100, y: 100, item: target });
  //   graph.emit('node:drag', { x: 120, y: 120, item: target });
  //   graph.emit('node:dragend', { x: 80, y: 120, item: target });
  //   matrix = label.getMatrix();
  //   expect(matrix[0]).toEqual(0.6484664555997507);
  //   expect(matrix[1]).toEqual(0.7612432304867457);
  //   expect(matrix[3]).toEqual(-0.7612432304867457);
  //   expect(matrix[4]).toEqual(0.6484664555997507);
  // });
  it('prevent default', () => {
    const graph = new Graph({
      container: div,
      width: 500,
      height: 500,
      modes: {
        default: [{
          type: 'drag-node',
          delegate: false,
          shouldUpdate: e => { expect(e).not.toBe(undefined); return false; }
        }]
      },
      pixelRatio: 2
    });
    const node = graph.addItem('node', { color: '#666', x: 50, y: 50, r: 20, style: { lineWidth: 2, fill: '#666' } });
    graph.paint();
    graph.emit('node:dragstart', { x: 100, y: 100, item: node });
    graph.emit('node:drag', { x: 120, y: 120, item: node });
    const matrix = node.get('group').getMatrix();
    expect(matrix[0]).toEqual(1);
    expect(matrix[6]).toEqual(50);
    expect(matrix[7]).toEqual(50);
  });
  it('drag node not update edge', () => {
    const graph = new 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: G.Shape = edge.get('keyShape');
    const path = keyShape.attr('path');
    graph.emit('node:dragstart', { item: src, x: 55, y: 55 });
    graph.emit('node:drag', { item: src, x: 66, y: 66 });
    expect(keyShape.attr('path')).toEqual(path);
  });
  it('out of range', () => {
    const graph = new Graph({
      container: div,
      width: 500,
      height: 500,
      modes: {
        default: [ 'drag-node' ]
      },
      pixelRatio: 2
    });
    const node = graph.addItem('node', { color: '#666', x: 50, y: 50, r: 20, style: { lineWidth: 2, fill: '#666' } });
    graph.emit('node:dragstart', { x: 100, y: 100, item: node });
    expect(node.getContainer().getMatrix()[6]).toEqual(50);
    expect(node.getContainer().getMatrix()[7]).toEqual(50);
    graph.emit('canvas:mouseleave', { x: 600, y: 600, item: node });
    Simulate.simulate(document.body, 'mouseup', {
      clientY: 100,
      clientX: 100
    });
    expect(node.getContainer().getMatrix()[6]).toEqual(550);
    expect(node.getContainer().getMatrix()[7]).toEqual(550);
    // TODO
    // graph.updateItem(node, { x: 50, y: 50 });
    // expect(node.getContainer().getMatrix()[6]).toEqual(50);
    // expect(node.getContainer().getMatrix()[7]).toEqual(50);
    // Simulate.simulate(document.body, 'mouseup', {
    //   clientY: 100,
    //   clientX: 100
    // });
    // expect(node.getContainer().getMatrix()[6]).toEqual(50);
    // expect(node.getContainer().getMatrix()[7]).toEqual(50);
  });
  // TODO
  // it('unbind', () => {
  //   const graph = new Graph({
  //     container: div,
  //     width: 500,
  //     height: 500,
  //     modes: {
  //       default: [ 'drag-node' ]
  //     },
  //     pixelRatio: 2
  //   });
  //   graph.removeBehaviors('drag-node', 'default');
  //   const node = graph.addItem('node', { color: '#666', x: 50, y: 50, r: 20, style: { lineWidth: 2, fill: '#666' } });
  //   graph.emit('node:dragstart', { x: 100, y: 100, item: node });
  //   graph.emit('node:drag', { x: 120, y: 120, item: node });
  //   const matrix = node.get('group').getMatrix();
  //   expect(matrix[0]).toEqual(1);
  //   expect(matrix[6]).toEqual(50);
  //   expect(matrix[7]).toEqual(50);
  // });
});