From a4fd0ebda406b5ea1e6e81b7bf67cc6a379518d5 Mon Sep 17 00:00:00 2001
From: braks <78412429+bcakmakoglu@users.noreply.github.com>
Date: Tue, 18 Oct 2022 23:39:34 +0200
Subject: [PATCH] feat(edges): add `pointerRadius` prop to edges

---
 packages/core/src/components/Edges/BaseEdge.ts      | 13 ++++++++++++-
 packages/core/src/components/Edges/BezierEdge.ts    |  3 +++
 .../core/src/components/Edges/SimpleBezierEdge.ts   |  3 +++
 .../core/src/components/Edges/SmoothStepEdge.ts     |  3 +++
 packages/core/src/components/Edges/StepEdge.ts      |  1 +
 packages/core/src/components/Edges/StraightEdge.ts  |  3 +++
 packages/core/src/components/Edges/Wrapper.ts       |  1 +
 packages/core/src/types/edge.ts                     |  5 +++++
 packages/core/src/utils/graph.ts                    |  1 +
 9 files changed, 32 insertions(+), 1 deletion(-)

diff --git a/packages/core/src/components/Edges/BaseEdge.ts b/packages/core/src/components/Edges/BaseEdge.ts
index bd4f00fd..7e10960a 100644
--- a/packages/core/src/components/Edges/BaseEdge.ts
+++ b/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
 
diff --git a/packages/core/src/components/Edges/BezierEdge.ts b/packages/core/src/components/Edges/BezierEdge.ts
index 32ff2f05..c7c9d422 100644
--- a/packages/core/src/components/Edges/BezierEdge.ts
+++ b/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
 
diff --git a/packages/core/src/components/Edges/SimpleBezierEdge.ts b/packages/core/src/components/Edges/SimpleBezierEdge.ts
index 03ce114e..9bf6a809 100644
--- a/packages/core/src/components/Edges/SimpleBezierEdge.ts
+++ b/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
 
diff --git a/packages/core/src/components/Edges/SmoothStepEdge.ts b/packages/core/src/components/Edges/SmoothStepEdge.ts
index 16adb08d..8df41203 100644
--- a/packages/core/src/components/Edges/SmoothStepEdge.ts
+++ b/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
 
diff --git a/packages/core/src/components/Edges/StepEdge.ts b/packages/core/src/components/Edges/StepEdge.ts
index 34ee2057..4992bef8 100644
--- a/packages/core/src/components/Edges/StepEdge.ts
+++ b/packages/core/src/components/Edges/StepEdge.ts
@@ -22,6 +22,7 @@ StepEdge.props = [
   'markerEnd',
   'markerStart',
   'style',
+  'pointerRadius',
 ]
 StepEdge.inheritAttrs = false
 
diff --git a/packages/core/src/components/Edges/StraightEdge.ts b/packages/core/src/components/Edges/StraightEdge.ts
index 0aa4d73c..f84a7e1c 100644
--- a/packages/core/src/components/Edges/StraightEdge.ts
+++ b/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
 
diff --git a/packages/core/src/components/Edges/Wrapper.ts b/packages/core/src/components/Edges/Wrapper.ts
index c2a02a96..c8621928 100644
--- a/packages/core/src/components/Edges/Wrapper.ts
+++ b/packages/core/src/components/Edges/Wrapper.ts
@@ -190,6 +190,7 @@ const Wrapper = defineComponent({
                 targetY,
                 sourceHandleId: edge.sourceHandle,
                 targetHandleId: edge.targetHandle,
+                pointerRadius: edge.pointerRadius,
               }),
 
           [
diff --git a/packages/core/src/types/edge.ts b/packages/core/src/types/edge.ts
index ca211085..f71f2b2a 100644
--- a/packages/core/src/types/edge.ts
+++ b/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
 }
diff --git a/packages/core/src/utils/graph.ts b/packages/core/src/utils/graph.ts
index 471b5df6..7d4f6dcb 100644
--- a/packages/core/src/utils/graph.ts
+++ b/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