Mixed Tree Layout Manager

Functional Overview

This demo demonstrates a custom mixed tree layout manager that combines multiple tree structures in a single graph. Each tree group can have its own layout direction and styling, with connections between root nodes.

Implementation of Key Features

1. Custom Tree Layout Manager

Create a specialized layout manager for trees:

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

    async loadData(treeJsonData) {
        // Parse and organize tree data
        this.allGroups = this.parseTreeData(treeJsonData);
    }

    applyAllGroupLayout() {
        // Apply tree layout to each group
        this.allGroups.forEach(group => {
            this.applyTreeLayout(group);
        });
    }

    connectRootToChildrenTreeRoot() {
        // Connect root nodes between groups
    }
}

2. Load and Apply Layout

Initialize with data and apply layouts:

const initializeGraph = async () => {
    graphInstance.enableNodeXYAnimation();
    const myTreeJsonData = await getMyTreeJsonData();
    await myMixTreeLayout.current.loadData(myTreeJsonData);
    await graphInstance.sleep(200);
    myMixTreeLayout.current.applyAllGroupLayout();
    myMixTreeLayout.current.connectRootToChildrenTreeRoot();
    graphInstance.moveToCenter();
    graphInstance.zoomToFit();
};

3. Handle Expand/Collapse

Re-layout when nodes expand or collapse:

const onNodeExpand = (node: RGNode) => {
    myMixTreeLayout.current.applyAllGroupLayout();
};

const onNodeCollapse = (node: RGNode) => {
    myMixTreeLayout.current.applyAllGroupLayout();
};

4. Expand by Depth

Control expansion level across all trees:

const openByDeep = (deep: number) => {
    myMixTreeLayout.current.expandAllGroupByDeep(deep);
    graphInstance.zoomToFit();
};

5. Mini Map Integration

Add navigation for complex layouts:

<RGSlotOnView>
    <RGMiniView />
</RGSlotOnView>

Creative Use Cases

Multi-Level Organization Charts: Display complex organizational hierarchies
Product Categories: Show nested product taxonomies
Document Hierarchies: Visualize folder structures
Knowledge Domains: Display interconnected knowledge areas
System Architectures: Show subsystem relationships
Biological Taxonomies: Display classification hierarchies