Multiple Lines Gap Configuration

Demonstrates control over spacing between multiple lines connecting the same pair of nodes for visual clarity in complex relationships.

Multiple Lines Gap Configuration

Functional Overview

This demo demonstrates how to control the spacing between multiple lines connecting the same pair of nodes. It’s essential for maintaining visual clarity when dealing with bidirectional relationships or multiple connections between entities.

Implementation of Key Features

1. Multi-Line Distance Setting

Configure the maximum spacing between parallel lines:

const graphOptions: RGOptions = {
    multiLineDistance: 50,  // Maximum spacing between multiple lines
    defaultJunctionPoint: RGJunctionPoint.border,  // Must use border for proper effect
    defaultLineShape: RGLineShape.StandardCurve
};

2. Dynamic Gap Adjustment

Update the gap value in real-time:

const updateMyGraphData = async () => {
    graphInstance.updateOptions({
        multiLineDistance: multiLineGap
    });
    graphInstance.getLines().forEach((line) => {
        graphInstance.updateLine(line, {
            lineShape,
            useTextOnPath: textOnPath
        });
    });
};

3. Border Junction Point Requirement

For multiple lines to display properly parallel, use RGJunctionPoint.border:

defaultJunctionPoint: RGJunctionPoint.border

4. Line Shape Compatibility

Different line shapes work with multiple lines:

• RGLineShape.StandardStraight - Direct parallel lines
• RGLineShape.StandardCurve - Curved parallel lines

5. Interactive Controls

Provide UI controls for real-time experimentation:

<SimpleUISlider
    currentValue={multiLineGap}
    min={5}
    max={60}
    step={2}
    onChange={(newValue) => { setMultiLineGap(newValue); }}
/>

Creative Use Cases

• Bidirectional Relationships: Show two-way relationships with separate lines
• Multiple Transport Routes: Display different transportation options between cities
• Redundant Connections: Show backup connections in network diagrams
• Multi-Modal Communication: Display different communication channels between entities
• Parallel Processes: Visualize parallel workflows between the same stages
• Trade Relationships: Show import/export flows between countries