Multiple Layout Mixing in Single Canvas

Uses two different layout algorithms (center and tree) on the same canvas with independent group positioning.

Multiple Layout Mixing in Single Canvas

Functional Overview

This demo demonstrates how to use two different layout algorithms (center and tree) on the same canvas. Each group of nodes is laid out independently and then positioned relative to each other.

Implementation of Key Features

1. Multiple Data Sets

Define separate data for each layout:

const treeJsonData: RGJsonData = {
    rootId: 'a',
    nodes: [/* Tree nodes */],
    lines: [/* Tree lines */]
};

const centerJsonData: RGJsonData = {
    rootId: '2',
    nodes: [/* Center nodes */],
    lines: [/* Center lines */]
};

2. Create Independent Layouts

Use createLayout for each group:

const doLayoutAll = async () => {
    const treeRootNode = graphInstance.getNodeById(treeJsonData.rootId)!;
    const centerRootNode = graphInstance.getNodeById(centerJsonData.rootId)!;

    // Layout center group
    const myCenterLayout = graphInstance.createLayout({
        layoutName: 'center'
    });
    const centerNodes = graphInstance.getNetworkNodesByNode(centerRootNode);
    myCenterLayout.placeNodes(centerNodes, centerRootNode);

    // Position tree root relative to center group
    const nodesRectInfo = graphInstance.getNodesRectBox(centerNodes);
    treeRootNode.x = nodesRectInfo.maxX + 100;

    // Layout tree group
    const myTreeLayout = graphInstance.createLayout({
        layoutName: 'tree',
        from: 'left',
        treeNodeGapH: 200,
        treeNodeGapV: 30
    });
    const treeNodes = graphInstance.getNetworkNodesByNode(treeRootNode);
    myTreeLayout.placeNodes(treeNodes, treeRootNode);
};

3. Add All Nodes and Lines

Load all data before layout:

graphInstance.addNodes(treeJsonData.nodes);
graphInstance.addLines(treeJsonData.lines);
graphInstance.addNodes(centerJsonData.nodes);
graphInstance.addLines(centerJsonData.lines);

4. Transparent Nodes

Make nodes semi-transparent for visual distinction:

centerJsonData.nodes.forEach(node => {
    node.opacity = 0.5;
    node.color = 'transparent';
});

5. Different Line Styles

Use different styles for each group:

centerJsonData.lines.forEach(line => {
    line.lineShape = RGLineShape.StandardStraight;
    line.fromJunctionPoint = RGJunctionPoint.border;
    line.toJunctionPoint = RGJunctionPoint.border;
});

Creative Use Cases

• Comparative Analysis: Compare different network structures
• System Integration: Show multiple systems in one view
• Data Aggregation: Combine data from different sources
• Multi-Stage Processes: Show different process stages
• Before/After Views: Display state comparisons
• Hybrid Visualizations: Mix different visualization types