fix: iPadでdeck uiでマウスホイールでスクロールできない (#15244)

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

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

* chore: remove pointermove listener

* lint: use window.document

* chore: use passive pointerdown event

CHANGELOG.md

@@ -57,6 +57,7 @@
 - Fix: テーマ切り替え時に一部の色が変わらない問題を修正
 - NOTE: 構造上クラシックUIを新しいデザインシステムに移行することが困難なため、クラシックUIが削除されました
   - デッキUIでカラムを中央寄せにし、メインカラムの左右にウィジェットカラムを配置し、ナビゲーションバーを上部に表示することである程度クラシックUIを再現できます
+- Fix: iPadOSでdeck uiをマウスカーソルによってスクロールできない問題を修正
 
 ### Server
 - Enhance 全体的なパフォーマンス向上

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;
 	}

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)">