带有渐变色的连线编辑按钮

演示在节点颜色之间过渡的渐变连线颜色，在选中连线上有删除按钮并支持拖放创建节点。

带有渐变色的连线编辑按钮

功能概述

此示例演示高级连线自定义，使用从源节点颜色到目标节点颜色过渡的渐变色。它还展示如何在选中的连线上添加删除按钮以及从工具栏实现拖放创建节点。

核心特性实现

渐变连线颜色

连线显示从源节点颜色到目标节点颜色混合的渐变色。这是通过自定义连线内容实现的：

<RGSlotOnLine>
    {(lineSlotProps: RGLineSlotProps) => (
        <CustomLineContent
            {...lineSlotProps}
            onMyRemoveIconClick={onMyRemoveIconClick}
        />
    )}
</RGSlotOnLine>

选中连线上的删除按钮

单击连线时，删除按钮出现在连线的中点：

const onMyRemoveIconClick = (line: RGLine) => {
    graphInstance.removeLine(line);
    graphInstance.setEditingLine(null);
};

拖放创建节点

实现拖放功能以从图标模板创建新节点：

const onToolItemMouseDown = (e, iconName: string) => {
    const randomColor = randomColorsRange[Math.floor(Math.random() * randomColorsRange.length)];
    graphInstance.startCreatingNodePlot(e.nativeEvent, {
        templateNode: {
            text: iconName,
            color: randomColor,
            data: { myIcon: iconName }
        },
        onCreateNode: (x, y, nodeTemplate) => {
            const newNode = {
                ...nodeTemplate,
                id: `N-${graphInstance.generateNewNodeId()}`,
                x: x - 20,
                y: y - 20
            };
            graphInstance.addNodes([newNode]);
        }
    });
};

基于图标的节点渲染

使用图标切换器组件在节点中显示 Lucide React 图标：

<RGSlotOnNode>
    {({ node, checked }: RGNodeSlotProps) => (
        <div className="w-full h-full min-h-[50px] min-w-[50px] flex place-items-center justify-center">
            <IconSwitcher iconName={node.data.myIcon} />
            <div className="my-node-title absolute top-[100%]">
                {node.text}
            </div>
        </div>
    )}
</RGSlotOnNode>

动态颜色更新

随机化节点颜色的按钮：

const updateRandomColorToNode = () => {
    graphInstance.getNodes().forEach(node => {
        const randomColor = randomColorsRange[Math.floor(Math.random() * randomColorsRange.length)];
        graphInstance.updateNode(node, { color: randomColor });
    });
};

从节点创建连线

从特定节点连接点开始创建连线：

const startCreateLineFromCurrentNode = (node: RGNode, junctionPoint: RGJunctionPoint, e: React.MouseEvent) => {
    graphInstance.startCreatingLinePlot(e.nativeEvent, {
        template: { fromJunctionPoint: junctionPoint, color: '#e85f84' },
        fromNode: node,
        onCreateLine: (from, to, finalTemplate) => {
            if ('id' in to) {
                graphInstance.addLines([{
                    ...finalTemplate,
                    from: (from as RGNode).id,
                    to: (to as RGNode).id,
                    text: 'New Line'
                }]);
            }
        }
    });
};

创意使用场景

• 客户支持流程：使用彩色路径可视化支持渠道
• 工作流设计器：创建带有渐变连接器的流程图
• 网络拓扑：显示带有视觉流指示器的网络连接
• 服务蓝图：映射客户旅程触点
• 系统架构：使用样式化连接显示组件关系