From fb2b1c2e13a8634fcae671e4e2f5cc6bd799b05f Mon Sep 17 00:00:00 2001 From: Nathan Marrs Date: Thu, 2 Nov 2023 14:55:31 -0600 Subject: [PATCH] Canvas: Fix ability to draw arrows (#77573) Co-authored-by: Adela Almasan --- .../components/connections/ConnectionAnchors.tsx | 7 ++++++- public/app/plugins/panel/canvas/utils.ts | 11 ++++++----- 2 files changed, 12 insertions(+), 6 deletions(-) diff --git a/public/app/plugins/panel/canvas/components/connections/ConnectionAnchors.tsx b/public/app/plugins/panel/canvas/components/connections/ConnectionAnchors.tsx index 93ff6531756..cbd13b41e24 100644 --- a/public/app/plugins/panel/canvas/components/connections/ConnectionAnchors.tsx +++ b/public/app/plugins/panel/canvas/components/connections/ConnectionAnchors.tsx @@ -88,6 +88,12 @@ export const ConnectionAnchors = ({ setRef, handleMouseLeave }: Props) => { return ( { + if (element) { + // After React 15+, inline styles no longer support !important + element.style.setProperty('pointer-events', 'auto', 'important'); + } + }} key={id} alt={CONNECTION_ANCHOR_ALT} className={styles.anchor} @@ -131,7 +137,6 @@ const getStyles = (theme: GrafanaTheme2) => ({ width: `calc(5px + 2 * ${ANCHOR_PADDING}px)`, height: `calc(5px + 2 * ${ANCHOR_PADDING}px)`, zIndex: 100, - pointerEvents: 'auto', }), highlightElement: css({ backgroundColor: '#00ff00', diff --git a/public/app/plugins/panel/canvas/utils.ts b/public/app/plugins/panel/canvas/utils.ts index 60056dad2c4..36a7cbac3d6 100644 --- a/public/app/plugins/panel/canvas/utils.ts +++ b/public/app/plugins/panel/canvas/utils.ts @@ -204,12 +204,13 @@ export const calculateCoordinates = ( if (info.targetName) { const targetRect = target.div?.getBoundingClientRect(); + if (targetRect) { + const targetHorizontalCenter = targetRect.left - parentRect.left + targetRect.width / 2; + const targetVerticalCenter = targetRect.top - parentRect.top + targetRect.height / 2; - const targetHorizontalCenter = targetRect!.left - parentRect.left + targetRect!.width / 2; - const targetVerticalCenter = targetRect!.top - parentRect.top + targetRect!.height / 2; - - x2 = targetHorizontalCenter + (info.target.x * targetRect!.width) / 2; - y2 = targetVerticalCenter - (info.target.y * targetRect!.height) / 2; + x2 = targetHorizontalCenter + (info.target.x * targetRect.width) / 2; + y2 = targetVerticalCenter - (info.target.y * targetRect.height) / 2; + } } else { const parentHorizontalCenter = parentRect.width / 2; const parentVerticalCenter = parentRect.height / 2;