IntenseWebs/grafana
3
0
Fork 0
mirror of https://github.com/grafana/grafana.git synced 2025-02-25 18:55:37 -06:00
Code Issues Packages Projects Releases Wiki Activity

Canvas: Anchor highlight persistance (#62364)

Browse Source 
* 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>
This commit is contained in:
Drew Slobodnjak 2023-01-27 11:35:57 -08:00 committed by GitHub
parent 290f23a50b
commit 07dc994765
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 27 additions and 6 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

19
public/app/plugins/panel/canvas/ConnectionAnchors.tsx
View File

@ -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}

14
public/app/plugins/panel/canvas/Connections.tsx
View File

@ -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) => {