From 102578712bbed1d4588bf5c2b1996a4655d16de8 Mon Sep 17 00:00:00 2001
From: anatawa12 <anatawa12@icloud.com>
Date: Wed, 2 Apr 2025 10:48:57 +0900
Subject: [PATCH] =?UTF-8?q?fix:=20iPad=E3=81=A7deck=20ui=E3=81=A7=E3=83=9E?=
 =?UTF-8?q?=E3=82=A6=E3=82=B9=E3=83=9B=E3=82=A4=E3=83=BC=E3=83=AB=E3=81=A7?=
 =?UTF-8?q?=E3=82=B9=E3=82=AF=E3=83=AD=E3=83=BC=E3=83=AB=E3=81=A7=E3=81=8D?=
 =?UTF-8?q?=E3=81=AA=E3=81=84=20(#15244)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

* fix: ipadでdeck uiでスクロールできない

* docs(changelog): iPadOSでdeck uiをマウスカーソルによってスクロールできない問題を修正

* chore: remove pointermove listener

* lint: use window.document

* chore: use passive pointerdown event
---
 CHANGELOG.md                             |  1 +
 packages/frontend/src/ui/deck.vue        | 18 ++++++++++++++----
 packages/frontend/src/ui/deck/column.vue |  2 +-
 3 files changed, 16 insertions(+), 5 deletions(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 4dd40a331e..9a2da274e4 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -57,6 +57,7 @@
 - Fix: テーマ切り替え時に一部の色が変わらない問題を修正
 - NOTE: 構造上クラシックUIを新しいデザインシステムに移行することが困難なため、クラシックUIが削除されました
   - デッキUIでカラムを中央寄せにし、メインカラムの左右にウィジェットカラムを配置し、ナビゲーションバーを上部に表示することである程度クラシックUIを再現できます
+- Fix: iPadOSでdeck uiをマウスカーソルによってスクロールできない問題を修正
 
 ### Server
 - Enhance 全体的なパフォーマンス向上
diff --git a/packages/frontend/src/ui/deck.vue b/packages/frontend/src/ui/deck.vue
index ef4a6fc03c..bf39c07229 100644
--- a/packages/frontend/src/ui/deck.vue
+++ b/packages/frontend/src/ui/deck.vue
@@ -12,15 +12,15 @@ SPDX-License-Identifier: AGPL-3.0-only
 
 		<XAnnouncements v-if="$i"/>
 		<XStatusBars/>
-
 		<div :class="$style.columnsWrapper">
-			<div ref="columnsEl" :class="[$style.columns, { [$style.center]: prefer.r['deck.columnAlign'].value === 'center', [$style.snapScroll]: snapScroll }]" @contextmenu.self.prevent="onContextmenu" @wheel.self="onWheel">
+		  <!-- passive: https://bugs.webkit.org/show_bug.cgi?id=281300 -->
+			<div ref="columnsEl" :class="[$style.columns, { [$style.center]: prefer.r['deck.columnAlign'].value === 'center', [$style.snapScroll]: snapScroll }]" @contextmenu.self.prevent="onContextmenu" @wheel.passive.self="onWheel">
 				<!-- sectionを利用しているのは、deck.vue側でcolumnに対してfirst-of-typeを効かせるため -->
 				<section
 					v-for="ids in layout"
 					:class="$style.section"
 					:style="columns.filter(c => ids.includes(c.id)).some(c => c.flexible) ? { flex: 1, minWidth: '350px' } : { width: Math.max(...columns.filter(c => ids.includes(c.id)).map(c => c.width)) + 'px' }"
-					@wheel.self="onWheel"
+					@wheel.passive.self="onWheel"
 				>
 					<component
 						:is="columnComponents[columns.find(c => c.id === id)!.type] ?? XTlColumn"
@@ -168,7 +168,8 @@ window.addEventListener('resize', () => {
 	isMobile.value = window.innerWidth <= 500;
 });
 
-const snapScroll = deviceKind === 'smartphone' || deviceKind === 'tablet';
+// ポインターイベント非対応用に初期値はUAから出す
+const snapScroll = ref(deviceKind === 'smartphone' || deviceKind === 'tablet');
 const withWallpaper = prefer.s['deck.wallpaper'] != null;
 const drawerMenuShowing = ref(false);
 const gap = prefer.r['deck.columnGap'];
@@ -219,7 +220,16 @@ const onContextmenu = (ev) => {
 	}], ev);
 };
 
+// タッチでスクロールしてるときはスナップスクロールを有効にする
+function pointerEvent(ev: PointerEvent) {
+	snapScroll.value = ev.pointerType === 'touch';
+}
+
+window.document.addEventListener('pointerdown', pointerEvent, { passive: true });
+
 function onWheel(ev: WheelEvent) {
+  // WheelEvent はマウスからしか発火しないのでスナップスクロールは無効化する
+  snapScroll.value = false;
 	if (ev.deltaX === 0 && columnsEl.value != null) {
 		columnsEl.value.scrollLeft += ev.deltaY;
 	}
diff --git a/packages/frontend/src/ui/deck/column.vue b/packages/frontend/src/ui/deck/column.vue
index 497a04610e..3d359b05c2 100644
--- a/packages/frontend/src/ui/deck/column.vue
+++ b/packages/frontend/src/ui/deck/column.vue
@@ -17,7 +17,7 @@ SPDX-License-Identifier: AGPL-3.0-only
 		@dragstart="onDragstart"
 		@dragend="onDragend"
 		@contextmenu.prevent.stop="onContextmenu"
-		@wheel="emit('headerWheel', $event)"
+		@wheel.passive="emit('headerWheel', $event)"
 	>
 		<svg viewBox="0 0 256 128" :class="$style.tabShape">
 			<g transform="matrix(6.2431,0,0,6.2431,-677.417,-29.3839)">