From 2ff47e3d85ba60c6a44ba8bedc4a164ebeacca64 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Simon=20H=C3=B6tten?= <s+git@hoetten.org>
Date: Thu, 16 Nov 2023 12:45:10 +0100
Subject: [PATCH] scroll board by dragging
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Signed-off-by: Simon Hötten <s+git@hoetten.org>
---
 src/components/board/Board.vue | 37 ++++++++++++++++++++++++++++++++--
 src/components/board/Stack.vue |  1 +
 2 files changed, 36 insertions(+), 2 deletions(-)

diff --git a/src/components/board/Board.vue b/src/components/board/Board.vue
index eed4ec04c..c0d0de0c3 100644
--- a/src/components/board/Board.vue
+++ b/src/components/board/Board.vue
@@ -54,7 +54,11 @@
 					</form>
 				</template>
 			</NcEmptyContent>
-			<div v-else-if="!isEmpty && !loading" key="board" class="board">
+			<div v-else-if="!isEmpty && !loading"
+				key="board"
+				ref="board"
+				class="board"
+				@mousedown="onMouseDown">
 				<Container lock-axix="y"
 					orientation="horizontal"
 					:drag-handle-selector="dragHandleSelector"
@@ -65,6 +69,7 @@
 					<Draggable v-for="stack in stacksByBoard"
 						:key="stack.id"
 						data-click-closes-sidebar="true"
+						data-dragscroll-enabled
 						class="stack-draggable-wrapper">
 						<Stack :stack="stack" :dragging="draggingStack" data-click-closes-sidebar="true" />
 					</Draggable>
@@ -117,6 +122,8 @@ export default {
 			draggingStack: false,
 			loading: true,
 			newStackTitle: '',
+			currentScrollPosX: null,
+			currentMousePosX: null,
 		}
 	},
 	computed: {
@@ -184,12 +191,38 @@ export default {
 			this.$store.dispatch('createStack', newStack)
 			this.newStackTitle = ''
 		},
+
+		onMouseDown(event) {
+			this.startMouseDrag(event)
+		},
+
+		startMouseDrag(event) {
+			if (!('dragscrollEnabled' in event.target.dataset)) return
+
+			event.preventDefault()
+			this.currentMousePosX = event.clientX
+			this.currentScrollPosX = this.$refs.board.scrollLeft
+			this.$refs.board.addEventListener('mousemove', this.handleMouseDrag)
+			this.$refs.board.addEventListener('mouseup', this.stopMouseDrag)
+			this.$refs.board.addEventListener('mouseleave', this.stopMouseDrag)
+		},
+
+		handleMouseDrag(event) {
+			event.preventDefault()
+			const deltaX = event.clientX - this.currentMousePosX
+			this.$refs.board.scrollLeft = this.currentScrollPosX - deltaX
+		},
+
+		stopMouseDrag(event) {
+			this.$refs.board.removeEventListener('mousemove', this.handleMouseDrag)
+			this.$refs.board.removeEventListener('mouseup', this.stopMouseDrag)
+			this.$refs.board.removeEventListener('mouseleave', this.stopMouseDrag)
+		},
 	},
 }
 </script>
 
 <style lang="scss" scoped>
-
 	@import '../../css/animations';
 	@import '../../css/variables';
 
diff --git a/src/components/board/Stack.vue b/src/components/board/Stack.vue
index 9f01c6a46..435a51cb6 100644
--- a/src/components/board/Stack.vue
+++ b/src/components/board/Stack.vue
@@ -132,6 +132,7 @@
 			data-click-closes-sidebar="true"
 			non-drag-area-selector=".dragDisabled"
 			:drag-handle-selector="dragHandleSelector"
+			data-dragscroll-enabled
 			@should-accept-drop="canEdit"
 			@drag-start="draggingCard = true"
 			@drag-end="draggingCard = false"