From 6adcbef9ced6c3d30b1db158ff53baec4572653f Mon Sep 17 00:00:00 2001
From: Julian Lawrance <julian.lawrance@gmail.com>
Date: Fri, 26 Apr 2024 17:45:31 +0100
Subject: [PATCH] Allow click-and-drag to scroll knockout bracket in modal

---
 src/components/modals/BracketModal.vue | 13 ++++++++++++-
 src/composables/useCursorGrab.ts       | 18 ++++++++++++++++++
 src/main.ts                            |  2 ++
 3 files changed, 32 insertions(+), 1 deletion(-)
 create mode 100644 src/composables/useCursorGrab.ts

diff --git a/src/components/modals/BracketModal.vue b/src/components/modals/BracketModal.vue
index f0f5e52..5ac36d7 100644
--- a/src/components/modals/BracketModal.vue
+++ b/src/components/modals/BracketModal.vue
@@ -3,11 +3,18 @@ import { useI18n } from "vue-i18n"
 
 import KnockoutBracket from "../play/KnockoutBracket.vue"
 
+import { useCursorGrab } from "@/composables/useCursorGrab"
+
 const { t } = useI18n()
 
 const visible = defineModel<boolean>("visible", {
     default: false,
 })
+
+const {
+    cursorStyle,
+    setGrabbing,
+} = useCursorGrab()
 </script>
 
 <template>
@@ -16,7 +23,11 @@ const visible = defineModel<boolean>("visible", {
         class="bracket-modal mx-4"
         v-model:visible="visible"
         :header="t('bracket.knockoutBracket')">
-        <div class="overflow-x-auto">
+        <div v-dragscroll
+            class="overflow-x-auto"
+            :style="cursorStyle"
+            @mousedown="setGrabbing(true)"
+            @mouseup="setGrabbing(false)">
             <KnockoutBracket />
         </div>
     </Dialog>
diff --git a/src/composables/useCursorGrab.ts b/src/composables/useCursorGrab.ts
new file mode 100644
index 0000000..8b91cde
--- /dev/null
+++ b/src/composables/useCursorGrab.ts
@@ -0,0 +1,18 @@
+import { computed, ref, type CSSProperties } from "vue"
+
+export const useCursorGrab = () => {
+    const isGrabbing = ref(false)
+
+    const cursorStyle = computed<CSSProperties>(() => ({
+        cursor: isGrabbing.value ? "grabbing" : "grab"
+    }))
+
+    const setGrabbing = (v: boolean) => {
+        isGrabbing.value = v
+    }
+
+    return {
+        cursorStyle,
+        setGrabbing,
+    }
+}
diff --git a/src/main.ts b/src/main.ts
index 347e355..295e2aa 100644
--- a/src/main.ts
+++ b/src/main.ts
@@ -34,6 +34,7 @@ import TabMenu from 'primevue/tabmenu'
 import Textarea from 'primevue/textarea'
 import Toast from 'primevue/toast'
 import ToastService from 'primevue/toastservice'
+import VueDragscroll from "vue-dragscroll"
 
 import App from './App.vue'
 import router from './router'
@@ -75,6 +76,7 @@ app.use(createPinia())
 app.use(router)
 app.use(PrimeVue)
 app.use(ToastService)
+app.use(VueDragscroll)
 
 app.component("Badge", Badge)
 app.component("Button", Button)