Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

2.X node-editor工具双击节点时节点的attrs.text.text被清空,无法获取到 #4293

Open
wxymmxf opened this issue May 7, 2024 · 3 comments

Comments

@wxymmxf
Copy link

wxymmxf commented May 7, 2024

Describe the bug

2.X node-editor工具双击节点时节点的attrs.text.text被清空,无法获取到

Your Example Website or App

https://x6.antv.antgroup.com/examples/node/tool/#editable

Steps to Reproduce the Bug or Issue

1.给节点的label, text都赋值
2.添加node-editor工具
3.双击节点,发现text.text被清空

Expected behavior

参考:https://codesandbox.io/p/sandbox/charming-tharp-5yhxrn

Screenshots or Videos

kk.2024-05-07.23-32-23.mp4

Platform

  • OS: Windows
  • Browser: Chrome
  • Version: 2.18.1

Additional context

No response

@x6-bot
Copy link
Contributor

x6-bot bot commented May 7, 2024

👋 @wxymmxf

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.

@wxymmxf
Copy link
Author

wxymmxf commented May 7, 2024

import { Graph } from "@antv/x6";

const container = document.getElementById("container")!;
const graph = new Graph({
container,
grid: true,
});

const source = graph.addNode({
x: 180,
y: 60,
width: 100,
height: 40,
attrs: {
body: {
stroke: "#5F95FF",
fill: "#EFF4FF",
strokeWidth: 1,
},
text: {
text: "text",
},
label: {
text: "label",
},
},
tools: [
{
name: "node-editor",
args: {
attrs: {
backgroundColor: "#EFF4FF",
},
},
},
],
});

const target = graph.addNode({
x: 320,
y: 250,
width: 100,
height: 40,
attrs: {
body: {
stroke: "#5F95FF",
fill: "#EFF4FF",
strokeWidth: 1,
},
text: {
text: "text",
},
label: {
text: "label",
},
},
tools: [
{
name: "node-editor",
args: {
attrs: {
backgroundColor: "#EFF4FF",
},
},
},
],
});

graph.addEdge({
source,
target,
attrs: {
line: {
stroke: "#A2B1C3",
strokeWidth: 2,
},
},
tools: [
{
name: "edge-editor",
args: {
attrs: {
backgroundColor: "#fff",
},
},
},
],
});

graph.on("cell:dblclick", ({ cell, e }) => {
console.log(cell.attrs.text.text);
});

@wxymmxf
Copy link
Author

wxymmxf commented May 7, 2024

如果节点的初始化不添加node-editor工具,在双击事件中动态添加,则无法实现双击编辑,编辑光标一闪而过。
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',
},
},
})

console.log('cell', cell, e)

})

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

1 participant