From 9b4e3b26568c3833d7a8866bdcbb251d37f43ea8 Mon Sep 17 00:00:00 2001 From: Braks <78412429+bcakmakoglu@users.noreply.github.com> Date: Fri, 14 Jun 2024 10:12:54 +0200 Subject: [PATCH] feat(core): add EdgePathParams type to edge utils (#1479) * feat(core): add `EdgePathParams` type to edge utils * chore(changeset): add * chore(core): cleanup jsdocs --- .changeset/twenty-chicken-mix.md | 5 +++ .../core/src/components/Edges/utils/bezier.ts | 35 +++++++++++---- .../src/components/Edges/utils/general.ts | 2 + .../components/Edges/utils/simple-bezier.ts | 32 ++++++++++---- .../src/components/Edges/utils/smoothstep.ts | 44 +++++++++++-------- .../src/components/Edges/utils/straight.ts | 21 ++++++--- 6 files changed, 97 insertions(+), 42 deletions(-) create mode 100644 .changeset/twenty-chicken-mix.md diff --git a/.changeset/twenty-chicken-mix.md b/.changeset/twenty-chicken-mix.md new file mode 100644 index 00000000..8ab8f9b6 --- /dev/null +++ b/.changeset/twenty-chicken-mix.md @@ -0,0 +1,5 @@ +--- +"@vue-flow/core": minor +--- + +Add `EdgePathParams` type and export it diff --git a/packages/core/src/components/Edges/utils/bezier.ts b/packages/core/src/components/Edges/utils/bezier.ts index 5610e8b4..5ddca603 100644 --- a/packages/core/src/components/Edges/utils/bezier.ts +++ b/packages/core/src/components/Edges/utils/bezier.ts @@ -1,4 +1,5 @@ import { Position } from '../../../types' +import type { EdgePathParams } from './general' import { getBezierEdgeCenter } from './general' export interface GetBezierPathParams { @@ -51,15 +52,31 @@ function getControlWithCurvature({ pos, x1, y1, x2, y2, c }: GetControlWithCurva return [ctX, ctY] } -export function getBezierPath({ - sourceX, - sourceY, - sourcePosition = Position.Bottom, - targetX, - targetY, - targetPosition = Position.Top, - curvature = 0.25, -}: GetBezierPathParams): [path: string, labelX: number, labelY: number, offsetX: number, offsetY: number] { +/** + * Get a bezier path from source to target handle + * @public + * + * @param bezierPathParams + * @param bezierPathParams.sourceX - The x position of the source handle + * @param bezierPathParams.sourceY - The y position of the source handle + * @param bezierPathParams.sourcePosition - The position of the source handle (default: Position.Bottom) + * @param bezierPathParams.targetX - The x position of the target handle + * @param bezierPathParams.targetY - The y position of the target handle + * @param bezierPathParams.targetPosition - The position of the target handle (default: Position.Top) + * @param bezierPathParams.curvature - The curvature of the edge (default: 0.25) + * @returns A path string you can use in an SVG, the labelX and labelY position (center of path) and offsetX, offsetY between source handle and label + */ +export function getBezierPath(bezierPathParams: GetBezierPathParams): EdgePathParams { + const { + sourceX, + sourceY, + sourcePosition = Position.Bottom, + targetX, + targetY, + targetPosition = Position.Top, + curvature = 0.25, + } = bezierPathParams + const [sourceControlX, sourceControlY] = getControlWithCurvature({ pos: sourcePosition, x1: sourceX, diff --git a/packages/core/src/components/Edges/utils/general.ts b/packages/core/src/components/Edges/utils/general.ts index 8a7555a9..1b7bfab9 100644 --- a/packages/core/src/components/Edges/utils/general.ts +++ b/packages/core/src/components/Edges/utils/general.ts @@ -1,3 +1,5 @@ +export type EdgePathParams = [path: string, labelX: number, labelY: number, offsetX: number, offsetY: number] + // this is used for straight edges and simple smoothstep edges (LTR, RTL, BTT, TTB) export function getSimpleEdgeCenter({ sourceX, diff --git a/packages/core/src/components/Edges/utils/simple-bezier.ts b/packages/core/src/components/Edges/utils/simple-bezier.ts index 64201932..6f9c5f41 100644 --- a/packages/core/src/components/Edges/utils/simple-bezier.ts +++ b/packages/core/src/components/Edges/utils/simple-bezier.ts @@ -1,4 +1,5 @@ import { Position } from '../../../types' +import type { EdgePathParams } from './general' import { getBezierEdgeCenter } from './general' export interface GetSimpleBezierPathParams { @@ -35,14 +36,29 @@ function getControl({ pos, x1, y1, x2, y2 }: GetControlParams): [number, number] return [ctX, ctY] } -export function getSimpleBezierPath({ - sourceX, - sourceY, - sourcePosition = Position.Bottom, - targetX, - targetY, - targetPosition = Position.Top, -}: GetSimpleBezierPathParams): [path: string, labelX: number, labelY: number, offsetX: number, offsetY: number] { +/** + * Get a simple bezier path from source to target handle (no curvature) + * @public + * + * @param simpleBezierPathParams + * @param simpleBezierPathParams.sourceX - The x position of the source handle + * @param simpleBezierPathParams.sourceY - The y position of the source handle + * @param simpleBezierPathParams.sourcePosition - The position of the source handle (default: Position.Bottom) + * @param simpleBezierPathParams.targetX - The x position of the target handle + * @param simpleBezierPathParams.targetY - The y position of the target handle + * @param simpleBezierPathParams.targetPosition - The position of the target handle (default: Position.Top) + * @returns A path string you can use in an SVG, the labelX and labelY position (center of path) and offsetX, offsetY between source handle and label + */ +export function getSimpleBezierPath(simpleBezierPathParams: GetSimpleBezierPathParams): EdgePathParams { + const { + sourceX, + sourceY, + sourcePosition = Position.Bottom, + targetX, + targetY, + targetPosition = Position.Top, + } = simpleBezierPathParams + const [sourceControlX, sourceControlY] = getControl({ pos: sourcePosition, x1: sourceX, diff --git a/packages/core/src/components/Edges/utils/smoothstep.ts b/packages/core/src/components/Edges/utils/smoothstep.ts index 3d776ef7..cc647744 100644 --- a/packages/core/src/components/Edges/utils/smoothstep.ts +++ b/packages/core/src/components/Edges/utils/smoothstep.ts @@ -1,5 +1,6 @@ import type { XYPosition } from '../../../types' import { Position } from '../../../types' +import type { EdgePathParams } from './general' import { getSimpleEdgeCenter } from './general' export interface GetSmoothStepPathParams { @@ -196,27 +197,32 @@ function getBend(a: XYPosition, b: XYPosition, c: XYPosition, size: number): str /** * Get a smooth step path from source to target handle - * @param params - * @param params.sourceX - The x position of the source handle - * @param params.sourceY - The y position of the source handle - * @param params.sourcePosition - The position of the source handle (default: Position.Bottom) - * @param params.targetX - The x position of the target handle - * @param params.targetY - The y position of the target handle - * @param params.targetPosition - The position of the target handle (default: Position.Top) + * @public + * + * @param smoothStepPathParams + * @param smoothStepPathParams.sourceX - The x position of the source handle + * @param smoothStepPathParams.sourceY - The y position of the source handle + * @param smoothStepPathParams.sourcePosition - The position of the source handle (default: Position.Bottom) + * @param smoothStepPathParams.targetX - The x position of the target handle + * @param smoothStepPathParams.targetY - The y position of the target handle + * @param smoothStepPathParams.targetPosition - The position of the target handle (default: Position.Top) + * @param smoothStepPathParams.borderRadius - The border radius of the edge (default: 5) * @returns A path string you can use in an SVG, the labelX and labelY position (center of path) and offsetX, offsetY between source handle and label */ -export function getSmoothStepPath({ - sourceX, - sourceY, - sourcePosition = Position.Bottom, - targetX, - targetY, - targetPosition = Position.Top, - borderRadius = 5, - centerX, - centerY, - offset = 20, -}: GetSmoothStepPathParams): [path: string, labelX: number, labelY: number, offsetX: number, offsetY: number] { +export function getSmoothStepPath(smoothStepPathParams: GetSmoothStepPathParams): EdgePathParams { + const { + sourceX, + sourceY, + sourcePosition = Position.Bottom, + targetX, + targetY, + targetPosition = Position.Top, + borderRadius = 5, + centerX, + centerY, + offset = 20, + } = smoothStepPathParams + const [points, labelX, labelY, offsetX, offsetY] = getPoints({ source: { x: sourceX, y: sourceY }, sourcePosition, diff --git a/packages/core/src/components/Edges/utils/straight.ts b/packages/core/src/components/Edges/utils/straight.ts index ebe2973c..f8dba4a9 100644 --- a/packages/core/src/components/Edges/utils/straight.ts +++ b/packages/core/src/components/Edges/utils/straight.ts @@ -1,3 +1,4 @@ +import type { EdgePathParams } from './general' import { getSimpleEdgeCenter } from './general' export interface GetStraightPathParams { @@ -7,12 +8,20 @@ export interface GetStraightPathParams { targetY: number } -export function getStraightPath({ - sourceX, - sourceY, - targetX, - targetY, -}: GetStraightPathParams): [path: string, labelX: number, labelY: number, offsetX: number, offsetY: number] { +/** + * Get a straight path from source to target handle + * @public + * + * @param straightEdgeParams + * @param straightEdgeParams.sourceX - The x position of the source handle + * @param straightEdgeParams.sourceY - The y position of the source handle + * @param straightEdgeParams.targetX - The x position of the target handle + * @param straightEdgeParams.targetY - The y position of the target handle + * @returns A path string you can use in an SVG, the labelX and labelY position (center of path) and offsetX, offsetY between source handle and label + */ +export function getStraightPath(straightEdgeParams: GetStraightPathParams): EdgePathParams { + const { sourceX, sourceY, targetX, targetY } = straightEdgeParams + const [centerX, centerY, offsetX, offsetY] = getSimpleEdgeCenter({ sourceX, sourceY,