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

import '../../../src/behavior';
import '../../../src/shape';
import Graph from '../../../src/graph/graph';
import G6 from '../../../src';

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

G6.registerCombo(
  'custom-combo',
  {
    draw: (cfg, group) => {
      const style = cfg.style || {};
      const keyShape = group.addShape('circle', {
        attrs: style,
        className: 'circle-combo',
        name: 'circle-combo',
        draggable: true,
      });
      group.addShape('marker', {
        attrs: {
          x: 0, //keyShape.attr('r') + 5,
          y: 0,
          r: 5,
          stroke: 'blue',
          symbol: 'triangle-down',
        },
        name: 'marker-shape',
      });
      return keyShape;
    },
    update: (cfg, item) => {
      const group = item.get('group');
      if (cfg.markerStyle) {
        const marker = group.find((ele) => ele.get('name') === 'marker-shape');
        marker.attr(cfg.markerStyle);
      }
      const keyShape = group.get('children')[0];
      keyShape.attr(cfg.style);
    },
  },
  'circle-combo',
);

describe('drag-combo', () => {
  it('drag combo', () => {
    const data = {
      nodes: [
        {
          id: 'node1',
          x: 150,
          y: 150,
          label: 'node1',
          comboId: 'A',
        },
        {
          id: 'node2',
          x: 200,
          y: 250,
          label: 'node2',
          comboId: 'A',
        },
        {
          id: 'node3',
          x: 100,
          y: 250,
          label: 'node3',
        },
        {
          id: 'node4',
          x: 200,
          y: 350,
          label: 'node4',
          comboId: 'B',
        },
      ],
      edges: [
        {
          source: 'node1',
          target: 'node4',
        },
        {
          source: 'node1',
          target: 'node2',
        },
        {
          source: 'node2',
          target: 'node3',
        },
      ],
      combos: [
        {
          id: 'A',
          parentId: 'C',
          label: 'gorup A',
          type: 'circle',
        },
        {
          id: 'B',
          parentId: 'C',
          label: 'gorup B',
        },
        {
          id: 'C',
          label: 'gorup C',
          // type: 'rect'
        },
        {
          id: 'F',
          label: 'gorup F',
          // type: 'rect'
        },
        {
          id: 'G',
          label: 'gorup G',
          // parentId: 'F'
          type: 'custom-combo',
        },
      ],
    };

    const graph = new G6.Graph({
      container: 'drag-combo-spec',
      width: 1000,
      height: 800,
      modes: {
        default: ['drag-canvas', 'drag-combo'],
      },
      defaultCombo: {
        // size: [100, 100],
        // type: 'custom-combo',
        style: {
          fill: '#b5f5ec',
        },
      },
      comboStateStyles: {
        active: {
          stroke: 'red',
        },
        selected: {
          'text-shape': {
            fill: '#f00',
            fontSize: 20,
          },
          fill: '#36cfc9',
        },
        state2: {
          stroke: '#0f0',
        },
      },
    });

    graph.data(data);
    graph.render();

    graph.on('node:click', (e) => {
      // graph.hideItem(e.item);
      // graph.render()
    });
    graph.on('combo:click', (e) => {
      // selected = !selected;
      graph.setItemState(e.item, 'selected', true);
      const combos = graph.findAllByState('combo', 'selected');
      // graph.setItemState(e.item, 'state2', selected);
      // graph.getNodes().forEach(node => {
      //   node.hide();
      // });
      // graph.hideItem(e.item);
      // graph.updateItem(e.item, {
      //   // type: 'rect',
      //   style: {
      //     fill: '#f00'
      //   },
      //   label: 'new Label',
      //   labelCfg: {
      //     position: 'bottom'
      //   }
      // });
      // graph.uncombo(e.item);
    });

    graph.on('canvas:click', (evt) => {
      const combos = graph.findAllByState('combo', 'selected');
      combos.map((combo) => {
        graph.clearItemStates(combo);
      });
    });
  });

  it('combo example', () => {
    const data = {
      nodes: [
        {
          id: 'node1',
          x: 150,
          y: 150,
          label: 'node1',
          comboId: 'A',
        },
        {
          id: 'node2',
          x: 200,
          y: 250,
          label: 'node2',
          comboId: 'B',
        },
        {
          id: 'node3',
          x: 100,
          y: 250,
          label: 'node3',
        },
        {
          id: 'node4',
          x: 50,
          y: 50,
          label: 'node4',
          comboId: 'D',
        },
        {
          id: 'node5',
          x: 100,
          y: 100,
          label: 'node5',
          comboId: 'E',
        },
        {
          id: 'node6',
          x: 500,
          y: 200,
          label: 'node6',
        },
        {
          id: 'node7',
          x: 600,
          y: 200,
          label: 'node7',
        },
      ],
      edges: [
        {
          source: 'node1',
          target: 'node2',
        },
        {
          source: 'node2',
          target: 'node3',
        },
        {
          source: 'node3',
          target: 'node1',
        },
        {
          source: 'A',
          target: 'D',
        },
      ],
      combos: [
        {
          id: 'A',
          parentId: 'B',
          label: 'gorup A',
          padding: [50, 30, 10, 10],
          type: 'rect',
          // style: {
          //   stroke: 'red',
          //   fill: 'green'
          // },
          // collapsed: true
        },
        {
          id: 'B',
          label: 'gorup B',
          padding: [50, 10, 10, 50],
          // type: 'custom-combo'
        },
        {
          id: 'D',
          label: 'gorup D',
          parentId: 'E',
        },
        {
          id: 'E',
          // collapsed: true
        },
        {
          id: 'FF',
          label: '空分组',
          // type: 'custom-combo',
          // style: {
          //   stroke: 'green',
          //   lineWidth: 3
          // }
        },
      ],
    };

    const graph = new G6.Graph({
      container: 'drag-combo-spec',
      width: 1000,
      height: 800,
      groupByTypes: false,
      modes: {
        default: [
          'drag-canvas',
          {
            type: 'drag-combo',
            activeState: 'active',
          },
          {
            type: 'drag-node',
            comboActiveState: 'active',
          },
          'collapse-expand-combo',
          'click-select',
        ],
      },
      defaultCombo: {
        // size: [100, 100],
        type: 'circle',
        style: {
          fill: '#f0f0f0',
          stroke: '#bfbfbf',
        },
      },
      comboStateStyles: {
        selected: {
          // 'text-shape': {
          //   fill: '#f00',
          //   fontSize: 20
          // },
          stroke: '#8c8c8c',
        },
        active: {
          stroke: '#722ed1',
          lineWidth: 2,
        },
        state2: {
          stroke: '#0f0',
        },
      },
      nodeStateStyles: {
        selected: {
          stroke: 'green',
          lineWidth: 2,
        },
      },
      defaultEdge: {
        style: {
          stroke: '#bfbfbf',
          lineWidth: 2,
          endArrow: true,
        },
      },
    });

    graph.data(data);
    graph.render();

    graph.on('nodeselectchange', (evt) => {
      // console.log(evt);
    });

    // 删错 combo
    // graph.on('combo:click', evt => {
    //   const { item } = evt
    //   graph.removeItem(item)
    // })

    // graph.on('combo:click', evt => {
    //   const { item } = evt
    //   graph.uncombo(item)
    // })

    // setTimeout(() => {
    //   graph.updateComboTree('D')
    // }, 1000)

    // graph.on('combo:mouseenter', evt => {
    //   const { item } = evt
    //   graph.setItemState(item, 'hover', true)
    // })

    // graph.on('combo:mouseleave', evt => {
    //   const { item } = evt
    //   graph.setItemState(item, 'hover', false)
    // })
  });
});