Canvas: Fix ability to draw arrows (#77573)

Co-authored-by: Adela Almasan <adela.almasan@grafana.com>

public/app/plugins/panel/canvas/components/connections/ConnectionAnchors.tsx

@@ -88,6 +88,12 @@ export const ConnectionAnchors = ({ setRef, handleMouseLeave }: Props) => {
       return (
         <img
           id={id}
+          ref={(element) => {
+            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',

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;
+      x2 = targetHorizontalCenter + (info.target.x * targetRect.width) / 2;
-    const targetVerticalCenter = targetRect!.top - parentRect.top + targetRect!.height / 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;