Antv x6双击修改标签错误

[janey0536]

Describe the bug

尝试使用双击修改标签，如果是按照官方API使用attrs.label.text来标识标签的话，双击后获取不到标签内容，修改框为空，代码如下：

const source = graph.addNode({
x: 180,
y: 60,
width: 100,
height: 40,
attrs: {
body: {
stroke: '#5F95FF',
fill: '#EFF4FF',
strokeWidth: 1,
},
label: {
text: 'test'
}
},
})

graph.on('cell:dblclick', ({ cell, e }) => {
const isNode = cell.isNode()
const name = cell.isNode() ? 'node-editor' : 'edge-editor'
cell.removeTool(name)
cell.addTools({
name,
args: {
event: e,
attrs: {
backgroundColor: isNode ? '#EFF4FF' : '#FFF',
},
},
})
})

将node的label改写为text双击就可以获取到标签内容，如下所示：

const source = graph.addNode({
x: 180,
y: 60,
width: 100,
height: 40,
attrs: {
body: {
stroke: '#5F95FF',
fill: '#EFF4FF',
strokeWidth: 1,
},
text: {
text: 'test'
}
},
})

但是attrs.text不是官方API内容，请问这个地方能明确下吗？

Your Example Website or App

chrome

Steps to Reproduce the Bug or Issue

https://x6.antv.vision/zh/examples/node/tool#editable

Expected behavior

attrs.label.text work well

Screenshots or Videos

No response

Platform

• OS: [e.g. macOS, Windows, Linux]
• Browser: [e.g. Chrome, Safari, Firefox]
• Version: [e.g. 91.1]

Additional context

No response

[x6-bot]

👋 @janey0536

Thanks for opening your first issue here! If you're reporting a 🐞 bug, please make sure you include steps to reproduce it.

To help make it easier for us to investigate your issue, please follow the contributing guidelines.

We get a lot of issues on this repo, so please be patient and we will get back to you as soon as we can.

[NewByVector]

因为默认的 setText 方法执行逻辑是：

setText({ cell, value }) {
  cell.attr('text/text', value)
},

所以你这里需要修改成：

const source = graph.addNode({
  x: 180,
  y: 60,
  width: 100,
  height: 40,
  attrs: {
    body: {
      stroke: '#5F95FF',
      fill: '#EFF4FF',
      strokeWidth: 1,
    },
    label: {
      text: 'test'
    }
  },
})

graph.on('cell:dblclick', ({ cell, e }) => {
  const isNode = cell.isNode()
  const name = cell.isNode() ? 'node-editor' : 'edge-editor'
  cell.removeTool(name)
  cell.addTools({
    name,
    args: {
      event: e,
      attrs: {
        backgroundColor: isNode ? '#EFF4FF' : '#FFF',
      },
      setText({ cell, value }) {
        cell.attr('label/text', value)
      },
    },
  })
})

[janey0536]

const source = graph.addNode({
  x: 180,
  y: 60,
  width: 100,
  height: 40,
  attrs: {
    body: {
      stroke: '#5F95FF',
      fill: '#EFF4FF',
      strokeWidth: 1,
    },
    label: {
      text: 'test'
    }
  },

您好，很感谢您的解答，但是这解决不了双击后获取不到标签内容的问题。

[NewByVector]

给个可复现的 demo 吧

[JamesTing]

这个问题，node-editor默认的getText、setText比较诡异，你这么写就能正确获取、修改文字了，千万不要自定义，我试了...
1、定义shape文本的时候，一定要使用attrs外部的label字段，不要在attrs字段写label字段。
2、node-editor里，不要自定义setText、getText。

new Shape.Rect({ //定义shape
    width: 100,
    height: 40,
    label: '圆角矩形',
    attrs: {
        label: {
            fill: '#333',
            textWrap: { width: '100%' },
            fontSize: 16,

        },
        body: {
            stroke: '#333',
            strokeWidth: 2,
            rx: 8,
            ry: 8,
        },
})

graph.on('cell:dblclick', ({ cell, e }) => { // 双击进入编辑模式
    const name = cell.isEdge() ? 'edge-editor' : 'node-editor'
    cell.removeTool(name)
    cell.addTools([
        {
            name,
            args: {
                event: e,
            },
        },
    ])
})

[NewByVector]

@JamesTing getText 和 setText 方法就是为了解决你自定义 label 的场景。

[RionZZZ]

我能理解你们的意思了。如果使用cell.attr('label/text', value)，第一次正常 将“string1”改为“string2”，但是观察cell里面label还是“string1”，只是表面改成功了；第二次双击时 文本框里的原文本会变为“string1”。
那么，使用cell.attr('text/text', value)就没有问题了。可以在这里面做接口请求等操作，最后输出JSON也没有问题。

[x6-bot]

This thread has been automatically locked because it has not had recent activity.

Please open a new issue for related bugs and link to relevant comments in this thread.