调用graph.updateChild事件后，节点的fill值变成了labelCfg的fill值 #5057

问题描述

import { onMounted } from 'vue'; import G6 from '@antv/g6';

const data = { id: 'root', label: 'root', itemType: 'type1', children: [ { id: 'c1', label: 'c1', itemType: 'type2', children: [ { id: 'c1-1', label: 'c1-1', itemType: 'type3', }, { id: 'c1-2', label: 'c1-2', children: [ { id: 'c1-2-1', label: 'c1-2-1', itemType: 'type3', }, { id: 'c1-2-2', label: 'c1-2-2', itemType: 'type3', }, ], }, ], }, { id: 'c2', label: 'c2', itemType: 'type2', }, { id: 'c3', label: 'c3', itemType: 'type2', children: [ { id: 'c3-1', label: 'c3-1', itemType: 'type3', }, { id: 'c3-2', label: 'c3-2', children: [ { id: 'c3-2-1', label: 'c3-2-1', itemType: 'type3', }, { id: 'c3-2-2', label: 'c3-2-2', itemType: 'type3', }, { id: 'c3-2-3', label: 'c3-2-3', itemType: 'type3', }, ], }, { id: 'c3-3', label: 'c3-3', itemType: 'type3', }, ], }, ], };

onMounted(() => { const COLLAPSE_ICON = function COLLAPSE_ICON(x, y, r) { return [ ['M', x - r, y - r], ['a', r, r, 0, 1, 0, r * 2, 0], ['a', r, r, 0, 1, 0, -r * 2, 0], ['M', x + 2 - r, y - r], ['L', x + r - 2, y - r], ]; }; const EXPAND_ICON = function EXPAND_ICON(x, y, r) { return [ ['M', x - r, y - r], ['a', r, r, 0, 1, 0, r * 2, 0], ['a', r, r, 0, 1, 0, -r * 2, 0], ['M', x + 2 - r, y - r], ['L', x + r - 2, y - r], ['M', x, y - 2 * r + 2], ['L', x, y - 2], ]; };

G6.registerNode( 'icon-node', { draw(cfg, group) { const styles = this.getShapeStyle(cfg); // console.log('node', cfg, group, styles); const { labelCfg = {} } = cfg;

    const w = styles.width;
    const h = styles.height;

    const keyShape = group.addShape('rect', {
      attrs: {
        ...styles,
        x: -w / 2,
        y: -h / 2,
      },
    });

    // 添加元素
    group.addShape('marker', {
      attrs: {
        x: 40 - w / 2,
        y: 54 - h / 2,
        r: 6,
        stroke: '#73d13d',
        cursor: 'pointer',
        symbol: EXPAND_ICON,
      },
      name: 'add-item',
    });

    // 移除元素
    group.addShape('marker', {
      attrs: {
        x: 80 - w / 2,
        y: 54 - h / 2,
        r: 6,
        stroke: '#ff4d4f',
        cursor: 'pointer',
        symbol: COLLAPSE_ICON,
      },
      name: 'remove-item',
    });

    if (cfg.label) {
      group.addShape('text', {
        attrs: {
          ...labelCfg.style,
          fontSize: 14,
          text: cfg.label,
          x: 50 - w / 2,
          y: 20 - h / 2,
        },
      });
      group.addShape('text', {
        attrs: {
          ...labelCfg.style,
          text: cfg.label,
          x: 50 - w / 2,
          y: 35 - h / 2,
        },
      });
    }

    return keyShape;
  },
  update: undefined,
},
'rect',

);

const defaultStateStyles = { hover: { fill: '#c6e2ff', stroke: '#598bff', shadowBlur: 0, lineWidth: 1, }, selected: { fill: '#f89898', stroke: '#96c2ff', shadowBlur: 0, lineWidth: 1, } };

const defaultNodeStyle = { fill: '#c6e2ff', stroke: '#96c2ff', radius: 5, lineWidth: 1, };

const defaultEdgeStyle = { stroke: '#bbbbbb', };

const defaultLayout = { type: 'compactBox', direction: 'TB', getId: function getId(d) { return d.id; }, getHeight: function getHeight() { return 16; }, getWidth: function getWidth() { return 16; }, getVGap: function getVGap() { return 40; }, getHGap: function getHGap() { return 70; }, };

const defaultLabelCfg = { style: { fill: '#333', fontSize: 12, }, };

const container = document.getElementById('container'); const width = container.scrollWidth; const height = container.scrollHeight || 500;

const minimap = new G6.Minimap({ size: [150, 100], }); const graph = new G6.TreeGraph({ container: 'container', width, height, linkCenter: true, plugins: [minimap], modes: { default: ['drag-canvas', 'zoom-canvas', 'click-select'], }, defaultNode: { type: 'icon-node', size: [120, 40], labelCfg: defaultLabelCfg, style: defaultNodeStyle, }, defaultEdge: { type: 'line', style: defaultEdgeStyle, }, nodeStateStyles: defaultStateStyles, layout: defaultLayout, });

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

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

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

// graph.on('node:mousedown', (evt) => { // const { item } = evt; // graph.setItemState(item, 'selected', true); // });

graph.on('node:click', (evt) => { // console.log('click', evt); const { item, target } = evt; const targetType = target.get('type'); const name = target.get('name');

if (targetType === 'marker') {
  const model = item.getModel();
  if (name === 'add-item') {
    if (!model.children) {
      model.children = [];
    }
    const id = `n-${Math.random()}`;
    model.children.push({
      id,
      label: id.slice(0, 8),
    });
    graph.updateChild(model, model.id);
  } else if (name === 'remove-item') {
    graph.removeChild(model.id);
  }
} else {
}

});

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); }; }

});

重现链接

无

重现步骤

点击加号，该节点颜色出错

预期行为

节点颜色不应该是labelCfg的fill值

平台

• 操作系统: [macOS, Windows, Linux, React Native ...]
• 网页浏览器: [Google Chrome, Safari, Firefox]
• G6 版本: [4.5.1 ... ]

屏幕截图或视频（可选）

<img width="514" alt="1697012179916" src="https://github.com/antvis/G6/assets/52738470/63fc9e21-7589-4ace-ae84-3a011459001e">

补充说明（可选）

No response