From 5a67859a3302a32461159194e40e8e3ed03c988b Mon Sep 17 00:00:00 2001
From: Tanmay <tanmaylaud@gmail.com>
Date: Mon, 11 May 2020 00:58:12 +0530
Subject: [PATCH] fixed zoom out on defocus in mobile device

---
 src/App.tsx            | 36 ++++++++++++++++++++++++++++++++----
 src/assets/global.json |  2 +-
 src/styles.css         |  2 +-
 3 files changed, 34 insertions(+), 6 deletions(-)

diff --git a/src/App.tsx b/src/App.tsx
index 046580c..584f6a6 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -10,9 +10,27 @@ import { Object3D } from "three";
 import { Spinner } from "./Spinner";
 import globalData from "./assets/global.json";
 
+function getWindowDimensions() {
+  const { innerWidth: width, innerHeight: height } = window;
+  return {
+    width,
+    height,
+  };
+}
+
 export default function App() {
   const [details, setDetails] = useState<any>(null);
   const [isLoaded, onTextureLoaded] = useState(false);
+  const [cameraOptions, setCameraOptions] = useState({
+    maxDistanceRadiusScale: 100,
+    autoRotateSpeed: 0.1,
+    distanceRadiusScale: 100,
+  });
+
+  const [windowDimensions, setWindowDimensions] = useState(
+    getWindowDimensions()
+  );
+
   function getTooltipContent(marker: Marker) {
     return `Location: ${marker.Country} (Active Cases: ${marker.activeCases})`;
   }
@@ -22,6 +40,7 @@ export default function App() {
     markerObject?: Object3D,
     event?: PointerEvent
   ) {
+    zoomOut();
     setDetails(getTooltipContent(marker));
   }
 
@@ -29,6 +48,14 @@ export default function App() {
     setDetails(null);
   }
 
+  const zoomOut = () => {
+    setTimeout(() => {
+      if (windowDimensions.width <= 500) {
+        setDetails(null);
+      }
+    }, 2000);
+  };
+
   return (
     <React.Fragment>
       <Spinner loaded={isLoaded} />
@@ -43,12 +70,13 @@ export default function App() {
           onMouseOverMarker={onClickMarker}
           onMouseOutMarker={() => setDetails(null)}
           cameraOptions={{
-            maxDistanceRadiusScale: 10,
-            autoRotateSpeed: 1.1,
-            distanceRadiusScale: 10,
+            maxDistanceRadiusScale: 100,
+            autoRotateSpeed: 0.1,
+            distanceRadiusScale: 100,
           }}
           focusOptions={{
-            distanceRadiusScale: 5,
+            distanceRadiusScale: 30,
+            enableDefocus: true,
           }}
           globeOptions={{
             texture: worldTexture,
diff --git a/src/assets/global.json b/src/assets/global.json
index 2fc4b8a..f27f5c8 100644
--- a/src/assets/global.json
+++ b/src/assets/global.json
@@ -1,3 +1,3 @@
 {
-  "totalCount": 1000000
+  "totalCount": 2406984
 }
diff --git a/src/styles.css b/src/styles.css
index a3fb2ea..17c2465 100755
--- a/src/styles.css
+++ b/src/styles.css
@@ -4,9 +4,9 @@ body {
 }
 .globe {
   font-family: sans-serif;
-  height: 80vh;
   position: relative;
   z-index: 0;
+  height: 80vh;
 }
 .header1 {
   font-family: sans-serif;