From 07dc9947652e0df8f296c029cb85bef550faa711 Mon Sep 17 00:00:00 2001
From: Drew Slobodnjak <60050885+drew08t@users.noreply.github.com>
Date: Fri, 27 Jan 2023 11:35:57 -0800
Subject: [PATCH] Canvas: Anchor highlight persistance (#62364)

* Canvas: Anchor highlight persistance

* Update public/app/plugins/panel/canvas/ConnectionAnchors.tsx

Co-authored-by: Nathan Marrs  <nathanielmarrs@gmail.com>

* Fix CONNECTION_ANCHOR_ALT dependencies

* Simplify anchor type assertion logic

* Ensure that anchor highlight is reset when anchors are hidden

* Add helpful comment on return bool of function

---------

Co-authored-by: Nathan Marrs  <nathanielmarrs@gmail.com>
---
 .../panel/canvas/ConnectionAnchors.tsx        | 19 +++++++++++++++----
 .../app/plugins/panel/canvas/Connections.tsx  | 14 ++++++++++++--
 2 files changed, 27 insertions(+), 6 deletions(-)

diff --git a/public/app/plugins/panel/canvas/ConnectionAnchors.tsx b/public/app/plugins/panel/canvas/ConnectionAnchors.tsx
index 211617fe664..199cec648cd 100644
--- a/public/app/plugins/panel/canvas/ConnectionAnchors.tsx
+++ b/public/app/plugins/panel/canvas/ConnectionAnchors.tsx
@@ -7,10 +7,13 @@ import { ConnectionCoordinates } from 'app/features/canvas';
 
 type Props = {
   setRef: (anchorElement: HTMLDivElement) => void;
-  handleMouseLeave: (event: React.MouseEvent<Element, MouseEvent> | React.FocusEvent<HTMLDivElement, Element>) => void;
+  handleMouseLeave: (
+    event: React.MouseEvent<Element, MouseEvent> | React.FocusEvent<HTMLDivElement, Element>
+  ) => boolean;
 };
 
 export const CONNECTION_ANCHOR_DIV_ID = 'connectionControl';
+export const CONNECTION_ANCHOR_ALT = 'connection anchor';
 
 export const ConnectionAnchors = ({ setRef, handleMouseLeave }: Props) => {
   const highlightEllipseRef = useRef<HTMLDivElement>(null);
@@ -38,7 +41,15 @@ export const ConnectionAnchors = ({ setRef, handleMouseLeave }: Props) => {
     }
   };
 
-  const connectionAnchorAlt = 'connection anchor';
+  const handleMouseLeaveAnchors = (
+    event: React.MouseEvent<Element, MouseEvent> | React.FocusEvent<HTMLDivElement, Element>
+  ) => {
+    const didHideAnchors = handleMouseLeave(event);
+
+    if (didHideAnchors) {
+      onMouseLeaveHighlightElement();
+    }
+  };
 
   // Unit is percentage from the middle of the element
   // 0, 0 middle; -1, -1 bottom left; 1, 1 top right
@@ -75,7 +86,7 @@ export const ConnectionAnchors = ({ setRef, handleMouseLeave }: Props) => {
         <img
           id={id}
           key={id}
-          alt={connectionAnchorAlt}
+          alt={CONNECTION_ANCHOR_ALT}
           className={styles.anchor}
           style={style}
           src={anchorImage}
@@ -87,7 +98,7 @@ export const ConnectionAnchors = ({ setRef, handleMouseLeave }: Props) => {
 
   return (
     <div className={styles.root} ref={setRef}>
-      <div className={styles.mouseoutDiv} onMouseOut={handleMouseLeave} onBlur={handleMouseLeave} />
+      <div className={styles.mouseoutDiv} onMouseOut={handleMouseLeaveAnchors} onBlur={handleMouseLeaveAnchors} />
       <div
         id={CONNECTION_ANCHOR_DIV_ID}
         ref={highlightEllipseRef}
diff --git a/public/app/plugins/panel/canvas/Connections.tsx b/public/app/plugins/panel/canvas/Connections.tsx
index 3edad7621ec..51d7be06523 100644
--- a/public/app/plugins/panel/canvas/Connections.tsx
+++ b/public/app/plugins/panel/canvas/Connections.tsx
@@ -4,7 +4,7 @@ import { ConnectionPath } from 'app/features/canvas';
 import { ElementState } from 'app/features/canvas/runtime/element';
 import { Scene } from 'app/features/canvas/runtime/scene';
 
-import { ConnectionAnchors } from './ConnectionAnchors';
+import { CONNECTION_ANCHOR_ALT, ConnectionAnchors } from './ConnectionAnchors';
 import { ConnectionSVG } from './ConnectionSVG';
 
 export class Connections {
@@ -88,8 +88,18 @@ export class Connections {
     }
   };
 
-  handleMouseLeave = (event: React.MouseEvent | React.FocusEvent) => {
+  // Return boolean indicates if connection anchors were hidden or not
+  handleMouseLeave = (event: React.MouseEvent | React.FocusEvent): boolean => {
+    // If mouse is leaving INTO the anchor image, don't remove div
+    if (
+      event.relatedTarget instanceof HTMLImageElement &&
+      event.relatedTarget.getAttribute('alt') === CONNECTION_ANCHOR_ALT
+    ) {
+      return false;
+    }
+
     this.connectionAnchorDiv!.style.display = 'none';
+    return true;
   };
 
   connectionListener = (event: MouseEvent) => {