Custom Line Arrow Markers

Demonstrates how to create and dynamically switch between custom arrow marker styles for connection lines using SVG marker definitions.

Custom Line Arrow Markers

Functional Overview

This example demonstrates how to create custom arrow markers for connection lines using SVG marker definitions. Multiple arrow styles are provided with a selector to switch between them dynamically.

Implementation of Key Features

Define Custom Arrow Markers

Create an array of marker configuration objects with SVG path data:

const myArrows = [
    {
        viewBox: '0 0 12 12',
        markerWidth: 30,
        markerHeight: 30,
        refX: 3,
        refY: 3,
        data: 'M 0 0, V 6, L 4 3, Z'  // Triangle arrow
    },
    {
        viewBox: '0 0 12 12',
        markerWidth: 20,
        markerHeight: 20,
        refX: 2,
        refY: 3,
        data: 'M0 0 H6 V6 H0 Z'  // Square arrow
    },
    {
        viewBox: '0 0 12 12',
        markerWidth: 30,
        markerHeight: 30,
        refX: 2,
        refY: 3,
        data: `M 0 3 A 3 3 0 0 1 6 3 A 3 3 0 0 1 0 3`  // Semicircle arrow
    },
    {
        viewBox: "0 0 12 12",
        markerWidth: 40,
        markerHeight: 40,
        refX: 2,
        refY: 3,
        data: `M 4 6, V 0, L 0 3, Z`  // Custom shape
    }
];

Apply Custom Arrow via Options

Set the defaultLineMarker option to apply your custom arrow to all lines:

const graphOptions: RGOptions = {
    defaultLineMarker: myArrows[myArrowIndex]
};

Dynamic Arrow Switching

Update the arrow style by changing the index and updating options:

useEffect(() => {
    graphInstance.updateOptions({
        defaultLineMarker: myArrows[myArrowIndex]
    });
}, [myArrowIndex]);

Layout Switching

Switch between tree and center layouts with appropriate shape changes:

const onLayoutNameChanged = async () => {
    if (layoutName === 'center') {
        graphInstance.updateOptions({
            defaultNodeShape: RGNodeShape.circle,
            defaultLineShape: RGLineShape.StandardStraight,
            defaultJunctionPoint: RGJunctionPoint.border,
            layout: { layoutName: layoutName }
        });
    } else {
        graphInstance.updateOptions({
            defaultNodeShape: RGNodeShape.rect,
            defaultLineShape: RGLineShape.StandardCurve,
            defaultJunctionPoint: RGJunctionPoint.lr,
            layout: { layoutName: layoutName }
        });
    }
    await graphInstance.doLayout();
    graphInstance.moveToCenter();
    graphInstance.zoomToFit();
};

Arrow Selection UI

Provide a dropdown to select different arrow styles:

<SimpleUISelect
    data={[
        { value: 0, text: 'My Arrow 1' },
        { value: 1, text: 'My Arrow 2' },
        { value: 2, text: 'My Arrow 3' },
        { value: 3, text: 'My Arrow 4' }
    ]}
    currentValue={myArrowIndex}
    onChange={(newValue: number) => { setMyArrowIndex(newValue); }}
/>

Creative Use Cases

• Data Flow Diagrams: Use different arrows for different data types
• Process Flows: Indicate process types with directional indicators
• Network Topologies: Show connection types with varied arrows
• State Machines: Use custom arrows for state transitions
• Biological Pathways: Use specialized arrows for molecular interactions