Text on Orthogonal Lines - Labels on right-angle connection paths

Orthogonal Path Text Labels

Functional Overview

This example shows text labels on orthogonal (right-angle) connection paths. Labels are positioned at optimal points along the path, with automatic rotation to match path direction. Useful for technical diagrams and structured layouts where clean, professional appearance is required.

Implementation of Key Features

Orthogonal Lines with Text

const graphOptions: RGOptions = {
    defaultLineShape: RGLineShape.StandardOrthogonal,
    defaultLineTextOnPath: true,
    // Text on orthogonal paths
};

Text Position Calculation

const getOrthogonalTextPosition = (line: RGLine) => {
    // Find horizontal or vertical segment for text
    if (Math.abs(line.x1 - line.x2) > Math.abs(line.y1 - line.y2)) {
        return {
            x: (line.x1 + line.x2) / 2,
            y: line.y1,
            rotate: 0
        };
    } else {
        return {
            x: line.x1,
            y: (line.y1 + line.y2) / 2,
            rotate: 90
        };
    }
};

Creative Use Cases

Circuit Diagrams: Clean technical drawings with orthogonal wires.

Floor Plans: Room connections with right-angle paths.

Network Diagrams: Professional IT infrastructure maps.

Engineering Drawings: CAD-style technical diagrams.

Organizational Charts: Structured corporate hierarchies.