From a5303ff23250b757070a3a8d93239c5c337d4459 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Adrian=20Z=C3=BCrcher?= <zuercher@mst.local>
Date: Mon, 12 May 2025 17:14:49 +0200
Subject: [PATCH] fix no scrolling while in dragPad

---
 src/components/DragPad.vue | 38 ++++++++++++++++++++++++++------------
 1 file changed, 26 insertions(+), 12 deletions(-)

diff --git a/src/components/DragPad.vue b/src/components/DragPad.vue
index e5e1f28..bf7923a 100644
--- a/src/components/DragPad.vue
+++ b/src/components/DragPad.vue
@@ -4,7 +4,7 @@
     <q-slider
       class="q-mr-sm"
       vertical
-      reverse
+      :reverse="!props.reverseTilt"
       v-model="tilt"
       :min="0"
       :max="100"
@@ -22,6 +22,7 @@
           position: relative;
           border: 1px solid #ccc;
           border-radius: 8px;
+          touch-action: none;
         "
         @mousedown="startDrag"
         @touchstart="startTouch"
@@ -32,6 +33,7 @@
       </div>
       <q-item-label class="text-bold">Pan</q-item-label>
       <q-slider
+        :reverse="props.reversePan"
         class="q-ml-sm"
         v-model="pan"
         :min="0"
@@ -46,18 +48,22 @@
 </template>
 
 <script lang="ts" setup>
-import { ref, computed, defineModel } from 'vue';
+import { ref, computed } from 'vue';
 
 const pad = ref<HTMLElement | null>(null);
 const dragging = ref(false);
 
 const pan = defineModel<number>('pan', { default: 0 });
 const tilt = defineModel<number>('tilt', { default: 0 });
+const props = defineProps<{
+  reversePan: boolean;
+  reverseTilt: boolean;
+}>();
 
 const markerStyle = computed(() => ({
   position: 'absolute' as const,
-  top: `${2 * (100 - tilt.value)}px`,
-  left: `${2 * pan.value}px`,
+  top: `${2 * (props.reverseTilt ? tilt.value : 100 - tilt.value)}px`,
+  left: `${2 * (props.reversePan ? 100 - pan.value : pan.value)}px`,
   width: '12px',
   height: '12px',
   borderRadius: '50%',
@@ -74,11 +80,6 @@ function startDrag(e: MouseEvent) {
   window.addEventListener('mouseup', stopDrag);
 }
 
-function onDrag(e: MouseEvent) {
-  if (!dragging.value) return;
-  updatePosition(e);
-}
-
 function stopDrag() {
   dragging.value = false;
   window.removeEventListener('mousemove', onDrag);
@@ -86,21 +87,29 @@ function stopDrag() {
 }
 
 function startTouch(e: TouchEvent) {
+  e.preventDefault(); // ✅ block scroll
   const touch = e.touches[0];
   if (!touch) return;
   dragging.value = true;
   updatePosition(touch);
-  window.addEventListener('touchmove', onTouch);
+  window.addEventListener('touchmove', onTouch, { passive: false });
   window.addEventListener('touchend', stopTouch);
 }
 
 function onTouch(e: TouchEvent) {
+  e.preventDefault(); // ✅ block scroll
   if (!dragging.value) return;
   const touch = e.touches[0];
   if (!touch) return;
   updatePosition(touch);
 }
 
+function onDrag(e: MouseEvent) {
+  e.preventDefault(); // optional, for extra safety
+  if (!dragging.value) return;
+  updatePosition(e);
+}
+
 function stopTouch() {
   dragging.value = false;
   window.removeEventListener('touchmove', onTouch);
@@ -109,11 +118,16 @@ function stopTouch() {
 
 function updatePosition(e: MouseEvent | Touch) {
   if (!pad.value) return;
+
   const rect = pad.value.getBoundingClientRect();
   const newX = Math.min(Math.max(0, e.clientX - rect.left), rect.width);
   const newY = Math.min(Math.max(0, e.clientY - rect.top), rect.height);
 
-  pan.value = Math.round((newX / rect.width) * 100);
-  tilt.value = Math.round(100 - (newY / rect.height) * 100);
+  pan.value = props.reversePan
+    ? Math.round((1 - newX / rect.width) * 100)
+    : Math.round((newX / rect.width) * 100);
+  tilt.value = props.reverseTilt
+    ? Math.round((newY / rect.height) * 100)
+    : Math.round(100 - (newY / rect.height) * 100);
 }
 </script>