From ec6f870bfd1ec187fcb234c1f670ed66b445715f Mon Sep 17 00:00:00 2001
From: braks <78412429+bcakmakoglu@users.noreply.github.com>
Date: Sun, 13 Nov 2022 08:19:05 +0100
Subject: [PATCH] chore(core): rename `pointerRadius` prop to
 `interactionWidth`

---
 .changeset/sharp-gifts-doubt.md                     |  2 +-
 packages/core/src/components/Edges/BaseEdge.ts      | 13 ++++++-------
 packages/core/src/components/Edges/BezierEdge.ts    |  6 +++---
 .../core/src/components/Edges/SimpleBezierEdge.ts   |  6 +++---
 .../core/src/components/Edges/SmoothStepEdge.ts     |  6 +++---
 packages/core/src/components/Edges/StepEdge.ts      |  2 +-
 packages/core/src/components/Edges/StraightEdge.ts  |  6 +++---
 packages/core/src/components/Edges/Wrapper.ts       |  2 +-
 packages/core/src/types/edge.ts                     |  8 ++++----
 packages/core/src/utils/graph.ts                    |  2 +-
 10 files changed, 26 insertions(+), 27 deletions(-)

diff --git a/.changeset/sharp-gifts-doubt.md b/.changeset/sharp-gifts-doubt.md
index 55a8706a..fcdd8c40 100644
--- a/.changeset/sharp-gifts-doubt.md
+++ b/.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
diff --git a/packages/core/src/components/Edges/BaseEdge.ts b/packages/core/src/components/Edges/BaseEdge.ts
index 7e10960a..d9208f05 100644
--- a/packages/core/src/components/Edges/BaseEdge.ts
+++ b/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
 
diff --git a/packages/core/src/components/Edges/BezierEdge.ts b/packages/core/src/components/Edges/BezierEdge.ts
index c7c9d422..c000fe4e 100644
--- a/packages/core/src/components/Edges/BezierEdge.ts
+++ b/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
 
diff --git a/packages/core/src/components/Edges/SimpleBezierEdge.ts b/packages/core/src/components/Edges/SimpleBezierEdge.ts
index 9bf6a809..01c2045a 100644
--- a/packages/core/src/components/Edges/SimpleBezierEdge.ts
+++ b/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
 
diff --git a/packages/core/src/components/Edges/SmoothStepEdge.ts b/packages/core/src/components/Edges/SmoothStepEdge.ts
index 8df41203..29df7ae8 100644
--- a/packages/core/src/components/Edges/SmoothStepEdge.ts
+++ b/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
 
diff --git a/packages/core/src/components/Edges/StepEdge.ts b/packages/core/src/components/Edges/StepEdge.ts
index 4992bef8..43bf29e3 100644
--- a/packages/core/src/components/Edges/StepEdge.ts
+++ b/packages/core/src/components/Edges/StepEdge.ts
@@ -22,7 +22,7 @@ StepEdge.props = [
   'markerEnd',
   'markerStart',
   'style',
-  'pointerRadius',
+  'interactionWidth',
 ]
 StepEdge.inheritAttrs = false
 
diff --git a/packages/core/src/components/Edges/StraightEdge.ts b/packages/core/src/components/Edges/StraightEdge.ts
index f84a7e1c..a459b3d2 100644
--- a/packages/core/src/components/Edges/StraightEdge.ts
+++ b/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
 
diff --git a/packages/core/src/components/Edges/Wrapper.ts b/packages/core/src/components/Edges/Wrapper.ts
index c8621928..b1aa0cde 100644
--- a/packages/core/src/components/Edges/Wrapper.ts
+++ b/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,
               }),
 
           [
diff --git a/packages/core/src/types/edge.ts b/packages/core/src/types/edge.ts
index f71f2b2a..f71f013d 100644
--- a/packages/core/src/types/edge.ts
+++ b/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
 }
diff --git a/packages/core/src/utils/graph.ts b/packages/core/src/utils/graph.ts
index 7d4f6dcb..10ad4da8 100644
--- a/packages/core/src/utils/graph.ts
+++ b/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