diff --git a/packages/core/src/components/Edges/BezierEdge.tsx b/packages/core/src/components/Edges/BezierEdge.tsx index 377350a0..11ad64b1 100644 --- a/packages/core/src/components/Edges/BezierEdge.tsx +++ b/packages/core/src/components/Edges/BezierEdge.tsx @@ -1,7 +1,8 @@ import { memo } from 'react'; -import { BezierEdgeProps, Position } from '../../types'; + import BaseEdge from './BaseEdge'; import { getBezierEdgeCenter } from './utils'; +import { BezierEdgeProps, Position } from '../../types'; export interface GetBezierPathParams { sourceX: number; @@ -25,40 +26,22 @@ interface GetControlWithCurvatureParams { function calculateControlOffset(distance: number, curvature: number): number { if (distance >= 0) { return 0.5 * distance; - } else { - return curvature * 25 * Math.sqrt(-distance); } + + return curvature * 25 * Math.sqrt(-distance); } function getControlWithCurvature({ pos, x1, y1, x2, y2, c }: GetControlWithCurvatureParams): [number, number] { - let ctX: number, ctY: number; switch (pos) { case Position.Left: - { - ctX = x1 - calculateControlOffset(x1 - x2, c); - ctY = y1; - } - break; + return [x1 - calculateControlOffset(x1 - x2, c), y1]; case Position.Right: - { - ctX = x1 + calculateControlOffset(x2 - x1, c); - ctY = y1; - } - break; + return [x1 + calculateControlOffset(x2 - x1, c), y1]; case Position.Top: - { - ctX = x1; - ctY = y1 - calculateControlOffset(y1 - y2, c); - } - break; + return [x1, y1 - calculateControlOffset(y1 - y2, c)]; case Position.Bottom: - { - ctX = x1; - ctY = y1 + calculateControlOffset(y2 - y1, c); - } - break; + return [x1, y1 + calculateControlOffset(y2 - y1, c)]; } - return [ctX, ctY]; } export function getBezierPath({ @@ -69,7 +52,7 @@ export function getBezierPath({ targetY, targetPosition = Position.Top, curvature = 0.25, -}: GetBezierPathParams): [string, number, number, number, number] { +}: GetBezierPathParams): [path: string, labelX: number, labelY: number, offsetX: number, offsetY: number] { const [sourceControlX, sourceControlY] = getControlWithCurvature({ pos: sourcePosition, x1: sourceX, @@ -86,7 +69,7 @@ export function getBezierPath({ y2: sourceY, c: curvature, }); - const [centerX, centerY, offsetX, offsetY] = getBezierEdgeCenter({ + const [labelX, labelY, offsetX, offsetY] = getBezierEdgeCenter({ sourceX, sourceY, targetX, @@ -99,8 +82,8 @@ export function getBezierPath({ return [ `M${sourceX},${sourceY} C${sourceControlX},${sourceControlY} ${targetControlX},${targetControlY} ${targetX},${targetY}`, - centerX, - centerY, + labelX, + labelY, offsetX, offsetY, ]; diff --git a/packages/core/src/components/Edges/SimpleBezierEdge.tsx b/packages/core/src/components/Edges/SimpleBezierEdge.tsx index cf19595f..3082d9ce 100644 --- a/packages/core/src/components/Edges/SimpleBezierEdge.tsx +++ b/packages/core/src/components/Edges/SimpleBezierEdge.tsx @@ -21,24 +21,11 @@ interface GetControlParams { } function getControl({ pos, x1, y1, x2, y2 }: GetControlParams): [number, number] { - let ctX: number, ctY: number; - switch (pos) { - case Position.Left: - case Position.Right: - { - ctX = 0.5 * (x1 + x2); - ctY = y1; - } - break; - case Position.Top: - case Position.Bottom: - { - ctX = x1; - ctY = 0.5 * (y1 + y2); - } - break; + if (pos === Position.Left || pos === Position.Right) { + return [0.5 * (x1 + x2), y1]; } - return [ctX, ctY]; + + return [x1, 0.5 * (y1 + y2)]; } export function getSimpleBezierPath({ @@ -48,7 +35,7 @@ export function getSimpleBezierPath({ targetX, targetY, targetPosition = Position.Top, -}: GetSimpleBezierPathParams): [string, number, number, number, number] { +}: GetSimpleBezierPathParams): [path: string, labelX: number, labelY: number, offsetX: number, offsetY: number] { const [sourceControlX, sourceControlY] = getControl({ pos: sourcePosition, x1: sourceX, @@ -63,7 +50,7 @@ export function getSimpleBezierPath({ x2: sourceX, y2: sourceY, }); - const [centerX, centerY, offsetX, offsetY] = getBezierEdgeCenter({ + const [labelX, labelY, offsetX, offsetY] = getBezierEdgeCenter({ sourceX, sourceY, targetX, @@ -76,8 +63,8 @@ export function getSimpleBezierPath({ return [ `M${sourceX},${sourceY} C${sourceControlX},${sourceControlY} ${targetControlX},${targetControlY} ${targetX},${targetY}`, - centerX, - centerY, + labelX, + labelY, offsetX, offsetY, ]; diff --git a/packages/core/src/components/Edges/SmoothStepEdge.tsx b/packages/core/src/components/Edges/SmoothStepEdge.tsx index 0e03932c..476cc0b0 100644 --- a/packages/core/src/components/Edges/SmoothStepEdge.tsx +++ b/packages/core/src/components/Edges/SmoothStepEdge.tsx @@ -2,7 +2,7 @@ import { memo } from 'react'; import { SmoothStepEdgeProps, Position, XYPosition } from '../../types'; import BaseEdge from './BaseEdge'; -import { getSimpleEdgeCenter } from './utils'; +import { getEdgeCenter } from './utils'; export interface GetSmoothStepPathParams { sourceX: number; @@ -72,7 +72,7 @@ function getPoints({ let points: XYPosition[] = []; let centerX, centerY; - const [defaultCenterX, defaultCenterY, defaultOffsetX, defaultOffsetY] = getSimpleEdgeCenter({ + const [defaultCenterX, defaultCenterY, defaultOffsetX, defaultOffsetY] = getEdgeCenter({ sourceX: source.x, sourceY: source.y, targetX: target.x, @@ -170,7 +170,7 @@ export function getSmoothStepPath({ centerX, centerY, offset = 20, -}: GetSmoothStepPathParams): [string, number, number, number, number] { +}: GetSmoothStepPathParams): [path: string, labelX: number, labelY: number, offsetX: number, offsetY: number] { const [points, labelX, labelY, offsetX, offsetY] = getPoints({ source: { x: sourceX, y: sourceY }, sourcePosition, diff --git a/packages/core/src/components/Edges/StraightEdge.tsx b/packages/core/src/components/Edges/StraightEdge.tsx index bbd0fa22..af6e1c8b 100644 --- a/packages/core/src/components/Edges/StraightEdge.tsx +++ b/packages/core/src/components/Edges/StraightEdge.tsx @@ -2,7 +2,7 @@ import { memo } from 'react'; import BaseEdge from './BaseEdge'; import { EdgeProps } from '../../types'; -import { getSimpleEdgeCenter } from './utils'; +import { getEdgeCenter } from './utils'; export type GetStraightPathParams = { sourceX: number; @@ -16,15 +16,15 @@ export function getStraightPath({ sourceY, targetX, targetY, -}: GetStraightPathParams): [string, number, number, number, number] { - const [centerX, centerY, offsetX, offsetY] = getSimpleEdgeCenter({ +}: GetStraightPathParams): [path: string, labelX: number, labelY: number, offsetX: number, offsetY: number] { + const [labelX, labelY, offsetX, offsetY] = getEdgeCenter({ sourceX, sourceY, targetX, targetY, }); - return [`M ${sourceX},${sourceY}L ${targetX},${targetY}`, centerX, centerY, offsetX, offsetY]; + return [`M ${sourceX},${sourceY}L ${targetX},${targetY}`, labelX, labelY, offsetX, offsetY]; } const StraightEdge = memo( diff --git a/packages/core/src/components/Edges/utils.ts b/packages/core/src/components/Edges/utils.ts index 5b111997..8c6c1ef1 100644 --- a/packages/core/src/components/Edges/utils.ts +++ b/packages/core/src/components/Edges/utils.ts @@ -28,7 +28,7 @@ export function getMouseHandler( } // this is used for straight edges and simple smoothstep edges (LTR, RTL, BTT, TTB) -export function getSimpleEdgeCenter({ +export function getEdgeCenter({ sourceX, sourceY, targetX,