为什么 graph.save() 时 stateStyles 的内容会合并到 style 中去？

[gotounix]

问题描述

import G6 from '@antv/g6';

const data = {
  nodes: [
    {
      id: 'rect',
      label: 'rect',
      x: 250,
      y: 150,
      stateStyles: {
        selected: {
            fill: '#1890FF',
            cursor: 'move',
        }
    }
    },
  ],
};

const width = document.getElementById('container').scrollWidth;
const height = document.getElementById('container').scrollHeight || 500;
const graph = new G6.Graph({
  container: 'container',
  width,
  height,
  fitCenter: true,
  modes: {
    default: ['drag-canvas', 'drag-node'],
  },
  defaultNode: {
    type: 'rect',
    size: [80, 40],
    icon: {
      show: true,
    },
  },
});

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

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

graph.on('canvas:click', (evt) => {
  graph.getNodes().forEach((node) => {
    graph.clearItemStates(node);
  });
});

console.log(graph.save())

重现链接

https://codesandbox.io/s/h9j6q8?file=/index.js

重现步骤

保存graph的时候stateStyles里面的内容自动添加到style中去了：

{
    "nodes": [
        {
            "id": "rect",
            "label": "rect",
            "x": 250,
            "y": 150,
            "stateStyles": {
                "selected": {
                    "fill": "#1890FF",
                    "cursor": "move"
                }
            },
            "type": "rect",
            "size": [
                80,
                40
            ],
            "icon": {
                "show": true
            },
            "style": {
                "selected": {
                    "fill": "#1890FF",
                    "cursor": "move"
                }
            }
        }
    ],
    "edges": [],
    "combos": []
}

预期行为

{
    "nodes": [
        {
            "id": "rect",
            "label": "rect",
            "x": 250,
            "y": 150,
            "stateStyles": {
                "selected": {
                    "fill": "#1890FF",
                    "cursor": "move"
                }
            },
            "type": "rect",
            "size": [
                80,
                40
            ],
            "icon": {
                "show": true
            },
            "style": {}
        }
    ],
    "edges": [],
    "combos": []
}

平台

• 操作系统: [Windows]
• 网页浏览器: [Google Chrome]
• G6 版本: [4.5.5 ]

屏幕截图或视频（可选）

No response

补充说明（可选）

No response

[MrHuang123]

有什么解决方案吗

[Yanyan-Wang]

是的这是 G6 内部没做数据隔离的原因，如果做了数据隔离，defaultNode 、nodeStateStyles 里面的配置都不会被写入到原数据，不只是 nodeStateStyles。目前如果要隔离数据，可以在给 G6 数据 graph.data(data) 之前，先做一次深拷贝