diff --git a/packages/react/src/components/Edges/BaseEdge.tsx b/packages/react/src/components/Edges/BaseEdge.tsx index ca7116a5..c03c5af9 100644 --- a/packages/react/src/components/Edges/BaseEdge.tsx +++ b/packages/react/src/components/Edges/BaseEdge.tsx @@ -21,27 +21,10 @@ export function BaseEdge({ interactionWidth = 20, ...props }: BaseEdgeProps) { - // We are not allowed to pass these props to the path element otherwise we get a bunch of warnings - const { - animated, - selectable, - deletable, - data, - selected, - source, - target, - targetHandleId, - sourceHandleId, - targetPosition, - sourcePosition, - pathOptions, - ...restProps - } = props as EdgeComponentWithPathOptions & EdgeProps; - return ( <> { const [path, labelX, labelY] = getBezierPath({ sourceX, @@ -30,7 +39,24 @@ function createBezierEdge(params: { isInternal: boolean }) { const _id = params.isInternal ? undefined : id; - return ; + return ( + + ); } ); } diff --git a/packages/react/src/components/Edges/SimpleBezierEdge.tsx b/packages/react/src/components/Edges/SimpleBezierEdge.tsx index 6aff362a..b3378c48 100644 --- a/packages/react/src/components/Edges/SimpleBezierEdge.tsx +++ b/packages/react/src/components/Edges/SimpleBezierEdge.tsx @@ -82,7 +82,16 @@ function createSimpleBezierEdge(params: { isInternal: boolean }) { targetY, sourcePosition = Position.Bottom, targetPosition = Position.Top, - ...props + label, + labelStyle, + labelShowBg, + labelBgStyle, + labelBgPadding, + labelBgBorderRadius, + style, + markerEnd, + markerStart, + interactionWidth, }: SimpleBezierEdgeProps) => { const [path, labelX, labelY] = getSimpleBezierPath({ sourceX, @@ -95,7 +104,24 @@ function createSimpleBezierEdge(params: { isInternal: boolean }) { const _id = params.isInternal ? undefined : id; - return ; + return ( + + ); } ); } diff --git a/packages/react/src/components/Edges/SmoothStepEdge.tsx b/packages/react/src/components/Edges/SmoothStepEdge.tsx index 8d362427..1f6bcfd1 100644 --- a/packages/react/src/components/Edges/SmoothStepEdge.tsx +++ b/packages/react/src/components/Edges/SmoothStepEdge.tsx @@ -13,10 +13,19 @@ function createSmoothStepEdge(params: { isInternal: boolean }) { sourceY, targetX, targetY, + label, + labelStyle, + labelShowBg, + labelBgStyle, + labelBgPadding, + labelBgBorderRadius, + style, sourcePosition = Position.Bottom, targetPosition = Position.Top, + markerEnd, + markerStart, pathOptions, - ...props + interactionWidth, }: SmoothStepEdgeProps) => { const [path, labelX, labelY] = getSmoothStepPath({ sourceX, @@ -31,7 +40,24 @@ function createSmoothStepEdge(params: { isInternal: boolean }) { const _id = params.isInternal ? undefined : id; - return ; + return ( + + ); } ); } diff --git a/packages/react/src/components/Edges/StraightEdge.tsx b/packages/react/src/components/Edges/StraightEdge.tsx index 5b767638..53d1ac29 100644 --- a/packages/react/src/components/Edges/StraightEdge.tsx +++ b/packages/react/src/components/Edges/StraightEdge.tsx @@ -6,13 +6,48 @@ import type { StraightEdgeProps } from '../../types'; function createStraightEdge(params: { isInternal: boolean }) { // eslint-disable-next-line react/display-name - return memo(({ id, sourceX, sourceY, targetX, targetY, ...props }: StraightEdgeProps) => { - const [path, labelX, labelY] = getStraightPath({ sourceX, sourceY, targetX, targetY }); + return memo( + ({ + id, + sourceX, + sourceY, + targetX, + targetY, + label, + labelStyle, + labelShowBg, + labelBgStyle, + labelBgPadding, + labelBgBorderRadius, + style, + markerEnd, + markerStart, + interactionWidth, + }: StraightEdgeProps) => { + const [path, labelX, labelY] = getStraightPath({ sourceX, sourceY, targetX, targetY }); - const _id = params.isInternal ? undefined : id; + const _id = params.isInternal ? undefined : id; - return ; - }); + return ( + + ); + } + ); } const StraightEdge = createStraightEdge({ isInternal: false }); diff --git a/packages/react/src/types/edges.ts b/packages/react/src/types/edges.ts index 1a0a3353..caaea501 100644 --- a/packages/react/src/types/edges.ts +++ b/packages/react/src/types/edges.ts @@ -125,13 +125,11 @@ export type EdgeProps = Pick< interactionWidth?: number; }; -type BasePathAttributes = Omit, 'd'>; - /** * BaseEdge component props * @public */ -export type BaseEdgeProps = BasePathAttributes & +export type BaseEdgeProps = Omit, 'd'> & EdgeLabelOptions & { /** Additional padding where interacting with an edge is still possible */ interactionWidth?: number; @@ -155,8 +153,7 @@ export type BaseEdgeProps = BasePathAttributes & * Helper type for edge components that get exported by the library * @public */ -export type EdgeComponentProps = BasePathAttributes & - EdgePosition & +export type EdgeComponentProps = EdgePosition & EdgeLabelOptions & { id?: EdgeProps['id']; markerStart?: EdgeProps['markerStart'];