Rete.js 中实现反向连接路径的自定义配置

概述

在可视化编程工具 Rete.js 中，默认的连接线是从左向右延伸的，但某些场景下我们需要实现从右向左的反向连接。本文将详细介绍如何在 Rete.js 中配置反向连接路径，包括连接起点/终点的调整和路径样式的自定义。

连接起点和终点的调整

要实现反向连接，首先需要修改连接的起点和终点位置。Rete.js 提供了 socketPositionWatcher 选项来配置连接点的位置：

if (/* 判断是否为反向连接 */) {
    return {
        x: x + 10 * (side === 'output' ? -1 : 1),
        y: y
    }
}

这段代码会根据连接方向调整连接点的 x 坐标，使输出端向左偏移，输入端向右偏移，从而实现反向连接的起点和终点定位。

连接路径样式的自定义

默认的连接路径生成器会创建从左向右的路径。要实现反向路径，我们需要自定义路径转换器：

const backward = ({ vertical = false, offset = 10 }) => {
    return ({ start, end }) => {
        const startOffset = vertical 
            ? { x: 0, y: -offset } 
            : { y: 0, x: -offset };
        
        const endOffset = vertical 
            ? { x: 0, y: offset } 
            : { y: 0, x: offset };

        // 路径生成逻辑...
    };
};

关键点在于反转了 startOffset 和 endOffset 的 x 值，使路径从右向左延伸。注意这里不是简单地交换起点和终点，而是调整偏移方向，确保箭头方向也正确。

完整实现方案

1. 首先定义判断是否为反向连接的逻辑
2. 配置 socketPositionWatcher 调整连接点位置
3. 创建自定义路径转换器
4. 根据连接方向选择使用默认或反向转换器

connectionPlugin.addPreset(Presets.classic.setup({
    socketPositionWatcher: (data) => {
        if (isBackwardConnection(data)) {
            return {
                x: data.x + 10 * (data.side === 'output' ? -1 : 1),
                y: data.y
            };
        }
        return { x: data.x, y: data.y };
    },
    transformer: (connection) => 
        isBackwardConnection(connection) 
            ? backward({ vertical: false }) 
            : Transformers.classic()
}));

注意事项

1. 箭头方向会自动跟随路径方向，无需额外配置
2. 垂直连接的处理逻辑类似，只需设置 vertical: true
3. 偏移量(offset)可根据实际需求调整
4. 确保自定义节点上的插座位置也相应调整

通过以上配置，我们可以在 Rete.js 中实现清晰、自然的反向连接，满足各种可视化编程场景的需求。