74 lines
2.0 KiB
TypeScript
74 lines
2.0 KiB
TypeScript
import { isNumeric } from '@xyflow/system';
|
|
import cc from 'classcat';
|
|
|
|
import { EdgeText } from './EdgeText';
|
|
import type { BaseEdgeProps } from '../../types';
|
|
|
|
/**
|
|
* The `<BaseEdge />` component gets used internally for all the edges. It can be
|
|
* used inside a custom edge and handles the invisible helper edge and the edge label
|
|
* for you.
|
|
*
|
|
* @public
|
|
* @example
|
|
* ```jsx
|
|
*import { BaseEdge } from '@xyflow/react';
|
|
*
|
|
*export function CustomEdge({ sourceX, sourceY, targetX, targetY, ...props }) {
|
|
* const [edgePath] = getStraightPath({
|
|
* sourceX,
|
|
* sourceY,
|
|
* targetX,
|
|
* targetY,
|
|
* });
|
|
*
|
|
* return <BaseEdge path={edgePath} {...props} />;
|
|
*}
|
|
*```
|
|
*
|
|
* @remarks If you want to use an edge marker with the [`<BaseEdge />`](/api-reference/components/base-edge) component,
|
|
* you can pass the `markerStart` or `markerEnd` props passed to your custom edge
|
|
* through to the [`<BaseEdge />`](/api-reference/components/base-edge) component.
|
|
* You can see all the props passed to a custom edge by looking at the [`EdgeProps`](/api-reference/types/edge-props) type.
|
|
*/
|
|
export function BaseEdge({
|
|
path,
|
|
labelX,
|
|
labelY,
|
|
label,
|
|
labelStyle,
|
|
labelShowBg,
|
|
labelBgStyle,
|
|
labelBgPadding,
|
|
labelBgBorderRadius,
|
|
interactionWidth = 20,
|
|
...props
|
|
}: BaseEdgeProps) {
|
|
return (
|
|
<>
|
|
<path {...props} d={path} fill="none" className={cc(['react-flow__edge-path', props.className])} />
|
|
{interactionWidth ? (
|
|
<path
|
|
d={path}
|
|
fill="none"
|
|
strokeOpacity={0}
|
|
strokeWidth={interactionWidth}
|
|
className="react-flow__edge-interaction"
|
|
/>
|
|
) : null}
|
|
{label && isNumeric(labelX) && isNumeric(labelY) ? (
|
|
<EdgeText
|
|
x={labelX}
|
|
y={labelY}
|
|
label={label}
|
|
labelStyle={labelStyle}
|
|
labelShowBg={labelShowBg}
|
|
labelBgStyle={labelBgStyle}
|
|
labelBgPadding={labelBgPadding}
|
|
labelBgBorderRadius={labelBgBorderRadius}
|
|
/>
|
|
) : null}
|
|
</>
|
|
);
|
|
}
|