Mixed Layout Manager with Multiple Tree Groups

Functional Overview

This demo demonstrates how to combine multiple layout algorithms in a single graph using a custom layout manager. It shows five different tree layout groups positioned around a central node.

Implementation of Key Features

1. Custom Layout Manager

Create a custom layout manager class:

class MyMixLayoutManager {
    constructor(graphInstance) {
        this.graphInstance = graphInstance;
    }

    async applyMyLayout() {
        // Apply different layouts to different groups
        await this.layoutGroup('left', { x: -400, y: 0 }, 'left');
        await this.layoutGroup('right', { x: 400, y: 0 }, 'right');
        await this.layoutGroup('top', { x: 0, y: -300 }, 'top');
        await this.layoutGroup('bottom', { x: 0, y: 300 }, 'bottom');
        await this.layoutGroup('bottom-right', { x: 400, y: 300 }, 'left');
    }
}

2. Group-Based Node Organization

Organize nodes by group using data properties:

nodes: [
    { id: 'r', text: 'R', data: { myGroupId: 'left' } },
    { id: 'a', text: 'a', data: { myGroupId: 'right' } },
    { id: 't', text: 't', data: { myGroupId: 'top' } },
    { id: 'e', text: 'e', data: { myGroupId: 'bottom' } },
    { id: 'br-root', text: 'BR-Root', data: { myGroupId: 'bottom-right' } }
]

3. Color-Coded Groups

Apply different styles to different groups:

<RGSlotOnNode>
    {({ node }) => {
        let nodeClass = '';
        if (node.data && node.data.myGroupId === 'left') {
            nodeClass = 'c-left-node';
        } else if (node.data && node.data.myGroupId === 'right') {
            nodeClass = 'c-right-node';
        } else if (node.data && node.data.myGroupId === 'top') {
            nodeClass = 'c-top-node';
        }
        return <div className={nodeClass}>{node.text}</div>;
    }}
</RGSlotOnNode>

4. Automatic Line ID Generation

Add IDs to lines automatically:

let lineIndex = 0;
const createLine = (line: any): JsonLine => {
    lineIndex++;
    return { id: `line-${lineIndex}`, ...line };
};

5. Force Layout Integration

Optionally use force layout for specific groups:

stopMyForceLayout() {
    if (this.forceLayoutTimer) {
        clearInterval(this.forceLayoutTimer);
    }
}

Creative Use Cases

Complex System Visualization: Show different subsystems with appropriate layouts
Organizational Charts: Display departments with different hierarchy styles
Network Topology: Combine different network types in one view
Dashboard Layouts: Create comprehensive system overviews
Knowledge Graphs: Organize different knowledge domains separately
Process Flows: Show multiple processes with different flow patterns