v2: handle opposite direction swiping (#361)

* feat: enhance touch handling in CarouselScrollArea

- Implemented touch event prevention for smoother drag interactions.
- Updated touch-action CSS property to 'auto' for better default behavior.
- Refactored touch event handlers to improve responsiveness and prevent unwanted scrolling.

* feat: improve touch swipe handling in CarouselScrollArea

- Added logic to prevent snapping when swiping in the wrong direction for both horizontal and vertical carousels.
- Introduced new signals to track touch start positions for better swipe detection.
- Refactored touch event handling to enhance responsiveness and user experience.

* fix: direction swipe

* test: add swipe direction tests for carousel component

- Implemented tests to verify that vertical swipes on horizontal carousels and horizontal swipes on vertical carousels do not change the current item.
- Added checks to ensure item positions remain unchanged after swiping in the non-dominant direction.
- Enhanced test coverage for swipe interactions to improve reliability and user experience.

Author: thejackshelton-kunaico

libs/components/src/carousel/carousel-scroll-area.tsx

@@ -4,6 +4,7 @@ import {
   component$,
   type PropsOf,
   Slot,
+  sync$,
   useContext,
   useOnWindow,
   useSignal,
@@ -15,16 +16,17 @@ import { Render } from "../render/render";
 import styles from "./carousel.css?inline";
 import { carouselContextId } from "./carousel-root";
 import {
-  getValueFromIndex,
-  setBoundaries,
-  setTransform,
-  setTransition,
   getItemPosition,
+  getValueFromIndex,
   getVelocityBasedTargetIndex,
-  trackDragStart,
+  isSwipeInCorrectDirection,
+  type OrientationProps,
   resetDragTracking,
+  setBoundaries,
   setInitialItemPos,
-  type OrientationProps
+  setTransform,
+  setTransition,
+  trackDragStart
 } from "./carousel-utils";
 
 export const CarouselScrollArea = component$((props: PropsOf<"div">) => {
@@ -45,6 +47,8 @@ export const CarouselScrollArea = component$((props: PropsOf<"div">) => {
   const boundaries = useSignal<{ min: number; max: number } | null>(null);
   const isMouseDown = useSignal(false);
   const isTouchDevice = useSignal(false);
+  const touchStartX = useSignal(0);
+  const touchStartY = useSignal(0);
 
   const givenTransition = useSignal<string>();
   const isInitialTransition = useSignal(true);
@@ -109,22 +113,22 @@ export const CarouselScrollArea = component$((props: PropsOf<"div">) => {
   const handleDragSnap = $((e?: MouseEvent | TouchEvent) => {
     if (!context.scrollAreaRef.value) return;
 
-    // Cancel any pending RAF updates
     if (rafId.value !== undefined) {
       cancelAnimationFrame(rafId.value);
       rafId.value = undefined;
     }
 
-    // Get final pointer position and time
     let finalPos: number | undefined = startPos.value;
 
-    if (e && "changedTouches" in e && e.changedTouches.length > 0) {
+    const isTouchEvent = e && "changedTouches" in e && e.changedTouches.length > 0;
+    const isMouseEvent = e && "clientX" in e;
+
+    if (isTouchEvent) {
       finalPos = e.changedTouches[0][clientPosition];
-    } else if (e && "clientX" in e) {
+    } else if (isMouseEvent) {
       finalPos = e[pagePosition];
     }
 
-    // If it was just a tap (no movement), don't snap - just reset flags
     if (!isMouseMoving.value && !isTouchMoving.value) {
       isMouseDown.value = false;
       isMouseMoving.value = false;
@@ -138,6 +142,30 @@ export const CarouselScrollArea = component$((props: PropsOf<"div">) => {
       return;
     }
 
+    if (isTouchEvent) {
+      const touch = e.changedTouches[0];
+      const isCorrectDirection = isSwipeInCorrectDirection({
+        startX: touchStartX.value,
+        startY: touchStartY.value,
+        currentX: touch.clientX,
+        currentY: touch.clientY,
+        orientation: context.orientation.value
+      });
+
+      if (!isCorrectDirection) {
+        isMouseDown.value = false;
+        isMouseMoving.value = false;
+        isTouchMoving.value = false;
+        isTouchStart.value = false;
+        resetDragTracking({
+          dragStartPos,
+          dragStartTime
+        });
+        window.removeEventListener("mousemove", handleMouseMove);
+        return;
+      }
+    }
+
     const items = context.itemRefsArray.value;
     if (items.length === 0) return;
 
@@ -342,7 +370,11 @@ export const CarouselScrollArea = component$((props: PropsOf<"div">) => {
     if (!context.isDraggable.value || !context.scrollAreaRef.value) return;
 
     const scrollArea = context.scrollAreaRef.value;
-    const touchPos = e.touches[0][clientPosition];
+    const touch = e.touches[0];
+    const touchPos = touch[clientPosition];
+
+    touchStartX.value = touch.clientX;
+    touchStartY.value = touch.clientY;
 
     setTransition({
       scrollArea,
@@ -375,9 +407,21 @@ export const CarouselScrollArea = component$((props: PropsOf<"div">) => {
     if (!isTouchStart.value || startPos.value === undefined) return;
     if (!context.scrollAreaRef.value || !boundaries.value) return;
 
-    e.preventDefault();
+    const touch = e.touches[0];
+
+    const isCorrectDirection = isSwipeInCorrectDirection({
+      startX: touchStartX.value,
+      startY: touchStartY.value,
+      currentX: touch.clientX,
+      currentY: touch.clientY,
+      orientation: context.orientation.value
+    });
+
+    if (!isCorrectDirection) {
+      return;
+    }
 
-    const pos = e.touches[0][clientPosition];
+    const pos = touch[clientPosition];
     const dragSpeed = context.sensitivity.value.touch;
 
     const walk = (startPos.value - pos) * dragSpeed;
@@ -449,14 +493,53 @@ export const CarouselScrollArea = component$((props: PropsOf<"div">) => {
     void handleDragSnap(e);
   });
 
+  let preventTouchStartX = 0;
+  let preventTouchStartY = 0;
+  let preventIsHorizontal: boolean | null = null;
+
+  const preventTouchStart = sync$((e: TouchEvent) => {
+    const touch = e.touches[0];
+    if (!touch) return;
+
+    const viewport = e.currentTarget as HTMLElement;
+    const carousel = viewport.querySelector("[ui-qds-carousel-scroll-area]");
+
+    if (!carousel) {
+      preventIsHorizontal = null;
+      return;
+    }
+
+    preventIsHorizontal = carousel.hasAttribute("ui-horizontal");
+    preventTouchStartX = touch.clientX;
+    preventTouchStartY = touch.clientY;
+  });
+
+  const preventTouchMove = sync$((e: TouchEvent) => {
+    if (preventIsHorizontal === null) return;
+
+    const touch = e.touches[0];
+    if (!touch) return;
+
+    const deltaX = Math.abs(touch.clientX - preventTouchStartX);
+    const deltaY = Math.abs(touch.clientY - preventTouchStartY);
+
+    if (preventIsHorizontal) {
+      if (deltaX > deltaY && deltaX > 5) {
+        e.preventDefault();
+      }
+    } else {
+      if (deltaY > deltaX && deltaY > 5) {
+        e.preventDefault();
+      }
+    }
+  });
+
   return (
     <div
-      preventdefault:touchmove
-      preventdefault:touchstart
       ui-qds-carousel-viewport
       onMouseDown$={[handleMouseDown, onMouseDown$]}
-      onTouchStart$={[handleTouchStart, onTouchStart$]}
-      onTouchMove$={[handleTouchMove, onTouchMove$]}
+      onTouchStart$={[preventTouchStart, handleTouchStart, onTouchStart$]}
+      onTouchMove$={[preventTouchMove, handleTouchMove, onTouchMove$]}
       onTouchEnd$={[handleTouchEnd, onTouchEnd$]}
       onWheel$={handleWheel}
       preventdefault:wheel={context.isMouseWheel.value}

libs/components/src/carousel/carousel-utils.ts

@@ -188,6 +188,25 @@ export function resetDragTracking(params: {
   dragStartTime.value = undefined;
 }
 
+export function isSwipeInCorrectDirection(params: {
+  startX: number;
+  startY: number;
+  currentX: number;
+  currentY: number;
+  orientation: "horizontal" | "vertical";
+}): boolean {
+  const { startX, startY, currentX, currentY, orientation } = params;
+
+  const deltaX = Math.abs(currentX - startX);
+  const deltaY = Math.abs(currentY - startY);
+
+  if (orientation === "horizontal") {
+    return deltaX >= deltaY;
+  } else {
+    return deltaY >= deltaX;
+  }
+}
+
 export function getVelocityBasedTargetIndex(params: {
   finalPos: number;
   currentIndex: number;

libs/components/src/carousel/carousel.browser.tsx

@@ -1068,3 +1068,99 @@ test("quick long swipe advances to next item", async () => {
   await expect.element(Items.nth(1)).toHaveAttribute("ui-current");
   await expect.element(Items.nth(0)).not.toHaveAttribute("ui-current");
 });
+
+test("vertical swipe on horizontal carousel does not move carousel", async () => {
+  render(<Basic />);
+
+  await expect.element(Items.nth(0)).toBeVisible();
+  await expect.element(Items.nth(0)).toHaveAttribute("ui-current");
+  await expect.element(Items.nth(1)).toBeVisible();
+
+  const firstItem = Items.nth(0);
+  await expect.element(firstItem).toBeVisible();
+  const itemRect = firstItem.element()?.getBoundingClientRect();
+  if (!itemRect) throw new Error("Item rect not found");
+
+  const x = itemRect.x + itemRect.width / 2;
+  const startY = itemRect.y + itemRect.height * 0.8;
+  const endY = itemRect.y + itemRect.height * 0.2;
+
+  await dragMouse(firstItem, x, startY, x, endY);
+
+  await expect.element(Items.nth(0)).toBeVisible();
+  await expect.element(Items.nth(0)).toHaveAttribute("ui-current");
+  await expect.element(Items.nth(1)).toBeVisible();
+  await expect.element(Items.nth(1)).not.toHaveAttribute("ui-current");
+});
+
+test("horizontal swipe on vertical carousel does not move carousel", async () => {
+  render(<VerticalDirection />);
+
+  await expect.element(Items.nth(0)).toBeVisible();
+  await expect.element(Items.nth(0)).toHaveAttribute("ui-current");
+  await expect.element(Items.nth(1)).toBeVisible();
+
+  const firstItem = Items.nth(0);
+  await expect.element(firstItem).toBeVisible();
+  const itemRect = firstItem.element()?.getBoundingClientRect();
+  if (!itemRect) throw new Error("Item rect not found");
+
+  const startX = itemRect.x + itemRect.width * 0.8;
+  const endX = itemRect.x + itemRect.width * 0.2;
+  const y = itemRect.y + itemRect.height / 2;
+
+  await dragMouse(firstItem, startX, y, endX, y);
+
+  await expect.element(Items.nth(0)).toBeVisible();
+  await expect.element(Items.nth(0)).toHaveAttribute("ui-current");
+  await expect.element(Items.nth(1)).toBeVisible();
+  await expect.element(Items.nth(1)).not.toHaveAttribute("ui-current");
+});
+
+test("vertical swipe on horizontal carousel does not affect item position", async () => {
+  render(<Basic />);
+
+  await expect.element(Items.nth(0)).toBeVisible();
+  await expect.element(Items.nth(0)).toHaveAttribute("ui-current");
+
+  const firstItem = Items.nth(0);
+  await expect.element(firstItem).toBeVisible();
+  const initialRect = firstItem.element()?.getBoundingClientRect();
+  if (!initialRect) throw new Error("Initial rect not found");
+
+  const x = initialRect.x + initialRect.width / 2;
+  const startY = initialRect.y + initialRect.height * 0.8;
+  const endY = initialRect.y + initialRect.height * 0.2;
+
+  await dragMouse(firstItem, x, startY, x, endY);
+
+  await expect.element(firstItem).toBeVisible();
+  const finalRect = firstItem.element()?.getBoundingClientRect();
+  if (!finalRect) throw new Error("Final rect not found");
+
+  expect(Math.abs(finalRect.x - initialRect.x)).toBeLessThan(5);
+});
+
+test("horizontal swipe on vertical carousel does not affect item position", async () => {
+  render(<VerticalDirection />);
+
+  await expect.element(Items.nth(0)).toBeVisible();
+  await expect.element(Items.nth(0)).toHaveAttribute("ui-current");
+
+  const firstItem = Items.nth(0);
+  await expect.element(firstItem).toBeVisible();
+  const initialRect = firstItem.element()?.getBoundingClientRect();
+  if (!initialRect) throw new Error("Initial rect not found");
+
+  const startX = initialRect.x + initialRect.width * 0.8;
+  const endX = initialRect.x + initialRect.width * 0.2;
+  const y = initialRect.y + initialRect.height / 2;
+
+  await dragMouse(firstItem, startX, y, endX, y);
+
+  await expect.element(firstItem).toBeVisible();
+  const finalRect = firstItem.element()?.getBoundingClientRect();
+  if (!finalRect) throw new Error("Final rect not found");
+
+  expect(Math.abs(finalRect.y - initialRect.y)).toBeLessThan(5);
+});

libs/components/src/carousel/carousel.css

@@ -28,7 +28,7 @@
     scroll-snap-type: both mandatory;
 
     /* Optimize touch performance - disable default touch behaviors since we handle them */
-    touch-action: none;
+    touch-action: auto;
     /* Prevent text selection during drag */
     user-select: none;
   }