From 2d5bb40ad0be6ea1066b4a383682cfbe2332e813 Mon Sep 17 00:00:00 2001
From: Yuriha <121590760+yuriha-chan@users.noreply.github.com>
Date: Mon, 5 Jun 2023 18:06:33 +0900
Subject: [PATCH] Condensedlines reflow once (#10944)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit
* 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>
---
.../frontend/src/components/global/MkCondensedLine.vue | 9 ++++++++-
1 file changed, 8 insertions(+), 1 deletion(-)
diff --git a/packages/frontend/src/components/global/MkCondensedLine.vue b/packages/frontend/src/components/global/MkCondensedLine.vue
index 1d46ff1ec9..4b2e8e4750 100644
--- a/packages/frontend/src/components/global/MkCondensedLine.vue
+++ b/packages/frontend/src/components/global/MkCondensedLine.vue
@@ -13,13 +13,20 @@ interface Props {
const contentSymbol = Symbol();
const observer = new ResizeObserver((entries) => {
+ const results: {
+ container: HTMLSpanElement;
+ transform: string;
+ }[] = [];
for (const entry of entries) {
const content = (entry.target[contentSymbol] ? entry.target : entry.target.firstElementChild) as HTMLSpanElement;
const props: Required<Props> = content[contentSymbol];
const container = content.parentElement as HTMLSpanElement;
const contentWidth = content.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>