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: Connection heads not rendering consistently (#61887)

Browse Source
This commit is contained in:
Adela Almasan
2023-01-23 10:51:55 -06:00
committed by GitHub
parent 812c90ec69
commit 50faeba07e
1 changed files with 7 additions and 5 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -1,5 +1,5 @@
import { css } from '@emotion/css';
import React, { useCallback, useEffect, useRef, useState } from 'react';
import React, { useCallback, useEffect, useMemo, useRef, useState } from 'react';
import { GrafanaTheme2 } from '@grafana/data';
import { useStyles2 } from '@grafana/ui';
@@ -19,11 +19,14 @@ interface ConnectionInfo {
info: CanvasConnection;
}
let idCounter = 0;
export const ConnectionSVG = ({ setSVGRef, setLineRef, scene }: Props) => {
const styles = useStyles2(getStyles);
const headId = Date.now() + '_' + idCounter++;
const CONNECTION_LINE_ID = 'connectionLineId';
const CONNECTION_HEAD_ID = 'head';
const CONNECTION_HEAD_ID = useMemo(() => `head-${headId}`, [headId]);
const EDITOR_HEAD_ID = useMemo(() => `editorHead-${headId}`, [headId]);
const [selectedConnection, setSelectedConnection] = useState<CanvasConnection | undefined>(undefined);
@@ -117,7 +120,6 @@ export const ConnectionSVG = ({ setSVGRef, setLineRef, scene }: Props) => {
}
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;
@@ -200,7 +202,7 @@ export const ConnectionSVG = ({ setSVGRef, setLineRef, scene }: Props) => {
<svg ref={setSVGRef} className={styles.editorSVG}>
<defs>
<marker
id="editorHead"
id={EDITOR_HEAD_ID}
markerWidth="10"
markerHeight="7"
refX="10"
@@ -211,7 +213,7 @@ export const ConnectionSVG = ({ setSVGRef, setLineRef, scene }: Props) => {
<polygon points="0 0, 10 3.5, 0 7" fill="rgb(255,255,255)" />
</marker>
</defs>
<line ref={setLineRef} stroke="rgb(255,255,255)" strokeWidth={2} markerEnd="url(#editorHead)" />
<line ref={setLineRef} stroke="rgb(255,255,255)" strokeWidth={2} markerEnd={`url(#${EDITOR_HEAD_ID})`} />
</svg>
{renderConnections()}
</>