Custom Node Styles with Tree Layout

Demonstrates fully customized node appearances using div+css and React components through node slots, with a tree layout supporting multiple node types.

Custom Node Styles with Tree Layout

Functional Overview

This example demonstrates how to fully customize node appearances using div+css and React components through node slots. It uses a tree layout with different node types (root, circle, video, button) rendered with custom components.

Implementation of Key Features

Tree Layout Configuration

const graphOptions: RGOptions = {
    backgroundColor: 'rgb(101, 163, 13)',
    defaultLineColor: 'rgba(255, 255, 255, 0.6)',
    defaultNodeColor: 'transparent',
    defaultNodeBorderWidth: 0,
    defaultNodeShape: RGNodeShape.rect,
    defaultLineShape: RGLineShape.StandardCurve,
    defaultJunctionPoint: RGJunctionPoint.lr,
    layout: {
        layoutName: 'tree',
        from: 'left',
        treeNodeGapH: 200,
        treeNodeGapV: 30
    }
};

Node Type-Based Rendering

const myJsonData: RGJsonData = {
    rootId: 'a',
    nodes: [
        { id: 'a', text: 'a', type: 'my-root', nodeShape: RGNodeShape.rect },
        { id: 'b', text: 'b', type: 'my-circle', nodeShape: RGNodeShape.circle },
        { id: 'b1', text: 'b1' },
        { id: 'c', text: 'c', type: 'my-video' },
        { id: 'c1', text: 'c1', type: 'my-button', nodeShape: RGNodeShape.rect, data: { buttonText: 'Button 1' } }
    ]
};

Custom Node Content Component

<RGSlotOnNode>
    {({ node }: RGNodeSlotProps) => (
        <MyNodeContent node={node} />
    )}
</RGSlotOnNode>

The MyNodeContent component handles rendering different node types with appropriate styling and components.

Creative Use Cases

Organizational Hierarchy: Root nodes show company logos, department heads use circular avatars, employees use detailed cards, and action nodes appear as interactive buttons.

Decision Trees: Decision nodes appear as diamonds with icons, outcome nodes use rectangles, leaf nodes display as simple text, and action nodes render as clickable buttons.

Skill Trees: Skill categories use large header nodes, skill groups appear as circular icons, individual skills show as cards, and locked skills display with different styling.

Product Categories: Category nodes use large banners, subcategories appear as circular badges, products display as detailed cards with images, and promotional items feature special button styling.

Process Flows: Start/end nodes use distinctive shapes, decision points appear as diamonds with icons, process steps use rectangular cards, and action items render as interactive buttons.

File System Navigation: Root folders use large header styling, subfolders appear as circular icons, files display as detailed cards with file type indicators, and special folders have unique styling.

Learning Paths: Course modules use large header nodes, lessons appear as circular icons, topics display as cards, and quizzes render as interactive buttons.