alighasami/xyflow
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

refactor(smoothStepEdge): cleanup

Browse Source
This commit is contained in:
moklick
2020-11-15 21:14:45 +01:00
parent 2b1366fe46
commit 6c75635629
1 changed files with 26 additions and 41 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/Edges/SmoothStepEdge.tsx
+26 -41
View File
@@ -8,30 +8,18 @@ import { EdgeSmoothStepProps, Position } from '../../types';
// The name indicates the direction of the path. "bottomLeftCorner" goes // The name indicates the direction of the path. "bottomLeftCorner" goes
// from bottom to the left and "leftBottomCorner" goes from left to the bottom. // from bottom to the left and "leftBottomCorner" goes from left to the bottom.
// We have to consider the direction of the paths because of the animated lines. // We have to consider the direction of the paths because of the animated lines.
const bottomLeftCorner = (x: number, y: number, size: number): string =>
const bottomLeftCorner = (cornerX: number, cornerY: number, cornerSize: number): string => `L ${x},${y - size}Q ${x},${y} ${x + size},${y}`;
`L ${cornerX},${cornerY - cornerSize}Q ${cornerX},${cornerY} ${cornerX + cornerSize},${cornerY}`; const leftBottomCorner = (x: number, y: number, size: number): string =>
`L ${x + size},${y}Q ${x},${y} ${x},${y - size}`;
const leftBottomCorner = (cornerX: number, cornerY: number, cornerSize: number): string => const bottomRightCorner = (x: number, y: number, size: number): string =>
`L ${cornerX + cornerSize},${cornerY}Q ${cornerX},${cornerY} ${cornerX},${cornerY - cornerSize}`; `L ${x},${y - size}Q ${x},${y} ${x - size},${y}`;
const rightBottomCorner = (x: number, y: number, size: number): string =>
const bottomRightCorner = (cornerX: number, cornerY: number, cornerSize: number): string => `L ${x - size},${y}Q ${x},${y} ${x},${y - size}`;
`L ${cornerX},${cornerY - cornerSize}Q ${cornerX},${cornerY} ${cornerX - cornerSize},${cornerY}`; const leftTopCorner = (x: number, y: number, size: number): string => `L ${x + size},${y}Q ${x},${y} ${x},${y + size}`;
const topLeftCorner = (x: number, y: number, size: number): string => `L ${x},${y + size}Q ${x},${y} ${x + size},${y}`;
const rightBottomCorner = (cornerX: number, cornerY: number, cornerSize: number): string => const topRightCorner = (x: number, y: number, size: number): string => `L ${x},${y + size}Q ${x},${y} ${x - size},${y}`;
`L ${cornerX - cornerSize},${cornerY}Q ${cornerX},${cornerY} ${cornerX},${cornerY - cornerSize}`; const rightTopCorner = (x: number, y: number, size: number): string => `L ${x - size},${y}Q ${x},${y} ${x},${y + size}`;
const leftTopCorner = (cornerX: number, cornerY: number, cornerSize: number): string =>
`L ${cornerX + cornerSize},${cornerY}Q ${cornerX},${cornerY} ${cornerX},${cornerY + cornerSize}`;
const topLeftCorner = (cornerX: number, cornerY: number, cornerSize: number): string =>
`L ${cornerX},${cornerY + cornerSize}Q ${cornerX},${cornerY} ${cornerX + cornerSize},${cornerY}`;
const topRightCorner = (cornerX: number, cornerY: number, cornerSize: number): string =>
`L ${cornerX},${cornerY + cornerSize}Q ${cornerX},${cornerY} ${cornerX - cornerSize},${cornerY}`;
const rightTopCorner = (cornerX: number, cornerY: number, cornerSize: number): string =>
`L ${cornerX - cornerSize},${cornerY}Q ${cornerX},${cornerY} ${cornerX},${cornerY + cornerSize}`;
interface GetSmoothStepPathParams { interface GetSmoothStepPathParams {
sourceX: number; sourceX: number;
@@ -60,27 +48,12 @@ export function getSmoothStepPath({
const cornerWidth = Math.min(borderRadius, Math.abs(targetX - sourceX)); const cornerWidth = Math.min(borderRadius, Math.abs(targetX - sourceX));
const cornerHeight = Math.min(borderRadius, Math.abs(targetY - sourceY)); const cornerHeight = Math.min(borderRadius, Math.abs(targetY - sourceY));
const cornerSize = Math.min(cornerWidth, cornerHeight, offsetX, offsetY); const cornerSize = Math.min(cornerWidth, cornerHeight, offsetX, offsetY);
const leftAndRight = [Position.Left, Position.Right]; const leftAndRight = [Position.Left, Position.Right];
let firstCornerPath = null;
let secondCornerPath = null;
const cX = typeof centerX !== 'undefined' ? centerX : _centerX; const cX = typeof centerX !== 'undefined' ? centerX : _centerX;
const cY = typeof centerY !== 'undefined' ? centerY : _centerY; const cY = typeof centerY !== 'undefined' ? centerY : _centerY;
// default case: source and target positions are top or bottom let firstCornerPath = null;
if (sourceX <= targetX) { let secondCornerPath = null;
firstCornerPath =
sourceY <= targetY ? bottomLeftCorner(sourceX, cY, cornerSize) : topLeftCorner(sourceX, cY, cornerSize);
secondCornerPath =
sourceY <= targetY ? rightTopCorner(targetX, cY, cornerSize) : rightBottomCorner(targetX, cY, cornerSize);
} else {
firstCornerPath =
sourceY < targetY ? bottomRightCorner(sourceX, cY, cornerSize) : topRightCorner(sourceX, cY, cornerSize);
secondCornerPath =
sourceY < targetY ? leftTopCorner(targetX, cY, cornerSize) : leftBottomCorner(targetX, cY, cornerSize);
}
if (leftAndRight.includes(sourcePosition) && leftAndRight.includes(targetPosition)) { if (leftAndRight.includes(sourcePosition) && leftAndRight.includes(targetPosition)) {
if (sourceX <= targetX) { if (sourceX <= targetX) {
@@ -115,6 +88,18 @@ export function getSmoothStepPath({
: topRightCorner(sourceX, targetY, cornerSize); : topRightCorner(sourceX, targetY, cornerSize);
} }
secondCornerPath = ''; secondCornerPath = '';
} else {
if (sourceX <= targetX) {
firstCornerPath =
sourceY <= targetY ? bottomLeftCorner(sourceX, cY, cornerSize) : topLeftCorner(sourceX, cY, cornerSize);
secondCornerPath =
sourceY <= targetY ? rightTopCorner(targetX, cY, cornerSize) : rightBottomCorner(targetX, cY, cornerSize);
} else {
firstCornerPath =
sourceY < targetY ? bottomRightCorner(sourceX, cY, cornerSize) : topRightCorner(sourceX, cY, cornerSize);
secondCornerPath =
sourceY < targetY ? leftTopCorner(targetX, cY, cornerSize) : leftBottomCorner(targetX, cY, cornerSize);
}
} }
return `M ${sourceX},${sourceY}${firstCornerPath}${secondCornerPath}L ${targetX},${targetY}`; return `M ${sourceX},${sourceY}${firstCornerPath}${secondCornerPath}L ${targetX},${targetY}`;