From bb315a8cbcf8710f541e6dfc3178efd2a93ac7ac Mon Sep 17 00:00:00 2001
From: syuilo <4439005+syuilo@users.noreply.github.com>
Date: Fri, 10 Jul 2026 20:22:34 +0900
Subject: [PATCH] Update MkImageGallery.item.vue

---
 .../src/components/MkImageGallery.item.vue    | 87 +++++++++++--------
 1 file changed, 49 insertions(+), 38 deletions(-)

diff --git a/packages/frontend/src/components/MkImageGallery.item.vue b/packages/frontend/src/components/MkImageGallery.item.vue
index 2e6637ddc4..8f5b6bd380 100644
--- a/packages/frontend/src/components/MkImageGallery.item.vue
+++ b/packages/frontend/src/components/MkImageGallery.item.vue
@@ -7,44 +7,49 @@ SPDX-License-Identifier: AGPL-3.0-only
 <div
 	ref="rootEl"
 	:class="$style.root"
-	@pointerdown.passive="onPointerdown"
-	@pointermove.passive="onPointermove"
-	@pointerup.passive="onPointerup"
-	@pointercancel.passive="cancelPointerGesture"
-	@touchstart.passive="onTouchstart"
-	@touchmove.passive="onTouchmove"
-	@touchcancel.passive="cancelPointerGesture"
-	@contextmenu="cancelPointerGesture"
-	@wheel="onWheel"
-	@click="onCLick"
 >
 	<div
-		:class="[$style.transformer, { [$style.transition]: enableTransition }]"
-		:style="{ translate: `${transform.x}px ${transform.y}px`, scale: transform.scale }"
-		@transitionend.self="enableTransition = false"
-		@transitioncancel.self="enableTransition = false"
+		ref="mainEl"
+		:class="$style.main"
+		@pointerdown.passive="onPointerdown"
+		@pointermove.passive="onPointermove"
+		@pointerup.passive="onPointerup"
+		@pointercancel.passive="cancelPointerGesture"
+		@touchstart.passive="onTouchstart"
+		@touchmove.passive="onTouchmove"
+		@touchcancel.passive="cancelPointerGesture"
+		@contextmenu="cancelPointerGesture"
+		@wheel="onWheel"
+		@click="onCLick"
 	>
-		<img
-			v-if="!originalImageLoaded || !thumbnailImageLoaded"
-			:class="[$style.image, $style.thumbnail]"
-			:src="image.thumbnailUrl"
-			:width="image.width"
-			:height="image.height"
-			:style="{ width: `${imageRenderingSize.width}px`, height: `${imageRenderingSize.height}px` }"
-			draggable="false"
-			@load="thumbnailImageLoaded = true"
-		>
-		<img
-			v-if="activated"
-			ref="imageEl"
-			:class="[$style.image, $style.original]"
-			:src="image.url"
-			:width="image.width"
-			:height="image.height"
-			:style="{ width: `${imageRenderingSize.width}px`, height: `${imageRenderingSize.height}px` }"
-			draggable="false"
-			@load="originalImageLoaded = true"
+		<div
+			:class="[$style.transformer, { [$style.transition]: enableTransition }]"
+			:style="{ translate: `${transform.x}px ${transform.y}px`, scale: transform.scale }"
+			@transitionend.self="enableTransition = false"
+			@transitioncancel.self="enableTransition = false"
 		>
+			<img
+				v-if="!originalImageLoaded || !thumbnailImageLoaded"
+				:class="[$style.image, $style.thumbnail]"
+				:src="image.thumbnailUrl"
+				:width="image.width"
+				:height="image.height"
+				:style="{ width: `${imageRenderingSize.width}px`, height: `${imageRenderingSize.height}px` }"
+				draggable="false"
+				@load="thumbnailImageLoaded = true"
+			>
+			<img
+				v-if="activated"
+				ref="imageEl"
+				:class="[$style.image, $style.original]"
+				:src="image.url"
+				:width="image.width"
+				:height="image.height"
+				:style="{ width: `${imageRenderingSize.width}px`, height: `${imageRenderingSize.height}px` }"
+				draggable="false"
+				@load="originalImageLoaded = true"
+			>
+		</div>
 	</div>
 
 	<div v-if="activated && !originalImageLoaded" :class="$style.loading">
@@ -94,6 +99,7 @@ const emit = defineEmits<{
 }>();
 
 const rootEl = useTemplateRef('rootEl');
+const mainEl = useTemplateRef('mainEl');
 const imageEl = useTemplateRef('imageEl');
 
 const originalImageLoaded = ref(false);
@@ -160,7 +166,7 @@ function zoomInTo(x: number, y: number, factor = 1.1, withAnimation = false) {
 	const newScale = transform.value.scale * factor;
 	isZooming.value = true;
 
-	const rect = rootEl.value.getBoundingClientRect();
+	const rect = mainEl.value.getBoundingClientRect();
 	const offsetX = x - rect.left;
 	const offsetY = y - rect.top;
 
@@ -249,7 +255,7 @@ let pointerVec = { x: 0, y: 0 };
 
 function onPointerdown(ev: PointerEvent) {
 	pointerEventCache.set(ev.pointerId, ev);
-	rootEl.value.setPointerCapture(ev.pointerId);
+	mainEl.value.setPointerCapture(ev.pointerId);
 
 	isDragging = true;
 	isClick = true;
@@ -339,7 +345,7 @@ function onPointermove(ev: PointerEvent) {
 
 function onPointerup(ev: PointerEvent) {
 	pointerEventCache.delete(ev.pointerId);
-	rootEl.value.releasePointerCapture(ev.pointerId);
+	mainEl.value.releasePointerCapture(ev.pointerId);
 	prevTwoTouchPointsDistance = 0;
 	isDragging = false;
 	if (currentPointerId === ev.pointerId) {
@@ -475,6 +481,12 @@ function onCLick() {
 
 <style lang="scss" module>
 .root {
+	position: absolute;
+	width: 100%;
+	height: 100%;
+}
+
+.main {
 	position: absolute;
 	touch-action: none;
 	width: 100%;
@@ -529,7 +541,6 @@ function onCLick() {
 	display: flex;
 	justify-content: center;
 	align-items: center;
-	pointer-events: none;
 	font-size: 85%;
 	color: var(--MI_THEME-fg);
 	opacity: 0;