antvis / X6

🚀 JavaScript diagramming library that uses SVG and HTML for rendering.
https://x6.antv.antgroup.com
MIT License
5.67k stars 1.69k forks source link

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

Open wxymmxf opened 5 months ago

wxymmxf commented 5 months ago

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

https://github.com/antvis/X6/assets/34330221/1adb11af-592c-4a93-9518-625c0b2ca110

Platform

Additional context

No response

x6-bot[bot] commented 5 months ago

👋 @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 commented 5 months ago

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 commented 5 months ago

如果节点的初始化不添加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)

})