@opengeoweb/core 9.20.2 → 9.21.0

package/index.esm.js

@@ -2015,8 +2015,7 @@ const HeaderOptions = ({
   shortcutsEnabled,
   onClickDockButton,
   onChangeSize,
-  buttonSettings,
-  mapWidth
+  buttonSettings
 }) => {
   var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l;
   const {
@@ -2044,11 +2043,7 @@ const HeaderOptions = ({
       tooltipTitle: t('layermanager-header-button-small'),
       "data-testid": "collapseSmall-btn",
       onClick: () => {
-        if (!isDockedLayerManager) {
-          onChangeSize(sizeSmall);
-        } else if (mapWidth && mapWidth > sizeSmall.width) {
-          onChangeSize(sizeSmall);
-        }
+        onChangeSize(sizeSmall);
       },
       className: "collapseSmall-btn"
     }, {
@@ -2057,11 +2052,7 @@ const HeaderOptions = ({
       tooltipTitle: t('layermanager-header-button-medium'),
       "data-testid": "collapseMedium-btn",
       onClick: () => {
-        if (!isDockedLayerManager) {
-          onChangeSize(sizeMedium);
-        } else if (mapWidth && mapWidth > sizeMedium.width) {
-          onChangeSize(sizeMedium);
-        }
+        onChangeSize(sizeMedium);
       },
       className: "collapseMedium-btn"
     }, {
@@ -2070,11 +2061,7 @@ const HeaderOptions = ({
       tooltipTitle: t('layermanager-header-button-large'),
       "data-testid": "collapseLarge-btn",
       onClick: () => {
-        if (!isDockedLayerManager) {
-          onChangeSize(sizeLarge);
-        } else if (mapWidth && mapWidth > sizeLarge.width) {
-          onChangeSize(sizeLarge);
-        }
+        onChangeSize(sizeLarge);
       },
       className: "collapseLarge-btn"
     }, {
@@ -6488,8 +6475,7 @@ const HeaderOptionsConnect = ({
   mapId,
   onClickDockButton,
   onChangeSize,
-  buttonSettings,
-  mapWidth
+  buttonSettings
 }) => {
   const activeMapId = useSelector(store => uiSelectors.getActiveWindowId(store));
   const floatingLmOpen = useSelector(store => uiSelectors.getisDialogOpen(store, uiTypes.DialogTypes.LayerManager));
@@ -6499,8 +6485,7 @@ const HeaderOptionsConnect = ({
     shortcutsEnabled: shortcutsEnabled,
     onClickDockButton: onClickDockButton,
     onChangeSize: onChangeSize,
-    buttonSettings: buttonSettings,
-    mapWidth: mapWidth
+    buttonSettings: buttonSettings
   });
 };
 
@@ -6693,6 +6678,18 @@ const styles$1 = {
     boxSizing: 'border-box'
   }
 };
+const getLayerManagerSizeValue = size => {
+  if (!size.width || typeof size.width !== 'number') {
+    return 'sizeLarge';
+  }
+  if (size.width < sizeMedium.width) {
+    return 'sizeSmall';
+  }
+  if (size.width < sizeLarge.width) {
+    return 'sizeMedium';
+  }
+  return 'sizeLarge';
+};
 const LayerManager = ({
   mapId,
   preloadedAvailableBaseLayers,
@@ -6716,7 +6713,6 @@ const LayerManager = ({
   },
   settings,
   headerSize: _headerSize = 'medium',
-  mapWidthRef,
   addLayerComponent
 }) => {
   var _a, _b, _c, _d, _e, _f, _g;
@@ -6731,34 +6727,7 @@ const LayerManager = ({
   renderCounter.count(LayerManager.name);
   const startSizeCalc = calculateStartSize(minSize, _size, _startPosition);
   const [sizeInState, setSizeInState] = React.useState(startSizeCalc);
-  const [mapWidth, setMapWidth] = React.useState();
-  React.useEffect(() => {
-    var _a;
-    setMapWidth((_a = mapWidthRef === null || mapWidthRef === void 0 ? void 0 : mapWidthRef.current) === null || _a === void 0 ? void 0 : _a.clientWidth);
-  }, [mapWidthRef, setMapWidth]);
-  React.useEffect(() => {
-    var _a;
-    const resizeThreshold = 65;
-    if (((_a = mapWidthRef === null || mapWidthRef === void 0 ? void 0 : mapWidthRef.current) === null || _a === void 0 ? void 0 : _a.clientWidth) === mapWidth) {
-      return;
-    }
-    if (mapWidth) {
-      if (mapWidth < sizeMedium.width + resizeThreshold) {
-        setSizeInState(sizeSmall);
-      } else if (mapWidth >= sizeMedium.width + resizeThreshold && mapWidth < sizeLarge.width + resizeThreshold && sizeInState.width !== sizeSmall.width) {
-        setSizeInState(sizeMedium);
-      }
-    }
-  }, [mapWidth, sizeInState, mapWidthRef]);
-  const returnSizeValue = sizeInState => {
-    if (sizeInState === sizeSmall) {
-      return 'sizeSmall';
-    }
-    if (sizeInState === sizeMedium) {
-      return 'sizeMedium';
-    }
-    return 'sizeLarge';
-  };
+  const dataSize = getLayerManagerSizeValue(sizeInState);
   return jsx(ToolContainerDraggable, Object.assign({
     title: _title,
     startSize: sizeInState,
@@ -6770,7 +6739,7 @@ const LayerManager = ({
     headerSize: _headerSize,
     bounds: bounds,
     "data-testid": "layerManagerWindow",
-    "data-size": returnSizeValue(sizeInState),
+    "data-size": dataSize,
     onMouseDown: _onMouseDown,
     order: _order,
     source: _source,
@@ -6779,7 +6748,6 @@ const LayerManager = ({
       isDockedLayerManager: _isDockedLayerManager,
       mapId: mapId,
       onClickDockButton: _onToggleDock,
-      mapWidth: mapWidth,
       onChangeSize: ({
         width
       }) => {
@@ -6924,8 +6892,7 @@ const LayerManagerConnect = ({
   mapId: initialMapId = null,
   isMultiMap: _isMultiMap = false,
   isDocked: _isDocked = false,
-  source: _source = 'app',
-  mapWidthRef
+  source: _source = 'app'
 }) => {
   const dispatch = useDispatch();
   const dialogType = getDialogType(initialMapId, _isMultiMap, _isDocked);
@@ -6991,7 +6958,6 @@ const LayerManagerConnect = ({
           top: 85,
           left: 50
         },
-        mapWidthRef: mapWidthRef,
         addLayerComponent: jsx(LayerSelectButtonConnect, {
           mapId: mapId,
           source: _source,
@@ -6999,7 +6965,7 @@ const LayerManagerConnect = ({
         })
       }), !_isDocked && jsx(LayerInfoDialogConnect, {}), !_isDocked && jsx(LayerSelectConnect, {})]
     });
-  }, [bounds, dialogOrder, dockedLayerManagerSize, initialMapId, isDialogOpen, _isDocked, _isMultiMap, _leftHeaderComponent, mapId, onCloseDialog, onToggleDock, preloadedAvailableBaseLayers, preloadedBaseServices, setDialogOrder, _showMapIdInTitle, _title, uiError, uiIsLoading, uiSource, mapWidthRef, _source]);
+  }, [bounds, dialogOrder, dockedLayerManagerSize, initialMapId, isDialogOpen, _isDocked, _isMultiMap, _leftHeaderComponent, mapId, onCloseDialog, onToggleDock, preloadedAvailableBaseLayers, preloadedBaseServices, setDialogOrder, _showMapIdInTitle, _title, uiError, uiIsLoading, uiSource, _source]);
 };
 
 const LayerManagerMapButtonConnect = ({
@@ -8369,7 +8335,7 @@ const GetFeatureInfoDialog = ({
       right: 10,
       top: 80
     },
-    minWidth: 300,
+    minWidth: 100,
     onClose: onClose,
     title: _showMapId ? `${t('feature_info_marker_info')} ${mapId}` : t('feature_info_marker_info'),
     initialMaxHeight: 440,
@@ -8896,11 +8862,15 @@ const AnimationLengthButtonConnect = ({
 }) => {
   const dispatch = useDispatch();
   const isAnimating = useSelector(store => mapSelectors.isAnimating(store, mapId));
-  const animationStartTime = useSelector(store => mapSelectors.getAnimationStartTime(store, mapId));
-  const animationEndTime = useSelector(store => mapSelectors.getAnimationEndTime(store, mapId));
+  const isAnimationLengthAuto = useSelector(store => mapSelectors.isAnimationLengthAuto(store, mapId));
+  const selectedAnimationStartTime = useSelector(store => mapSelectors.getAnimationStartTime(store, mapId));
+  const {
+    animationStartTime,
+    animationEndTime
+  } = useSelector(store => mapSelectors.getAnimationRange(store, mapId));
   const currentDiffInMinutes = dateUtils.differenceInMinutes(dateUtils.utc(animationEndTime), dateUtils.utc(animationStartTime));
   const handlechangeAnimationLength = length => {
-    const animationEndTime = dateUtils.dateToIsoString(dateUtils.add(dateUtils.utc(animationStartTime), {
+    const animationEndTime = dateUtils.dateToIsoString(dateUtils.add(dateUtils.utc(selectedAnimationStartTime), {
       minutes: length
     }));
     dispatch(mapActions.setAnimationEndTime({
@@ -8909,10 +8879,22 @@ const AnimationLengthButtonConnect = ({
       origin: mapEnums.MapActionOrigin.map
     }));
   };
+  const toggleAnimationLengthAuto = React.useCallback(() => {
+    dispatch(mapActions.toggleAnimationLengthAuto({
+      mapId,
+      autoAnimationLength: true,
+      origin: mapEnums.MapActionOrigin.map
+    }));
+  }, [dispatch, mapId]);
+  const autoTimestepLayerId = useSelector(store => mapSelectors.getAutoTimeStepLayerId(store, mapId));
+  const timeStepFromLayer = useSelector(store => layerSelectors.getTimeStepForLayerId(store, autoTimestepLayerId));
   return jsx(AnimationLengthButton, {
     disabled: isAnimating,
     animationLength: currentDiffInMinutes || Number(AnimationLength.Hours24),
-    onChangeAnimationLength: handlechangeAnimationLength
+    isAuto: isAnimationLengthAuto,
+    onChangeAnimationLength: handlechangeAnimationLength,
+    toggleAnimationLengthAuto: toggleAnimationLengthAuto,
+    layerHasTimeStep: Boolean(timeStepFromLayer)
   });
 };
 
@@ -9008,8 +8990,6 @@ const OptionsMenuButtonConnect = ({
 };
 
 const connectRedux$2 = connect((store, props) => ({
-  animationStartTime: mapSelectors.getAnimationStartTime(store, props.mapId),
-  animationEndTime: mapSelectors.getAnimationEndTime(store, props.mapId),
   timeStep: mapSelectors.getMapTimeStep(store, props.mapId),
   linkedMapAnimationInfo: mapSelectors.linkedMapAnimationInfo(store, props.mapId)
 }), {
@@ -9018,14 +8998,16 @@ const connectRedux$2 = connect((store, props) => ({
 });
 const PlayButtonConnect = connectRedux$2(({
   mapId,
-  animationStartTime,
-  animationEndTime,
   isDisabled,
   timeStep,
   linkedMapAnimationInfo,
   mapStartAnimation,
   mapStopAnimation
 }) => {
+  const {
+    animationStartTime,
+    animationEndTime
+  } = useSelector(store => mapSelectors.getAnimationRange(store, mapId));
   const animationInterval = timeStep || defaultTimeStep;
   const onTogglePlay = () => {
     if (linkedMapAnimationInfo.isAnimating) {
@@ -9223,8 +9205,10 @@ const TimeSliderLegendConnect = ({
   const secondsPerPx = useSelector(store => mapSelectors.getMapTimeSliderSecondsPerPx(store, mapId));
   const timeStep = useSelector(store => mapSelectors.getMapTimeStep(store, mapId));
   const isTimeSliderHoverOn = useSelector(store => mapSelectors.isTimeSliderHoverOn(store, mapId));
-  const animationStartTime = useSelector(store => mapSelectors.getAnimationStartTime(store, mapId));
-  const animationEndTime = useSelector(store => mapSelectors.getAnimationEndTime(store, mapId));
+  const {
+    animationStartTime,
+    animationEndTime
+  } = useSelector(store => mapSelectors.getAnimationRange(store, mapId));
   const timeSliderSpan = useSelector(store => mapSelectors.getMapTimeSliderSpan(store, mapId));
   const currentTime = dateUtils.unix(Date.now());
   const [dataStartTime, dataEndTime] = useSelector(store => mapSelectors.getDataLimitsFromLayers(store, mapId));
@@ -9678,7 +9662,6 @@ const ConfigurableMapConnect = _a => {
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, []);
   const mapControlsPositionTop = title ? 24 : 8;
-  const mapWidthRef = /*#__PURE__*/React__default.createRef();
   return React__default.useMemo(() => {
     renderCounter.count(`${ConfigurableMapConnect.name}_${mapId}`);
     return jsxs(Box, Object.assign({
@@ -9688,8 +9671,7 @@ const ConfigurableMapConnect = _a => {
         position: 'relative',
         overflow: 'hidden'
       },
-      "data-testid": "ConfigurableMap",
-      ref: mapWidthRef
+      "data-testid": "ConfigurableMap"
     }, {
       children: [title && jsx(Typography, Object.assign({
         "data-testid": "mapTitle",
@@ -9751,11 +9733,10 @@ const ConfigurableMapConnect = _a => {
       }), jsx(LayerManagerConnect, {
         mapId: mapId,
         bounds: "parent",
-        isDocked: true,
-        mapWidthRef: mapWidthRef
+        isDocked: true
       })]
     }));
-  }, [children, disableTimeSlider, displayDimensionSelectButtonInMap, displayGetFeatureInfoButtonInMap, displayLayerManagerAndLegendButtonInMap, displaySearchButtonInMap, displayTimeInMap, id, mapControls, mapControlsPositionTop, mapId, multiLegend, showClock, shouldAutoFetch, title, mapWidthRef]);
+  }, [children, disableTimeSlider, displayDimensionSelectButtonInMap, displayGetFeatureInfoButtonInMap, displayLayerManagerAndLegendButtonInMap, displaySearchButtonInMap, displayTimeInMap, id, mapControls, mapControlsPositionTop, mapId, multiLegend, showClock, shouldAutoFetch, title]);
 };
 
 var uncurryThis$1 = functionUncurryThis;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@opengeoweb/core",
-  "version": "9.20.2",
+  "version": "9.21.0",
   "description": "GeoWeb Core library for the opengeoweb project",
   "license": "Apache-2.0",
   "repository": {
@@ -26,8 +26,8 @@
     "@opengeoweb/snackbar": "*",
     "react-router-dom": "^6.21.0",
     "react-draggable": "^4.4.6",
-    "i18next": "^23.7.11",
-    "react-i18next": "^13.5.0",
+    "i18next": "^23.11.5",
+    "react-i18next": "^14.1.2",
     "dompurify": "^3.0.6",
     "@sentry/react": "^7.109.0"
   },

package/src/lib/components/LayerManager/LayerManager.d.ts

@@ -23,7 +23,6 @@ interface LayerManagerProps {
     startPosition?: Position;
     settings?: LayerManagerCustomSettings;
     headerSize?: HeaderSize;
-    mapWidthRef?: React.RefObject<HTMLDivElement>;
     addLayerComponent?: React.ReactElement;
 }
 declare const LayerManager: React.FC<LayerManagerProps>;

package/src/lib/components/LayerManager/LayerManagerConnect.d.ts

@@ -13,7 +13,6 @@ interface LayerManagerConnectProps {
     isMultiMap?: boolean;
     isDocked?: boolean;
     source?: uiTypes.Source;
-    mapWidthRef?: React.RefObject<HTMLDivElement>;
 }
 /**
  * Layer Managerconnected to the store displaying the layers forthe active map Id

package/src/lib/components/LayerManager/LayerManagerHeaderOptions.d.ts

@@ -29,7 +29,6 @@ interface HeaderOptionsProps {
     onClickDockButton: () => void;
     onChangeSize: (size: Size) => void;
     buttonSettings?: ToolbarButtonSettings;
-    mapWidth?: number;
 }
 export declare const sizeSmall: {
     width: number;

package/src/lib/components/LayerManager/LayerManagerHeaderOptionsConnect.d.ts

@@ -6,7 +6,6 @@ interface HeaderOptionsProps {
     onClickDockButton: () => void;
     onChangeSize: (size: Size) => void;
     buttonSettings?: ToolbarButtonSettings;
-    mapWidth?: number;
 }
 export declare const areShortcutsEnabled: (activeMapId: string, mapId: string, floatingLmOpen: boolean, isDockedLayerManager: boolean) => boolean;
 declare const HeaderOptionsConnect: React.FC<HeaderOptionsProps>;

package/src/lib/components/TimeSliderConnect/TimeSliderButtonsConnect/PlayButtonConnect.d.ts

@@ -16,8 +16,6 @@ export interface PlayButtonConnectProps {
     };
 }
 declare const connectRedux: import("react-redux").InferableComponentEnhancerWithProps<{
-    animationStartTime: string | undefined;
-    animationEndTime: string | undefined;
     timeStep: number;
     linkedMapAnimationInfo: {
         isAnimating: boolean;
@@ -28,7 +26,7 @@ declare const connectRedux: import("react-redux").InferableComponentEnhancerWith
     mapStopAnimation: import("@reduxjs/toolkit").ActionCreatorWithPayload<import("dist/libs/store/src/store/mapStore/types").SetMapAnimationStopPayload, "mapReducer/mapStopAnimation">;
 }, PlayButtonConnectProps>;
 type Props = PlayButtonConnectProps & ConnectedProps<typeof connectRedux>;
-export declare const PlayButtonConnect: import("react-redux").ConnectedComponent<({ mapId, animationStartTime, animationEndTime, isDisabled, timeStep, linkedMapAnimationInfo, mapStartAnimation, mapStopAnimation, }: Props) => import("react/jsx-runtime").JSX.Element, {
+export declare const PlayButtonConnect: import("react-redux").ConnectedComponent<({ mapId, isDisabled, timeStep, linkedMapAnimationInfo, mapStartAnimation, mapStopAnimation, }: Props) => import("react/jsx-runtime").JSX.Element, {
     mapId: string;
     isDisabled?: boolean | undefined;
     isAnimating?: boolean | undefined;