wip

owid · Jun 6, 2024 · 5eb26d3 · 5eb26d3
1 parent a579b57
commit 5eb26d3
Showing 1 changed file with 16 additions and 15 deletions.
diff --git a/packages/@ourworldindata/grapher/src/mapCharts/MapChart.tsx b/packages/@ourworldindata/grapher/src/mapCharts/MapChart.tsx
@@ -717,7 +717,7 @@ export class MapChart
             <g
                 ref={this.base}
                 className="mapTab"
-                onMouseMove={this.onMapMouseMove}
+                // onMouseMove={this.onMapMouseMove}
             >
                 <ChoroplethMap manager={this} />
                 {this.renderMapLegend()}
@@ -1040,12 +1040,10 @@ class ChoroplethMap extends React.Component<{
 
     @observable private hoverEnterFeature?: RenderFeature
     @observable private hoverNearbyFeature?: RenderFeature
-    @action.bound private onCursorMove(event: MouseEvent | TouchEvent): void {
-        if (this.isDragging) return
-
-        if (event.shiftKey) this.showSelectedStyle = true // Turn on highlight selection. To turn off, user can switch tabs.
-
-        if (this.hoverEnterFeature) return
+    @action.bound private detectNearbyFeature(
+        event: MouseEvent | TouchEvent
+    ): void {
+        if (this.isDragging || this.hoverEnterFeature) return
         const subunits = this.base.current?.querySelector(".subunits")
         if (subunits) {
             const { x, y } = getRelativeMouse(subunits, event)
@@ -1085,7 +1083,14 @@ class ChoroplethMap extends React.Component<{
         document.removeEventListener("mouseup", this.onMouseUp)
     }
 
-    @action.bound private onTouchStart(): void {
+    @action.bound private onMouseMove(event: MouseEvent): void {
+        if (event.shiftKey) this.showSelectedStyle = true // Turn on highlight selection. To turn off, user can switch tabs.
+        this.detectNearbyFeature(event)
+    }
+
+    @action.bound private onTouchStart(event: TouchEvent): void {
+        this.detectNearbyFeature(event)
+
         if (this.base.current) {
             this.base.current.addEventListener("touchmove", this.onTouchMove, {
                 passive: false,
@@ -1102,7 +1107,6 @@ class ChoroplethMap extends React.Component<{
     @action.bound private onTouchMove(event: TouchEvent): void {
         event.preventDefault() // prevent scrolling
         this.onCursorDrag(event)
-        this.onCursorMove(event)
     }
 
     @action.bound private onTouchEnd(): void {
@@ -1120,7 +1124,7 @@ class ChoroplethMap extends React.Component<{
 
     @action.bound private onMouseEnterFeature(feature: RenderFeature): void {
         // don't show tooltips when dragging
-        if (this.manager.isGlobe && this.isDragging) return
+        if (this.isDragging) return
 
         this.hoverEnterFeature = feature
         this.manager.onMapMouseOver(feature.geo)
@@ -1170,7 +1174,7 @@ class ChoroplethMap extends React.Component<{
             this.base.current.addEventListener("mousedown", this.onMouseDown, {
                 passive: false,
             })
-            this.base.current.addEventListener("mousemove", this.onCursorMove, {
+            this.base.current.addEventListener("mousemove", this.onMouseMove, {
                 passive: true,
             })
             this.base.current.addEventListener(
@@ -1218,10 +1222,7 @@ class ChoroplethMap extends React.Component<{
     componentWillUnmount(): void {
         if (this.base.current) {
             this.base.current.removeEventListener("mousedown", this.onMouseDown)
-            this.base.current.removeEventListener(
-                "mousemove",
-                this.onCursorMove
-            )
+            this.base.current.removeEventListener("mousemove", this.onMouseMove)
             this.base.current.removeEventListener(
                 "touchstart",
                 this.onTouchStart