g6/stories/Shape/component/issue-1.tsx

import React, { useEffect } from 'react';
import G6 from '../../../src';
import { IGraph } from '../../../src/interface/graph';

let graph: IGraph = null;

G6.registerNode('iconfont', {

  draw(cfg, group) {

    const {

      backgroundConfig: backgroundStyle,

      style,

      labelCfg: labelStyle,

    } = cfg;

    if (backgroundStyle) {

      group.addShape('circle', {

        attrs: {

          x: 0,

          y: 0,

          r: cfg.size,

          ...backgroundStyle,

        },

      });

    }

    const keyShape = group.addShape('text', {

      attrs: {

        x: 0,

        y: 0,

        fontFamily: 'Glyphicons Halflings', // 对应css里面的font-family: "iconfont";

        textAlign: 'center',

        textBaseline: 'middle',

        text: cfg.text,

        fontSize: cfg.size,

        ...style,

      },

    });

    const labelY = backgroundStyle ? cfg.size * 2 : cfg.size;

    group.addShape('text', {

      attrs: {

        x: 0,

        y: labelY,

        textAlign: 'center',

        text: cfg.label,

        ...labelStyle.style,

      },

    });

    return keyShape;

  },

});

const COLOR = '#40a9ff';

const graph = new G6.Graph({

  container: 'mountNode',

  width: 800,

  height: 600,

  modes: {

    default: ['collapse-expand', 'drag-canvas', 'drag-node'],

  },

  defaultNode: {

    backgroundConfig: {

      backgroundType: 'circle',

      fill: COLOR,

      stroke: 'LightSkyBlue',

    },

    shape: 'iconfont',

    size: 12,

    style: {

      fill: '#fff',

    },

    labelCfg: {

      style: {

        fill: COLOR,

        fontSize: 12,

      },

    },

  },

  // 布局相关

  layout: {

    type: 'dagre',

    rankdir: 'LR',

    align: 'DL',

    nodesep: 30,

    ranksep: 30

  },

});

const DefaultShape = () => {
  const container = React.useRef();

  useEffect(() => {
    if (!graph) {
      graph = new G6.TreeGraph({
        container: container.current as string | HTMLElement,
        width: 500,
        height: 500,
        linkCenter: true,
        modes: {
          default: ['collapse-expand', 'zoom-canvas', 'drag-canvas'],
        },
        defaultNode: {
          shape: 'file-node',
        },
        defaultEdge: {
          shape: 'step-line',
        },
        nodeStateStyles: {
          hover: {
            fill: '#83AFFD',
            stroke: '#5B8FF9',
          },
          select: {
            fill: '#4ab334',
            lineWidth: 2,
            stroke: '#5B8FF9',
          },
        },
        layout: {
          type: 'indented',
          isHorizontal: true,
          direction: 'LR',
          indent: 70,
          getHeight: function getHeight() {
            return 20;
          },

          getWidth: function getWidth() {
            return 20;
          },
        },
      });
    }

    const data = {

      nodes: [
    
        {
    
          id: 'Root',
    
          label: '可疑人员王**',
    
          text: '\ue171', // 对应字体图标的Unicode码，
    
          style: {
    
            fill: 'red',
    
          },
    
          labelCfg: {
    
            style: {
    
              fill: 'red',
    
            },
    
          },
    
          backgroundConfig: null, // 自定义项，用于判读是否需要圆背景
    
          size: 30,
    
        },
    
        {
    
          id: 'node1',
    
          label: 'node1节点',
    
          text: '\ue171', // 对应字体图标的Unicode码，
    
          style: {
    
            fill: '#fff',
    
          },
    
          labelCfg: {
    
            style: {
    
              fill: '#000',
    
            },
    
          },
    
        },
    
        {
    
          id: 'node2',
    
          label: 'node2节点',
    
          text: '\ue171', // 对应字体图标的Unicode码，
    
          style: {
    
            fill: '#fff',
    
          },
    
          labelCfg: {
    
            style: {
    
              fill: '#000',
    
            },
    
          },
    
        }
    
      ],
    
      edges: [
    
        {
    
          source: 'Root',  // 起始点 id
    
          target: 'node1',  // 目标点 id
    
        },
    
        {
    
          source: 'Root',  // 起始点 id
    
          target: 'node2',  // 目标点 id
    
        }
    
      ]
    
    }

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

    graph.on('node:click', ev => {
      //const clickNodes = graph.findAllByState('node', 'click');

      //clickNodes.forEach(cn => {
      //graph.setItemState(cn, 'click', false);
      // });

      const nodeItem = ev.item;
      debugger;
      graph.setItemState(nodeItem, 'select', true);
    });

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

  return <div ref={container}></div>;
};

export default DefaultShape;