Custom Toolbar with Lucide Icons

Functional Overview

This example demonstrates how to create custom toolbars using relation-graph’s toolbar slots combined with Lucide React icons. It shows three toolbar configurations: a vertical mini toolbar on the left, a main toolbar at the bottom, and a horizontal mini toolbar on the right with a toggle for the mini-map view. The example includes interactive button states (favorite toggle) and demonstrates how to handle toolbar button clicks.

Implementation of Key Features

RGToolBar Slot Usage

<RelationGraph options={graphOptions}>
    <RGSlotOnView>
        <RGToolBar>
            <div className="rg-mb-button" onClick={() => myToolbarBtnAction('favo')}>
                <Star size={18} color={favo ? "#df7f03" : "currentColor"} fill={favo ? "#df7f03" : "none"} />
            </div>
            <div className="rg-mb-button" onClick={() => myToolbarBtnAction('Click:Share')}>
                <Share2 size={18} />
            </div>
            <div className="rg-mb-button" onClick={() => myToolbarBtnAction('Click:Help')}>
                <Settings size={18} />
            </div>
        </RGToolBar>
    </RGSlotOnView>
</RelationGraph>

RGMiniToolBar with Positioning

<RGMiniToolBar positionV='top' positionH='left' direction='v'>
    <div className="rg-mb-button" onClick={() => myToolbarBtnAction('favo')}>
        <Star size={14} />
    </div>
    <div className="rg-mb-button" onClick={() => myToolbarBtnAction('aaa2')}>
        <Share2 size={14} />
    </div>
</RGMiniToolBar>

Button State Management

const [favo, setFavo] = useState(false);

const myToolbarBtnAction = (msg: string) => {
    if (msg === 'favo') {
        setFavo(!favo);
    } else {
        alert(msg);
    }
};

Mini-Map Toggle

const [showMiniView, setShowMiniView] = useState(true);

<RGMiniToolBar positionV='top' positionH='right' direction='h'>
    <div onClick={() => setShowMiniView(!showMiniView)}>
        <LocateIcon size={14} />
    </div>
</RGMiniToolBar>
{showMiniView && <RGMiniView position='tr' />}

Icon Integration

Uses Lucide React icons for consistent styling:

import { Star, Share2, Settings, LocateIcon } from 'lucide-react';

Creative Use Cases

Graph Editor: Add save, export, undo/redo buttons to main toolbar.

Data Explorer: Include filter, search, and layout switch buttons in toolbar.

Collaboration Tool: Add share, comment, and user presence buttons.

Analytics Dashboard: Include refresh, export, and settings buttons.

Presentation Mode: Add fullscreen, zoom, and navigation controls.

Customize Toolbar Buttons

Custom Toolbar Buttons - Create custom toolbars with icon buttons