feat(smoothstepedge): add border radius param
This commit is contained in:
@@ -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);
|
||||||
|
|||||||
@@ -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;
|
||||||
|
|||||||
Reference in New Issue
Block a user