public/grafana
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

[v9.4.x] Canvas: Support color themes for arrows (#62896)

Browse Source 
Canvas: Support color themes for arrows (#62829)

(cherry picked from commit db953c9a9c)

Co-authored-by: Drew Slobodnjak <60050885+drew08t@users.noreply.github.com>
This commit is contained in:
Grot (@grafanabot)
2023-02-03 12:47:27 -05:00
committed by GitHub
co-authored by Drew Slobodnjak
parent 4f826bc76c
commit 6895e75f70
1 changed files with 8 additions and 6 deletions
Download Patch File Download Diff File Expand all files Collapse all files
public/app/plugins/panel/canvas/ConnectionSVG.tsx
+8 -6
View File
@@ -3,6 +3,7 @@ import React, { useCallback, useEffect, useMemo, useRef, useState } from 'react'
import { GrafanaTheme2 } from '@grafana/data';
import { useStyles2 } from '@grafana/ui';
import { config } from 'app/core/config';
import { CanvasConnection } from 'app/features/canvas/element';
import { ElementState } from 'app/features/canvas/runtime/element';
import { Scene } from 'app/features/canvas/runtime/scene';
@@ -23,6 +24,7 @@ export const ConnectionSVG = ({ setSVGRef, setLineRef, scene }: Props) => {
const CONNECTION_LINE_ID = 'connectionLineId';
const CONNECTION_HEAD_ID = useMemo(() => `head-${headId}`, [headId]);
const EDITOR_HEAD_ID = useMemo(() => `editorHead-${headId}`, [headId]);
const defaultArrowColor = config.theme2.colors.text.primary;
const [selectedConnection, setSelectedConnection] = useState<CanvasConnection | undefined>(undefined);
@@ -142,9 +144,9 @@ export const ConnectionSVG = ({ setSVGRef, setLineRef, scene }: Props) => {
refX="10"
refY="3.5"
orient="auto"
stroke="rgb(255,255,255)"
stroke={defaultArrowColor}
>
<polygon points="0 0, 10 3.5, 0 7" fill="rgb(255,255,255)" />
<polygon points="0 0, 10 3.5, 0 7" fill={defaultArrowColor} />
</marker>
</defs>
<line
@@ -160,7 +162,7 @@ export const ConnectionSVG = ({ setSVGRef, setLineRef, scene }: Props) => {
/>
<line
id={CONNECTION_LINE_ID}
stroke="rgb(255,255,255)"
stroke={defaultArrowColor}
pointerEvents="auto"
strokeWidth={2}
markerEnd={`url(#${CONNECTION_HEAD_ID})`}
@@ -188,12 +190,12 @@ export const ConnectionSVG = ({ setSVGRef, setLineRef, scene }: Props) => {
refX="10"
refY="3.5"
orient="auto"
stroke="rgb(255,255,255)"
stroke={defaultArrowColor}
>
<polygon points="0 0, 10 3.5, 0 7" fill="rgb(255,255,255)" />
<polygon points="0 0, 10 3.5, 0 7" fill={defaultArrowColor} />
</marker>
</defs>
<line ref={setLineRef} stroke="rgb(255,255,255)" strokeWidth={2} markerEnd={`url(#${EDITOR_HEAD_ID})`} />
<line ref={setLineRef} stroke={defaultArrowColor} strokeWidth={2} markerEnd={`url(#${EDITOR_HEAD_ID})`} />
</svg>
{renderConnections()}
</>