feat(edges): add pointerRadius prop to edges

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

@@ -14,11 +14,12 @@ const BaseEdge: FunctionalComponent<BaseEdgeProps> = function ({
   labelBgBorderRadius,
   labelBgPadding,
   labelBgStyle,
-  labelShowBg,
+  labelShowBg = true,
   labelStyle,
   markerStart,
   markerEnd,
   style,
+  pointerRadius = 2,
 }) {
   return [
     h('path', {
@@ -28,6 +29,15 @@ const BaseEdge: FunctionalComponent<BaseEdgeProps> = function ({
       'marker-end': markerEnd,
       'marker-start': markerStart,
     }),
+    pointerRadius
+      ? h('path', {
+          'style': 'opacity: 0',
+          'd': path,
+          'class': 'vue-flow__edge-pointer',
+          'stroke': 'transparent',
+          'stroke-width': pointerRadius,
+        })
+      : null,
     label
       ? h(EdgeText, {
           x: labelX,
@@ -56,6 +66,7 @@ BaseEdge.props = [
   'markerStart',
   'markerEnd',
   'style',
+  'pointerRadius',
 ]
 BaseEdge.inheritAttrs = false
 

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

@@ -20,6 +20,7 @@ const BezierEdge: FunctionalComponent<EdgeProps> = function ({
   markerEnd,
   markerStart,
   style,
+  pointerRadius,
 }) {
   const [path, labelX, labelY] = getBezierPath({
     sourceX,
@@ -44,6 +45,7 @@ const BezierEdge: FunctionalComponent<EdgeProps> = function ({
     style,
     markerEnd,
     markerStart,
+    pointerRadius,
   })
 }
 
@@ -64,6 +66,7 @@ BezierEdge.props = [
   'markerEnd',
   'markerStart',
   'style',
+  'pointerRadius',
 ]
 BezierEdge.inheritAttrs = false
 

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

@@ -19,6 +19,7 @@ const SimpleBezierEdge: FunctionalComponent<EdgeProps> = function ({
   markerEnd,
   markerStart,
   style,
+  pointerRadius,
 }) {
   const [path, labelX, labelY] = getSimpleBezierPath({
     sourceX,
@@ -42,6 +43,7 @@ const SimpleBezierEdge: FunctionalComponent<EdgeProps> = function ({
     style,
     markerEnd,
     markerStart,
+    pointerRadius,
   })
 }
 
@@ -61,6 +63,7 @@ SimpleBezierEdge.props = [
   'markerEnd',
   'markerStart',
   'style',
+  'pointerRadius',
 ]
 SimpleBezierEdge.inheritAttrs = false
 

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

@@ -21,6 +21,7 @@ const SmoothStepEdge: FunctionalComponent<SmoothStepEdgeProps> = function ({
   borderRadius,
   offset,
   style,
+  pointerRadius,
 }) {
   const [path, labelX, labelY] = getSmoothStepPath({
     sourceX,
@@ -46,6 +47,7 @@ const SmoothStepEdge: FunctionalComponent<SmoothStepEdgeProps> = function ({
     style,
     markerEnd,
     markerStart,
+    pointerRadius,
   })
 }
 
@@ -67,6 +69,7 @@ SmoothStepEdge.props = [
   'markerEnd',
   'markerStart',
   'style',
+  'pointerRadius',
 ]
 SmoothStepEdge.inheritAttrs = false
 

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

@@ -22,6 +22,7 @@ StepEdge.props = [
   'markerEnd',
   'markerStart',
   'style',
+  'pointerRadius',
 ]
 StepEdge.inheritAttrs = false
 

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

@@ -16,6 +16,7 @@ const StraightEdge: FunctionalComponent<EdgeProps> = function ({
   markerEnd,
   markerStart,
   style,
+  pointerRadius,
 }) {
   const [path, labelX, labelY] = getStraightPath({ sourceX, sourceY, targetX, targetY })
 
@@ -32,6 +33,7 @@ const StraightEdge: FunctionalComponent<EdgeProps> = function ({
     style,
     markerEnd,
     markerStart,
+    pointerRadius,
   })
 }
 
@@ -49,6 +51,7 @@ StraightEdge.props = [
   'markerEnd',
   'markerStart',
   'style',
+  'pointerRadius',
 ]
 StraightEdge.inheritAttrs = false
 

packages/core/src/components/Edges/Wrapper.ts

@@ -190,6 +190,7 @@ const Wrapper = defineComponent({
                 targetY,
                 sourceHandleId: edge.sourceHandle,
                 targetHandleId: edge.targetHandle,
+                pointerRadius: edge.pointerRadius,
               }),
 
           [

packages/core/src/types/edge.ts

@@ -86,6 +86,8 @@ export interface Edge<Data = ElementData, CustomEvents extends Record<string, Cu
   style?: Styles | StyleFunc<GraphEdge<Data, CustomEvents>>
   /** Is edge hidden */
   hidden?: boolean
+  /** Radius of mouse event triggers (to ease selecting edges), defaults to 2 */
+  pointerRadius?: number
   /** Overwrites current edge type */
   template?: EdgeComponent
   /** Additional data that is passed to your custom components */
@@ -145,6 +147,7 @@ export interface EdgeProps<Data = ElementData, CustomEvents = {}> {
   markerStart?: string
   markerEnd?: string
   curvature?: number
+  pointerRadius?: number
   data: Data
   /** contextual and custom events of edge */
   events: EdgeEventsOn<CustomEvents>
@@ -180,6 +183,7 @@ export interface SmoothStepEdgeProps<Data = ElementData, CustomEvents = {}> exte
   markerEnd?: string
   borderRadius?: number
   offset?: number
+  pointerRadius?: number
   data: Data
   /** contextual and custom events of edge */
   events: EdgeEventsOn<CustomEvents>
@@ -198,4 +202,5 @@ export interface BaseEdgeProps {
   labelBgBorderRadius?: number
   markerStart?: string
   markerEnd?: string
+  pointerRadius?: number
 }

packages/core/src/utils/graph.ts

@@ -122,6 +122,7 @@ export const parseEdge = (edge: Edge, defaults?: Partial<GraphEdge>): GraphEdge
         data: shallowReactive(edge.data || defaults?.data || {}),
         events: shallowReactive(edge.events || defaults?.events || {}),
         label: (edge.label && !isString(edge.label) ? markRaw(edge.label) : edge.label) || defaults?.label,
+        pointerRadius: edge.pointerRadius || defaults?.pointerRadius || 2,
       } as GraphEdge)
     : defaults