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

fix(frontend): #11386 でウィンドウの場合に正常に表示されない問題を修正

Browse source
This commit is contained in:
tamaina 2023-07-26 08:31:23 +00:00
parent 926f208fcf
commit 09f37fc9e5
1 changed files with 11 additions and 3 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

14
packages/frontend/src/components/MkMediaList.vue
View file

@ -39,10 +39,18 @@ const ro = new ResizeObserver(entries => {
} }
}); });
function getClientWidthWithCache(targetEl: HTMLElement, containerEl: HTMLElement) { async function getClientWidthWithCache(targetEl: HTMLElement, containerEl: HTMLElement, count = 0) {
if (_DEV_) console.log('getClientWidthWithCache', { targetEl, containerEl, count, cache: widthCache.get(containerEl) });
if (widthCache.has(containerEl)) return widthCache.get(containerEl)!; if (widthCache.has(containerEl)) return widthCache.get(containerEl)!;
const width = targetEl.clientWidth; const width = targetEl.clientWidth;
if (count <= 10 && width < 64) {
// widthが64未満はおかしいのでリトライする
await new Promise(resolve => setTimeout(resolve, 50));
return getClientWidthWithCache(targetEl, containerEl, count + 1);
}
widthCache.set(containerEl, width); widthCache.set(containerEl, width);
ro.observe(containerEl); ro.observe(containerEl);
return width; return width;
@ -79,7 +87,7 @@ const count = $computed(() => props.mediaList.filter(media => previewable(media)
* アスペクト比をmediaListWithOneImageAppearanceに基づいていい感じに調整する * アスペクト比をmediaListWithOneImageAppearanceに基づいていい感じに調整する
* aspect-ratioではなくheightを使う * aspect-ratioではなくheightを使う
*/ */
function calcAspectRatio() { async function calcAspectRatio() {
if (!gallery.value || !root.value) return; if (!gallery.value || !root.value) return;
let img = props.mediaList[0]; let img = props.mediaList[0];
@ -90,7 +98,7 @@ function calcAspectRatio() {
} }
if (!container.value) container.value = getScrollContainer(root.value); if (!container.value) container.value = getScrollContainer(root.value);
const width = container.value ? getClientWidthWithCache(root.value, container.value) : root.value.clientWidth; const width = container.value ? await getClientWidthWithCache(root.value, container.value) : root.value.clientWidth;
const heightMin = (ratio: number) => { const heightMin = (ratio: number) => {
const imgResizeRatio = width / img.properties.width; const imgResizeRatio = width / img.properties.width;