怎么让连接桩的位置随自定义节点的宽高自动变化

[QDmqf]

问题描述

在vue中使用自定义节点，然后通过配置创建了连接桩，但是节点的宽高在会伴随输入的内容自动变化，导致连接桩错位

重现链接

怎么让连接桩的位置随自定义节点的宽高自动变化

重现步骤

创建自定义节点，配置连接桩，动态修改节点的宽高

预期行为

连接桩的位置随节点的宽高自动变化

平台

• 操作系统: [macOS, Windows, Linux, React Native ...]
• 网页浏览器: [Google Chrome, Safari, Firefox ...]
• X6 版本: [2.11.1 ...]

屏幕截图或视频（可选）

2024-12-11.17.13.58.mov

补充说明（可选）

No response

[x6-bot]

👋 @QDmqf

Thanks for opening your first issue here! If you're reporting a 🐞 bug, please make sure you include steps to reproduce it.
To help make it easier for us to investigate your issue, please follow the contributing guidelines.
We get a lot of issues on this repo, so please be patient and we will get back to you as soon as we can.

[QDmqf]

port: { markup: [ { tagName: 'circle', selector: 'circle', }, ], position: { name: 'bottom', args: { x: 0, y: 0 }, }, attrs: { circle: { r: 4, strokeWidth: 2, stroke: '#6A93FF', fill: '#fff', magnet: true, }, }, zIndex: 3, label: { position: { name: 'top', }, }, },
连接桩相关配置

[SunYuanOnly]

可以试试坐标用百分比

[SunYuanOnly]

// 添加自定义连接桩 const addCustomPort = (x: number, y: number, node: Node) => { const bbox = node.getBBox() const { width, height } = node.size() const nodePosition = { x: x - bbox.x, y: y - bbox.y } node.addPort({ group: 'custom', attrs: { text: { text: '' } }, args: { x: ${(nodePosition.x / width) * 100}%, y: ${(nodePosition.y / height) * 100}% } }) }

[QDmqf]

// 添加自定义连接桩 const addCustomPort = (x: number, y: number, node: Node) => { const bbox = node.getBBox() const { width, height } = node.size() const nodePosition = { x: x - bbox.x, y: y - bbox.y } node.addPort({ group: 'custom', attrs: { text: { text: '' } }, args: { x: ${(nodePosition.x / width) * 100}%, y: ${(nodePosition.y / height) * 100}% } }) }

感谢

[SunYuanOnly]

// 添加自定义连接桩 const addCustomPort = (x: number, y: number, node: Node) => { const bbox = node.getBBox() const { width, height } = node.size() const nodePosition = { x: x - bbox.x, y: y - bbox.y } node.addPort({ group: 'custom', attrs: { text: { text: '' } }, args: { x: ${(nodePosition.x / width) * 100}%, y: ${(nodePosition.y / height) * 100}% } }) }

感谢

还需要考虑旋转的情况
const addCustomPort = (x: number, y: number, node: Node) => {
const bbox = node.getBBox()
const { width, height } = node.size()
const angle = node.angle() // 获取节点的旋转角度

// 计算点击位置相对于节点左上角的偏移
let nodePosition = {
x: x - bbox.x,
y: y - bbox.y
}

// 将角度转换为弧度
const radians = angle * (Math.PI / 180)

// 计算旋转中心，节点的中心
const centerX = bbox.x + width / 2
const centerY = bbox.y + height / 2

// 平移点击位置，使其相对于旋转中心
const translatedX = nodePosition.x - (centerX - bbox.x)
const translatedY = nodePosition.y - (centerY - bbox.y)

// 进行逆旋转变换
const rotatedX =
translatedX * Math.cos(-radians) - translatedY * Math.sin(-radians)
const rotatedY =
translatedX * Math.sin(-radians) + translatedY * Math.cos(-radians)

// 平移回相对于节点左上角的位置
nodePosition = {
x: rotatedX + (centerX - bbox.x),
y: rotatedY + (centerY - bbox.y)
}

console.log('nodePosition')
console.log(nodePosition)

node.addPort({
group: 'custom',
attrs: {
text: { text: '' }
},
args: {
x: ${(nodePosition.x / width) * 100}%,
y: ${(nodePosition.y / height) * 100}%
}
})
}