From 65d0e8f68396bc5afd0841c4c2310f3a082340b7 Mon Sep 17 00:00:00 2001
From: syuilo <Syuilotan@yahoo.co.jp>
Date: Sat, 24 Jun 2023 12:58:26 +0900
Subject: [PATCH] enhance(frontend): improve ux of deck scroll

---
 packages/client/src/ui/deck.vue        | 20 ++++++++++----------
 packages/client/src/ui/deck/column.vue |  2 ++
 2 files changed, 12 insertions(+), 10 deletions(-)

diff --git a/packages/client/src/ui/deck.vue b/packages/client/src/ui/deck.vue
index 6da6ad506d..270a92a5ee 100644
--- a/packages/client/src/ui/deck.vue
+++ b/packages/client/src/ui/deck.vue
@@ -9,6 +9,7 @@
 				class="columns"
 				:class="deckStore.reactiveState.columnAlign.value"
 				@contextmenu.self.prevent="onContextmenu"
+				@wheel.self="onWheel"
 			>
 				<template v-for="ids in layout">
 					<!-- sectionを利用しているのは、deck.vue側でcolumnに対してfirst-of-typeを効かせるため -->
@@ -31,6 +32,7 @@
 											) + 'px',
 								  }
 						"
+						@wheel.self="onWheel"
 					>
 						<DeckColumnCore
 							v-for="id in ids"
@@ -50,6 +52,7 @@
 						:is-stacked="false"
 						:style="columns.find(c => c.id === ids[0])!.flexible ? { flex: 1, minWidth: '350px' } : { width: columns.find(c => c.id === ids[0])!.width + 'px' }"
 						@parent-focus="moveFocus(ids[0], $event)"
+						@headerWheel="onWheel"
 					/>
 				</template>
 				<div v-if="layout.length === 0" class="intro _panel">
@@ -279,18 +282,15 @@ const onContextmenu = (ev) => {
 	);
 };
 
-document.documentElement.style.overflowY = "hidden";
-document.documentElement.style.scrollBehavior = "auto";
-window.addEventListener("wheel", (ev) => {
-	if (ev.target === columnsEl && ev.deltaX === 0) {
-		columnsEl.scrollLeft += ev.deltaY;
-	} else if (
-		getScrollContainer(ev.target as HTMLElement) == null &&
-		ev.deltaX === 0
-	) {
+function onWheel(ev: WheelEvent) {
+	if (ev.deltaX === 0) {
 		columnsEl.scrollLeft += ev.deltaY;
 	}
-});
+}
+
+document.documentElement.style.overflowY = "hidden";
+document.documentElement.style.scrollBehavior = "auto";
+
 loadDeck();
 
 function moveFocus(id: string, direction: "up" | "down" | "left" | "right") {
diff --git a/packages/client/src/ui/deck/column.vue b/packages/client/src/ui/deck/column.vue
index 03859abc0a..dcf94b31a7 100644
--- a/packages/client/src/ui/deck/column.vue
+++ b/packages/client/src/ui/deck/column.vue
@@ -23,6 +23,7 @@
 			@dragstart="onDragstart"
 			@dragend="onDragend"
 			@contextmenu.prevent.stop="onContextmenu"
+			@wheel="emit('headerWheel', $event)"
 		>
 			<button
 				v-if="isStacked && !isMainColumn"
@@ -95,6 +96,7 @@ const props = withDefaults(
 const emit = defineEmits<{
 	(ev: "parent-focus", direction: "up" | "down" | "left" | "right"): void;
 	(ev: "change-active-state", v: boolean): void;
+	(ev: "headerWheel", ctx: WheelEvent): void;
 }>();
 
 let body = $ref<HTMLDivElement>();