From 3fc3edfe59869ecfe24b4feb6e3ad320466d4c07 Mon Sep 17 00:00:00 2001
From: Andrew Kingston <andrew@kingston.dev>
Date: Wed, 25 Sep 2024 12:04:18 +0100
Subject: [PATCH] Allow hovering over edges to make them active as well as
 supporting selection

---
 .../backend/RoleEditor/RoleEdge.svelte        | 31 +++++++++++++++++--
 1 file changed, 29 insertions(+), 2 deletions(-)

diff --git a/packages/builder/src/components/backend/RoleEditor/RoleEdge.svelte b/packages/builder/src/components/backend/RoleEditor/RoleEdge.svelte
index 94e00fa97f..84eccc03de 100644
--- a/packages/builder/src/components/backend/RoleEditor/RoleEdge.svelte
+++ b/packages/builder/src/components/backend/RoleEditor/RoleEdge.svelte
@@ -6,7 +6,7 @@
     useSvelteFlow,
   } from "@xyflow/svelte"
   import { Icon, TooltipPosition } from "@budibase/bbui"
-  import { getContext } from "svelte"
+  import { getContext, onMount } from "svelte"
   import { roles } from "stores/builder"
 
   export let sourceX
@@ -23,8 +23,13 @@
   const { updateRole, selectedNodes } = getContext("flow")
 
   let iconHovered = false
+  let edgeHovered = false
 
-  $: active = $selectedNodes.includes(source) || $selectedNodes.includes(target)
+  $: hovered = iconHovered || edgeHovered
+  $: active =
+    hovered ||
+    $selectedNodes.includes(source) ||
+    $selectedNodes.includes(target)
   $: edgeClasses = getEdgeClasses(active, iconHovered)
   $: [edgePath, labelX, labelY] = getBezierPath({
     sourceX,
@@ -54,6 +59,28 @@
     })
     await updateRole(target)
   }
+
+  const onEdgeMouseOver = e => {
+    edgeHovered = true
+  }
+
+  const onEdgeMouseOut = e => {
+    edgeHovered = false
+  }
+
+  onMount(() => {
+    const edge = document.querySelector(`.svelte-flow__edge[data-id="${id}"]`)
+    if (edge) {
+      edge.addEventListener("mouseover", onEdgeMouseOver)
+      edge.addEventListener("mouseout", onEdgeMouseOut)
+    }
+    return () => {
+      if (edge) {
+        edge.removeEventListener("mouseover", onEdgeMouseOver)
+        edge.removeEventListener("mouseout", onEdgeMouseOut)
+      }
+    }
+  })
 </script>
 
 <BaseEdge path={edgePath} class={edgeClasses} />