Custom Line Content with Pattern Fills

Demonstrates how to create visually rich connection lines with custom SVG patterns and fills using line slot customization.

Custom Line Content with Pattern Fills

Functional Overview

This example demonstrates how to create visually rich connection lines with custom patterns and fills using SVG patterns and the RGSlotOnLine component. Lines can display various decorative patterns including dots, stripes, grids, and more.

Implementation of Key Features

SVG Pattern Definitions

Define reusable SVG patterns using <defs> and <pattern> elements:

• Pattern Dots: Pink dotted pattern
• Pattern Stripe: Blue stripe pattern
• Pattern Grid: Green grid pattern
• Custom Patterns: Warning stripes, cyber grids, circuits, lava, disco dots, waves, arrows, rainbow

<MySvgDefs />
<!-- Inside MySvgDefs:
<defs>
  <pattern id="pattern-dots" ...>
  <pattern id="pattern-stripe" ...>
  etc.
</defs>
-->

CSS Variable for Line Fill Style

Use CSS custom properties to dynamically apply the selected pattern:

<div style={{
    '--rg-line-fill-style': fillStyleId ? `url(#${fillStyleId})` : 'rgba(255,255,255,0.47)'
}}>

Line Slot Customization

Use RGSlotOnLine to render custom content for each line:

<RGSlotOnLine>
    {({ lineConfig, checked }: RGLineSlotProps) => (
        <MyLineContent lineConfig={lineConfig} checked={checked} />
    )}
</RGSlotOnLine>

Pattern Selection UI

Provide a dropdown to select different fill patterns:

<SimpleUISelect
    data={[
        { value: '', text: 'Color' },
        { value: 'pattern-dots', text: '🔮 Pink dots' },
        { value: 'pattern-stripe', text: '🌊 Blue stripes' },
        { value: 'pattern-grid', text: '🌐 Green grid' },
        // ... more patterns
    ]}
    currentValue={fillStyleId}
    onChange={(newValue: string) => { setFillStyleId(newValue); }}
/>

Tree Layout Configuration

Configure tree layout for hierarchical display:

const graphOptions: RGOptions = {
    defaultNodeShape: RGNodeShape.rect,
    defaultJunctionPoint: RGJunctionPoint.border,
    defaultLineColor: '#2E74B5',
    defaultNodeColor: '#ffffff',
    layout: {
        layoutName: 'tree',
        treeNodeGapH: 200,
        treeNodeGapV: 50
    }
};

Creative Use Cases

• Circuit Diagrams: Use circuit or grid patterns for technical schematics
• Flow Charts: Apply warning stripes or directional arrows for process flows
• Transportation Networks: Use road-like patterns for route visualization
• Data Pipelines: Display data flow with animated or patterned lines
• Artistic Graphs: Create visually stunning diagrams with decorative patterns