「AntV」x6 节点换肤问题

🖼️ | 根据条件加载不同的配置

场景来源于系统换肤，我的系统有换肤这个功能，一个是深色模式，一个是浅色模式，不同的模式要显示不同风格的节点配置，比如浅色模式下edge的颜色要为黑色，节点的图标也要换成浅色模式的……

如何重新初始化画布？

// 使用计算属性获取当前系统模式（light/dark）
const getTheme = computed(() => {
   
  return theme.value;
})

// watch 监听主题变化重新初始化画布，initGraph 方法里面就是x6的那些七七八八的配置
watch(theme, val => {
   
  initGraph(val);
  // if (route.query.id) {
   
  //   getModelInfo(route.query.id);
  // }
});

// initGraph的方法 currentTheme就是当前监听到的主题模式
const initGraph = currentTheme => {
   
  let tempConfig = currentTheme === 'light' ? graphConfigLight : graphConfig;
  // 这里必须要先销毁下再初始化
  if (graph) {
   
    graph.dispose();
  }
  graph = null;
  graph = new Graph({
   
    container: proxy.$refs.container,
    width: '100%',
    ...tempConfig
  });
  // 如果后面还有使用插件的地方就继续往下写
}

不通过加载画布配置？

如果不通过重载画布的方法，那我们就不需要定义两种配置了，只需要考虑怎么把所有的节点和线的配置给更新掉就行了。这里先说一下线的更改方法，因为线更新比较简单

// 首先你得有监听主题色变化的方法
watch(theme, val => {
   
  // 先获取画布上的所有线
  const edges = graph.getEdges();
  // 对线进行遍历，根据主题动态设置线的颜色
  edges.forEach(item => {
   
    item.attr('line/stroke', val === 'light' ? '#4160ff' : '#028FA6'); // 将边的颜色设置为红色
  });
});

虽然现在把画布上所有线的颜色更新了，但是还有个问题：就是从连接桩拉出来的那个线的颜色还没有改，由于这个拉出来线的配置我是写在了一个单独的配置文件中，要想改这个配置那就必须得再重新加载画布配置，那岂不是又把问题引到通过初始化画布的方法去改样式了吗？于是乎开始在社区摇人，问问别人有没有遇到过类似的问题，果然有位大佬说她大概知道我的需求

监听从连接桩拉取线的事件，然后对这个edge进行更新颜色就行了

graph.on('edge:changed', ({
     edge }) => {
   
  edge.attr('line/stroke', theme.value === 'light' ? '#4160ff' : '#028FA6');
});

线的问题解决了，现在开始讲节点如何更新。我最初的想法是遍历所有的节点，然后把每一个节点data里面的图片字段更新下就行了，然后再重新渲染下节点；然而这个方法并没有奏效，反而还报错了……下面是我写的垃圾代码

watch(theme, val => {
   
  const nodes = graph.getNodes();
  nodes.forEach(item