[Bug]: combo-combined 组合布局 首次拖拽节点开始时 节点位置会飞离鼠标当前位置 再次点击时没有问题

[ltc10000]

Describe the bug / 问题描述

combo-combined 组合布局
初始化时节点样式 传入xy坐标时
首次拖拽节点时 节点会脱离鼠标位置。再次拖拽鼠标时 不会脱离鼠标位置 看复现视频。

当节点样式 不传入 x y 属性时 拖拽节点 不会出现视频中的问题。

node: { type: "ripple-circle", style: (d) => { return { fill: "#fff", stroke: "#ffffff", lineWidth: 1, labelText: d.label, // 节点图标样式 size: [40, 40], icon: true, x: d.data.x, // 不传入xy坐标时 不会出现上述问题 y: d.data.y, iconSrc: '', iconWidth: 40, iconHeight: 40, }; }, },

2025-05-05.19.22.39.mp4

Reproduction link / 复现链接

No response

Steps to Reproduce the Bug or Issue / 重现步骤

官方demo的数据中 添加 xy 数据 就可复现

完整代码 如下 可直接运行

`

<script setup> import { ref, onMounted, onBeforeUnmount, nextTick } from "vue"; import { Graph, NodeEvent, ComboEvent, EdgeEvent } from "@antv/g6"; const container = ref(null); let graph = null; const initGraph = (data) => { graph = new Graph({ container: "container", data, layout: { type: "combo-combined", comboPadding: 2, }, node: { style: { size: 20, labelText: (d) => d.id, x: (d) => d.x, y: (d) => d.y, }, palette: { type: "group", field: (d) => d.combo, }, }, edge: { style: (model) => { const { size, color } = model.data; return { stroke: color || "#99ADD1", lineWidth: size || 1, }; }, }, behaviors: ["drag-element", "drag-canvas", "zoom-canvas"], autoFit: "view", }); graph.render(); // 监听节点点击事件 graph.on(NodeEvent.CLICK, (evt) => { console.log("节点被点击:", evt); }); // 监听组合节点点击事件 graph.on(ComboEvent.CLICK, (evt) => { console.log("组合节点被点击:", evt); }); // 监听边点击事件 graph.on(EdgeEvent.CLICK, (evt) => { console.log("边被点击:", evt); }); // 监听节点拖拽事件 graph.on(NodeEvent.DRAG_END, (evt) => { console.log("节点被拖动:", evt); }); // 监听组合节点拖拽事件 graph.on(ComboEvent.DRAG_END, (evt) => { console.log("组合节点被拖动:", evt); }); }; const getData = () => { const dataSource = { nodes: [ { id: "0", combo: "a", x: 100, y: 100, }, { id: "1", combo: "a", x: 200, y: 200 }, { id: "2", combo: "a", }, { id: "3", combo: "a", }, { id: "4", combo: "a", }, { id: "5", combo: "a", }, { id: "6", combo: "a", }, { id: "7", combo: "a", }, { id: "8", combo: "a", }, { id: "9", combo: "a", }, { id: "10", combo: "a", }, { id: "11", combo: "a", }, { id: "12", combo: "a", }, { id: "13", combo: "a", }, { id: "14", combo: "a", }, { id: "15", combo: "a", }, { id: "16", combo: "b", }, { id: "17", combo: "b", }, { id: "18", combo: "b", }, { id: "19", combo: "b", }, { id: "20", }, { id: "21", }, { id: "22", }, { id: "23", combo: "c", }, { id: "24", combo: "a", }, { id: "25", }, { id: "26", }, { id: "27", combo: "c", }, { id: "28", combo: "c", }, { id: "29", combo: "c", }, { id: "30", combo: "c", }, { id: "31", combo: "c", }, { id: "32", combo: "d", }, { id: "33", combo: "d", }, ], edges: [ { source: "0", target: "1", }, { source: "0", target: "2", }, { source: "0", target: "3", }, { source: "0", target: "4", }, { source: "0", target: "5", }, { source: "0", target: "7", }, { source: "0", target: "8", }, { source: "0", target: "9", }, { source: "0", target: "10", }, { source: "0", target: "11", }, { source: "0", target: "13", }, { source: "0", target: "14", }, { source: "0", target: "15", }, { source: "0", target: "16", }, { source: "2", target: "3", }, { source: "4", target: "5", }, { source: "4", target: "6", }, { source: "5", target: "6", }, { source: "7", target: "13", }, { source: "8", target: "14", }, { source: "9", target: "10", }, { source: "10", target: "22", }, { source: "10", target: "14", }, { source: "10", target: "12", }, { source: "10", target: "24", }, { source: "10", target: "21", }, { source: "10", target: "20", }, { source: "11", target: "24", }, { source: "11", target: "22", }, { source: "11", target: "14", }, { source: "12", target: "13", }, { source: "16", target: "17", }, { source: "16", target: "18", }, { source: "16", target: "21", }, { source: "16", target: "22", }, { source: "17", target: "18", }, { source: "17", target: "20", }, { source: "18", target: "19", }, { source: "19", target: "20", }, { source: "19", target: "33", }, { source: "19", target: "22", }, { source: "19", target: "23", }, { source: "20", target: "21", }, { source: "21", target: "22", }, { source: "22", target: "24", }, { source: "22", target: "25", }, { source: "22", target: "26", }, { source: "22", target: "23", }, { source: "22", target: "28", }, { source: "22", target: "30", }, { source: "22", target: "31", }, { source: "22", target: "32", }, { source: "22", target: "33", }, { source: "23", target: "28", }, { source: "23", target: "27", }, { source: "23", target: "29", }, { source: "23", target: "30", }, { source: "23", target: "31", }, { source: "23", target: "33", }, { source: "32", target: "33", }, ], combos: [ { id: "a", data: { label: "Combo A", }, }, { id: "b", data: { label: "Combo B", }, }, { id: "c", data: { label: "Combo D", }, }, { id: "d", combo: "b", data: { label: "Combo D", }, }, ], }; initGraph(dataSource); }; onMounted(() => { nextTick(() => { getData(); }); }); </script> <style lang="scss" scoped> .container { width: 100%; height: 100%; } </style>

`

Version / 版本

"@antv/g6": "^5.0.47",

OS / 操作系统

• macOS
• Windows
• Linux
• Others / 其他

Browser / 浏览器

• Chrome
• Edge
• Firefox
• Safari (Limited support / 有限支持)
• IE (Nonsupport / 不支持)
• Others / 其他

[github-actions]

📝 To help us better understand and address your issue, please provide more information, or use the standard format, otherwise we will not process this issue.

Reference document:

• Creating an issue
• Basic writing and formatting syntax

---

📝 为了帮助我们更好地理解和解决你的问题，请提供更多信息，或者使用规范的格式，否则我们不会处理这个 issue。

参考文档：

• 创建议题
• 基本撰写和格式语法

[ltc10000]

@yvonneyx 以下为官方demo 复现代码 可直接运行。
`

<script setup> import { ref, onMounted, onBeforeUnmount, nextTick } from "vue"; import { Graph, NodeEvent, ComboEvent, EdgeEvent } from "@antv/g6"; const container = ref(null); let graph = null; const initGraph = (data) => { graph = new Graph({ container: "container", data, layout: { type: "combo-combined", comboPadding: 2, }, node: { style: { size: 20, labelText: (d) => d.id, x: (d) => d.x, y: (d) => d.y, }, palette: { type: "group", field: (d) => d.combo, }, }, edge: { style: (model) => { const { size, color } = model.data; return { stroke: color || "#99ADD1", lineWidth: size || 1, }; }, }, behaviors: ["drag-element", "drag-canvas", "zoom-canvas"], autoFit: "view", }); graph.render(); // 监听节点点击事件 graph.on(NodeEvent.CLICK, (evt) => { console.log("节点被点击:", evt); }); // 监听组合节点点击事件 graph.on(ComboEvent.CLICK, (evt) => { console.log("组合节点被点击:", evt); }); // 监听边点击事件 graph.on(EdgeEvent.CLICK, (evt) => { console.log("边被点击:", evt); }); // 监听节点拖拽事件 graph.on(NodeEvent.DRAG_END, (evt) => { console.log("节点被拖动:", evt); }); // 监听组合节点拖拽事件 graph.on(ComboEvent.DRAG_END, (evt) => { console.log("组合节点被拖动:", evt); }); }; const getData = () => { const dataSource = { nodes: [ { id: "0", combo: "a", x: 100, y: 100, }, { id: "1", combo: "a", x: 200, y: 200 }, { id: "2", combo: "a", }, { id: "3", combo: "a", }, { id: "4", combo: "a", }, { id: "5", combo: "a", }, { id: "6", combo: "a", }, { id: "7", combo: "a", }, { id: "8", combo: "a", }, { id: "9", combo: "a", }, { id: "10", combo: "a", }, { id: "11", combo: "a", }, { id: "12", combo: "a", }, { id: "13", combo: "a", }, { id: "14", combo: "a", }, { id: "15", combo: "a", }, { id: "16", combo: "b", }, { id: "17", combo: "b", }, { id: "18", combo: "b", }, { id: "19", combo: "b", }, { id: "20", }, { id: "21", }, { id: "22", }, { id: "23", combo: "c", }, { id: "24", combo: "a", }, { id: "25", }, { id: "26", }, { id: "27", combo: "c", }, { id: "28", combo: "c", }, { id: "29", combo: "c", }, { id: "30", combo: "c", }, { id: "31", combo: "c", }, { id: "32", combo: "d", }, { id: "33", combo: "d", }, ], edges: [ { source: "0", target: "1", }, { source: "0", target: "2", }, { source: "0", target: "3", }, { source: "0", target: "4", }, { source: "0", target: "5", }, { source: "0", target: "7", }, { source: "0", target: "8", }, { source: "0", target: "9", }, { source: "0", target: "10", }, { source: "0", target: "11", }, { source: "0", target: "13", }, { source: "0", target: "14", }, { source: "0", target: "15", }, { source: "0", target: "16", }, { source: "2", target: "3", }, { source: "4", target: "5", }, { source: "4", target: "6", }, { source: "5", target: "6", }, { source: "7", target: "13", }, { source: "8", target: "14", }, { source: "9", target: "10", }, { source: "10", target: "22", }, { source: "10", target: "14", }, { source: "10", target: "12", }, { source: "10", target: "24", }, { source: "10", target: "21", }, { source: "10", target: "20", }, { source: "11", target: "24", }, { source: "11", target: "22", }, { source: "11", target: "14", }, { source: "12", target: "13", }, { source: "16", target: "17", }, { source: "16", target: "18", }, { source: "16", target: "21", }, { source: "16", target: "22", }, { source: "17", target: "18", }, { source: "17", target: "20", }, { source: "18", target: "19", }, { source: "19", target: "20", }, { source: "19", target: "33", }, { source: "19", target: "22", }, { source: "19", target: "23", }, { source: "20", target: "21", }, { source: "21", target: "22", }, { source: "22", target: "24", }, { source: "22", target: "25", }, { source: "22", target: "26", }, { source: "22", target: "23", }, { source: "22", target: "28", }, { source: "22", target: "30", }, { source: "22", target: "31", }, { source: "22", target: "32", }, { source: "22", target: "33", }, { source: "23", target: "28", }, { source: "23", target: "27", }, { source: "23", target: "29", }, { source: "23", target: "30", }, { source: "23", target: "31", }, { source: "23", target: "33", }, { source: "32", target: "33", }, ], combos: [ { id: "a", data: { label: "Combo A", }, }, { id: "b", data: { label: "Combo B", }, }, { id: "c", data: { label: "Combo D", }, }, { id: "d", combo: "b", data: { label: "Combo D", }, }, ], }; initGraph(dataSource); }; onMounted(() => { nextTick(() => { getData(); }); }); </script> <style lang="scss" scoped> .container { width: 100%; height: 100%; } </style>

`

[ltc10000]

也就是说 初始化的时候 节点 分组的style的坐标x y 是不能动态传入的
传入的话 节点拖拽时 会脱离鼠标的位置。
但实际保存下来的坐标位置 确实是 鼠标所在的位置。
@yvonneyx