@page-speed/maps 0.2.1 → 0.2.2

package/dist/components/geo-map.js

@@ -874,9 +874,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
+          };
         });
       }
     };
@@ -1013,6 +1020,7 @@ function GeoMap({
   const [dynamicPanelPosition, setDynamicPanelPosition] = React3.useState(
     panelPosition
   );
+  const viewStateRef = React3.useRef(uncontrolledViewState);
   React3.useEffect(() => {
     if (!viewState && !defaultViewState) {
       setUncontrolledViewState({
@@ -1024,6 +1032,9 @@ function GeoMap({
   }, [firstCoordinate, calculatedZoom, viewState, defaultViewState]);
   const isControlledViewState = viewState !== void 0;
   const resolvedViewState = isControlledViewState ? viewState : uncontrolledViewState;
+  React3.useEffect(() => {
+    viewStateRef.current = resolvedViewState || uncontrolledViewState;
+  }, [resolvedViewState, uncontrolledViewState]);
   const applyViewState = React3.useCallback(
     (nextState) => {
       if (!isControlledViewState) {
@@ -1092,17 +1103,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({
@@ -1112,7 +1121,7 @@ function GeoMap({
       });
       emitSelectionChange({ type: "marker", marker });
     },
-    [applyViewState, emitSelectionChange, markerFocusZoom, resolvedViewState, firstCoordinate]
+    [applyViewState, emitSelectionChange, markerFocusZoom]
   );
   const selectCluster = React3.useCallback(
     (cluster) => {
@@ -1120,17 +1129,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({
@@ -1140,7 +1147,7 @@ function GeoMap({
       });
       emitSelectionChange({ type: "cluster", cluster });
     },
-    [applyViewState, clusterFocusZoom, emitSelectionChange, resolvedViewState, firstCoordinate]
+    [applyViewState, clusterFocusZoom, emitSelectionChange]
   );
   const clearSelection = React3.useCallback(() => {
     setSelection({ type: "none" });