From f5743ea9ac6fbf99e3f306fa81c255a4a1569866 Mon Sep 17 00:00:00 2001
From: Adela Almasan <88068998+adela-almasan@users.noreply.github.com>
Date: Mon, 23 Jan 2023 18:38:04 -0600
Subject: [PATCH] Canvas: Improve arrow positioning when border is present
 (#61961)

---
 public/app/plugins/panel/canvas/ConnectionSVG.tsx |  9 ++++-----
 public/app/plugins/panel/canvas/Connections.tsx   | 14 ++++++--------
 2 files changed, 10 insertions(+), 13 deletions(-)

diff --git a/public/app/plugins/panel/canvas/ConnectionSVG.tsx b/public/app/plugins/panel/canvas/ConnectionSVG.tsx
index 6c54415f3f7..b0e99467898 100644
--- a/public/app/plugins/panel/canvas/ConnectionSVG.tsx
+++ b/public/app/plugins/panel/canvas/ConnectionSVG.tsx
@@ -119,9 +119,8 @@ export const ConnectionSVG = ({ setSVGRef, setLineRef, scene }: Props) => {
         return;
       }
 
-      const parentBorderWidth = parseFloat(getComputedStyle(parent).borderWidth);
-      const sourceHorizontalCenter = sourceRect.left - parentRect.left - parentBorderWidth + sourceRect.width / 2;
-      const sourceVerticalCenter = sourceRect.top - parentRect.top - parentBorderWidth + sourceRect.height / 2;
+      const sourceHorizontalCenter = sourceRect.left - parentRect.left + sourceRect.width / 2;
+      const sourceVerticalCenter = sourceRect.top - parentRect.top + sourceRect.height / 2;
 
       // Convert from connection coords to DOM coords
       // TODO: Break this out into util function and add tests
@@ -134,8 +133,8 @@ export const ConnectionSVG = ({ setSVGRef, setLineRef, scene }: Props) => {
       if (info.targetName) {
         const targetRect = target.div?.getBoundingClientRect();
 
-        const targetHorizontalCenter = targetRect!.left - parentRect.left - parentBorderWidth + targetRect!.width / 2;
-        const targetVerticalCenter = targetRect!.top - parentRect.top - parentBorderWidth + 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;
diff --git a/public/app/plugins/panel/canvas/Connections.tsx b/public/app/plugins/panel/canvas/Connections.tsx
index b3c46fbbee2..d1ae8dd954b 100644
--- a/public/app/plugins/panel/canvas/Connections.tsx
+++ b/public/app/plugins/panel/canvas/Connections.tsx
@@ -55,10 +55,9 @@ export class Connections {
 
     const elementBoundingRect = element!.getBoundingClientRect();
     const parentBoundingRect = this.scene.div?.getBoundingClientRect();
-    let parentBorderWidth = parseFloat(getComputedStyle(this.scene.div!).borderWidth);
 
-    const relativeTop = elementBoundingRect.top - (parentBoundingRect?.top ?? 0) - parentBorderWidth;
-    const relativeLeft = elementBoundingRect.left - (parentBoundingRect?.left ?? 0) - parentBorderWidth;
+    const relativeTop = elementBoundingRect.top - (parentBoundingRect?.top ?? 0);
+    const relativeLeft = elementBoundingRect.left - (parentBoundingRect?.left ?? 0);
 
     if (this.connectionAnchorDiv) {
       this.connectionAnchorDiv.style.display = 'none';
@@ -95,10 +94,9 @@ export class Connections {
 
         const sourceRect = this.connectionSource.div.getBoundingClientRect();
         const parentRect = this.connectionSource.div.parentElement.getBoundingClientRect();
-        const parentBorderWidth = parseFloat(getComputedStyle(this.connectionSource.div.parentElement).borderWidth);
 
-        const sourceVerticalCenter = sourceRect.top - parentRect.top - parentBorderWidth + sourceRect.height / 2;
-        const sourceHorizontalCenter = sourceRect.left - parentRect.left - parentBorderWidth + sourceRect.width / 2;
+        const sourceVerticalCenter = sourceRect.top - parentRect.top + sourceRect.height / 2;
+        const sourceHorizontalCenter = sourceRect.left - parentRect.left + sourceRect.width / 2;
 
         // Convert from DOM coords to connection coords
         // TODO: Break this out into util function and add tests
@@ -112,8 +110,8 @@ export class Connections {
         if (this.connectionTarget && this.connectionTarget.div) {
           const targetRect = this.connectionTarget.div.getBoundingClientRect();
 
-          const targetVerticalCenter = targetRect.top - parentRect.top - parentBorderWidth + targetRect.height / 2;
-          const targetHorizontalCenter = targetRect.left - parentRect.left - parentBorderWidth + targetRect.width / 2;
+          const targetVerticalCenter = targetRect.top - parentRect.top + targetRect.height / 2;
+          const targetHorizontalCenter = targetRect.left - parentRect.left + targetRect.width / 2;
 
           targetX = (x - targetHorizontalCenter) / (targetRect.width / 2);
           targetY = (targetVerticalCenter - y) / (targetRect.height / 2);