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 styles applying glitch on element type changing (#85184)

Browse Source 
Co-authored-by: nmarrs <nathanielmarrs@gmail.com>
This commit is contained in:
Ihor Yeromin 2024-03-29 08:10:44 +02:00 committed by GitHub
parent 383ebb2bc4
commit 20eac8d264
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
2 changed files with 18 additions and 8 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

9
.betterer.results
View File

@ -2336,13 +2336,10 @@ exports[`better eslint`] = {
"public/app/features/canvas/runtime/element.tsx:5381": [ "public/app/features/canvas/runtime/element.tsx:5381": [
[0, 0, 0, "Unexpected any. Specify a different type.", "0"], [0, 0, 0, "Unexpected any. Specify a different type.", "0"],
[0, 0, 0, "Do not use any type assertions.", "1"], [0, 0, 0, "Do not use any type assertions.", "1"],
[0, 0, 0, "Unexpected any. Specify a different type.", "2"], [0, 0, 0, "Do not use any type assertions.", "2"],
[0, 0, 0, "Do not use any type assertions.", "3"], [0, 0, 0, "Do not use any type assertions.", "3"],
[0, 0, 0, "Unexpected any. Specify a different type.", "4"], [0, 0, 0, "Do not use any type assertions.", "4"],
[0, 0, 0, "Do not use any type assertions.", "5"], [0, 0, 0, "Do not use any type assertions.", "5"]
[0, 0, 0, "Unexpected any. Specify a different type.", "6"],
[0, 0, 0, "Do not use any type assertions.", "7"],
[0, 0, 0, "Unexpected any. Specify a different type.", "8"]
], ],
"public/app/features/canvas/runtime/frame.tsx:5381": [ "public/app/features/canvas/runtime/frame.tsx:5381": [
[0, 0, 0, "Do not use any type assertions.", "0"] [0, 0, 0, "Do not use any type assertions.", "0"]

17
public/app/features/canvas/runtime/element.tsx
View File

@ -189,18 +189,31 @@ export class ElementState implements LayerElement {
style.transform = `translate(${translate[0]}, ${translate[1]})`; style.transform = `translate(${translate[0]}, ${translate[1]})`;
this.options.placement = placement; this.options.placement = placement;
this.sizeStyle = style; this.sizeStyle = style;
if (this.div) { if (this.div) {
for (const key in this.sizeStyle) { for (const key in this.sizeStyle) {
// eslint-disable-next-line @typescript-eslint/no-explicit-any
this.div.style[key as any] = (this.sizeStyle as any)[key]; this.div.style[key as any] = (this.sizeStyle as any)[key];
} }
const elementType = this.options.type;
// SVG elements have their own styles
// TODO: This is a hack, we should have a better way to handle this // TODO: This is a hack, we should have a better way to handle this
const elementType = this.options.type;
if (!SVGElements.has(elementType)) { if (!SVGElements.has(elementType)) {
// apply styles to div if it's not an SVG element
for (const key in this.dataStyle) { for (const key in this.dataStyle) {
// eslint-disable-next-line @typescript-eslint/no-explicit-any
this.div.style[key as any] = (this.dataStyle as any)[key]; this.div.style[key as any] = (this.dataStyle as any)[key];
} }
} else {
// ELEMENT IS SVG
// clean data styles from div if it's an SVG element; SVG elements have their own data styles;
// this is necessary for changing type of element cases;
// wrapper div element (this.div) doesn't re-render (has static `key` property),
// so we have to clean styles manually;
for (const key in this.dataStyle) {
// eslint-disable-next-line @typescript-eslint/no-explicit-any
this.div.style[key as any] = '';
}
} }
} }
} }