chore(core): rename pointerRadius prop to interactionWidth

.changeset/sharp-gifts-doubt.md

@@ -2,4 +2,4 @@
 '@vue-flow/core': minor
 ---
 
-Add `pointerRadius` prop to edges. Sets radius of pointer interactivity for edges
+Add `interactionWidth` prop to edges. Sets radius of pointer interactivity for edges

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

@@ -19,7 +19,7 @@ const BaseEdge: FunctionalComponent<BaseEdgeProps> = function ({
   markerStart,
   markerEnd,
   style,
-  pointerRadius = 2,
+  interactionWidth = 20,
 }) {
   return [
     h('path', {
@@ -29,13 +29,12 @@ const BaseEdge: FunctionalComponent<BaseEdgeProps> = function ({
       'marker-end': markerEnd,
       'marker-start': markerStart,
     }),
-    pointerRadius
+    interactionWidth
       ? h('path', {
-          'style': 'opacity: 0',
           'd': path,
-          'class': 'vue-flow__edge-pointer',
-          'stroke': 'transparent',
-          'stroke-width': pointerRadius,
+          'fill': 'none',
+          'stroke-opacity': 0,
+          'stroke-width': interactionWidth,
         })
       : null,
     label
@@ -66,7 +65,7 @@ BaseEdge.props = [
   'markerStart',
   'markerEnd',
   'style',
-  'pointerRadius',
+  'interactionWidth',
 ]
 BaseEdge.inheritAttrs = false
 

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

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

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

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

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

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

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

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

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

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

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

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

packages/core/src/types/edge.ts

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

packages/core/src/utils/graph.ts

@@ -122,7 +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,
+        interactionWidth: edge.interactionWidth || defaults?.interactionWidth || 2,
       } as GraphEdge)
     : defaults