diff --git a/src/App.tsx b/src/App.tsx
index 1e0290b..4e0b2af 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -12,6 +12,8 @@ import {
Node,
Edge,
Connection,
+ ConnectionLineType,
+ ConnectionLineComponent,
} from '@xyflow/react'
import '@xyflow/react/dist/style.css'
import './reactflow-dark.css'
@@ -32,6 +34,39 @@ const nodeTypes = {
customNode: CustomNode,
}
+const CustomConnectionLine: ConnectionLineComponent = ({
+ fromX,
+ fromY,
+ toX,
+ toY,
+ connectionLineStyle,
+}: {
+ fromX: number
+ fromY: number
+ toX: number
+ toY: number
+ connectionLineStyle?: React.CSSProperties
+}) => {
+ // Calculate midpoint
+ const midX = (fromX + toX) / 2
+ const midY = (fromY + toY) / 2
+
+ // Create a curved path
+ const path = `M${fromX},${fromY} Q${midX},${fromY} ${midX},${midY} T${toX},${toY}`
+
+ return (
+
+
+
+ )
+}
+
function AudioDeviceArrangerApp() {
const {
devices,
@@ -212,6 +247,8 @@ function AudioDeviceArrangerApp() {
fitView
fitViewOptions={{ padding: 0.2, minZoom: 0.5, maxZoom: 2 }}
className={isDarkMode ? 'dark-flow' : ''}
+ connectionLineType={ConnectionLineType.SmoothStep}
+ connectionLineComponent={CustomConnectionLine}
>
diff --git a/src/components/CustomConnectionLine.tsx b/src/components/CustomConnectionLine.tsx
new file mode 100644
index 0000000..bbb6930
--- /dev/null
+++ b/src/components/CustomConnectionLine.tsx
@@ -0,0 +1,35 @@
+import React from 'react'
+import {
+ ConnectionLineComponentProps,
+ getBezierPath,
+ Position,
+} from '@xyflow/react'
+
+const CustomConnectionLine: React.FC = ({
+ fromX,
+ fromY,
+ toX,
+ toY,
+ connectionLineStyle,
+}) => {
+ const [edgePath] = getBezierPath({
+ sourceX: fromX,
+ sourceY: fromY,
+ sourcePosition: 'bottom' as Position,
+ targetX: toX,
+ targetY: toY,
+ targetPosition: 'top' as Position,
+ })
+
+ return (
+
+ )
+}
+
+export default CustomConnectionLine