diff --git a/packages/frontend/src/components/MkImageGallery.item.vue b/packages/frontend/src/components/MkImageGallery.item.vue index 609d787ab5..07b146df21 100644 --- a/packages/frontend/src/components/MkImageGallery.item.vue +++ b/packages/frontend/src/components/MkImageGallery.item.vue @@ -225,7 +225,7 @@ function calcContentRenderingSize(content: Content) { } const contentRenderingSize = calcContentRenderingSize(props.content); -const contentRenderingRect = contentRenderingSize != null ? { +const getContentRenderingRect = () => contentRenderingSize != null ? { left: (window.innerWidth - contentRenderingSize.width + padding.left - padding.right) / 2, top: (window.innerHeight - contentRenderingSize.height + padding.top - padding.bottom) / 2, width: contentRenderingSize.width, @@ -263,6 +263,7 @@ const transform = ref({ x: 0, y: 0, scale: 1 }); // 元のimg要素の位置・サイズ(とobject-fitの設定値)を取得して、そこからneutralの位置にアニメーションするためのscaleとtranslationを計算する function getScaleAndTranslationForSourceElement() { const sourceElement = props.content.sourceElement; + const contentRenderingRect = getContentRenderingRect(); if (sourceElement == null || contentRenderingRect == null) return null; return calculateSourceTransform({ diff --git a/packages/frontend/src/components/MkImageGallery.vue b/packages/frontend/src/components/MkImageGallery.vue index 06da8f184b..7dbdf79d81 100644 --- a/packages/frontend/src/components/MkImageGallery.vue +++ b/packages/frontend/src/components/MkImageGallery.vue @@ -15,7 +15,7 @@ SPDX-License-Identifier: AGPL-3.0-only @afterLeave="onAfterLeave" > -
+
{ + screenWidth.value = window.innerWidth; + scrollToCurrentIndex(); +}); + function onHorizontalSwipe(offset: number) { if (currentIndex.value === 0 && offset > 0) { // これ以上戻れない contentsOffset.value = currentScrollLeft + (offset / 3); @@ -160,6 +167,21 @@ function onAfterLeave() { } emit('closed'); } + +const keymap = { + 'esc': { + allowRepeat: true, + callback: () => onItemClose(), + }, + 'arrowleft': { + allowRepeat: true, + callback: () => onPrev(), + }, + 'arrowright': { + allowRepeat: true, + callback: () => onNext(), + }, +} as const satisfies Keymap;