Editor Button on Line with Gradient Colors

Demonstrates gradient line colors transitioning between node colors, with delete buttons on selected lines and drag-and-drop node creation.

Editor Button on Line with Gradient Colors

Functional Overview

This example demonstrates advanced line customization with gradient colors that transition from source node color to target node color. It also shows how to add a delete button on selected lines and implement drag-and-drop node creation from a toolbar.

Implementation of Key Features

Gradient Line Colors

Lines display gradient colors that blend from the source node’s color to the target node’s color. This is achieved through custom line content:

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

Delete Button on Selected Line

When a line is clicked, a delete button appears at the line’s midpoint:

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

Drag-and-Drop Node Creation

Implement drag-and-drop functionality to create new nodes from icon templates:

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]);
        }
    });
};

Icon-Based Node Rendering

Display Lucide React icons in nodes using an icon switcher component:

<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>

Dynamic Color Updates

Button to randomize node colors:

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

Line Creation from Node

Start creating a line from a specific node junction point:

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'
                }]);
            }
        }
    });
};

Creative Use Cases

• Customer Support Flows: Visualize support channels with color-coded paths
• Workflow Designers: Create process diagrams with gradient connectors
• Network Topologies: Show network connections with visual flow indicators
• Service Blueprints: Map customer journey touchpoints
• System Architecture: Display component relationships with styled connections