Tree Layout with Directional Control

Demonstrates tree layout algorithm with support for multiple growth directions and dynamic switching between horizontal and vertical orientations.

Tree Layout with Directional Control

Functional Overview

This demo demonstrates the tree layout algorithm with support for multiple growth directions (left, right, top, bottom). It shows how to dynamically switch between horizontal and vertical tree layouts and properly update node and line styles.

Implementation of Key Features

1. Tree Layout Configuration

Configure tree layout with specific direction and gap settings:

const graphOptionsH: RGOptions = {
    layout: {
        layoutName: 'tree',
        treeNodeGapH: 300,  // Horizontal gap between nodes
        treeNodeGapV: 10,   // Vertical gap between nodes
        from: 'left'        // Growth direction
    },
    defaultNodeShape: RGNodeShape.rect,
    defaultLineShape: RGLineShape.StandardCurve,
    defaultJunctionPoint: RGJunctionPoint.lr
};

2. Dynamic Layout Switching

Switch between horizontal and vertical layouts by updating options and node sizes:

const updateOptionsAndRelayout = async () => {
    const targetOptions = layoutFrom === 'left' ? graphOptionsH : graphOptionsV;
    graphInstance.setOptions(targetOptions);

    // Update node sizes since options don't affect existing nodes
    graphInstance.getNodes().forEach((node) => {
        graphInstance.updateNode(node, {
            width: targetOptions.defaultNodeWidth,
            height: targetOptions.defaultNodeHeight
        });
    });

    // Update line shapes
    graphInstance.getLines().forEach((line) => {
        graphInstance.updateLine(line, {
            lineShape: targetOptions.defaultLineShape
        });
    });

    await graphInstance.sleep(100);  // Wait for rendering
    await graphInstance.doLayout();
    graphInstance.moveToCenter();
    graphInstance.zoomToFit();
};

3. Junction Point Selection

Use appropriate junction points based on layout direction:

• Horizontal layout (from: ‘left’/‘right’): Use RGJunctionPoint.lr (left/right)
• Vertical layout (from: ‘top’/‘bottom’): Use RGJunctionPoint.tb (top/bottom)

4. Mini Map Integration

Add a mini map for navigation in large graphs:

<RelationGraph options={graphOptions}>
    <RGSlotOnView>
        <RGMiniView />
    </RGSlotOnView>
</RelationGraph>

Creative Use Cases

• Organizational Charts: Display company hierarchies with clear top-down or left-right structures
• Decision Trees: Visualize decision-making processes with expandable branches
• File System Visualization: Show directory structures with familiar tree layouts
• Taxonomy Display: Present biological classifications or category hierarchies
• Process Flow Diagrams: Illustrate sequential or parallel processes
• Mind Maps: Create hierarchical thought structures with flexible orientations