From f16dd505120a0c718c513d5d3c101a6f40c0848a Mon Sep 17 00:00:00 2001
From: anatawa12 <anatawa12@icloud.com>
Date: Wed, 29 Jan 2025 02:58:55 +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(misskey-dev#15244)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

commit b299046c1bba2cdf6010bdda992e441236ceffd3
Author: anatawa12 <anatawa12@icloud.com>
Date:   Thu Jan 9 20:23:25 2025 +0900

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

commit 8a531b7114e8ab3800f9492b18b9c2ad4f86fc6b
Author: anatawa12 <anatawa12@icloud.com>
Date:   Thu Jan 9 20:11:34 2025 +0900

    fix: ipadでdeck uiでスクロールできない
---
 CHANGELOG.md                             |  1 +
 packages/frontend/src/ui/deck.vue        | 18 +++++++++++++++---
 packages/frontend/src/ui/deck/column.vue |  2 +-
 3 files changed, 17 insertions(+), 4 deletions(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index ad92dd44e839..5d5cd035d421 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -7,6 +7,7 @@
 - Feat: 投稿フォームで画像をプレビュー可能に
 - Enhance: アンテナ、リスト等の名前をカラム名のデフォルト値にするように
 - Fix: ログインしていないときに VRTL が見えない問題
+- Fix: iPadOSでdeck uiをマウスカーソルによってスクロールできない問題を修正
 
 ### Server
 - Enhance: スレッドミュートにおいて、リノート、引用、リアクションの通知もミュートするように
diff --git a/packages/frontend/src/ui/deck.vue b/packages/frontend/src/ui/deck.vue
index 43c913bc8597..737ea3c80ca4 100644
--- a/packages/frontend/src/ui/deck.vue
+++ b/packages/frontend/src/ui/deck.vue
@@ -10,13 +10,14 @@ SPDX-License-Identifier: AGPL-3.0-only
 	<div :class="$style.main">
 		<XAnnouncements v-if="$i"/>
 		<XStatusBars/>
-		<div ref="columnsEl" :class="[$style.sections, { [$style.center]: deckStore.reactiveState.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.sections, { [$style.center]: deckStore.reactiveState.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"
@@ -150,7 +151,8 @@ window.addEventListener('resize', () => {
 	isMobile.value = window.innerWidth <= 500;
 });
 
-const snapScroll = deviceKind === 'smartphone' || deviceKind === 'tablet';
+// ポインターイベント非対応用に初期値はUAから出す
+const snapScroll = ref(deviceKind === 'smartphone' || deviceKind === 'tablet');
 const drawerMenuShowing = ref(false);
 
 /*
@@ -201,8 +203,18 @@ const onContextmenu = (ev) => {
 	}], ev);
 };
 
+// タッチでスクロールしてるときはスナップスクロールを有効にする
+function pointerEvent(ev: PointerEvent) {
+	snapScroll.value = ev.pointerType === 'touch';
+}
+
+document.addEventListener('pointerdown', pointerEvent);
+document.addEventListener('pointermove', pointerEvent);
+document.addEventListener('pointerup', pointerEvent);
+
 function onWheel(ev: WheelEvent) {
 	if (ev.deltaX === 0 && columnsEl.value != null) {
+		snapScroll.value = false;
 		columnsEl.value.scrollLeft += ev.deltaY;
 	}
 }
diff --git a/packages/frontend/src/ui/deck/column.vue b/packages/frontend/src/ui/deck/column.vue
index 8441854726a2..a1db67dc2ee7 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)">