自定义节点,锚点问题问题
- Dominant language
- TypeScript
- Stars
- 6.7k
- Forks
- 1.9k
- PR merge metrics
- No merged PRs in 30d
Description
### 问题描述

自定义一个节点,作为edge的source,锚点应该是节点bbox,但却是内部元素
### 重现链接
代码如下
### 重现步骤
import { Graph } from '@antv/x6'
import { Transform } from '@antv/x6-plugin-transform'
const graph = new Graph({
container: document.getElementById('container'),
connecting:{
router:'normal',
connector: {
name:'normal',
args:{radius:8}
},
anchor:'midSide',
connectionPoint:'bbox',
},
grid: true,
})
let source = graph.addNode({
x: 500,
y: 200,
width: 100,
height: 100,
markup: [
{ tagName: 'polygon', selector: 'polygon4' },
{ tagName: 'rect', selector: 'polygon4rect', refFlag: true },
{ tagName: 'rect', selector: 'bg' },
],
attrs: {
bg: {
fill: "none",
pointerEvents: "all",
refHeight: "100%",
refWidth: "100%",
stroke: "none"
},
rect: {
fill: "#ffffff",
stroke: "#333333",
strokeWidth: 2
},
body: {
refWidth: "100%",
refHeight: "100%",
fill: "none",
strokeWidth: 0,
stroke: "none"
},
polygon4: {
refWidth: "100%",
refHeight: "100%",
stroke: "#8f8f8f",
strokeWidth: 2,
fill: "transparent",
rx: 0,
ry: 0,
refPoints: "38,36 68,36 68,62 38,62",
refX: 0,
refY: 0,
ref: "polygon4rect",
id: "c642e4b4-a05c-4f6d-b2b3-5f220b329347"
},
polygon4rect: {
refX: 0.38,
refY: 0.36,
refWidth: 0.3,
refHeight: 0.26,
fill: "none",
stroke: "none"
},
}
})
graph.use(
new Transform({
resizing: true,
rotating: true,
}),
)
let target = graph.addNode({
id: 'b',
x: 800,
y: 260,
width: 100,
height: 40,
attrs: {
body: {
fill: '#f5f5f5',
stroke: '#d9d9d9',
},
},
})
let edge = graph.addEdge({
source,
target,
// https://x6.antv.vision/zh/docs/api/registry/connector#normal
// connector: { name: 'normal' },
attrs: {
line: {
stroke: '#722ed1',
},
},
})
console.log(edge)
### 预期行为
期望是bbox
### 平台
- 操作系统: [macOS, Windows, Linux, React Native ...]
- 网页浏览器: [Google Chrome, Safari, Firefox ...]
- X6 版本: [2.11.1 ...]
### 屏幕截图或视频(可选)
_No response_
### 补充说明(可选)
_No response_
Contributor guide
Research direction
Start by running the supplied Graph configuration with the custom node markup and its midSide anchor and bbox connectionPoint settings. Read the anchor and connection-point behavior involved in custom nodes, then compare the observed source anchor with the expected node bbox. Done when the reproduction confirms the intended bbox behavior and is covered by an appropriate regression test.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- javascript, typescript
- Domain
- frontend, web-dev
- Issue type
- Bug
- Difficulty
- 3/5
- Estimated time
- 1-2 days
- Activity status
- Stale
- Clarity
- Needs clarification
- Newbie friendliness
- 30/100