From 55549ec5d7c71114c3aab3d7d9281ab0b3a9f846 Mon Sep 17 00:00:00 2001 From: moklick Date: Sun, 27 Sep 2020 22:25:16 +0200 Subject: [PATCH 1/3] docs(readme): add offset params to getEdgeCenter closes #523 --- README.md | 6 +++++- 1 file changed, 5 insertions(+), 1 deletion(-) diff --git a/README.md b/README.md index 8fa7c45d..8bd0e870 100644 --- a/README.md +++ b/README.md @@ -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]` From b7e27094bb0ed8648ca452c8fe99f6ede465ceff Mon Sep 17 00:00:00 2001 From: moklick Date: Sun, 27 Sep 2020 22:26:41 +0200 Subject: [PATCH 2/3] =?UTF-8?q?feat(edge-utils):=20add=20center=20=C3=BCar?= =?UTF-8?q?am=20to=20bezier=20and=20step=20edge=20helpers=20closes=20#522?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/components/Edges/BezierEdge.tsx | 13 ++++++++--- src/components/Edges/SmoothStepEdge.tsx | 29 ++++++++++++------------- 2 files changed, 24 insertions(+), 18 deletions(-) diff --git a/src/components/Edges/BezierEdge.tsx b/src/components/Edges/BezierEdge.tsx index 6820e98a..58f854ea 100644 --- a/src/components/Edges/BezierEdge.tsx +++ b/src/components/Edges/BezierEdge.tsx @@ -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 = centerX ? centerX : _centerX; + const cY = centerY ? 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)) { diff --git a/src/components/Edges/SmoothStepEdge.tsx b/src/components/Edges/SmoothStepEdge.tsx index 4df73ac9..e0c893b9 100644 --- a/src/components/Edges/SmoothStepEdge.tsx +++ b/src/components/Edges/SmoothStepEdge.tsx @@ -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 = centerX ? centerX : _centerX; + const cY = centerY ? 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) { From 993055e08b340367cd8c64127bfe480123cdb395 Mon Sep 17 00:00:00 2001 From: moklick Date: Sun, 27 Sep 2020 22:28:43 +0200 Subject: [PATCH 3/3] refactor(edge-utils): check center params for undefined --- src/components/Edges/BezierEdge.tsx | 4 ++-- src/components/Edges/SmoothStepEdge.tsx | 4 ++-- 2 files changed, 4 insertions(+), 4 deletions(-) diff --git a/src/components/Edges/BezierEdge.tsx b/src/components/Edges/BezierEdge.tsx index 58f854ea..18c62e40 100644 --- a/src/components/Edges/BezierEdge.tsx +++ b/src/components/Edges/BezierEdge.tsx @@ -29,8 +29,8 @@ export function getBezierPath({ const [_centerX, _centerY] = getCenter({ sourceX, sourceY, targetX, targetY }); const leftAndRight = [Position.Left, Position.Right]; - const cX = centerX ? centerX : _centerX; - const cY = centerY ? centerY : _centerY; + 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}`; diff --git a/src/components/Edges/SmoothStepEdge.tsx b/src/components/Edges/SmoothStepEdge.tsx index e0c893b9..cd95b95f 100644 --- a/src/components/Edges/SmoothStepEdge.tsx +++ b/src/components/Edges/SmoothStepEdge.tsx @@ -66,8 +66,8 @@ export function getSmoothStepPath({ let firstCornerPath = null; let secondCornerPath = null; - const cX = centerX ? centerX : _centerX; - const cY = centerY ? centerY : _centerY; + 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) {