Extract rounded rectangle corner radius as a constant
Some checks failed
CI / test (push) Has been cancelled

Changes:
- Add ROUNDED_RECTANGLE_RADIUS = 24 to src/constants.ts
- Update RoundedRectangleShape to import and use the constant
- Update edgeUtils.ts to import and use the constant
- Ensures consistency between component rendering and edge calculations

Improves maintainability by having a single source of truth for the
rounded rectangle corner radius value.
This commit is contained in:
Jan-Henrik Bruhn 2026-01-24 16:54:50 +01:00
parent 603c767403
commit 094fd6d957
3 changed files with 10 additions and 3 deletions

View file

@ -1,4 +1,5 @@
import { ReactNode } from 'react'; import { ReactNode } from 'react';
import { ROUNDED_RECTANGLE_RADIUS } from '../../../constants';
interface RoundedRectangleShapeProps { interface RoundedRectangleShapeProps {
color: string; color: string;
@ -41,7 +42,7 @@ const RoundedRectangleShape = ({
borderStyle: 'solid', borderStyle: 'solid',
borderColor: borderColor, borderColor: borderColor,
color: textColor, color: textColor,
borderRadius: '24px', // More rounded than regular rectangle borderRadius: `${ROUNDED_RECTANGLE_RADIUS}px`,
boxShadow: shadowStyle, boxShadow: shadowStyle,
}} }}
> >

View file

@ -13,3 +13,8 @@ export const MINIMIZED_GROUP_HEIGHT = 80;
*/ */
export const DEFAULT_ACTOR_WIDTH = 150; export const DEFAULT_ACTOR_WIDTH = 150;
export const DEFAULT_ACTOR_HEIGHT = 80; export const DEFAULT_ACTOR_HEIGHT = 80;
/**
* Rounded rectangle corner radius (in pixels)
*/
export const ROUNDED_RECTANGLE_RADIUS = 24;

View file

@ -1,5 +1,6 @@
import type { Relation, RelationData, NodeShape } from '../types'; import type { Relation, RelationData, NodeShape } from '../types';
import type { Node } from '@xyflow/react'; import type { Node } from '@xyflow/react';
import { ROUNDED_RECTANGLE_RADIUS } from '../constants';
/** /**
* Generates a unique ID for edges * Generates a unique ID for edges
@ -206,7 +207,7 @@ function getRoundedRectangleIntersection(
height: number, height: number,
targetX: number, targetX: number,
targetY: number, targetY: number,
cornerRadius: number = 24, cornerRadius: number = ROUNDED_RECTANGLE_RADIUS,
offset: number = 2 offset: number = 2
): { x: number; y: number; angle: number } { ): { x: number; y: number; angle: number } {
const w = width / 2; const w = width / 2;
@ -347,7 +348,7 @@ function getNodeIntersection(
intersectionNodeHeight, intersectionNodeHeight,
targetCenterX, targetCenterX,
targetCenterY, targetCenterY,
24, // Corner radius matches RoundedRectangleShape component ROUNDED_RECTANGLE_RADIUS,
offset offset
); );
} else { } else {