自定义节点点击高亮和展开相冲突 #5303

G6 Version

4.x

Describe the bug

此范例结合了https://g6.antv.antgroup.com/examples/case/treeDemos#decisionTree和https://g6.antv.antgroup.com/zh/examples/case/treeDemos/#decisionTree2 官方范例，当点击节点高亮后，再点击展开图标图标，会无法转换，必须取消高亮才行，而取消高亮后，点击展开图标，却又会触发高亮。

Your Example Website or App

https://stackblitz.com/edit/react-cxe9dc?file=index.js

Steps to Reproduce the Bug or Issue

1.初始进入界面，直接点击-号，可以收缩子节点，且图标会变为+号。但父节点会被高亮。 2.初始进入界面，直接点击节点，再点击-号，可以正常收缩子节点，但图标无法变为+号，同时父节点的高亮/取消高亮也会触发。

目前是使用graph.on('collapse-text:click', (e) => {})来修改节点的attr方式 如果用G6.registerNode()里的setState会无法点击节点高亮

Expected behavior

import G6 from '@antv/g6';

// root node
G6.registerNode('root', {
  draw: (cfg, group) => {
    const size = [80, 30];
    const keyShape = group.addShape('rect', {
      attrs: {
        width: size[0],
        height: size[1],
        x: -size[0] / 2,
        y: -size[1] / 2,
        fill: 'rgb(19, 33, 92)',
        radius: 5,
      },
      draggable: true,
      name: 'root-keyshape',
    });

    return keyShape;
  },
});

// level1 node
G6.registerNode(
  'level1node',
  {
    draw: (cfg, group) => {
      const { collapsed } = cfg;
      const size = [60, 40];
      const keyShape = group.addShape('rect', {
        attrs: {
          width: size[0],
          height: size[1],
          x: -size[0] / 2,
          y: -size[1] / 2,
          fill: 'rgb(213, 225, 247)',
          radius: 5,
        },
        draggable: true,
        name: 'level1node-keyshape',
      });
      if (cfg.children && cfg.children.length) {
        group.addShape('rect', {
          attrs: {
            x: size[0] / 2,
            y: -8,
            width: 12,
            height: 12,
            stroke: 'rgba(0, 0, 0, 0.25)',
            cursor: 'pointer',
          },
          // must be assigned in G6 3.3 and later versions. it can be any string you want, but should be unique in a custom item type
          name: `collapse-back-${cfg.id}`,
          modelId: cfg.id,
        });

        // collpase text
        group.addShape('text', {
          attrs: {
            x: size[0] / 2 + 6,
            y: -1,
            textAlign: 'center',
            textBaseline: 'middle',
            text: collapsed ? '+' : '-',
            fontSize: 14,
            cursor: 'pointer',
            fill: '#000',
            zIndex: 100,
          },
          // must be assigned in G6 3.3 and later versions. it can be any string you want, but should be unique in a custom item type
          name: `collapse-text-${cfg.id}`,
          modelId: cfg.id,
        });
      }
      return keyShape;
    },
    update: undefined,
    // setState(name, value, item) {
    //   if (name === 'collapse') {
    //     const group = item.getContainer();
    //     const collapseText = group.find((e) => e.get('name') === 'collapse-text');
    //     if (collapseText) {
    //       if (!value) {
    //         collapseText.attr({
    //           text: '-',
    //         });
    //       } else {
    //         collapseText.attr({
    //           text: '+',
    //         });
    //       }
    //     }
    //   }
    // }
  },
  'rect'
);

// other node
G6.registerNode(
  'othernode',
  {
    draw: (cfg, group) => {
      const size = [100, 30];
      const keyShape = group.addShape('rect', {
        attrs: {
          width: size[0],
          height: size[1],
          x: -size[0] / 2,
          y: -size[1] / 2,
          fill: 'rgb(213, 225, 247)',
          radius: 5,
        },
        draggable: true,
        name: 'level1node-keyshape',
      });

      // edge end
      group.addShape('line', {
        attrs: {
          x1: -size[0] / 2,
          x2: -size[0] / 2 + 6,
          y1: 0,
          y2: 0,
          lineWidth: 1,
          stroke: 'rgb(19, 33, 92)',
        },
      });
      return keyShape;
    },
    update: undefined,
  },
  'rect'
);

const data = {
  id: 'root',
  label: '利息收入',
  subLabel: '3,283.456',
  ratio: 3,
  children: [
    {
      id: 'child-a',
      label: '平均利息',
      subLabel: '9%',
      ratio: 1,
      increase: true,
    },
    {
      id: 'child-b',
      label: '贷款余额',
      subLabel: '1,789,567',
      ratio: 23,
      increase: true,
      children: [
        {
          id: 'child-b-a',
          label: '投放金额',
          subLabel: '2,385,124',
          ratio: 17,
          increase: true,
          operator: '-',
        },
        {
          id: 'child-b-b',
          label: '还款金额',
          subLabel: '595,557',
          ratio: 12,
          increase: true,
        },
      ],
    },
    {
      id: 'child-c',
      label: '还款期限',
      subLabel: '7',
      ratio: 23,
      increase: false,
    },
  ],
};

G6.Util.traverseTree(data, (subtree) => {
  if (subtree.level === undefined) subtree.level = 0;
  subtree.children?.forEach((child) => (child.level = subtree.level + 1));
  switch (subtree.level) {
    case 0:
      subtree.type = 'root';
      break;
    case 1:
      subtree.type = 'level1node';
      break;
    default:
      subtree.type = 'othernode';
  }
});

const width = container.scrollWidth;
const height = (container.scrollHeight || 500) - 30;
const graph = new G6.TreeGraph({
  container: 'container',
  width,
  height,
  fitView: true,
  layout: {
    type: 'compactBox',
    direction: 'LR',
    getHGap: function getVGap() {
      return 5;
    },
  },
  defaultEdge: {
    type: 'round-poly',
    sourceAnchor: 0,
    targetAnchor: 1,
    style: {
      radius: 8,
      stroke: 'rgb(19, 33, 92)',
    },
  },
  defaultNode: {
    anchorPoints: [
      [0.9, 0.5],
      [0, 0.5],
    ],
  },
  nodeStateStyles: {
    hover: {
      fill: '#fff',
      shadowBlur: 30,
      shadowColor: '#ddd',
    },

    selected: {
      fill: '#eee000',
      shadowBlur: 30,
      shadowColor: '#ddd',
    },
    operatorhover: {
      'operator-box': {
        opacity: 1,
      },
    },
  },
  modes: {
    default: [
      'zoom-canvas',
      'drag-canvas',
      // 'collapse-expand',
      'click-select',
    ],
  },
});
const handleCollapse = (e) => {
  const target = e.target;
  const id = target.get('modelId');
  const item = graph.findById(id);
  const nodeModel = item.getModel();
  nodeModel.collapsed = !nodeModel.collapsed;
  graph.layout();
  const group = item.getContainer();
  const collapseText = group.find((e) => e.get('name') === 'collapse-text');
  if (collapseText) {
    collapseText.attr({
      text: !nodeModel.collapsed ? '-' : '+',
    });
  }
  graph.setItemState(item, 'collapse', nodeModel.collapsed);
};
graph.on('collapse-text:click', (e) => {
  handleCollapse(e);
});
graph.on('collapse-back:click', (e) => {
  handleCollapse(e);
});
graph.on('node:click', (e) => {
  console.log(e);
});

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

Screenshots or Videos

No response

Platform

• OS: [Windows]
• Browser: [Chrome]
• Version: [119]

Additional context

No response