Node Groups with Rectangle Background

Demonstrates creating visual node groups with rectangular background shapes to organize related nodes.

Node Groups with Rectangle Background

Functional Overview

This example demonstrates creating visual node groups with rectangular background shapes. Similar to area backgrounds but using rectangular shapes to group related nodes visually.

Implementation of Key Features

Rectangular Group Visualization

Groups are rendered as rectangular shapes behind related nodes using canvas slot rendering.

Force Layout with Dynamic Groups

const graphOptions: RGOptions = {
    defaultNodeShape: RGNodeShape.circle,
    defaultLineShape: RGLineShape.StandardStraight,
    defaultNodeColor: 'rgb(130,102,246)',
    layout: {
        layoutName: 'force',
        maxLayoutTimes: Number.MAX_SAFE_INTEGER
    }
};

Dynamic Group Creation

Click nodes to create groups containing them and their related nodes, rendered with rectangular backgrounds.

Creative Use Cases

Module Boundaries: Visualize software module boundaries. Rectangles show encapsulation boundaries.

Team Zones: Show team member zones in organization charts. Rectangular backgrounds indicate team areas.

Network Segments: Display network segments with rectangular zones. Clear visual separation of network areas.

Process Phases: Group process steps by phase. Rectangles show phase boundaries.

Security Zones: Visualize security zones in network topology. Different rectangle colors indicate security levels.

Geographic Regions: Show geographic groupings with rectangular regions. Maps regions onto network topology.

Department Areas: Display department areas in organization charts. Clear visual department boundaries.

Swimlanes: Create swimlane-style visualizations. Rectangles act as swimlane boundaries.