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: Improve arrow positioning when border is present (#61961)

Browse Source
This commit is contained in:
Adela Almasan 2023-01-23 18:38:04 -06:00 committed by GitHub
parent 1181d06b1b
commit f5743ea9ac
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 10 additions and 13 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

9
public/app/plugins/panel/canvas/ConnectionSVG.tsx
View File

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

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

@ -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);