111 lines
2.8 KiB
Markdown
111 lines
2.8 KiB
Markdown
# Edge
|
|
|
|
URL: /components/edge
|
|
|
|
---
|
|
|
|
title: Edge
|
|
description: Customizable edge components for React Flow canvases with animated and temporary states.
|
|
path: elements/components/edge
|
|
|
|
---
|
|
|
|
The `Edge` component provides two pre-styled edge types for React Flow canvases: `Temporary` for dashed temporary connections and `Animated` for connections with animated indicators.
|
|
|
|
<Callout>
|
|
The Edge component is designed to be used with the [Canvas](/elements/components/canvas) component. See the [Workflow](/elements/examples/workflow) demo for a full example.
|
|
</Callout>
|
|
|
|
## Installation
|
|
|
|
<ElementsInstaller path="edge" />
|
|
|
|
## Usage
|
|
|
|
```tsx
|
|
import { Edge } from "@/components/ai-elements/edge";
|
|
```
|
|
|
|
```tsx
|
|
const edgeTypes = {
|
|
temporary: Edge.Temporary,
|
|
animated: Edge.Animated,
|
|
};
|
|
|
|
<Canvas nodes={nodes} edges={edges} edgeTypes={edgeTypes} />;
|
|
```
|
|
|
|
## Features
|
|
|
|
- Two distinct edge types: Temporary and Animated
|
|
- Temporary edges use dashed lines with ring color
|
|
- Animated edges include a moving circle indicator
|
|
- Automatic handle position calculation
|
|
- Smart offset calculation based on handle type and position
|
|
- Uses Bezier curves for smooth, natural-looking connections
|
|
- Fully compatible with React Flow's edge system
|
|
- Type-safe implementation with TypeScript
|
|
|
|
## Edge Types
|
|
|
|
### `Edge.Temporary`
|
|
|
|
A dashed edge style for temporary or preview connections. Uses a simple Bezier path with a dashed stroke pattern.
|
|
|
|
### `Edge.Animated`
|
|
|
|
A solid edge with an animated circle that moves along the path. The animation repeats indefinitely with a 2-second duration, providing visual feedback for active connections.
|
|
|
|
## Props
|
|
|
|
Both edge types accept standard React Flow `EdgeProps`:
|
|
|
|
<TypeTable
|
|
type={{
|
|
id: {
|
|
description: 'Unique identifier for the edge.',
|
|
type: 'string',
|
|
},
|
|
source: {
|
|
description: 'ID of the source node.',
|
|
type: 'string',
|
|
},
|
|
target: {
|
|
description: 'ID of the target node.',
|
|
type: 'string',
|
|
},
|
|
sourceX: {
|
|
description: 'X coordinate of the source handle (Temporary only).',
|
|
type: 'number',
|
|
},
|
|
sourceY: {
|
|
description: 'Y coordinate of the source handle (Temporary only).',
|
|
type: 'number',
|
|
},
|
|
targetX: {
|
|
description: 'X coordinate of the target handle (Temporary only).',
|
|
type: 'number',
|
|
},
|
|
targetY: {
|
|
description: 'Y coordinate of the target handle (Temporary only).',
|
|
type: 'number',
|
|
},
|
|
sourcePosition: {
|
|
description: 'Position of the source handle (Left, Right, Top, Bottom).',
|
|
type: 'Position',
|
|
},
|
|
targetPosition: {
|
|
description: 'Position of the target handle (Left, Right, Top, Bottom).',
|
|
type: 'Position',
|
|
},
|
|
markerEnd: {
|
|
description: 'SVG marker ID for the edge end (Animated only).',
|
|
type: 'string',
|
|
},
|
|
style: {
|
|
description: 'Custom styles for the edge (Animated only).',
|
|
type: 'React.CSSProperties',
|
|
},
|
|
}}
|
|
/>
|