selected状态下，使用updateItem后，内部的OriginStyle没有更新 #5486

问题描述

selected一个combo后，使用updateItem更新节点配置。在取消selected后，界面上显示的颜色有变成原来的。selected的状态下如何更新配置

重现链接

如下代码

重现步骤

import G6 from '@antv/g6';

const data = {
  nodes: [
    { id: 'node1', x: 150, y: 250, comboId: 'c1' },
    { id: 'node2', x: 350, y: 250 },
  ],
  edges: [
    {
      source: 'node1',
      target: 'node2',
    },
  ],
  combos: [
    {id: 'c1', type: 'rect'}
  ]
};

let shift = true;

const graphDiv = document.getElementById('container');

const switchDiv = document.createElement('div');
switchDiv.innerHTML = `Press \'shift\' to select multiple nodes. Click Here to switch trigger to key \'alt\'
  <br /> 按住 'shift' 可多选节点。点击「这里」将 trigger 切换为 'alt'`;
graphDiv.appendChild(switchDiv);

const width = container.scrollWidth;
const height = (container.scrollHeight || 500) - 30;
const graph = new G6.Graph({
  container: 'container',
  width,
  height,
  fitCenter: true,
  modes: {
    default: ['click-select', 'drag-node'],
    altSelect: [
      {
        type: 'click-select',
        trigger: 'alt',
      },
      'drag-node',
    ],
  },
  /* styles for different states, there are built-in styles for states: active, inactive, selected, highlight, disable. you can extend or custom it by the following lines */
  /* 不同状态下节点和边的样式，G6 提供以下状态名的默认样式：active, inactive, selected, highlight, disable。可以通过如下方式修改或者扩展全局状态样式*/
  // nodeStateStyles: {
  //   selected: {
  //     stroke: '#f00',
  //     lineWidth: 3
  //   }
  // },
  // edgeStateStyles: {
  //   selected: {
  //     lineWidth: 3,
  //     stroke: '#f00'
  //   }
  // }
});

graph.on('node:mouseenter', (e) => {
  graph.setItemState(e.item, 'active', true);
});

graph.on('node:mouseleave', (e) => {
  graph.setItemState(e.item, 'active', false);
});

graph.on('nodeselectchange', (e) => {
  console.log(e.selectedItems, e.select);
});

graph.on('combo:click', (e) => {
  graph.updateItem(e.item, {
    style: {
      stroke: 'red'
    }
  })
})

switchDiv.addEventListener('click', (e) => {
  shift = !shift;
  if (shift) {
    graph.setMode('default');
    switchDiv.innerHTML = `Press \'shift\' to select multiple nodes. Click Here to switch trigger to key \'alt\'
      <br /> 按住 'shift' 可多选节点。点击「这里」将 trigger 切换为 'alt'`;
  } else {
    graph.setMode('altSelect');
    switchDiv.innerHTML = `Press \'alt\' to select multiple nodes. Click Here to switch trigger to key \'shift\'
      <br /> 按住 'alt' 可多选节点。点击「这里」将 trigger 切换为 'shift'`;
  }
});

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

if (typeof window !== 'undefined')
  window.onresize = () => {
    if (!graph || graph.get('destroyed')) return;
    if (!container || !container.scrollWidth || !container.scrollHeight) return;
    graph.changeSize(container.scrollWidth, container.scrollHeight - 30);
  };

预期行为

取消selected后显示新配置的颜色

平台

• 操作系统: [Windows]
• 网页浏览器: [Google Chrome, Safari, Firefox]
• G6 版本: [4.8.24]

屏幕截图或视频（可选）

No response

补充说明（可选）

No response