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: Fix connection anchors for svg elements (#61895)

Browse Source
This commit is contained in:
Nathan Marrs 2023-01-25 17:32:04 -07:00 committed by GitHub
parent 46c828c2d8
commit 6c9174a766
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 26 additions and 7 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
public/app/features/canvas/runtime/scene.tsx
View File

@ -268,7 +268,7 @@ export class Scene {
} }
}; };
findElementByTarget = (target: HTMLElement | SVGElement): ElementState | undefined => { findElementByTarget = (target: Element): ElementState | undefined => {
// We will probably want to add memoization to this as we are calling on drag / resize // We will probably want to add memoization to this as we are calling on drag / resize
const stack = [...this.root.elements]; const stack = [...this.root.elements];
@ -288,7 +288,7 @@ export class Scene {
return undefined; return undefined;
}; };
setNonTargetPointerEvents = (target: HTMLElement | SVGElement, disablePointerEvents: boolean) => { setNonTargetPointerEvents = (target: Element, disablePointerEvents: boolean) => {
const stack = [...this.root.elements]; const stack = [...this.root.elements];
while (stack.length > 0) { while (stack.length > 0) {
const currentElement = stack.shift(); const currentElement = stack.shift();

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

@ -32,28 +32,47 @@ export class Connections {
this.connectionLine = connectionLine; this.connectionLine = connectionLine;
}; };
// Recursively find the first parent that is a canvas element
findElementTarget = (element: Element): ElementState | undefined => {
let elementTarget = undefined;
// Cap recursion at the scene level
if (element === this.scene.div) {
return undefined;
}
elementTarget = this.scene.findElementByTarget(element);
if (!elementTarget && element.parentElement) {
elementTarget = this.findElementTarget(element.parentElement);
}
return elementTarget;
};
handleMouseEnter = (event: React.MouseEvent) => { handleMouseEnter = (event: React.MouseEvent) => {
if (!(event.target instanceof HTMLElement) || !this.scene.isEditingEnabled) { if (!(event.target instanceof Element) || !this.scene.isEditingEnabled) {
return; return;
} }
const element = event.target.parentElement?.parentElement; let element: ElementState | undefined = this.findElementTarget(event.target);
if (!element) { if (!element) {
console.log('no element'); console.log('no element');
return; return;
} }
if (this.isDrawingConnection) { if (this.isDrawingConnection) {
this.connectionTarget = this.scene.findElementByTarget(element); this.connectionTarget = element;
} else { } else {
this.connectionSource = this.scene.findElementByTarget(element); this.connectionSource = element;
if (!this.connectionSource) { if (!this.connectionSource) {
console.log('no connection source'); console.log('no connection source');
return; return;
} }
} }
const elementBoundingRect = element!.getBoundingClientRect(); const elementBoundingRect = element.div!.getBoundingClientRect();
const parentBoundingRect = this.scene.div?.getBoundingClientRect(); const parentBoundingRect = this.scene.div?.getBoundingClientRect();
const relativeTop = elementBoundingRect.top - (parentBoundingRect?.top ?? 0); const relativeTop = elementBoundingRect.top - (parentBoundingRect?.top ?? 0);