diff --git a/example/src/EdgeTypes/utils.ts b/example/src/EdgeTypes/utils.ts index a6d898d7..b4eedab5 100644 --- a/example/src/EdgeTypes/utils.ts +++ b/example/src/EdgeTypes/utils.ts @@ -9,7 +9,7 @@ const sourceTargetPositions = [ { source: Position.Right, target: Position.Left }, ]; const nodeColors = [ - ['#1e9e99', '#4cb3ac', '#6ec9c0', '#8ddfd4', '#c4fff7'], + ['#0c5956', '#1e9e99', '#4cb3ac', '#6ec9c0', '#8ddfd4'], ['#0f4c75', '#1b5d8b', '#276fa1', '#3282b8', '#4fa6e0'], ]; const edgeTypes = ['default', 'step', 'smoothstep', 'straight', 'simplebezier']; diff --git a/src/components/Edges/BezierEdge.tsx b/src/components/Edges/BezierEdge.tsx index 900d140e..f90c48d6 100644 --- a/src/components/Edges/BezierEdge.tsx +++ b/src/components/Edges/BezierEdge.tsx @@ -1,8 +1,8 @@ import React, { memo } from 'react'; - +import { EdgeProps, Position } from '../../types'; import BaseEdge from './BaseEdge'; import { getCenter } from './utils'; -import { EdgeProps, Position } from '../../types'; + export interface GetBezierPathParams { sourceX: number; @@ -23,7 +23,7 @@ export function getBezierPath({ targetX, targetY, targetPosition = Position.Top, - curvature = 0.5, + curvature = 0.4, centerX, centerY, }: GetBezierPathParams): string { @@ -32,39 +32,35 @@ export function getBezierPath({ let cX, cY = 0; - if (!hasCurvature) { - const [_centerX, _centerY] = getCenter({ sourceX, sourceY, targetX, targetY }); - cX = typeof centerX !== 'undefined' ? centerX : _centerX; - cY = typeof centerY !== 'undefined' ? centerY : _centerY; - } - - let path = ''; + const [_centerX, _centerY] = getCenter({ sourceX, sourceY, targetX, targetY }); if (leftAndRight.includes(sourcePosition) && leftAndRight.includes(targetPosition)) { - const distanceX = sourceX - targetX; - const scalarX = Math.min(curvature, Math.max(0, distanceX / 10000)); - const hx1 = sourceX + Math.abs(targetX - sourceX) * (curvature - scalarX); - const hx2 = targetX - Math.abs(targetX - sourceX) * (curvature - scalarX); + cX = typeof centerX !== 'undefined' ? centerX : _centerX; + const distanceX = targetX - sourceX; + const absDistanceX = Math.abs(Math.min(0, distanceX)); + const amtX = (Math.sqrt(absDistanceX) / 2) * (50 * curvature); - path = hasCurvature - ? `M${sourceX},${sourceY} C${hx1},${sourceY} ${hx2},${targetY}, ${targetX},${targetY}` - : `M${sourceX},${sourceY} C${cX},${sourceY} ${cX},${targetY} ${targetX},${targetY}`; + const hx1 = hasCurvature && distanceX < 0 ? sourceX + amtX : cX; + const hx2 = hasCurvature && distanceX < 0 ? targetX - amtX : cX; + + return `M${sourceX},${sourceY} C${hx1},${sourceY} ${hx2},${targetY}, ${targetX},${targetY}` } else if (leftAndRight.includes(targetPosition)) { - path = `M${sourceX},${sourceY} Q${sourceX},${targetY} ${targetX},${targetY}`; + return `M${sourceX},${sourceY} Q${sourceX},${targetY} ${targetX},${targetY}`; } else if (leftAndRight.includes(sourcePosition)) { - path = `M${sourceX},${sourceY} Q${targetX},${sourceY} ${targetX},${targetY}`; - } else { - const distanceY = sourceY - targetY; - const scalarY = Math.min(curvature, Math.max(0, distanceY / 10000)); - const hy1 = sourceY + Math.abs(targetY - sourceY) * (curvature - scalarY); - const hy2 = targetY - Math.abs(targetY - sourceY) * (curvature - scalarY); - - path = hasCurvature - ? `M${sourceX},${sourceY} C${sourceX},${hy1} ${targetX},${hy2} ${targetX},${targetY}` - : `M${sourceX},${sourceY} C${sourceX},${cY} ${targetX},${cY} ${targetX},${targetY}`; + return `M${sourceX},${sourceY} Q${targetX},${sourceY} ${targetX},${targetY}`; } - return path; + cY = typeof centerY !== 'undefined' ? centerY : _centerY; + const distanceY = targetY - sourceY; + + const absDistanceY = Math.abs(Math.min(0, distanceY)); + const amtY = (Math.sqrt(absDistanceY) / 2) * (50 * curvature); + + const hy1 = hasCurvature && distanceY < 0 ? sourceY + amtY : cY; + const hy2 = hasCurvature && distanceY < 0 ? targetY - amtY : cY; + + return `M${sourceX},${sourceY} C${sourceX},${hy1} ${targetX},${hy2} ${targetX},${targetY}` + } export default memo(