Toolbar Position Configuration

Functional Overview

This example demonstrates different toolbar positioning options within the graph canvas. Toolbars can be positioned on any edge (top, bottom, left, right) and oriented horizontally or vertically. The example includes UI controls to dynamically change toolbar position and orientation.

Implementation of Key Features

Toolbar Position Options

const graphOptions: RGOptions = {
    toolBarPositionH: 'left',   // 'left' | 'center' | 'right'
    toolBarPositionV: 'top',    // 'top' | 'center' | 'bottom'
    toolBarDirection: 'v'       // 'h' (horizontal) | 'v' (vertical)
};

Dynamic Position Change

const changeToolbarPosition = (positionH: string, positionV: string, direction: string) => {
    graphInstance.updateOptions({
        toolBarPositionH: positionH,
        toolBarPositionV: positionV,
        toolBarDirection: direction
    });
};

Position Control UI

<select onChange={(e) => changeToolbarPosition(e.target.value, 'top', 'v')}>
    <option value="left">Left</option>
    <option value="center">Center</option>
    <option value="right">Right</option>
</select>

Creative Use Cases

Responsive Layouts: Adapt toolbar position for different screen sizes.

Accessibility: Position toolbar for easy access by different users.

Screen Real Estate: Move toolbar to avoid covering important nodes.

Left-to-Right Languages: Adjust toolbar for RTL layouts.

Touch Interfaces: Position toolbar for thumb-friendly access on mobile.

Customize Toolbar Position and Style