Canvas Interaction Settings Panel

Demonstrates a reusable canvas settings panel component that allows users to configure graph interaction behaviors through toggle switches.

Canvas Interaction Settings Panel

Functional Overview

This example demonstrates a reusable canvas settings panel component that allows users to configure graph interaction behaviors including zoom, drag, and node movement settings through toggle switches.

Implementation of Key Features

Canvas Settings Component

Use the CanvasSettingsPanel component which provides a standardized UI for controlling canvas interactions:

<DraggableWindow>
    <CanvasSettingsPanel />
</DraggableWindow>

Node Slot Customization

Display custom content inside nodes using RGSlotOnNode:

<RGSlotOnNode>
    {({ node }: RGNodeSlotProps) => (
        <div className="flex items-center justify-center h-full p-2">
            <Cloud size={30} color="#666666" />
        </div>
    )}
</RGSlotOnNode>

Center Layout

Use center layout for automatic node positioning:

const graphOptions: RGOptions = {
    defaultJunctionPoint: RGJunctionPoint.border,
    layout: {
        layoutName: 'center'
    }
};

Canvas Click Handler

Clear selections when clicking on empty canvas:

const onCanvasClick = () => {
    graphInstance.clearChecked();
};

Node Initialization

Initialize graph with a set of nodes and lines:

const myJsonData: RGJsonData = {
    rootId: '2',
    nodes: [
        { id: '1', text: 'Node-1' },
        { id: '2', text: 'Node-2' },
        // ... more nodes
    ],
    lines: [
        { id: 'l1', from: '7', to: '71' },
        // ... more lines
    ]
};
await graphInstance.setJsonData(myJsonData);

Creative Use Cases

• Interactive Demos: Let users experiment with different interaction modes
• Accessibility Settings: Allow users to disable animations or movements
• Kiosk Mode: Lock down interactions for public displays
• Presentations: Quickly toggle modes during live demos
• User Preferences: Remember user’s preferred interaction settings