Initial commit

2025-11-30 08:41:51 +08:00
commit 43ed648a28
43 changed files with 8444 additions and 0 deletions
--- a/docs/components/edge.md
+++ b/docs/components/edge.md
@@ -0,0 +1,110 @@
+# 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',
+  },
+}}
+/>