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

examples/nextjs/pages/EdgeRouting/index.tsx

@@ -81,9 +81,10 @@ const edges: Edge[] = [
     markerEnd: {
       type: MarkerType.ArrowClosed,
     },
-    options: {
+    pathOptions: {
       offset: 30,
     },
+    interactionWidth: 0,
   },
   {
     id: 'e3-4',
@@ -93,9 +94,10 @@ const edges: Edge[] = [
     markerEnd: {
       type: MarkerType.ArrowClosed,
     },
-    options: {
+    pathOptions: {
       borderRadius: 2,
     },
+    interactionWidth: 0,
   },
 
   {
@@ -121,7 +123,7 @@ const edges: Edge[] = [
 
 const defaultEdgeOptions = {
   style: {
-    strokeWidth: 2,
+    strokeWidth: 1,
   },
 };
 

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,
+      borderRadius: pathOptions?.borderRadius,
-      offset: options?.offset,
+      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}
           />
         )}
 

packages/core/src/container/EdgeRenderer/index.tsx

@@ -182,7 +182,8 @@ const EdgeRenderer = (props: EdgeRendererProps) => {
                   rfId={props.rfId}
                   ariaLabel={edge.ariaLabel}
                   disableKeyboardA11y={props.disableKeyboardA11y}
-                  options={'options' in edge ? edge.options : undefined}
+                  pathOptions={'pathOptions' in edge ? edge.pathOptions : undefined}
+                  interactionWidth={edge.interactionWidth}
                 />
               );
             })}

packages/core/src/types/edges.ts

@@ -32,25 +32,26 @@ type DefaultEdge<T = any> = {
   markerEnd?: EdgeMarkerType;
   zIndex?: number;
   ariaLabel?: string;
+  interactionWidth?: number;
 };
 
-export type SmoothStepEdgeOptions = {
+export type SmoothStepPathOptions = {
   offset?: number;
   borderRadius?: number;
 };
 
 type SmoothStepEdgeType<T> = DefaultEdge<T> & {
   type: 'smoothstep';
-  options?: SmoothStepEdgeOptions;
+  pathOptions?: SmoothStepPathOptions;
 };
 
-export type BezierEdgeOptions = {
+export type BezierPathOptions = {
   curvature?: number;
 };
 
 type BezierEdgeType<T> = DefaultEdge<T> & {
   type: 'default';
-  options?: BezierEdgeOptions;
+  pathOptions?: BezierPathOptions;
 };
 
 export type Edge<T = any> = DefaultEdge<T> | SmoothStepEdgeType<T> | BezierEdgeType<T>;
@@ -61,7 +62,7 @@ export type DefaultEdgeOptions = Omit<
 >;
 
 // props that get passed to a custom edge
-export interface EdgeProps<T = any> {
+export type EdgeProps<T = any> = {
   id: string;
   source: string;
   target: string;
@@ -85,8 +86,9 @@ export interface EdgeProps<T = any> {
   targetHandleId?: string | null;
   markerStart?: string;
   markerEnd?: string;
-  options?: BezierEdgeOptions | SmoothStepEdgeOptions;
+  pathOptions?: BezierPathOptions | SmoothStepPathOptions;
-}
+  interactionWidth?: number;
+};
 
 export type BaseEdgeProps = Pick<
   EdgeProps,
@@ -99,6 +101,7 @@ export type BaseEdgeProps = Pick<
   | 'style'
   | 'markerStart'
   | 'markerEnd'
+  | 'interactionWidth'
 > & {
   centerX: number;
   centerY: number;
@@ -107,24 +110,9 @@ export type BaseEdgeProps = Pick<
 
 export type EdgeMouseHandler = (event: React.MouseEvent, edge: Edge) => void;
 
-export interface WrapEdgeProps<T = any> {
+export type WrapEdgeProps<T = any> = Omit<Edge<T>, 'sourceHandle' | 'targetHandle'> & {
-  id: string;
-  className?: string;
-  type: string;
-  data?: T;
   onClick?: EdgeMouseHandler;
   onEdgeDoubleClick?: EdgeMouseHandler;
-  selected: boolean;
-  animated?: boolean;
-  label?: string | ReactNode;
-  labelStyle?: CSSProperties;
-  labelShowBg?: boolean;
-  labelBgStyle?: CSSProperties;
-  labelBgPadding?: [number, number];
-  labelBgBorderRadius?: number;
-  style?: CSSProperties;
-  source: string;
-  target: string;
   sourceHandleId?: string | null;
   targetHandleId?: string | null;
   sourceX: number;
@@ -134,7 +122,6 @@ export interface WrapEdgeProps<T = any> {
   sourcePosition: Position;
   targetPosition: Position;
   elementsSelectable?: boolean;
-  hidden?: boolean;
   onEdgeUpdate?: OnEdgeUpdateFunc;
   onContextMenu?: EdgeMouseHandler;
   onMouseEnter?: EdgeMouseHandler;
@@ -143,20 +130,17 @@ export interface WrapEdgeProps<T = any> {
   edgeUpdaterRadius?: number;
   onEdgeUpdateStart?: (event: React.MouseEvent, edge: Edge, handleType: HandleType) => void;
   onEdgeUpdateEnd?: (event: MouseEvent, edge: Edge, handleType: HandleType) => void;
-  markerStart?: EdgeMarkerType;
-  markerEnd?: EdgeMarkerType;
   rfId?: string;
-  ariaLabel?: string | null;
   disableKeyboardA11y: boolean;
-  options?: SmoothStepEdgeOptions | BezierEdgeOptions;
+  pathOptions?: BezierPathOptions | SmoothStepPathOptions;
-}
+};
 
 export interface SmoothStepEdgeProps<T = any> extends EdgeProps<T> {
-  options?: SmoothStepEdgeOptions;
+  pathOptions?: SmoothStepPathOptions;
 }
 
 export interface BezierEdgeProps<T = any> extends EdgeProps<T> {
-  options?: BezierEdgeOptions;
+  pathOptions?: BezierPathOptions;
 }
 export interface EdgeTextProps extends HTMLAttributes<SVGElement> {
   x: number;