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 SVG element border clipped (#85590)

Browse Source 
fix(canvas): canvas svg element border clipped
This commit is contained in:
Ihor Yeromin 2024-04-04 20:08:24 +02:00 committed by GitHub
parent 8957fd2b3b
commit 5a53041c49
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
4 changed files with 51 additions and 16 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

16
public/app/features/canvas/elements/cloud.tsx
View File

@ -53,9 +53,15 @@ const Cloud = (props: CanvasElementProps<CanvasElementConfig, CanvasElementData>
/>
<path
d="M 23 13 C -1 13 -7 33 12.2 37 C -7 45.8 14.6 65 30.2 57 C 41 73 77 73 89 57 C 113 57 113 41 98 33 C 113 17 89 1 68 9 C 53 -3 29 -3 23 13 Z"
className={styles.element}
style={{ fill: data?.backgroundImage ? `url(#image-${uniqueId})` : data?.backgroundColor }}
/>
{/* Border */}
<path
d="M 23 13 C -1 13 -7 33 12.2 37 C -7 45.8 14.6 65 30.2 57 C 41 73 77 73 89 57 C 113 57 113 41 98 33 C 113 17 89 1 68 9 C 53 -3 29 -3 23 13 Z"
clipPath={`url(#cloudClip-${uniqueId})`}
className={styles.elementBorder}
/>
</svg>
<span className={styles.text}>{data?.text}</span>
</div>
@ -199,9 +205,11 @@ const getStyles = (theme: GrafanaTheme2, data: CanvasElementData | undefined) =>
fontSize: `${data?.size}px`,
color: data?.color,
}),
element: css({
stroke: data?.borderColor,
strokeWidth: data?.borderWidth,
elementBorder: css({
fill: 'none',
stroke: data?.borderColor ?? 'none',
strokeWidth: data?.borderWidth ?? 0,
strokeLinejoin: 'round',
}),
};
};

19
public/app/features/canvas/elements/ellipse.tsx
View File

@ -56,9 +56,18 @@ const Ellipse = (props: CanvasElementProps<CanvasElementConfig, CanvasElementDat
cy="50%"
rx="50%"
ry="50%"
className={styles.element}
style={{ fill: data?.backgroundImage ? `url(#image-${uniqueId})` : data?.backgroundColor }}
/>
{/* Border */}
<ellipse
cx="50%"
cy="50%"
rx="50%"
ry="50%"
clipPath={`url(#ellipseClip-${uniqueId})`}
className={styles.elementBorder}
/>
</svg>
<span className={styles.text}>{data?.text}</span>
@ -202,9 +211,11 @@ const getStyles = (theme: GrafanaTheme2, data: CanvasElementData | undefined) =>
fontSize: `${data?.size}px`,
color: data?.color,
}),
element: css({
stroke: data?.borderColor,
strokeWidth: data?.borderWidth,
elementBorder: css({
fill: 'none',
stroke: data?.borderColor ?? 'none',
strokeWidth: data?.borderWidth ?? 0,
strokeLinejoin: 'round',
}),
};
};

16
public/app/features/canvas/elements/parallelogram.tsx
View File

@ -53,9 +53,15 @@ const Parallelogram = (props: CanvasElementProps<CanvasElementConfig, CanvasElem
/>
<polygon
points="0,150 50,0 250,0 200,150"
className={styles.element}
style={{ fill: data?.backgroundImage ? `url(#image-${uniqueId})` : data?.backgroundColor }}
/>
{/* Border */}
<polygon
points="0,150 50,0 250,0 200,150"
clipPath={`url(#parallelogramClip-${uniqueId})`}
className={styles.elementBorder}
/>
</svg>
<span className={styles.text}>{data?.text}</span>
</div>
@ -199,9 +205,11 @@ const getStyles = (theme: GrafanaTheme2, data: CanvasElementData | undefined) =>
fontSize: `${data?.size}px`,
color: data?.color,
}),
element: css({
stroke: data?.borderColor,
strokeWidth: data?.borderWidth,
elementBorder: css({
fill: 'none',
stroke: data?.borderColor ?? 'none',
strokeWidth: data?.borderWidth ?? 0,
strokeLinejoin: 'round',
}),
};
};

16
public/app/features/canvas/elements/triangle.tsx
View File

@ -53,9 +53,15 @@ const Triangle = (props: CanvasElementProps<CanvasElementConfig, CanvasElementDa
/>
<polygon
points="100,0 200,200 0,200"
className={styles.element}
style={{ fill: data?.backgroundImage ? `url(#image-${uniqueId})` : data?.backgroundColor }}
/>
{/* Border */}
<polygon
points="100,0 200,200 0,200"
clipPath={`url(#triangleClip-${uniqueId})`}
className={styles.elementBorder}
/>
</svg>
<span className={styles.text}>{data?.text}</span>
@ -200,9 +206,11 @@ const getStyles = (theme: GrafanaTheme2, data: CanvasElementData | undefined) =>
fontSize: `${data?.size}px`,
color: data?.color,
}),
element: css({
stroke: data?.borderColor,
strokeWidth: data?.borderWidth,
elementBorder: css({
fill: 'none',
stroke: data?.borderColor ?? 'none',
strokeWidth: data?.borderWidth ?? 0,
strokeLinejoin: 'round',
}),
};
};