Connect to Arbitrary Targets

Demonstrates connecting nodes to arbitrary canvas elements using RGConnectTarget and RGFakeLine.

Connect to Arbitrary Targets

Functional Overview

This example demonstrates using RGConnectTarget and RGFakeLine to connect nodes to arbitrary elements on the canvas, not just other nodes. This enables creating connections to labels, annotations, or other visual elements.

Implementation of Key Features

RGConnectTarget Wrapper

<RGConnectTarget id="target-1">
    <div>Custom Element</div>
</RGConnectTarget>

Fake Lines Configuration

<RGFakeLine
    from="node-1"
    to="target-1"
    text="Connection to element"
/>

Canvas-Level Connections

Connect nodes to any element on the canvas, not just graph nodes.

Creative Use Cases

Annotations: Connect nodes to explanatory text or notes. Links nodes to documentation.

Swimlanes: Connect tasks to swimlane labels. Shows which swimlane contains which tasks.

Group Labels: Connect nodes to group headers. Visual grouping without strict hierarchy.

Status Indicators: Connect nodes to status panels. Shows node status in external indicator.

Legends: Connect nodes to legend entries. Explains node types and colors.

Metrics Panels: Connect nodes to metrics displays. Shows performance data for components.

Timelines: Connect events to timeline markers. Temporal visualization with graph.

External Controls: Connect graph elements to UI controls. Interactive dashboards.