mirror of
https://github.com/misskey-dev/misskey
synced 2024-10-10 09:40:49 +02:00
Condensedlines reflow once (#10944)
* 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:
parent
6b0685a25c
commit
2d5bb40ad0
|
@ -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>
|
||||
|
|
Loading…
Reference in a new issue