antvis / antvis/X6

selection 插件 edge 选择框 显示位置不对

Open
#4,280 1 comment 0 reactions 0 assignees View on GitHub
oscp type: bug 缺陷
Dominant language
TypeScript
Stars
6.7k
Forks
1.9k
PR merge metrics
No merged PRs in 30d

Description

### Describe the bug

自定义节点 markup时候,子元素设置magnet ,然后子元素拖拽出连接线,点击连接线,连接线的框选框位置偏移
![image](https://github.com/antvis/X6/assets/25027143/139338fe-4208-410d-b67a-58926086f39f)
![image](https://github.com/antvis/X6/assets/25027143/ff26bf31-0fc5-4a6a-b207-988450d9017a)

### 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

Open the contributing 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

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.