实现“线”这种特殊的自定义节点node

[MrMengJ]

想实现一个如图所示的自定义节点，它是一条横线，不能resize，不能rotate，只能通过线段两端的端点来实现线段的长度变化。

请问一下，有没有具体的实现思路指教一下

[JamesTing]

1. 这本质就是边了，不是node。所以，可以通过graph.addEdge创建一条边，source、target指定为坐标。
2. 改变长度的问题，可以直接使用边的tools解决，即source-arrowhead、target-arrowhead。
3. 如果你想实现dnd一条边到画布的效果，可以采用移花接木的方式，即dnd一个path 的node，拖拽到画布后立即删除，同时用第一步的方法创建一条边。

[MrMengJ]

感谢回答，已经通过自定义node实现了

[TLovers]

1. 这本质就是边了，不是node。所以，可以通过graph.addEdge创建一条边，source、target指定为坐标。
2. 改变长度的问题，可以直接使用边的tools解决，即source-arrowhead、target-arrowhead。
3. 如果你想实现dnd一条边到画布的效果，可以采用移花接木的方式，即dnd一个path 的node，拖拽到画布后立即删除，同时用第一步的方法创建一条边。

咨询大佬一个问题，dnd 退拽一条边到画布，拖拽后删除，生成一条边，那这个边的source 和target 不好确定坐标啊

[JamesTing]

graph.on('cell:added', ({ cell, index, options }) => {
    // 因为x6的dnd不支持拖拽line，所以这里做了一个hack
    // 拖拽line时，会生成一个假的line，然后在这里把假的line转换成真的line
    if (cell.getData() && cell.getData().isTheFakeLine) {
        const start = cell.getProp().position
        const end = {
            x: cell.getProp().position.x + cell.getProp().size.width,
            y: cell.getProp().position.y
        }
        cell.remove()
        graph.addEdge({
            source: start,
            target: end,
            router: 'normal',
            attrs: {
                wrap: {
                    strokeWidth: 14,
                },
                line: {
                    targetMarker: 'block',
                    width: 12,
                    height: 10,
                },
            },
            zIndex: -1,
        })
    }
    emitter.emit('graph-data-change')
})

[TLovers]

谢谢大佬 我明天试试