Advanced Mixed Layout with Canvas Background Integration

Functional Overview

This sophisticated demo demonstrates a complex mixed layout system integrating multiple tree layouts (12 in this example) with a custom canvas background showing an industry dashboard. It features automatic layout management, expand/collapse functionality, and dynamic repositioning.

Implementation of Key Features

1. Canvas Background Slot

Render custom background content:

<RelationGraph options={graphOptions}>
    <RGSlotOnCanvas>
        <div className="absolute -left-[300px] -top-[200px] flex gap-4">
            <MyCanvasContent4Cols allCols={allCols} />
        </div>
    </RGSlotOnCanvas>
</RelationGraph>

2. Automatic Layout Grouping

Dynamically create layout groups from data:

const myLayout = useRef(new MyMixLayout(graphInstance));

const initializeGraph = async () => {
    const myAllColumns = await getMyAllColumnsData();
    setAllCols(myAllColumns);
    const groups = await myLayout.current.loadData(myAllColumns);
    await graphInstance.sleep(200);
    myLayout.current.connectElementToNode();
    myLayout.current.applyAllGroupLayout();
    graphInstance.zoomToFit();
};

3. Node Expand/Collapse Handling

Automatically reposition affected groups:

const onNodeExpand = (node: RGNode) => {
    myLayout.current.relayoutIfNeed(node);
};

const onNodeCollapse = (node: RGNode) => {
    myLayout.current.relayoutIfNeed(node);
};

4. Expand by Depth Control

Control expansion level:

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

5. Fake Line Connections

Connect canvas elements to graph nodes:

// MyMixLayout.ts
connectElementToNode() {
    // Find HTML elements and connect them to corresponding nodes
    this.allGroups.forEach(group => {
        const element = document.getElementById(group.elementId);
        if (element) {
            // Create fake line from element to group root node
        }
    });
}

Creative Use Cases

Industry Chain Analysis: Visualize complete supply chains with multiple stages
Business Intelligence: Create comprehensive dashboard overviews
System Architecture: Show complex systems with multiple subsystems
Process Optimization: Analyze multi-stage processes with dependencies
Organization Planning: Display organizational structure with departments
Product Development: Visualize product ecosystem and dependencies

Panorama of chip design industry

Advanced Mixed Layout with Canvas Background