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

Rename to "unreal" edge, fix for both horizontal and vertical handles

Browse Source
This commit is contained in:
Joey Ballentine
2022-03-14 01:06:26 -04:00
parent 726bc2e0b3
commit 3c96b07c9c
6 changed files with 27 additions and 30 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/Edges/QuarticBezierEdge.tsx → src/components/Edges/UnrealBezierEdge.tsx
+13 -7
View File
@@ -14,7 +14,7 @@ interface GetBezierPathParams {
curvature?: number;
}
export function getQuarticBezierPath({
export function getUnrealBezierPath({
sourceX,
sourceY,
sourcePosition = Position.Bottom,
@@ -27,16 +27,22 @@ export function getQuarticBezierPath({
// Distance between the source and target
const distanceX = sourceX - targetX;
const distanceY = sourceY - targetY;
// A scalar value to fix the curve size getting larger
const scalar = Math.min(curvature, Math.max(0, distanceX / 10000));
const scalarX = Math.min(curvature, Math.max(0, distanceX / 10000));
const scalarY = Math.min(curvature, Math.max(0, distanceY / 10000));
const cX = sourceX + Math.abs(targetX - sourceX) * (curvature - scalar);
const cY = targetX - Math.abs(targetX - sourceX) * (curvature - scalar);
const hx1 = sourceX + Math.abs(targetX - sourceX) * (curvature - scalarX);
const hx2 = targetX - Math.abs(targetX - sourceX) * (curvature - scalarX);
let path = `M${sourceX},${sourceY} C${sourceX},${cY} ${targetX},${cY} ${targetX},${targetY}`;
const hy1 = sourceY + Math.abs(targetY - sourceY) * (curvature - scalarY);
const hy2 = targetY - Math.abs(targetY - sourceY) * (curvature - scalarY);
let path = `M${sourceX},${sourceY} C${sourceX},${hy1} ${targetX},${hy2} ${targetX},${targetY}`;
if (leftAndRight.includes(sourcePosition) && leftAndRight.includes(targetPosition)) {
path = `M${sourceX},${sourceY} C${cX},${sourceY} ${cX},${targetY} ${targetX},${targetY}`;
path = `M${sourceX},${sourceY} C${hx1},${sourceY} ${hx2},${targetY}, ${targetX},${targetY}`;
} else if (leftAndRight.includes(targetPosition)) {
path = `M${sourceX},${sourceY} Q${sourceX},${targetY} ${targetX},${targetY}`;
} else if (leftAndRight.includes(sourcePosition)) {
@@ -66,7 +72,7 @@ export default memo(
curvature,
}: EdgeProps) => {
const [centerX, centerY] = getCenter({ sourceX, sourceY, targetX, targetY, sourcePosition, targetPosition });
const path = getQuarticBezierPath({
const path = getUnrealBezierPath({
sourceX,
sourceY,
sourcePosition,
src/components/Edges/index.ts
+1 -1
View File
@@ -1,5 +1,5 @@
export { default as BezierEdge } from './BezierEdge';
export { default as QuarticBezierEdge } from './QuarticBezierEdge';
export { default as SmoothStepEdge } from './SmoothStepEdge';
export { default as StepEdge } from './StepEdge';
export { default as StraightEdge } from './StraightEdge';
export { default as UnrealBezierEdge } from './UnrealBezierEdge';