Line Shape and Junction Point Control

Interactive controls for experimenting with different line shapes, junction points, and text positioning options.

Line Shape and Junction Point Control

Functional Overview

This demo provides interactive controls for experimenting with different line shapes and junction point configurations. It helps users understand how these parameters affect line rendering in various scenarios.

Implementation of Key Features

1. Dynamic Line Shape Selection

Switch between different line shapes:

const [lineShape, setLineShape] = React.useState<RGLineShape>(RGLineShape.StandardCurve);

const updateMyGraphData = async () => {
    graphInstance.getLines().forEach((line) => {
        graphInstance.updateLine(line, {
            lineShape,
            fromJunctionPoint: lineShape === RGLineShape.StandardStraight
                ? RGJunctionPoint.border
                : lineJunctionPoint,
            toJunctionPoint: lineShape === RGLineShape.StandardStraight
                ? RGJunctionPoint.border
                : lineJunctionPoint
        });
    });
};

2. Junction Point Options

Configure where lines connect to nodes:

const [lineJunctionPoint, setLineJunctionPoint] = React.useState<RGunctionPoint>(RGJunctionPoint.border);

// Available options:
// - RGJunctionPoint.border - Connects to node border
// - RGJunctionPoint.ltrb - Left, Top, Right, Bottom
// - RGJunctionPoint.lr - Left/Right only
// - RGJunctionPoint.tb - Top/Bottom only
// - RGJunctionPoint.left - Left side only
// - RGJunctionPoint.top - Top side only
// - RGJunctionPoint.right - Right side only
// - RGJunctionPoint.bottom - Bottom side only

3. Text on Path Toggle

Enable text to follow the line path:

const [textOnPath, setTextOnPath] = React.useState<boolean>(false);

graphInstance.updateLine(line, {
    useTextOnPath: textOnPath
});

4. Conditional UI Display

Show junction point options only when relevant:

{lineShape !== RGLineShape.StandardStraight && (
    <div>
        <div>Line JunctionPoint:</div>
        <SimpleUISelect
            data={[
                { value: RGJunctionPoint.border, text: 'Border' },
                { value: RGJunctionPoint.ltrb, text: 'Left/Top/Right/Bottom' },
                // ... more options
            ]}
            onChange={setLineJunctionPoint}
            currentValue={lineJunctionPoint}
        />
    </div>
)}

5. Force Layout for Natural Positioning

Use force layout to let nodes find optimal positions:

layout: {
    layoutName: 'force',
    maxLayoutTimes: 50
}

Creative Use Cases

• Design Exploration: Experiment with different line styles for optimal visualization
• User Customization: Allow users to choose their preferred line styles
• Print Optimization: Adjust line styles for different output formats
• Accessibility: Choose clearer line styles for better visibility
• Thematic Variation: Use different line styles for different graph themes
• Comparative Analysis: Compare how different line styles affect graph readability