Mizah/mizzkey
1
0
Fork 0
Code Issues Pull requests Actions Packages Projects Releases Wiki Activity

Condensedlines reflow once (#10944)

Browse source 
* perf: Update MkCondensedLine styles after reading all dimensions

* perf: reduce reflow in MkCondensedLine

* lint

* Update packages/frontend/src/components/global/MkCondensedLine.vue

Co-authored-by: Acid Chicken (硫酸鶏) <root@acid-chicken.com>

* Update packages/frontend/src/components/global/MkCondensedLine.vue

Co-authored-by: Acid Chicken (硫酸鶏) <root@acid-chicken.com>

---------

Co-authored-by: syuilo <Syuilotan@yahoo.co.jp>
Co-authored-by: Acid Chicken (硫酸鶏) <root@acid-chicken.com>
This commit is contained in:
Yuriha 2023-06-05 18:06:33 +09:00 committed by GitHub
parent 6b0685a25c
commit 2d5bb40ad0
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
1 changed files with 8 additions and 1 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

9
packages/frontend/src/components/global/MkCondensedLine.vue
View file

@ -13,13 +13,20 @@ interface Props {
const contentSymbol = Symbol(); const contentSymbol = Symbol();
const observer = new ResizeObserver((entries) => { const observer = new ResizeObserver((entries) => {
const results: {
container: HTMLSpanElement;
transform: string;
}[] = [];
for (const entry of entries) { for (const entry of entries) {
const content = (entry.target[contentSymbol] ? entry.target : entry.target.firstElementChild) as HTMLSpanElement; const content = (entry.target[contentSymbol] ? entry.target : entry.target.firstElementChild) as HTMLSpanElement;
const props: Required<Props> = content[contentSymbol]; const props: Required<Props> = content[contentSymbol];
const container = content.parentElement as HTMLSpanElement; const container = content.parentElement as HTMLSpanElement;
const contentWidth = content.getBoundingClientRect().width; const contentWidth = content.getBoundingClientRect().width;
const containerWidth = container.getBoundingClientRect().width; const containerWidth = container.getBoundingClientRect().width;
container.style.transform = `scaleX(${Math.max(props.minScale, Math.min(1, containerWidth / contentWidth))})`; results.push({ container, transform: `scaleX(${Math.max(props.minScale, Math.min(1, containerWidth / contentWidth))})` });
}
for (const result of results) {
result.container.style.transform = result.transform;
} }
}); });
</script> </script>