bugfix: no selection reset on map overview clicks

Author: andreishket

vis/js/templates/Geomap/HeightContainer/index.tsx

@@ -1,25 +1,10 @@
 import { FC, PropsWithChildren } from "react";
-import { useDispatch, useSelector } from "react-redux";
-
-import { useActiveDataItem } from "@/hooks";
-import { deselectPaper } from "@/js/actions";
+import { useSelector } from "react-redux";
 
 import { getMapHeight } from "./selectors";
 
 export const HeightContainer: FC<PropsWithChildren> = ({ children }) => {
-  const { selectedItemId } = useActiveDataItem();
   const height = useSelector(getMapHeight);
-  const dispatch = useDispatch();
-
-  const handleMapClick = () => {
-    if (!selectedItemId) return;
-
-    dispatch(deselectPaper());
-  };
 
-  return (
-    <div style={{ height }} onClick={handleMapClick}>
-      {children}
-    </div>
-  );
+  return <div style={{ height }}>{children}</div>;
 };

vis/js/templates/Geomap/SelectionResetHandler/index.tsx

@@ -0,0 +1,30 @@
+import { FC, useRef } from "react";
+import { useMapEvent } from "react-leaflet";
+import { useDispatch } from "react-redux";
+
+import { useActiveDataItem } from "@/hooks";
+import { deselectPaper } from "@/js/actions";
+
+export const SelectionResetHandler: FC = () => {
+  const dispatch = useDispatch();
+  const { selectedItemId } = useActiveDataItem();
+  const isMovingRef = useRef(false);
+
+  useMapEvent("movestart", () => {
+    isMovingRef.current = true;
+  });
+
+  useMapEvent("moveend", () => {
+    requestAnimationFrame(() => {
+      isMovingRef.current = false;
+    });
+  });
+
+  useMapEvent("click", () => {
+    if (!selectedItemId || isMovingRef.current) return;
+
+    dispatch(deselectPaper());
+  });
+
+  return null;
+};

vis/js/templates/Geomap/index.tsx

@@ -7,11 +7,13 @@ import { CONFIG } from "./config";
 import { HeightContainer } from "./HeightContainer";
 import { Layer } from "./Layer";
 import { Pins } from "./Pins";
+import { SelectionResetHandler } from "./SelectionResetHandler";
 import { ZoomControls } from "./ZoomControls";
 
 export const Geomap: FC = () => (
   <HeightContainer>
     <MapContainer {...CONFIG} className="geomap_container">
+      <SelectionResetHandler />
       <ZoomControls />
       <Layer />
       <Pins />