updated gallery

resources/js/components/gallery/CategoryPillCarousel.jsx

@@ -12,16 +12,18 @@ export default function CategoryPillCarousel({
 }) {
   const viewportRef = useRef(null);
   const stripRef = useRef(null);
-  const dragZoneRef = useRef(null);
   const animationRef = useRef(0);
   const suppressClickRef = useRef(false);
   const dragStateRef = useRef({
     active: false,
     started: false,
+    captured: false,
     pointerId: null,
     pointerType: 'mouse',
     startX: 0,
+    startY: 0,
     startOffset: 0,
+    startedOnLink: false,
   });
 
   const [offset, setOffset] = useState(0);
@@ -157,13 +159,10 @@ export default function CategoryPillCarousel({
 
   useEffect(() => {
     const strip = stripRef.current;
-    const dragZone = dragZoneRef.current;
-    if (!strip || !dragZone) return;
+    if (!strip) return;
 
     const onPointerDown = (event) => {
-      const isMouse = event.pointerType === 'mouse';
-      const fromDragZone = event.currentTarget === dragZone;
-      if (isMouse && !fromDragZone) return;
+      if (event.pointerType === 'mouse' && event.button !== 0) return;
 
       if (animationRef.current) {
         cancelAnimationFrame(animationRef.current);
@@ -172,16 +171,15 @@ export default function CategoryPillCarousel({
 
       dragStateRef.current.active = true;
       dragStateRef.current.started = false;
+      dragStateRef.current.captured = false;
       dragStateRef.current.pointerId = event.pointerId;
       dragStateRef.current.pointerType = event.pointerType || 'mouse';
       dragStateRef.current.startX = event.clientX;
+      dragStateRef.current.startY = event.clientY;
       dragStateRef.current.startOffset = offset;
+      dragStateRef.current.startedOnLink = !!event.target.closest('.nb-react-pill');
 
       setDragging(false);
-
-      if (strip.setPointerCapture) {
-        try { strip.setPointerCapture(event.pointerId); } catch (_) { /* no-op */ }
-      }
     };
 
     const onPointerMove = (event) => {
@@ -189,13 +187,24 @@ export default function CategoryPillCarousel({
       if (!state.active || state.pointerId !== event.pointerId) return;
 
       const dx = event.clientX - state.startX;
-      const threshold = state.pointerType === 'touch' ? 12 : 8;
+      const dy = event.clientY - state.startY;
+      const threshold = state.pointerType === 'touch'
+        ? 12
+        : (state.startedOnLink ? 24 : 12);
       if (!state.started) {
-        if (Math.abs(dx) <= threshold) {
+        if (Math.abs(dx) <= threshold || Math.abs(dx) <= Math.abs(dy)) {
           return;
         }
 
         state.started = true;
+        if (!state.captured && strip.setPointerCapture) {
+          try {
+            strip.setPointerCapture(event.pointerId);
+            state.captured = true;
+          } catch (_) {
+            state.captured = false;
+          }
+        }
         setDragging(true);
       }
 
@@ -213,12 +222,14 @@ export default function CategoryPillCarousel({
       suppressClickRef.current = state.started;
       state.active = false;
       state.started = false;
+      state.startedOnLink = false;
       state.pointerId = null;
       setDragging(false);
 
-      if (strip.releasePointerCapture) {
+      if (state.captured && strip.releasePointerCapture) {
         try { strip.releasePointerCapture(event.pointerId); } catch (_) { /* no-op */ }
       }
+      state.captured = false;
     };
 
     const onClickCapture = (event) => {
@@ -234,22 +245,12 @@ export default function CategoryPillCarousel({
     strip.addEventListener('pointercancel', onPointerUpOrCancel);
     strip.addEventListener('click', onClickCapture, true);
 
-    dragZone.addEventListener('pointerdown', onPointerDown);
-    dragZone.addEventListener('pointermove', onPointerMove);
-    dragZone.addEventListener('pointerup', onPointerUpOrCancel);
-    dragZone.addEventListener('pointercancel', onPointerUpOrCancel);
-
     return () => {
       strip.removeEventListener('pointerdown', onPointerDown);
       strip.removeEventListener('pointermove', onPointerMove);
       strip.removeEventListener('pointerup', onPointerUpOrCancel);
       strip.removeEventListener('pointercancel', onPointerUpOrCancel);
       strip.removeEventListener('click', onClickCapture, true);
-
-      dragZone.removeEventListener('pointerdown', onPointerDown);
-      dragZone.removeEventListener('pointermove', onPointerMove);
-      dragZone.removeEventListener('pointerup', onPointerUpOrCancel);
-      dragZone.removeEventListener('pointercancel', onPointerUpOrCancel);
     };
   }, [moveTo, offset]);
 
@@ -307,12 +308,6 @@ export default function CategoryPillCarousel({
       >
         <svg viewBox="0 0 20 20" fill="currentColor" className="w-[18px] h-[18px]" aria-hidden="true"><path fillRule="evenodd" d="M7.293 14.707a1 1 0 010-1.414L10.586 10 7.293 6.707a1 1 0 011.414-1.414l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414 0z" clipRule="evenodd"/></svg>
       </button>
-
-      <div
-        ref={dragZoneRef}
-        className="nb-react-drag-zone"
-        aria-hidden="true"
-      />
     </div>
   );
 }