想知道源码中拖拽节点后锚点位置更新的逻辑,因为在拖拽自定义节点的过程中,两个锚点的位置并不是两节点最近的连接方式 #4941
XiaoRIGE posted onGitHub
问题描述
在拖拽自定义节点过程中,两个节点上的锚点没有匹配到我期望的位置(两节点最近的两个锚点相连接)
重现链接
重现步骤
目前找到的代码时g6-core中node.js里边在Node原型上定义的getLinkPoint方法,请问拖拽过程中锚点的更新是通过这个方法实现的吗?
预期行为
期望效果是不管怎么拖拽,两节点连选中的锚点是连线最短的两个锚点。
平台
- 操作系统: [macOS, Windows, Linux, React Native ...]
- 网页浏览器: [Google Chrome, Safari, Firefox]
- G6 版本: [4.5.1 ... ]
屏幕截图或视频(可选)
补充说明(可选)
No response
这个是自定义节点吗?
是自定义节点,相关自定义代码如下
G6.registerNode(
'System',
{
size: 200,
drawShape: function drawShape(cfg, group) {
const colorInfo = getSystemColor(cfg.catalogName)
const shape = group.addShape('rect', {
attrs: {
x: 0,
y: 0,
height: 136,
width: 230,
radius: 2,
stroke: colorInfo[0],
fill: colorInfo[0],
},
name: 'System-rect-bg',
draggable: true,
})
// tags
const tagsLength = cfg.tags?.length || 0
group.addShape('text', {
attrs: {
textBaseline: 'top',
x: 114,
y: 16,
text: fittingStringEllipsis(cfg.name, 215, 16),
fill: colorInfo[2],
fontSize: 16,
fontWeight: 600,
lineHeight: 24,
textAlign: 'center',
fontFamily: 'Daimler CS',
},
name: `System-${cfg.name}`,
draggable: true,
})
group.addShape('text', {
attrs: {
x: 110,
y: 46, // 40,
text: '[software system]',
fill: colorInfo[2],
fontSize: 12,
fontWeight: 400,
lineHeight: 12,
textAlign: 'center',
fontFamily: 'Daimler CS',
},
name: `System-desc`,
draggable: true,
})
group.addShape('text', {
attrs: {
textBaseline: 'top',
y: 60,
x: 116,
text: fittingString(cfg.description, 215, 12),
fill: colorInfo[2],
fontSize: 12,
fontWeight: 400,
lineHeight: 16,
textAlign: 'center',
fontFamily: 'Daimler CS',
},
name: `System-${cfg.content}`,
draggable: true,
})
if (tagsLength !== 2) {
cfg.tags.forEach((item, index) => {
const textWidth =
tagsLength === 1 ? getLetterWidth(item, 12) + 16 : 56
const formatTextWidth = textWidth > 180 ? 180 : textWidth
if (index <= 2) {
group.addShape('rect', {
attrs: {
y: 100,
x:
tagsLength === 1
? (220 - formatTextWidth) / 2 + index * 64 + 4
: 18 + index * 64 + 4,
height: 20,
width: formatTextWidth,
radius: 2,
stroke: colorInfo[1],
},
name: `System-index-rect-${index}`,
draggable: true,
})
group.addShape('text', {
attrs: {
textBaseline: 'top',
y: 106,
x:
tagsLength === 1
? (233 - formatTextWidth) / 2 + index * 64 + 4
: 22 + index * 64 + 4,
fontWeight: 400,
lineHeight: 12,
fontSize: 12,
text: fittingStringEllipsis(item, formatTextWidth, 12),
fill: colorInfo[2],
fontFamily: 'Daimler CS',
},
name: `System-index-value-${index}`,
draggable: true,
})
}
})
} else {
let formatTextWidthTwo = 0
cfg.tags.forEach((item, index) => {
const textWidth =
tagsLength === 1 ? getLetterWidth(item, 12) + 16 : 56
const formatTextWidth = textWidth > 180 ? 180 : textWidth
formatTextWidthTwo += formatTextWidth
if (index <= 2) {
group.addShape('rect', {
attrs: {
y: 100,
x:
index === 0
? formatTextWidthTwo - 8
: formatTextWidthTwo + 4,
height: 20,
width: formatTextWidth + 8,
radius: 2,
stroke: colorInfo[1],
},
name: `System-index-rect-${index}`,
draggable: true,
})
group.addShape('text', {
attrs: {
textBaseline: 'top',
y: 106,
x: index === 0 ? formatTextWidthTwo : formatTextWidthTwo + 8,
fontWeight: 400,
lineHeight: 12,
fontSize: 12,
text: fittingStringEllipsis(item, formatTextWidth, 12),
fill: colorInfo[2],
fontFamily: 'Daimler CS',
},
name: `System-index-value-${index}`,
draggable: true,
})
}
})
}
return shape
},
getAnchorPoints() {
return systemAnchorPoints
},
setState: setActiveState,
},
'rect'
)
测试发现只要是自定义节点都会有点偏移
发现如果自定义图形使用全局配置linkCenter:true,线的位置就是我所期望的位置,但是有个问题是我希望在edge结束的地方设置箭头,如果我配置了linkCenter,那箭头信息就会被盖住。请问能不能不配置linkCenter,也达到这个效果(两节点之前的连线一定是最近的)?或者说linkcenter只配置在source边上?
自定义节点如果是矩形作为 keyShape,应该需要把这个图形的 x y 分别减去宽高的一半,保证自身坐标系的原点位于矩形的中心: x: -width / 2, y: -height / 2
尝试一下,然后锚点文档可以参考:https://g6.antv.antgroup.com/api/items/node-properties#anchorpoints
自定义节点如果是矩形作为 keyShape,应该需要把这个图形的 x y 分别减去宽高的一半,保证自身坐标系的原点位于矩形的中心: x: -width / 2, y: -height / 2
尝试一下,然后锚点文档可以参考:https://g6.antv.antgroup.com/api/items/node-properties#anchorpoints
成功解决了我的问题,非常感谢!
另外是不是可以考虑将这个写到自定义节点文档里,方便以后大家使用。