feat(smoothstepedge): add border radius param

This commit is contained in:
moklick
2020-07-21 16:47:35 +02:00
parent d40c74e54c
commit 70121edcd8
2 changed files with 12 additions and 4 deletions
+8 -4
View File
@@ -2,7 +2,7 @@ import React, { memo } from 'react';
import EdgeText from './EdgeText'; import EdgeText from './EdgeText';
import { getMarkerEnd } from './utils'; import { getMarkerEnd } from './utils';
import { EdgeBezierProps, Position } from '../../types'; import { EdgeSmoothStepProps, Position } from '../../types';
// These are some helper methods for drawing the round corners // These are some helper methods for drawing the round corners
// The name indicates the direction of the path. "bottomLeftCorner" goes // The name indicates the direction of the path. "bottomLeftCorner" goes
@@ -44,6 +44,7 @@ interface GetSmoothStepPathParams {
targetX: number; targetX: number;
targetY: number; targetY: number;
targetPosition?: Position; targetPosition?: Position;
borderRadius?: number;
} }
export function getSmoothStepPath({ export function getSmoothStepPath({
@@ -57,9 +58,10 @@ export function getSmoothStepPath({
targetX, targetX,
targetY, targetY,
targetPosition = Position.Top, targetPosition = Position.Top,
borderRadius = 5,
}: GetSmoothStepPathParams): string { }: GetSmoothStepPathParams): string {
const cornerWidth = Math.min(5, Math.abs(targetX - sourceX)); const cornerWidth = Math.min(borderRadius, Math.abs(targetX - sourceX));
const cornerHeight = Math.min(5, Math.abs(targetY - sourceY)); const cornerHeight = Math.min(borderRadius, Math.abs(targetY - sourceY));
const cornerSize = Math.min(cornerWidth, cornerHeight, xOffset, yOffset); const cornerSize = Math.min(cornerWidth, cornerHeight, xOffset, yOffset);
const leftAndRight = [Position.Left, Position.Right]; const leftAndRight = [Position.Left, Position.Right];
@@ -141,7 +143,8 @@ export default memo(
targetPosition = Position.Top, targetPosition = Position.Top,
arrowHeadType, arrowHeadType,
markerEndId, markerEndId,
}: EdgeBezierProps) => { borderRadius = 5,
}: EdgeSmoothStepProps) => {
const yOffset = Math.abs(targetY - sourceY) / 2; const yOffset = Math.abs(targetY - sourceY) / 2;
const centerY = targetY < sourceY ? targetY + yOffset : targetY - yOffset; const centerY = targetY < sourceY ? targetY + yOffset : targetY - yOffset;
@@ -159,6 +162,7 @@ export default memo(
targetX, targetX,
targetY, targetY,
targetPosition, targetPosition,
borderRadius,
}); });
const markerEnd = getMarkerEnd(arrowHeadType, markerEndId); const markerEnd = getMarkerEnd(arrowHeadType, markerEndId);
+4
View File
@@ -99,6 +99,10 @@ export interface EdgeBezierProps extends EdgeProps {
targetPosition: Position; targetPosition: Position;
} }
export interface EdgeSmoothStepProps extends EdgeBezierProps {
borderRadius?: number;
}
export interface NodeProps { export interface NodeProps {
id: ElementId; id: ElementId;
type: string; type: string;