@page-speed/maps 0.2.1 → 0.2.2

package/dist/components/geo-map.cjs

@@ -895,9 +895,16 @@ function GeoMap({
     const updateDimensions = () => {
       if (containerRef.current) {
         const rect = containerRef.current.getBoundingClientRect();
-        setContainerDimensions({
-          width: rect.width || 800,
-          height: rect.height || calculatedHeight
+        setContainerDimensions((prev) => {
+          const newWidth = rect.width || 800;
+          const newHeight = rect.height || calculatedHeight;
+          if (prev.width === newWidth && prev.height === newHeight) {
+            return prev;
+          }
+          return {
+            width: newWidth,
+            height: newHeight
+          };
         });
       }
     };
@@ -1034,6 +1041,7 @@ function GeoMap({
   const [dynamicPanelPosition, setDynamicPanelPosition] = React3__namespace.useState(
     panelPosition
   );
+  const viewStateRef = React3__namespace.useRef(uncontrolledViewState);
   React3__namespace.useEffect(() => {
     if (!viewState && !defaultViewState) {
       setUncontrolledViewState({
@@ -1045,6 +1053,9 @@ function GeoMap({
   }, [firstCoordinate, calculatedZoom, viewState, defaultViewState]);
   const isControlledViewState = viewState !== void 0;
   const resolvedViewState = isControlledViewState ? viewState : uncontrolledViewState;
+  React3__namespace.useEffect(() => {
+    viewStateRef.current = resolvedViewState || uncontrolledViewState;
+  }, [resolvedViewState, uncontrolledViewState]);
   const applyViewState = React3__namespace.useCallback(
     (nextState) => {
       if (!isControlledViewState) {
@@ -1113,17 +1124,15 @@ function GeoMap({
         markerId: marker.id,
         clusterId: marker.clusterId
       });
-      const currentCenter = resolvedViewState || {
-        latitude: firstCoordinate.latitude,
-        longitude: firstCoordinate.longitude
+      const currentState = viewStateRef.current;
+      const center = {
+        latitude: currentState.latitude ?? 0,
+        longitude: currentState.longitude ?? 0
       };
       const optimalPosition = getOptimalPanelPosition(
         marker.latitude,
         marker.longitude,
-        {
-          latitude: currentCenter.latitude ?? firstCoordinate.latitude,
-          longitude: currentCenter.longitude ?? firstCoordinate.longitude
-        }
+        center
       );
       setDynamicPanelPosition(optimalPosition);
       applyViewState({
@@ -1133,7 +1142,7 @@ function GeoMap({
       });
       emitSelectionChange({ type: "marker", marker });
     },
-    [applyViewState, emitSelectionChange, markerFocusZoom, resolvedViewState, firstCoordinate]
+    [applyViewState, emitSelectionChange, markerFocusZoom]
   );
   const selectCluster = React3__namespace.useCallback(
     (cluster) => {
@@ -1141,17 +1150,15 @@ function GeoMap({
         type: "cluster",
         clusterId: cluster.id
       });
-      const currentCenter = resolvedViewState || {
-        latitude: firstCoordinate.latitude,
-        longitude: firstCoordinate.longitude
+      const currentState = viewStateRef.current;
+      const center = {
+        latitude: currentState.latitude ?? 0,
+        longitude: currentState.longitude ?? 0
       };
       const optimalPosition = getOptimalPanelPosition(
         cluster.latitude,
         cluster.longitude,
-        {
-          latitude: currentCenter.latitude ?? firstCoordinate.latitude,
-          longitude: currentCenter.longitude ?? firstCoordinate.longitude
-        }
+        center
       );
       setDynamicPanelPosition(optimalPosition);
       applyViewState({
@@ -1161,7 +1168,7 @@ function GeoMap({
       });
       emitSelectionChange({ type: "cluster", cluster });
     },
-    [applyViewState, clusterFocusZoom, emitSelectionChange, resolvedViewState, firstCoordinate]
+    [applyViewState, clusterFocusZoom, emitSelectionChange]
   );
   const clearSelection = React3__namespace.useCallback(() => {
     setSelection({ type: "none" });