mirror of
https://github.com/OFFIS-ESC/constellation-analyzer
synced 2026-01-27 07:43:41 +00:00
Extract rounded rectangle corner radius as a constant
Some checks failed
CI / test (push) Has been cancelled
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:
parent
603c767403
commit
094fd6d957
3 changed files with 10 additions and 3 deletions
|
|
@ -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,
|
||||||
}}
|
}}
|
||||||
>
|
>
|
||||||
|
|
|
||||||
|
|
@ -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;
|
||||||
|
|
|
||||||
|
|
@ -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 {
|
||||||
|
|
|
||||||
Loading…
Reference in a new issue