Folder Structure Layout with Custom Junction Point Offset

Functional Overview

This example demonstrates how to use the folder layout to visualize a hierarchical file and folder structure. The graph displays nodes with parent-child relationships similar to a file system, with folders represented differently from files. An interactive slider allows users to dynamically adjust the horizontal offset of line connection points, providing visual control over how connection lines originate from parent nodes.

Implementation of Key Features

Folder Layout Configuration

The graph uses the specialized folder layout designed for hierarchical structures:

const graphOptions: RGOptions = {
    layout: {
        layoutName: 'folder',
        from: 'left',
        treeNodeGapH: 20,
        treeNodeGapV: 10
    },
    defaultNodeShape: RGNodeShape.rect,
    defaultNodeWidth: 100,
    defaultNodeHeight: 30,
    defaultLineShape: RGLineShape.StandardOrthogonal,
    defaultPolyLineRadius: 4,
    defaultExpandHolderPosition: 'right',
    defaultJunctionPoint: RGJunctionPoint.lr,
    defaultLineColor: '#aaaaaa',
    reLayoutWhenExpandedOrCollapsed: true
};

Key configurations include:

Layout name: folder for optimized hierarchical display
Line shape: StandardOrthogonal with rounded corners (defaultPolyLineRadius: 4)
Direction: from: 'left' for left-to-right expansion
Auto-relayout: reLayoutWhenExpandedOrCollapsed: true for dynamic updates

Custom Junction Point Offsets

The core feature demonstrates dynamic adjustment of line connection origins:

myJsonData.lines.forEach((line, index) => {
    if (!line.id) {
        line.id = `l${index + 1}`;
    }
    line.fromJunctionPoint = RGJunctionPoint.bottom;
    line.fromJunctionPointOffsetX = fromOffsetX;
    line.toJunctionPoint = RGJunctionPoint.left;
});

The fromJunctionPointOffsetX property shifts the line’s starting point horizontally from its base junction point (bottom), allowing fine-grained control over connection visual appearance.

Dynamic Line Updates

When the slider value changes, lines are updated using the graph instance API:

const updateMyData = () => {
    graphInstance.getLines().forEach(line => {
        graphInstance.updateLine(line, {
            fromJunctionPointOffsetX: fromOffsetX
        });
    });
};

This approach demonstrates runtime property modification without requiring full data reload.

Node Slot with Conditional Rendering

The RGSlotOnNode slot customizes node appearance based on whether nodes have children:

<RGSlotOnNode>
    {({ node }: RGNodeSlotProps) => {
        return (
            <div className={`w-full h-full flex place-items-center gap-2 p-2 ${node.rgChildrenSize > 0 ? 'bg-gray-100 rounded' : ''}`}>
                {
                    node.rgChildrenSize > 0
                        ? <FolderOpen className="w-4 h-4 text-blue-700" />
                        : <div className="w-4 h-4 "></div>
                }
                <div>{node.text}</div>
            </div>
        );
    }}
</RGSlotOnNode>

Key implementation details:

node.rgChildrenSize: Checks if node has children to determine icon
Conditional styling: Adds gray background for folder nodes
Lucide icons: Uses FolderOpen for folders, empty div for files
Flex layout: Centers content with consistent spacing

Event Handling

Line click events are captured for potential interaction:

const onLineClick = (line: RGLine, link: RGLink, event: RGUserEvent) => {
    console.log('onLineClick:', line);
};

Creative Use Cases

File System Visualization

The folder layout is ideal for:

Project structure viewers: Display code organization with expandable folders
Document management systems: Navigate hierarchical document libraries
Dependency trees: Show module dependencies with clear parent-child relationships
Sitemap visualizations: Display website structure with collapsible sections

Dynamic Connection Control

Adjustable junction offsets enable:

Circuit diagrams: Shift connection points to avoid component overlaps
Organizational charts: Fine-tune reporting line positioning
Process flow diagrams: Optimize connector visual clarity
Network topology: Adjust cable routing visualization

Interactive Data Exploration

Real-time updates apply to:

File browsers: Dynamically re-layout when expanding/collapsing folders
Configuration editors: Visualize nested settings with immediate feedback
Database schema viewers: Navigate table relationships interactively
API documentation: Display endpoint hierarchies with expandable sections

Folder Layout

File System Style Hierarchical Layout