Custom Line Operation Toolbar

Demonstrates how to create a dynamic toolbar that appears when a line is selected, showing custom operations that automatically position based on line coordinates.

Custom Line Operation Toolbar

Functional Overview

This example demonstrates how to create a dynamic toolbar that appears when a line is selected, showing custom operations for the selected line. The toolbar position automatically adjusts based on line coordinates and updates during dragging and zooming.

Implementation of Key Features

Line Selection Handler

Implement onLineClick to set the editing line when a line is clicked:

const onLineClick = (lineObject: RGLine, linkObject: RGLink) => {
    graphInstance.setEditingLine(lineObject);
};

Custom Line Toolbar Component

Create a MyLineToolbar component that:

• Gets the currently selected line from graphInstance
• Calculates the midpoint position between line start and end points
• Displays operation buttons at the calculated position

const MyLineToolbar = ({ onLinePropChange, onRemoveLine }: MyLineToolbarProps) => {
    const editingLine = graphInstance.getEditingLine();
    if (!editingLine) return null;

    const lineConfig = graphInstance.generateLineConfig(editingLine);
    const midpoint = {
        x: (lineConfig.startPoint.x + lineConfig.endPoint.x) / 2,
        y: (lineConfig.startPoint.y + lineConfig.endPoint.y) / 2
    };

    return (
        <div style={{
            position: 'absolute',
            left: midpoint.x,
            top: midpoint.y,
            transform: 'translate(-50%, -50%)'
        }}>
            {/* Toolbar buttons */}
        </div>
    );
};

Line Property Modification

Implement handlers to modify line properties dynamically:

const onLinePropChange = (line: RGLine, propName: string, newValue: any) => {
    graphInstance.updateLine(line, {
        [propName]: newValue
    });
};

Line Removal

Handle line deletion with user feedback:

const onRemoveLine = (line: RGLine) => {
    SimpleGlobalMessage.warning('Line Removed:' + line.text);
    graphInstance.removeLine(line);
    graphInstance.setEditingLine(null);
    graphInstance.clearChecked();
};

Node and Canvas Click Handling

Clear line selection when clicking on nodes or canvas:

const onNodeClick = (nodeObject: RGNode, $event: RGUserEvent) => {
    graphInstance.setEditingNodes([nodeObject]);
    graphInstance.setEditingLine(null);
};

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

View Slot Integration

Place the custom toolbar in the view slot alongside other editing controllers:

<RelationGraph
    onLineClick={onLineClick}
    onNodeClick={onNodeClick}
>
    <RGSlotOnView>
        <RGEditingConnectController />
        <MyLineToolbar onLinePropChange={onLinePropChange} onRemoveLine={onRemoveLine} />
    </RGSlotOnView>
</RelationGraph>

Creative Use Cases

• Network Management: Display connection status, bandwidth, or latency info
• Flow Chart Editors: Provide options to add conditions, loops, or parallel paths
• Circuit Designers: Show component values or allow parameter adjustment
• Process Mapping: Enable adding documentation or timestamps to connections
• Social Networks: Display relationship types or interaction strength controls