mirror of
https://github.com/openfrontio/OpenFrontIO.git
synced 2026-06-21 11:00:43 +00:00
Fix: Skewed SVGs in Radial Menu (#2749)
## Description: I believe this bug came after the introduction of the new donation button in the radial menu (#2708) causing the rectangular SVGs to get squished/skewed into square aspect ratios. This fix adds a little check to fallback onto original image dimensions when an SVG's aspect ratio isn't available. I tried a hardcoded fix earlier but if we ever decide to add different scaled icons into the radial menu again, this will automatically ensure the correct aspect ratio is used and the icon is centered properly. ### Before Fix <img width="1133" height="473" alt="image" src="https://github.com/user-attachments/assets/5f06b19c-7072-4650-a1b7-4cb2bf1200dc" /> ### After Fix <img width="840" height="421" alt="image" src="https://github.com/user-attachments/assets/176f1e7b-84bf-4b06-9ad6-4031e516d4ff" /> ## Please complete the following: - [x] I have added screenshots for all UI updates - [x] I process any text displayed to the user through translateText() and I've added it to the en.json file - [x] I have added relevant tests to the test directory - [x] I confirm I have thoroughly tested these changes and take full responsibility for any bugs introduced ## Please put your Discord username so you can be contacted if a bug or regression is found: bijx
This commit is contained in:
@@ -296,5 +296,23 @@ export async function getSvgAspectRatio(src: string): Promise<number | null> {
|
||||
// fetch may fail due to CORS or non-SVG..
|
||||
}
|
||||
|
||||
const imgRatio = await new Promise<number | null>((resolve) => {
|
||||
const img = new Image();
|
||||
img.onload = () => {
|
||||
if (img.naturalWidth > 0 && img.naturalHeight > 0) {
|
||||
resolve(img.naturalWidth / img.naturalHeight);
|
||||
} else {
|
||||
resolve(null);
|
||||
}
|
||||
};
|
||||
img.onerror = () => resolve(null);
|
||||
img.src = src;
|
||||
});
|
||||
|
||||
if (imgRatio !== null) {
|
||||
self.svgAspectRatioCache.set(src, imgRatio);
|
||||
return imgRatio;
|
||||
}
|
||||
|
||||
return null;
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user