98 lines
2.4 KiB
TypeScript
98 lines
2.4 KiB
TypeScript
import { memo } from 'react';
|
|
import { Position, getBezierPath } from '@xyflow/system';
|
|
|
|
import { BaseEdge } from './BaseEdge';
|
|
import type { BezierEdgeProps } from '../../types';
|
|
|
|
function createBezierEdge(params: { isInternal: boolean }) {
|
|
// eslint-disable-next-line react/display-name
|
|
return memo(
|
|
({
|
|
id,
|
|
sourceX,
|
|
sourceY,
|
|
targetX,
|
|
targetY,
|
|
sourcePosition = Position.Bottom,
|
|
targetPosition = Position.Top,
|
|
label,
|
|
labelStyle,
|
|
labelShowBg,
|
|
labelBgStyle,
|
|
labelBgPadding,
|
|
labelBgBorderRadius,
|
|
style,
|
|
markerEnd,
|
|
markerStart,
|
|
pathOptions,
|
|
interactionWidth,
|
|
}: BezierEdgeProps) => {
|
|
const [path, labelX, labelY] = getBezierPath({
|
|
sourceX,
|
|
sourceY,
|
|
sourcePosition,
|
|
targetX,
|
|
targetY,
|
|
targetPosition,
|
|
curvature: pathOptions?.curvature,
|
|
});
|
|
|
|
const _id = params.isInternal ? undefined : id;
|
|
|
|
return (
|
|
<BaseEdge
|
|
id={_id}
|
|
path={path}
|
|
labelX={labelX}
|
|
labelY={labelY}
|
|
label={label}
|
|
labelStyle={labelStyle}
|
|
labelShowBg={labelShowBg}
|
|
labelBgStyle={labelBgStyle}
|
|
labelBgPadding={labelBgPadding}
|
|
labelBgBorderRadius={labelBgBorderRadius}
|
|
style={style}
|
|
markerEnd={markerEnd}
|
|
markerStart={markerStart}
|
|
interactionWidth={interactionWidth}
|
|
/>
|
|
);
|
|
}
|
|
);
|
|
}
|
|
|
|
/**
|
|
* Component that can be used inside a custom edge to render a bezier curve.
|
|
*
|
|
* @public
|
|
* @example
|
|
*
|
|
* ```tsx
|
|
* import { BezierEdge } from '@xyflow/react';
|
|
*
|
|
* function CustomEdge({ sourceX, sourceY, targetX, targetY, sourcePosition, targetPosition }) {
|
|
* return (
|
|
* <BezierEdge
|
|
* sourceX={sourceX}
|
|
* sourceY={sourceY}
|
|
* targetX={targetX}
|
|
* targetY={targetY}
|
|
* sourcePosition={sourcePosition}
|
|
* targetPosition={targetPosition}
|
|
* />
|
|
* );
|
|
* }
|
|
* ```
|
|
*/
|
|
const BezierEdge = createBezierEdge({ isInternal: false });
|
|
|
|
/**
|
|
* @internal
|
|
*/
|
|
const BezierEdgeInternal = createBezierEdge({ isInternal: true });
|
|
|
|
BezierEdge.displayName = 'BezierEdge';
|
|
BezierEdgeInternal.displayName = 'BezierEdgeInternal';
|
|
|
|
export { BezierEdge, BezierEdgeInternal };
|