antvis / antvis/X6

自定义节点,锚点问题问题

Open
#4,197 0 comments 0 reactions 0 assignees View on GitHub
Dominant language
TypeScript
Stars
6.7k
Forks
1.9k
PR merge metrics
No merged PRs in 30d

Description

### 问题描述

![image](https://github.com/antvis/X6/assets/25027143/d5708014-8be8-4ced-a349-3a7620655ca7)

自定义一个节点,作为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

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

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.