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,
               }),
 
           [