fixed touch events & c

Author: mkbabb

demo/@/components/custom/animation-controls/AnimationControlsGroup.vue

@@ -5,7 +5,7 @@
     >
         <div
             :class="
-                'sticky lg:absolute col-span-3 z-[100] pointer-events-none top-0 w-full h-full lg:w-min lg:right-0 m-0 px-6 pt-2 flex flex-row-reverse lg:gap-4 gap-6 items-center justify-items-center lg:items-start lg:justify-center justify-between ' +
+                'sticky lg:absolute col-span-2 z-[100] pointer-events-none top-0 w-full h-full lg:w-min lg:right-0 m-0 px-6 pt-2 flex flex-row-reverse lg:gap-4 gap-6 items-center justify-items-center lg:items-start lg:justify-center justify-between ' +
                 (!storedControls.selectedAnimation ? 'lg:mt-20' : 'lg:mt-4')
             "
         >
@@ -48,7 +48,7 @@
                     ><div
                         ref="ppmycotaLogoEl"
                         @click="setPPMode"
-                        class="ppmycota-logo-sm w-12 h-12 stroke-2 font-bold hover:scale-105 cursor-pointer pointer-events-auto"
+                        class="ppmycota-logo-sm w-12 h-12 m-0 p-0 stroke-2 font-bold hover:scale-105 cursor-pointer pointer-events-auto"
                     ></div>
                 </HoverCardTrigger>
                 <HoverCardContent class="z-[100] pointer-events-auto">

demo/@/components/custom/orbital-drag/OrbitalDrag.vue

@@ -248,13 +248,13 @@ const drag = (event: MouseEvent | TouchEvent) => {
 };
 
 const gesture = (event: any) => {
-    if (!isTouching) return;
+    if (!isTouching || isScrolling) return;
 
     const { screenX, screenY, scale } = event;
 
     const deltaX = screenX - previousGestureState.x;
     const deltaY = screenY - previousGestureState.y;
-    const deltaScale = scale - previousGestureState.scale;
+    const deltaScale = (scale - previousGestureState.scale) / (scaleFactor / 1.25);
 
     if (
         Math.abs(deltaX) < 1e-4 &&
@@ -397,12 +397,12 @@ onMounted(() => {
     useEventListener(window, "mouseleave", stopDrag);
 
     useEventListener(window, "touchmove", drag);
-    useEventListener(window, "touchstart", startDrag);
-    useEventListener(window, "touchend", stopDrag);
+    // useEventListener(window, "touchstart", startDrag);
+    // useEventListener(window, "touchend", stopDrag);
 
-    useEventListener(window, "gestureStart", startGesture);
-    useEventListener(window, "gestureChange", gesture);
-    useEventListener(window, "gestureEnd", stopGesture);
+    useEventListener(window, "gesturestart", startGesture);
+    useEventListener(window, "gesturechange", gesture);
+    useEventListener(window, "gestureend", stopGesture);
 
     resume();
 });
@@ -425,9 +425,9 @@ onUnmounted(() => {
     window.removeEventListener("touchstart", startDrag);
     window.removeEventListener("touchend", stopDrag);
 
-    window.removeEventListener("gestureStart", startGesture);
-    window.removeEventListener("gestureChange", gesture);
-    window.removeEventListener("gestureEnd", stopGesture);
+    window.removeEventListener("gesturestart", startGesture);
+    window.removeEventListener("gesturechange", gesture);
+    window.removeEventListener("gestureend", stopGesture);
 
     pause();
 });