如何先在画布上创建好边（边的起点和终点是画布上的坐标），然后拖拽边的起点或终点，连接到目标节点上？

[LiuyingAudrey]

Describe the bug

如何先在画布上创建好边（边的起点和终点是画布上的坐标），然后拖拽边的起点或终点，连接到目标节点上？不是通过拖拽源节点上的连接桩指向目标节点创建边。

Your Example Website or App

没有

Steps to Reproduce the Bug or Issue

const trustEdge = new Shape.Edge({ source: { x: 100, y: 100 }, target: { x: 300, y: 200 }, labels: ['信任边界'], attrs: { line: { stroke: '#ff0000', strokeDasharray: '5, 2', sourceMarker: { r: 3, attrs: { stroke: '#7c68fc' } }, targetMarker: { r: 3, attrs: { stroke: '#ff0000' } } } }, connector: { name: 'smooth' }, tools: { name: 'segments', args: { snapRadius: 20, attrs: { fill: '#444' } } } }) graph.addEdge(trustEdge)

Expected behavior

可以给出一个小demo吗？感谢

Screenshots or Videos

No response

Platform

• Browser: [e.g. Chrome, Safari, Firefox]

Additional context

No response

[x6-bot[bot]]

👋 @LiuyingAudrey

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.

[DanielLeefu]

connecting设置allowBlank: true 后，可以参考下官网这个案例 https://x6.antv.vision/zh/examples/showcase/faq#validate-connection

[tonywu6]

如上 @DanielLeefu 提到：配置 allowBlank: true, 然后为 Edge 添加 source-arrowhead 和 target-arrowhead tools

Demo

[LiuyingAudrey]

@tonywu6 @DanielLeefu 非常感谢二位的回答，很有帮助，目前是可以了。 我又有一个新的问题：先拖拽边的target到节点的链接桩时，要自动吸附的port会高亮，然后再拖拽source到节点的链接桩时，要自动吸附的port也会高亮。但是如果先拖拽边的source到连接到节点的port，此时port不会高亮。我怎么设置才能使先拖拽source要吸附的port也能高亮呢？就是不限制这个顺序？ 1.画的边如下 const directionEdge = new Shape.Edge({ source: { x: 100, y: 100 }, target: { x: 50, y: 100 }, labels: [text], connector: { name: 'smooth' }, attrs: { line: { stroke: '#A2B1C3', targetMarker: 'classic', sourceMarker: 'classic' } }, tools: { name: 'segments', args: { snapRadius: 20, attrs: { fill: '#444' } } } }) return graph.value.addEdge(directionEdge) 2.要连接的节点如下 2.1连接桩 const ports = { groups: { top: { position: 'top', attrs: { circle: { r: 4, magnet: true, stroke: '#5F95FF', strokeWidth: 1, fill: '#fff', style: { visibility: 'visible' } } } }, right: { position: 'right', attrs: { circle: { r: 4, magnet: true, stroke: '#5F95FF', strokeWidth: 1, fill: '#fff', style: { visibility: 'visible' } } } }, bottom: { position: 'bottom', attrs: { circle: { r: 4, magnet: true, stroke: '#5F95FF', strokeWidth: 1, fill: '#fff', style: { visibility: 'visible' } } } }, left: { position: 'left', attrs: { circle: { r: 4, magnet: true, stroke: '#5F95FF', strokeWidth: 1, fill: '#fff', style: { visibility: 'visible' } } } } }, items: [ { group: 'top' }, { group: 'right' }, { group: 'bottom' }, { group: 'left' } ] } 2.2自定义节点 // 自定义服务存储节点 Graph.registerNode('custom-service', { inherit: 'circle', markup: [ { tagName: 'circle', selector: 'body' }, { tagName: 'image' }, { tagName: 'text', selector: 'label' } ], attrs: { body: { stroke: '#b3b3b3', fill: '#fff' }, image: { width: 36, height: 36, refX: 18, refY: 18 }, label: { refX: 0, refY: 36, textAnchor: 'start', textVerticalAnchor: 'middle', fontSize: 12, fill: '#333' } }, ports: { ...ports } }, true) 2.3创建节点 const customServiceNode = graph.createNode({ shape: 'custom-service', width: 40 * 2, height: 40 * 2, attrs: { body: { stroke: '#b3b3b3', fill: '#fff' }, image: { 'xlink:href': node.attrs.image['xlink:href'], refX: 18, refY: 18, opacity: 0.3, zIndex: 99999 }, label: { refX: 9, refY: 36, fontSize: 14, fill: '#333', text: node.attrs.text.text } } }) return customServiceNode 2.4鼠标进入和离开节点时加tools graph.value.on('edge:mouseenter', ({ cell }) => { cell.addTools([ 'source-arrowhead', 'target-arrowhead', { name: 'source-arrowhead', args: { attrs: { fill: 'green' } } }, { name: 'target-arrowhead', args: { attrs: { fill: 'red' } } } ]) }) graph.value.on('edge:mouseleave', ({ cell }) => { cell.removeTools() }) 2.4 new Graph时的connecting的设置 connecting: { router: { name: 'manhattan', args: { padding: 1 } }, connector: { name: 'rounded', args: { radius: 8 } }, anchor: 'center', connectionPoint: 'anchor', allowBlank: true, snap: { radius: 60 }, validateConnection({ sourceView, targetView, targetMagnet }) { if (targetMagnet) { return true } } }, // highlight port style highlighting: { magnetAdsorbed: { name: 'stroke', args: { attrs: { fill: '#5F95FF', stroke: '#5F95FF' } } } }, resizing: true, rotating: true, selecting: { enabled: true, rubberband: true, showNodeSelectionBox: true }, snapline: true, keyboard: true, clipboard: true })

[LiuyingAudrey]

[LiuyingAudrey]

已解决 设置 validateConnection({ targetMagnet, sourceMagnet }) { if (targetMagnet || sourceMagnet) { return true } }

[x6-bot[bot]]

This thread has been automatically locked because it has not had recent activity.

Please open a new issue for related bugs and link to relevant comments in this thread.