From 19563b696b0da752c41ba5fa0f2ee8828151df7c Mon Sep 17 00:00:00 2001
From: Alvaro <pursuance@gmail.com>
Date: Thu, 7 Nov 2024 13:13:29 +0100
Subject: [PATCH] Fix mobile drag on globe

---
 src/components/energy/section-2/index.tsx     |  6 +-
 src/components/globe-map/index.tsx            | 65 +++++++++++++++----
 .../image-slider-with-text/index.tsx          | 19 ------
 3 files changed, 54 insertions(+), 36 deletions(-)

diff --git a/src/components/energy/section-2/index.tsx b/src/components/energy/section-2/index.tsx
index baad0b7..b607e0c 100644
--- a/src/components/energy/section-2/index.tsx
+++ b/src/components/energy/section-2/index.tsx
@@ -25,8 +25,8 @@ export default function Section2() {
 
   return (
     <section className="relative bg-green-200 text-green-700" id="section-2">
-      <div className="relative xl:container h-[300vh]" ref={scrollSectionRef} id="section-2-scroll-parent">
-        <ScrollStep id="step-1" className='relative h-[100vh]' offset={0.5} onEnter={setStep} />
+      <div className="relative xl:container h-[200vh] xl:h-[300vh]" ref={scrollSectionRef} id="section-2-scroll-parent">
+        <ScrollStep id="step-1" className='relative h-[10vh] xl:h-[100vh]' offset={0.5} onEnter={setStep} />
         <div className='sticky h-[100vh] w-full flex flex-col-reverse xl:flex-row justify-center inset-0 xl:gap-[94px]' id="section-2-step-1">
           <div
             key="section-2-title-1"
@@ -70,7 +70,7 @@ export default function Section2() {
             </AnimatePresence>
           </div>
         </div>
-        <ScrollStep id="section-2-step-2" className='h-[200vh]' offset={0.5} onEnter={setStep} />
+        <ScrollStep id="section-2-step-2" className='h-[100vh] xl:h-[200vh]' offset={0.5} onEnter={setStep} />
       </div >
     </section >
   );
diff --git a/src/components/globe-map/index.tsx b/src/components/globe-map/index.tsx
index 8adb283..93f0b04 100644
--- a/src/components/globe-map/index.tsx
+++ b/src/components/globe-map/index.tsx
@@ -50,27 +50,58 @@ export default function GlobeMap({ videoMaterial, className, style, hasMarkers =
     }
   }, [hasMarkers]);
 
-  // Handle vertical swipe and wheel events to scroll the page
+  // Handle vertical wheel events to scroll the page
   const bind = useGesture(
     {
-      onDrag: (props) => {
-        const { event, direction, delta } = props;
-        if (direction[1] !== 0) { // Vertical swipe
-          event.stopPropagation();
-          event.preventDefault();
-          window.scrollBy(0, -delta[1]);
-        }
-      },
       onWheel: (props) => {
         const { event, direction, delta } = props;
         if (direction[1] !== 0) {
           event.stopPropagation();
+          event.preventDefault();
           window.scrollBy(0, delta[1]);
         }
       }
     }
   )
-  const { onWheel, onDrag } = bind();
+  const { onWheel } = bind();
+
+  useEffect(() => {
+    let touchPosition: number | null = null;
+    const handleTouchStart = (event: TouchEvent) => {
+      const updatedTouchPosition = event.touches[0].clientY;
+      touchPosition = updatedTouchPosition;
+
+      if (event.cancelable) {
+        event.preventDefault();
+      }
+    };
+
+    const handleTouchEnd = (event: TouchEvent) => {
+      const touchPositionEnd = event.changedTouches[0].clientY;
+      const delta = touchPosition ? touchPositionEnd - touchPosition : 0;
+      if (delta) { // Vertical swipe
+        event.stopPropagation();
+        event.preventDefault();
+        window.scrollBy({ top: -delta * 2, behavior: 'smooth' });
+      }
+      if (event.cancelable) {
+        event.preventDefault();
+      }
+    };
+
+    const containerElement = canvasRef.current;
+    if (containerElement) {
+      containerElement.addEventListener('touchstart', handleTouchStart, { passive: false });
+      containerElement.addEventListener('touchend', handleTouchEnd, { passive: false });
+    }
+
+    return () => {
+      if (containerElement) {
+        containerElement.removeEventListener('touchstart', handleTouchStart);
+        containerElement.removeEventListener('touchstart', handleTouchEnd);
+      }
+    };
+  }, []);
 
   // const dcontrols = new DeviceOrientationControls(camera, renderer.domElement);
 
@@ -83,11 +114,10 @@ export default function GlobeMap({ videoMaterial, className, style, hasMarkers =
   const { ErrorBoundary, didCatch, error } = useErrorBoundary();
   useEffect(() => {
     if (didCatch) {
-      console.log(error)
+      console.error('Globe error', error)
     }
   }
     , [didCatch, error]);
-
   return (
     <>
       <div
@@ -102,9 +132,16 @@ export default function GlobeMap({ videoMaterial, className, style, hasMarkers =
               resize={{ scroll: false, debounce: { scroll: 0, resize: 0 } }}
               fallback={<div>Sorry, no WebGL supported in your browser</div>}
               onWheel={onWheel}
-              onDrag={onDrag}
             >
-              <Controls canvasRef={canvasRef} marker={marker} active={hasMarkers} enabled={enabled} setEnabled={setEnabled} groupRef={groupRef} resetSelectedMarker={resetSelectedMarker} />
+              <Controls
+                canvasRef={canvasRef}
+                marker={marker}
+                active={hasMarkers}
+                enabled={enabled}
+                setEnabled={setEnabled}
+                groupRef={groupRef}
+                resetSelectedMarker={resetSelectedMarker}
+              />
               <GlobeGroup
                 groupRef={groupRef}
                 hasMarkers={hasMarkers}
diff --git a/src/components/image-slider-with-text/index.tsx b/src/components/image-slider-with-text/index.tsx
index 75d0bdc..d78f811 100644
--- a/src/components/image-slider-with-text/index.tsx
+++ b/src/components/image-slider-with-text/index.tsx
@@ -61,25 +61,6 @@ const ImageSliderWithText = ({
   );
   const isMobile = useIsMobile();
 
-  useEffect(() => {
-    const handleTouchMove = (event: TouchEvent) => {
-      if (event.cancelable) {
-        event.preventDefault();
-      }
-    };
-
-    const containerElement = containerRef.current;
-    if (containerElement) {
-      containerElement.addEventListener('touchmove', handleTouchMove, { passive: false });
-    }
-
-    return () => {
-      if (containerElement) {
-        containerElement.removeEventListener('touchmove', handleTouchMove);
-      }
-    };
-  }, []);
-
   return (
     <div className={cn("relative flex flex-col overflow-hidden", className)}>
       <div className='relative w-full' ref={containerRef} id="container">