Disable Zoom, Drag, and Node Movement

Demonstrates how to disable zoom, canvas dragging, and node dragging interactions with dynamic toggle switches for real-time control.

Disable Zoom, Drag, and Node Movement

Functional Overview

This example demonstrates how to disable various interaction effects in the graph including zoom, canvas dragging, and node dragging. Three toggle switches allow dynamic control over these interaction modes.

Implementation of Key Features

Disable Zoom

Control zoom behavior using the wheelEventAction option:

• 'none': Disables mouse wheel zoom
• 'zoom': Enables mouse wheel zoom (default)

<SimpleUISwitch
    currentValue={options.wheelEventAction === 'none'}
    onChange={(disabled) => {
        handleUpdateOptions({ wheelEventAction: disabled ? 'none' : 'zoom' });
    }}
/>

Disable Canvas Drag

Control canvas panning using the dragEventAction option:

• 'none': Disables canvas dragging
• 'move': Enables canvas dragging (default)

<SimpleUISwitch
    currentValue={options.dragEventAction === 'none'}
    onChange={(disabled) => {
        handleUpdateOptions({ dragEventAction: disabled ? 'none' : 'move' });
    }}
/>

Disable Node Drag

Control node dragging with the disableDragNode option:

• true: Nodes cannot be dragged
• false: Nodes can be dragged (default)

<SimpleUISwitch
    currentValue={options.disableDragNode!}
    onChange={(newValue) => {
        handleUpdateOptions({ disableDragNode: newValue });
    }}
/>

Dynamic Option Updates

Implement a handler to update options and sync with state:

const handleUpdateOptions = (newOptions: Partial<RGOptions>) => {
    setOptions(prev => ({ ...prev, ...newOptions }));
    graphInstance.updateOptions(newOptions);
};

Initial Configuration

Set all interactions to disabled by default in the options:

const [options, setOptions] = useState<RGOptions>({
    wheelEventAction: 'none',
    dragEventAction: 'none',
    disableDragNode: true,
    layout: {
        layoutName: 'center'
    }
});

Creative Use Cases

• Presentations: Prevent accidental modifications during demos
• Read-Only Views: Display complex graphs without allowing edits
• Kiosk Displays: Show static information graphs in public spaces
• Templates: Show layout examples that users shouldn’t modify
• Step-by-Step Tutorials: Control user interaction during guided tours