feat(edges): add interactionWidth option #1580 #1114

packages/core/src/components/Edges/BaseEdge.tsx

@@ -14,20 +14,8 @@ const BaseEdge = ({
   style,
   markerEnd,
   markerStart,
+  interactionWidth = 15,
 }: BaseEdgeProps) => {
-  const text = label ? (
-    <EdgeText
-      x={centerX}
-      y={centerY}
-      label={label}
-      labelStyle={labelStyle}
-      labelShowBg={labelShowBg}
-      labelBgStyle={labelBgStyle}
-      labelBgPadding={labelBgPadding}
-      labelBgBorderRadius={labelBgBorderRadius}
-    />
-  ) : null;
-
   return (
     <>
       <path
@@ -38,7 +26,19 @@ const BaseEdge = ({
         markerEnd={markerEnd}
         markerStart={markerStart}
       />
-      {text}
+      {interactionWidth && <path d={path} fill="none" strokeWidth={interactionWidth} />}
+      {label ? (
+        <EdgeText
+          x={centerX}
+          y={centerY}
+          label={label}
+          labelStyle={labelStyle}
+          labelShowBg={labelShowBg}
+          labelBgStyle={labelBgStyle}
+          labelBgPadding={labelBgPadding}
+          labelBgBorderRadius={labelBgBorderRadius}
+        />
+      ) : null}
     </>
   );
 };

packages/core/src/components/Edges/BezierEdge.tsx

@@ -143,7 +143,8 @@ const BezierEdge = memo(
     style,
     markerEnd,
     markerStart,
-    options,
+    pathOptions,
+    interactionWidth,
   }: BezierEdgeProps) => {
     const params = {
       sourceX,
@@ -152,7 +153,7 @@ const BezierEdge = memo(
       targetX,
       targetY,
       targetPosition,
-      curvature: options?.curvature,
+      curvature: pathOptions?.curvature,
     };
     const path = getBezierPath(params);
     const [centerX, centerY] = getBezierCenter(params);
@@ -171,6 +172,7 @@ const BezierEdge = memo(
         style={style}
         markerEnd={markerEnd}
         markerStart={markerStart}
+        interactionWidth={interactionWidth}
       />
     );
   }

packages/core/src/components/Edges/SimpleBezierEdge.tsx

@@ -117,6 +117,7 @@ const SimpleBezierEdge = memo(
     style,
     markerEnd,
     markerStart,
+    interactionWidth,
   }: EdgeProps) => {
     const params = {
       sourceX,
@@ -143,6 +144,7 @@ const SimpleBezierEdge = memo(
         style={style}
         markerEnd={markerEnd}
         markerStart={markerStart}
+        interactionWidth={interactionWidth}
       />
     );
   }

packages/core/src/components/Edges/SmoothStepEdge.tsx

@@ -202,7 +202,8 @@ const SmoothStepEdge = memo(
     targetPosition = Position.Top,
     markerEnd,
     markerStart,
-    options,
+    pathOptions,
+    interactionWidth,
   }: SmoothStepEdgeProps) => {
     const [centerX, centerY] = getCenter({ sourceX, sourceY, targetX, targetY, sourcePosition, targetPosition });
 
@@ -213,8 +214,8 @@ const SmoothStepEdge = memo(
       targetX,
       targetY,
       targetPosition,
-      borderRadius: options?.borderRadius,
-      offset: options?.offset,
+      borderRadius: pathOptions?.borderRadius,
+      offset: pathOptions?.offset,
     });
 
     return (
@@ -231,6 +232,7 @@ const SmoothStepEdge = memo(
         style={style}
         markerEnd={markerEnd}
         markerStart={markerStart}
+        interactionWidth={interactionWidth}
       />
     );
   }

packages/core/src/components/Edges/StepEdge.tsx

@@ -1,9 +1,14 @@
-import { memo } from 'react';
+import { memo, useMemo } from 'react';
 
-import { EdgeSmoothStepProps } from '../../types';
+import { SmoothStepEdgeProps } from '../../types';
 import SmoothStepEdge from './SmoothStepEdge';
 
-const StepEdge = memo((props: EdgeSmoothStepProps) => <SmoothStepEdge {...props} borderRadius={0} />);
+const StepEdge = memo((props: SmoothStepEdgeProps) => (
+  <SmoothStepEdge
+    {...props}
+    pathOptions={useMemo(() => ({ borderRadius: 0, offset: props.pathOptions?.offset }), [props.pathOptions?.offset])}
+  />
+));
 
 StepEdge.displayName = 'StepEdge';
 

packages/core/src/components/Edges/StraightEdge.tsx

@@ -18,17 +18,17 @@ const StraightEdge = memo(
     style,
     markerEnd,
     markerStart,
+    interactionWidth,
   }: EdgeProps) => {
     const yOffset = Math.abs(targetY - sourceY) / 2;
     const centerY = targetY < sourceY ? targetY + yOffset : targetY - yOffset;
 
     const xOffset = Math.abs(targetX - sourceX) / 2;
     const centerX = targetX < sourceX ? targetX + xOffset : targetX - xOffset;
-    const path = `M ${sourceX},${sourceY}L ${targetX},${targetY}`;
 
     return (
       <BaseEdge
-        path={path}
+        path={`M ${sourceX},${sourceY}L ${targetX},${targetY}`}
         centerX={centerX}
         centerY={centerY}
         label={label}
@@ -40,6 +40,7 @@ const StraightEdge = memo(
         style={style}
         markerEnd={markerEnd}
         markerStart={markerStart}
+        interactionWidth={interactionWidth}
       />
     );
   }

packages/core/src/components/Edges/wrapEdge.tsx

@@ -52,7 +52,8 @@ export default (EdgeComponent: ComponentType<EdgeProps>) => {
     rfId,
     ariaLabel,
     disableKeyboardA11y,
-    options,
+    pathOptions,
+    interactionWidth,
   }: WrapEdgeProps): JSX.Element | null => {
     const edgeRef = useRef<SVGGElement>(null);
     const [updateHover, setUpdateHover] = useState<boolean>(false);
@@ -190,7 +191,8 @@ export default (EdgeComponent: ComponentType<EdgeProps>) => {
             targetHandleId={targetHandleId}
             markerStart={markerStartUrl}
             markerEnd={markerEndUrl}
-            options={options}
+            pathOptions={pathOptions}
+            interactionWidth={interactionWidth}
           />
         )}