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

Merge pull request #536 from wbkd/develop

Browse Source 
Develop
This commit is contained in:
Moritz
2020-09-27 22:22:43 +02:00
committed by GitHub
parent 9d9dce4b25 993055e08b
commit 604dde9592
3 changed files with 29 additions and 19 deletions
Download Patch File Download Diff File Expand all files Collapse all files

6
README.md
View File

@@ -350,6 +350,8 @@ Returns the path of a bezier edge.
targetX,
targetY,
targetPosition = Position.Top,
centerX, // optional
centerY // optional
}: GetBezierPathParams): string`
### getSmoothStepPath
@@ -364,11 +366,13 @@ Returns the path of a smooth step edge. You can set `borderRadius` = `0` to get
targetY,
targetPosition = Position.Top,
borderRadius = 5,
centerX, // optional
centerY // optional
}: GetSmoothStepPathParams): string`
### getEdgeCenter
Returns the center poostion `[centerX, centerY]` of the edge.
Returns the center poostion `[centerX, centerY, offsetX, offsetY]` of the edge.
`getEdgeCenter({ sourceX, sourceY, targetX, targetY }: GetCenterParams): [number, number, number, number]`

13
src/components/Edges/BezierEdge.tsx
View File

@@ -12,6 +12,8 @@ interface GetBezierPathParams {
targetX: number;
targetY: number;
targetPosition?: Position;
centerX?: number;
centerY?: number;
}
export function getBezierPath({
@@ -21,14 +23,19 @@ export function getBezierPath({
targetX,
targetY,
targetPosition = Position.Top,
centerX,
centerY,
}: GetBezierPathParams): string {
const [centerX, centerY] = getCenter({ sourceX, sourceY, targetX, targetY });
const [_centerX, _centerY] = getCenter({ sourceX, sourceY, targetX, targetY });
const leftAndRight = [Position.Left, Position.Right];
let path = `M${sourceX},${sourceY} C${sourceX},${centerY} ${targetX},${centerY} ${targetX},${targetY}`;
const cX = typeof centerX !== 'undefined' ? centerX : _centerX;
const cY = typeof centerY !== 'undefined' ? centerY : _centerY;
let path = `M${sourceX},${sourceY} C${sourceX},${cY} ${targetX},${cY} ${targetX},${targetY}`;
if (leftAndRight.includes(sourcePosition) && leftAndRight.includes(targetPosition)) {
path = `M${sourceX},${sourceY} C${centerX},${sourceY} ${centerX},${targetY} ${targetX},${targetY}`;
path = `M${sourceX},${sourceY} C${cX},${sourceY} ${cX},${targetY} ${targetX},${targetY}`;
} else if (leftAndRight.includes(targetPosition)) {
path = `M${sourceX},${sourceY} C${sourceX},${targetY} ${sourceX},${targetY} ${targetX},${targetY}`;
} else if (leftAndRight.includes(sourcePosition)) {

29
src/components/Edges/SmoothStepEdge.tsx
View File

@@ -41,6 +41,8 @@ interface GetSmoothStepPathParams {
targetY: number;
targetPosition?: Position;
borderRadius?: number;
centerX?: number;
centerY?: number;
}
export function getSmoothStepPath({
@@ -51,8 +53,10 @@ export function getSmoothStepPath({
targetY,
targetPosition = Position.Top,
borderRadius = 5,
centerX,
centerY,
}: GetSmoothStepPathParams): string {
const [centerX, centerY, offsetX, offsetY] = getCenter({ sourceX, sourceY, targetX, targetY });
const [_centerX, _centerY, offsetX, offsetY] = getCenter({ sourceX, sourceY, targetX, targetY });
const cornerWidth = Math.min(borderRadius, Math.abs(targetX - sourceX));
const cornerHeight = Math.min(borderRadius, Math.abs(targetY - sourceY));
const cornerSize = Math.min(cornerWidth, cornerHeight, offsetX, offsetY);
@@ -62,33 +66,28 @@ export function getSmoothStepPath({
let firstCornerPath = null;
let secondCornerPath = null;
const cX = typeof centerX !== 'undefined' ? centerX : _centerX;
const cY = typeof centerY !== 'undefined' ? centerY : _centerY;
// default case: source and target positions are top or bottom
if (sourceX <= targetX) {
firstCornerPath =
sourceY <= targetY ? bottomLeftCorner(sourceX, centerY, cornerSize) : topLeftCorner(sourceX, centerY, cornerSize);
sourceY <= targetY ? bottomLeftCorner(sourceX, cY, cornerSize) : topLeftCorner(sourceX, cY, cornerSize);
secondCornerPath =
sourceY <= targetY
? rightTopCorner(targetX, centerY, cornerSize)
: rightBottomCorner(targetX, centerY, cornerSize);
sourceY <= targetY ? rightTopCorner(targetX, cY, cornerSize) : rightBottomCorner(targetX, cY, cornerSize);
} else {
firstCornerPath =
sourceY < targetY
? bottomRightCorner(sourceX, centerY, cornerSize)
: topRightCorner(sourceX, centerY, cornerSize);
sourceY < targetY ? bottomRightCorner(sourceX, cY, cornerSize) : topRightCorner(sourceX, cY, cornerSize);
secondCornerPath =
sourceY < targetY ? leftTopCorner(targetX, centerY, cornerSize) : leftBottomCorner(targetX, centerY, cornerSize);
sourceY < targetY ? leftTopCorner(targetX, cY, cornerSize) : leftBottomCorner(targetX, cY, cornerSize);
}
if (leftAndRight.includes(sourcePosition) && leftAndRight.includes(targetPosition)) {
if (sourceX <= targetX) {
firstCornerPath =
sourceY <= targetY
? rightTopCorner(centerX, sourceY, cornerSize)
: rightBottomCorner(centerX, sourceY, cornerSize);
sourceY <= targetY ? rightTopCorner(cX, sourceY, cornerSize) : rightBottomCorner(cX, sourceY, cornerSize);
secondCornerPath =
sourceY <= targetY
? bottomLeftCorner(centerX, targetY, cornerSize)
: topLeftCorner(centerX, targetY, cornerSize);
sourceY <= targetY ? bottomLeftCorner(cX, targetY, cornerSize) : topLeftCorner(cX, targetY, cornerSize);
}
} else if (leftAndRight.includes(sourcePosition) && !leftAndRight.includes(targetPosition)) {
if (sourceX <= targetX) {