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 { 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 { GrafanaTheme2 } from '@grafana/data';
import { useStyles2 } from '@grafana/ui'; import { useStyles2 } from '@grafana/ui';
@@ -19,11 +19,14 @@ interface ConnectionInfo {
info: CanvasConnection; info: CanvasConnection;
} }
let idCounter = 0;
export const ConnectionSVG = ({ setSVGRef, setLineRef, scene }: Props) => { export const ConnectionSVG = ({ setSVGRef, setLineRef, scene }: Props) => {
const styles = useStyles2(getStyles); const styles = useStyles2(getStyles);
const headId = Date.now() + '_' + idCounter++;
const CONNECTION_LINE_ID = 'connectionLineId'; 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); 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 parentBorderWidth = parseFloat(getComputedStyle(parent).borderWidth);
const sourceHorizontalCenter = sourceRect.left - parentRect.left - parentBorderWidth + sourceRect.width / 2; const sourceHorizontalCenter = sourceRect.left - parentRect.left - parentBorderWidth + sourceRect.width / 2;
const sourceVerticalCenter = sourceRect.top - parentRect.top - parentBorderWidth + sourceRect.height / 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}> <svg ref={setSVGRef} className={styles.editorSVG}>
<defs> <defs>
<marker <marker
id="editorHead" id={EDITOR_HEAD_ID}
markerWidth="10" markerWidth="10"
markerHeight="7" markerHeight="7"
refX="10" 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)" /> <polygon points="0 0, 10 3.5, 0 7" fill="rgb(255,255,255)" />
</marker> </marker>
</defs> </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> </svg>
{renderConnections()} {renderConnections()}
</> </>