Line Style Customization Showcase

Functional Overview

This demo showcases various line styling options in relation-graph, including different shapes, colors, widths, text positioning, arrow styles, and junction points. It provides a comprehensive overview of line customization capabilities.

Implementation of Key Features

1. Line Shape Variations

Use different line shapes through the RGLineShape enum:

{
    id: 'line-8',
    from: 'a',
    to: 'f',
    text: 'Line Style 5',
    lineShape: RGLineShape.Curve5  // Various curve styles
}

Available shapes include:

RGLineShape.StandardStraight - Straight lines
RGLineShape.StandardCurve - Standard curves
RGLineShape.Curve3, RGLineShape.Curve5 - Different curve intensities
RGLineShape.StandardOrthogonal - Orthogonal (right-angle) lines

2. Line Width and Color

Customize line appearance:

{
    id: 'line-5',
    from: 'a',
    to: 'd',
    text: 'Thick Line',
    lineWidth: 3,
    color: '#c71585'
}

3. Arrow Control

Control arrow visibility and use custom arrows:

{
    id: 'line-6',
    from: 'a',
    to: 'e',
    text: 'Hide Arrow',
    showEndArrow: false
}

4. Junction Points

Specify exact connection points on nodes:

{
    id: 'line-13',
    from: 'b',
    to: 'h',
    text: 'Junction Point Example',
    fromJunctionPoint: RGJunctionPoint.right,
    toJunctionPoint: RGJunctionPoint.right
}

5. Text on Path

Make text follow the line path:

{
    id: 'line-2',
    from: 'a',
    to: 'c',
    text: 'Text on Path',
    useTextOnPath: true,
    fontSize: 10
}

6. Custom Arrow Markers

Define and use custom SVG arrow markers:

{
    id: 'line-18',
    from: 'c',
    to: 'm1',
    text: 'Custom Arrow',
    endMarkerId: 'my-arrow-001',
    startMarkerId: 'my-arrow-001-start',
    showStartArrow: true
}

Creative Use Cases

Flow Charts: Create professional diagrams with varied line styles
Network Topology: Distinguish different connection types with line styling
Process Mapping: Use different line styles for different process types
Technical Diagrams: Create engineering drawings with precise line control
Mind Maps: Use different line styles to show relationship types
Data Flow Visualization: Show data movement with directional arrows