g6/stories/Shape/component/default-shape.tsx

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

let graph: IGraph = null

G6.registerNode('file-node', {

  draw(cfg, group) {
    const keyShape = group.addShape('rect', {
      attrs: {
        x: cfg.x - 4,
        y: cfg.y - 14,
        fill: '#fff',
        stroke: '#666'
      },
      className: 'node-rect'
    });

    if (cfg.children && cfg.children.length > 0) {
      group.addShape('marker', {
        attrs: {
          symbol: 'triangle-down',
          x: cfg.x + 4,
          y: cfg.y - 2,
          r: 4,
          fill: '#666'
        }
      });
    }

    const shape = group.addShape('text', {
      attrs: {
        x: cfg.x + 15,
        y: cfg.y + 4,
        text: cfg.label,
        fill: '#666',
        fontSize: 16,
        textAlign: 'left'
      }
    });

    const bbox = shape.getBBox();

    group.addShape('text', {
      attrs: {
        x: cfg.x + bbox.width + 20,
        y: cfg.y + 40,
        text: '详情',
        fill: '#651466',
        fontSize: 16,
        textAlign: 'right'
      },
      className: "detail-text"
    });

    keyShape.attr({
      width: bbox.width + 40,
      height: bbox.height + 45
    });

    return keyShape;
  }
}, 'single-node');

G6.registerEdge('step-line', {
  getControlPoints: function getControlPoints(cfg) {
    const startPoint = cfg.startPoint;
    const endPoint = cfg.endPoint;
    return [{
      x: startPoint.x,
      y: endPoint.y
    }];
  }
}, 'polyline');

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 = {
      id: '1',
      label: '域服务-创建计划',
      children: [{
        id: '1-3',
        label: '计划信息初始化',
        children: []
      }, {
        id: '1-2',
        label: '计划信息校验',
        children: []
      }, {
        id: '1-1',
        label: '计划信息保存',
        children: [
          {
            id: '1-1-1',
            label: '基本信息初始化',
          },
          {
            id: '1-1-2',
            label: '投放时间信息初始化',
          }
        ]
      }]
    };

    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