diff --git a/src/components/Nodes/Shapes/RoundedRectangleShape.tsx b/src/components/Nodes/Shapes/RoundedRectangleShape.tsx index f207fa5..fcf211b 100644 --- a/src/components/Nodes/Shapes/RoundedRectangleShape.tsx +++ b/src/components/Nodes/Shapes/RoundedRectangleShape.tsx @@ -1,4 +1,5 @@ import { ReactNode } from 'react'; +import { ROUNDED_RECTANGLE_RADIUS } from '../../../constants'; interface RoundedRectangleShapeProps { color: string; @@ -41,7 +42,7 @@ const RoundedRectangleShape = ({ borderStyle: 'solid', borderColor: borderColor, color: textColor, - borderRadius: '24px', // More rounded than regular rectangle + borderRadius: `${ROUNDED_RECTANGLE_RADIUS}px`, boxShadow: shadowStyle, }} > diff --git a/src/constants.ts b/src/constants.ts index a2b186b..1a49d2c 100644 --- a/src/constants.ts +++ b/src/constants.ts @@ -13,3 +13,8 @@ export const MINIMIZED_GROUP_HEIGHT = 80; */ export const DEFAULT_ACTOR_WIDTH = 150; export const DEFAULT_ACTOR_HEIGHT = 80; + +/** + * Rounded rectangle corner radius (in pixels) + */ +export const ROUNDED_RECTANGLE_RADIUS = 24; diff --git a/src/utils/edgeUtils.ts b/src/utils/edgeUtils.ts index a3adf26..b045be2 100644 --- a/src/utils/edgeUtils.ts +++ b/src/utils/edgeUtils.ts @@ -1,5 +1,6 @@ import type { Relation, RelationData, NodeShape } from '../types'; import type { Node } from '@xyflow/react'; +import { ROUNDED_RECTANGLE_RADIUS } from '../constants'; /** * Generates a unique ID for edges @@ -206,7 +207,7 @@ function getRoundedRectangleIntersection( height: number, targetX: number, targetY: number, - cornerRadius: number = 24, + cornerRadius: number = ROUNDED_RECTANGLE_RADIUS, offset: number = 2 ): { x: number; y: number; angle: number } { const w = width / 2; @@ -347,7 +348,7 @@ function getNodeIntersection( intersectionNodeHeight, targetCenterX, targetCenterY, - 24, // Corner radius matches RoundedRectangleShape component + ROUNDED_RECTANGLE_RADIUS, offset ); } else {