selection 插件 edge 选择框 显示位置不对
- Dominant language
- TypeScript
- Stars
- 6.7k
- Forks
- 1.9k
- PR merge metrics
- No merged PRs in 30d
Description
### Describe the bug
自定义节点 markup时候,子元素设置magnet ,然后子元素拖拽出连接线,点击连接线,连接线的框选框位置偏移


### Your Example Website or App
代码如下
### Steps to Reproduce the Bug or Issue
import { Graph } from '@antv/x6'
import { Selection } from '@antv/x6-plugin-selection'
import { Transform } from '@antv/x6-plugin-transform'
const graph = new Graph({
container: document.getElementById('container'),
grid: true,
})
graph.use(
new Selection({
enabled: true,
multiple: true,
rubberband: true,
movable: true,
showNodeSelectionBox: true,
showEdgeSelectionBox: true,
}),
)
graph.use(
new Transform({
resizing: true,
rotating: true,
}),
)
graph.addNode({
x: 0,
y: 0,
width: 96,
height: 96,
markup: [
{
tagName: 'path',
selector: 'eye1',
groupSelector: 'eye',
attrs: {
d: 'M24.82,48.678c5.422,0,9.832-6.644,9.832-14.811c0-8.165-4.41-14.809-9.832-14.809s-9.833,6.644-9.833,14.809C14.987,42.034,19.399,48.678,24.82,48.678z',
},
},
{
tagName: 'path',
selector: 'eye2',
groupSelector: 'eye',
attrs: {
d: 'M71.606,48.678c5.422,0,9.833-6.644,9.833-14.811c0-8.165-4.411-14.809-9.833-14.809c-5.421,0-9.831,6.644-9.831,14.809C61.775,42.034,66.186,48.678,71.606,48.678z',
magnet:true
},
},
{
tagName: 'path',
selector: 'lip',
attrs: {
d: 'M95.855,55.806c-0.6-0.605-1.516-0.77-2.285-0.4C81.232,61.29,65.125,64.53,48.214,64.53c-16.907,0-33.015-3.24-45.354-9.123c-0.77-0.367-1.688-0.205-2.284,0.4c-0.599,0.606-0.747,1.526-0.369,2.29c5.606,11.351,25.349,19.277,48.008,19.277c22.668,0,42.412-7.929,48.012-19.279C96.603,57.332,96.453,56.411,95.855,55.806z',
},
},
],
attrs: {
lip: {
fill: '#E0A31A',
},
eye: {
fill: '#730000',
},
},
})
graph.addNode({
x: 520,
y: 0,
width: 96,
height: 96,
markup: [
{
tagName: 'path',
selector: 'eye1',
groupSelector: 'eye',
attrs: {
d: 'M24.82,48.678c5.422,0,9.832-6.644,9.832-14.811c0-8.165-4.41-14.809-9.832-14.809s-9.833,6.644-9.833,14.809C14.987,42.034,19.399,48.678,24.82,48.678z',
magnet:true
},
},
{
tagName: 'path',
selector: 'eye2',
groupSelector: 'eye',
attrs: {
d: 'M71.606,48.678c5.422,0,9.833-6.644,9.833-14.811c0-8.165-4.411-14.809-9.833-14.809c-5.421,0-9.831,6.644-9.831,14.809C61.775,42.034,66.186,48.678,71.606,48.678z',
},
},
{
tagName: 'path',
selector: 'lip',
attrs: {
d: 'M95.855,55.806c-0.6-0.605-1.516-0.77-2.285-0.4C81.232,61.29,65.125,64.53,48.214,64.53c-16.907,0-33.015-3.24-45.354-9.123c-0.77-0.367-1.688-0.205-2.284,0.4c-0.599,0.606-0.747,1.526-0.369,2.29c5.606,11.351,25.349,19.277,48.008,19.277c22.668,0,42.412-7.929,48.012-19.279C96.603,57.332,96.453,56.411,95.855,55.806z',
},
},
],
attrs: {
lip: {
fill: '#E0A31A',
},
eye: {
fill: '#730000',
},
},
})
### Expected behavior
位置正确
### Screenshots or Videos
_No response_
### Platform
- OS: [e.g. macOS, Windows, Linux]
- Browser: [e.g. Chrome, Safari, Firefox]
- Version: [e.g. 2.11.1]
### Additional context
d
Contributor guide
Research direction
Start by reproducing the supplied Graph example with the Selection and Transform plugins, especially the custom markup paths using magnet. Trace how the Selection plugin positions the edge selection box after a connection is created and clicked. Done means the selection box aligns with the edge in this reproduction.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- typescript
- Domain
- frontend
- Issue type
- Bug
- Difficulty
- 4/5
- Estimated time
- 3-5 days
- Activity status
- Stale
- Clarity
- Mostly clear
- Newbie friendliness
- 35/100