72 lines
1.5 KiB
TypeScript
72 lines
1.5 KiB
TypeScript
import { memo } from 'react';
|
|
|
|
import BaseEdge from './BaseEdge';
|
|
import { EdgeProps } from '../../types';
|
|
import { getSimpleEdgeCenter } from './utils';
|
|
|
|
export type GetStraightPathParams = {
|
|
sourceX: number;
|
|
sourceY: number;
|
|
targetX: number;
|
|
targetY: number;
|
|
};
|
|
|
|
export function getStraightPath({
|
|
sourceX,
|
|
sourceY,
|
|
targetX,
|
|
targetY,
|
|
}: GetStraightPathParams): [string, number, number, number, number] {
|
|
const [centerX, centerY, offsetX, offsetY] = getSimpleEdgeCenter({
|
|
sourceX,
|
|
sourceY,
|
|
targetX,
|
|
targetY,
|
|
});
|
|
|
|
return [`M ${sourceX},${sourceY}L ${targetX},${targetY}`, centerX, centerY, offsetX, offsetY];
|
|
}
|
|
|
|
const StraightEdge = memo(
|
|
({
|
|
sourceX,
|
|
sourceY,
|
|
targetX,
|
|
targetY,
|
|
label,
|
|
labelStyle,
|
|
labelShowBg,
|
|
labelBgStyle,
|
|
labelBgPadding,
|
|
labelBgBorderRadius,
|
|
style,
|
|
markerEnd,
|
|
markerStart,
|
|
interactionWidth,
|
|
}: EdgeProps) => {
|
|
const [path, labelX, labelY] = getStraightPath({ sourceX, sourceY, targetX, targetY });
|
|
|
|
return (
|
|
<BaseEdge
|
|
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}
|
|
/>
|
|
);
|
|
}
|
|
);
|
|
|
|
StraightEdge.displayName = 'StraightEdge';
|
|
|
|
export default StraightEdge;
|