Line Text Position and Offset Control

Comprehensive controls for positioning text on lines including offsets, text-on-path, and compatibility with various layouts.

Line Text Position and Offset Control

Functional Overview

This demo provides comprehensive controls for positioning text on lines, including offset adjustments, text-on-path functionality, and compatibility with different line shapes and layout directions.

Implementation of Key Features

1. Text Offset Configuration

Control text position with X and Y offsets:

const graphOptions: RGOptions = {
    defaultLineTextOffsetX: textOffsetX,  // Horizontal offset
    defaultLineTextOffsetY: textOffsetY,  // Vertical offset
    defaultLineTextOnPath: textOnPath,
    defaultLineShape: lineShape
};

2. Dynamic Offset Adjustment

Provide sliders for real-time offset control:

<div>
    Line Text x Offset: {textOffsetX}
    <input
        type="range"
        min="-100"
        max="100"
        value={textOffsetX}
        onChange={(e) => { setTextOffsetX(Number(e.target.value)); }}
    />
</div>

3. Text on Path Toggle

Enable text to follow curved lines:

<SimpleUISelect
    data={[
        { value: 0, text: 'Normal Text' },
        { value: 1, text: 'Text On Path' }
    ]}
    currentValue={textOnPath ? 1 : 0}
    onChange={(newValue: number) => { setTextOnPath(newValue === 1); }}
/>

4. Layout Direction Control

Test text positioning with different tree layout directions:

const updateMyOptions = () => {
    if (layoutFrom === 'left' || layoutFrom === 'right') {
        graphInstance.updateOptions({
            layout: {
                from: layoutFrom,
                treeNodeGapH: 150,
                treeNodeGapV: 30
            }
        });
    } else {
        graphInstance.updateOptions({
            layout: {
                from: layoutFrom,
                treeNodeGapH: 30,
                treeNodeGapV: 150
            }
        });
    }
};

5. Junction Point Adaptation

Automatically adjust junction points based on line shape:

defaultJunctionPoint: lineShape === RGLineShape.StandardStraight
    ? RGJunctionPoint.border
    : ((layoutFrom === 'left' || layoutFrom === 'right')
        ? RGJunctionPoint.lr
        : RGJunctionPoint.tb)

Creative Use Cases

• Annotated Diagrams: Add detailed labels to connections
• Technical Documentation: Create precise technical drawings
• Educational Materials: Clear labeling for learning materials
• Data Visualization: Show metrics on relationship lines
• Process Mapping: Label process steps with clear positioning
• Multilingual Support: Adjust text position for different languages