官方示例 node/tool#editable 如何在新增文字后为其添加背景色？addTools 时 markup 的 attrs 不生效。

[hylerrix]

官方示例 https://x6.antv.vision/en/examples/node/tool#editable 演示了如何双击来创建一段文字。现在想要定制其创建好后的样式。

从各种官网的示例中我学到了：markup 里的 selector 和 attrs 都是用来选择到相关的元素进行样式更迭的，因此我加入了如下图代码，并没有生效？

[hylerrix]

我现在理解了 addTools 中的 edge-editor 其实增加了一个游离于 svg 之外的编辑框。编辑保存后才会在 svg 的画布中的这个边上创建一个 label 文字。因此 cell.addTools 也估计不能直接设置 label 的样式了。

现在能想到的是，

1. addTools 之后我手动把画布中所有 labels 重新找到。一个一个增加背景色。但这样肯定不是最优解。
2. 通过 edge 的 defaultLabel 来让创建后立马用上这个样式？
3. x6 新增一个功能，让 addTools 函数返回创建后的 edge 边？这样只需要立马把这个边的标签样式改一下性能会好很多。
4. addTools 时直接传参一个新增完后的 label 应该有的样式。

[cnyballk]

可以试试用监听的方式改 比如

    graph.on('edge:labels:added', (e) => {
      e.added[0].attrs = {
        label: {
          ...e.added[0].attrs.label,
          fontSize: 34,
          fill: '#fff',
        },
        rect: {
          fill: '#000',
        },
      }
    })

编辑的时候可以

  edge.addTools({
    name:'edge-editor',
    args: {
      event: e,
      attrs: {
       fontSize: 34,
       color: '#fff',
       backgroundColor: '#000',
      },
    },
  })

[cnyballk]

创建时可以用默认配置合并 。
https://x6.antv.antgroup.com/api/model/labels#%E9%BB%98%E8%AE%A4%E6%A0%87%E7%AD%BE

[hylerrix]

嗯嗯这个也可以滴，也就是我上面说的第二种方法 👍

[hylerrix]

graph.on('edge:labels:added', (e) => {

感谢！这个不看源码还真很难找到。我也还居然没想到第五种思路——x6 已经内置的 edge:labels:added 事件。搞定咯。