@opengeoweb/core 9.33.0 → 9.33.1-spike-ol.3

package/index.esm.js

@@ -2141,9 +2141,6 @@ const layerManagerStyle = {
   '.header-layermanager': {
     containerType: 'inline-size'
   },
-  '.header-mapPresets': {
-    display: 'none'
-  },
   '.medium-layermanager': {
     display: 'none'
   },
@@ -2197,25 +2194,9 @@ const layerManagerStyle = {
       },
       '.column-2': {
         width: `calc((100% - ${leftButtonsWidth}px) )`
-      },
-      // presets
-      '.header-layer.mappresetsModule-enabled': {
-        display: 'none'
-      },
-      '.header-mapPresets': {
-        display: 'block',
-        '.MuiButtonBase-root': {
-          height: 24,
-          '.MuiBox-root': {
-            textAlign: 'center'
-          }
-        }
       }
     },
     '.header-layermanager': {
-      '.mapPresets-btn': {
-        display: 'none'
-      },
       '.collapseLarge-btn': {
         display: 'inline-flex'
       }
@@ -2287,7 +2268,7 @@ const LayerSelectButton = ({
   });
 };
 
-const _excluded$6 = ["mapPresetsModule", "settings", "addLayerComponent"];
+const _excluded$6 = ["settings", "addLayerComponent"];
 const styles$3 = {
   text: theme => Object.assign({
     paddingLeft: '10px',
@@ -2299,7 +2280,6 @@ const styles$3 = {
 const DescriptionRow = _ref => {
   var _settings$addLayer, _settings$addLayer2, _settings$layerName$t, _settings$layerName, _settings$layerStyle$, _settings$layerStyle, _settings$opacity$tit, _settings$opacity, _settings$dimensions$, _settings$dimensions, _settings$acceptanceT, _settings$acceptanceT2;
   let {
-      mapPresetsModule,
       settings,
       addLayerComponent
     } = _ref,
@@ -2307,12 +2287,6 @@ const DescriptionRow = _ref => {
   const {
     t
   } = useCoreTranslation();
-  const [mapPresetsModuleInline] = React.useState(mapPresetsModule ? Object.assign({}, mapPresetsModule, {
-    props: Object.assign({}, mapPresetsModule.props, {
-      id: 'mappresets-menubuttonInline'
-    })
-  }) : undefined);
-  const hasMapPresetsModule = mapPresetsModule !== undefined;
   return jsxs(Grid2, Object.assign({
     container: true,
     "data-testid": "descriptionRow",
@@ -2332,19 +2306,12 @@ const DescriptionRow = _ref => {
         tooltipTitle: settings == null || (_settings$addLayer = settings.addLayer) == null ? void 0 : _settings$addLayer.tooltipTitle,
         icon: settings == null || (_settings$addLayer2 = settings.addLayer) == null ? void 0 : _settings$addLayer2.icon
       })
-    }), jsxs(Grid2, {
+    }), jsx(Grid2, {
       className: columnClasses.column2,
-      children: [jsx(Box, {
-        className: `header-layer ${hasMapPresetsModule ? 'mappresetsModule-enabled' : ''}`,
+      children: jsx(Box, {
         sx: styles$3.text,
         children: (_settings$layerName$t = settings == null || (_settings$layerName = settings.layerName) == null ? void 0 : _settings$layerName.title) != null ? _settings$layerName$t : t('layermanager-layer')
-      }), jsx(Box, {
-        className: "header-mapPresets",
-        sx: {
-          marginRight: 4
-        },
-        children: mapPresetsModuleInline
-      })]
+      })
     }), jsx(Grid2, {
       className: columnClasses.column3,
       children: jsx(Box, {
@@ -7640,7 +7607,6 @@ const LayerManager = ({
   onMouseDown: _onMouseDown = () => {},
   order: _order = 0,
   source: _source = 'app',
-  leftHeaderComponent: _leftHeaderComponent = undefined,
   isLoading: _isLoading = false,
   error,
   isDockedLayerManager: _isDockedLayerManager = false,
@@ -7683,7 +7649,6 @@ const LayerManager = ({
     onMouseDown: _onMouseDown,
     order: _order,
     source: _source,
-    leftHeaderComponent: _leftHeaderComponent,
     rightHeaderComponent: jsx(HeaderOptionsConnect, {
       isDockedLayerManager: _isDockedLayerManager,
       mapId: mapId,
@@ -7742,7 +7707,6 @@ const LayerManager = ({
           "data-testid": "layerManagerRowContainer",
           sx: styles$1.layerRowContainer,
           children: [jsx(DescriptionRow, {
-            mapPresetsModule: _leftHeaderComponent,
             source: _source,
             settings: settings == null ? void 0 : settings.header,
             addLayerComponent: addLayerComponent
@@ -7823,7 +7787,6 @@ const LayerManagerConnect = ({
   bounds,
   title,
   showMapIdInTitle: _showMapIdInTitle = false,
-  leftHeaderComponent: _leftHeaderComponent = undefined,
   mapId: initialMapId = null,
   isMultiMap: _isMultiMap = false,
   isDocked: _isDocked = false,
@@ -7884,7 +7847,6 @@ const LayerManagerConnect = ({
         order: dialogOrder,
         source: uiSource,
         size: _isDocked ? returnCorrectSize(dockedLayerManagerSize) : sizeLarge,
-        leftHeaderComponent: _leftHeaderComponent,
         isLoading: uiIsLoading,
         error: uiError,
         onToggleDock: onToggleDock,
@@ -7904,7 +7866,7 @@ const LayerManagerConnect = ({
         })
       }), !_isDocked && jsx(LayerInfoDialogConnect, {}), !_isDocked && jsx(LayerSelectConnect, {})]
     });
-  }, [bounds, dialogOrder, dockedLayerManagerSize, initialMapId, isDialogOpen, _isDocked, _isMultiMap, _leftHeaderComponent, mapId, onCloseDialog, onToggleDock, preloadedAvailableBaseLayers, preloadedBaseServices, setDialogOrder, _showMapIdInTitle, nonEmptyTitle, uiError, uiIsLoading, uiSource, _source]);
+  }, [bounds, dialogOrder, dockedLayerManagerSize, initialMapId, isDialogOpen, _isDocked, _isMultiMap, mapId, onCloseDialog, onToggleDock, preloadedAvailableBaseLayers, preloadedBaseServices, setDialogOrder, _showMapIdInTitle, nonEmptyTitle, uiError, uiIsLoading, uiSource, _source]);
 };
 
 const LayerManagerMapButtonConnect = ({
@@ -9736,6 +9698,25 @@ const getTimeBounds = dimensions => {
     endTime
   };
 };
+const calculateNewAnimationEndTime = (newTimeInMilliseconds, dataStartTimeInMilliseconds, dataEndTimeInMilliseconds, animationDuration) => {
+  if (newTimeInMilliseconds <= dataStartTimeInMilliseconds) {
+    return dataStartTimeInMilliseconds + animationDuration;
+  }
+  if (newTimeInMilliseconds > dataEndTimeInMilliseconds) {
+    return dataEndTimeInMilliseconds;
+  }
+  return newTimeInMilliseconds;
+};
+const calculateNewAnimationTimeBounds = (newTime, animationStartTime, animationEndTime, dataStartTime, dataEndTime) => {
+  const dateToMillisecond = date => new Date(date).getTime();
+  const animationDuration = dateToMillisecond(animationEndTime) - dateToMillisecond(animationStartTime);
+  const newAnimationEndTime = calculateNewAnimationEndTime(newTime * 1000, dataStartTime * 1000, dataEndTime * 1000, animationDuration);
+  const newAnimationStartTime = newAnimationEndTime - animationDuration;
+  return {
+    newAnimationStartTime,
+    newAnimationEndTime
+  };
+};
 
 const SpeedButtonConnect = ({
   mapId
@@ -10098,7 +10079,8 @@ const TimeSliderCurrentTimeBoxConnectComponent = ({
   isAutoUpdating,
   setCenterTime,
   unfilteredSelectedTime,
-  setUnfilteredSelectedTime
+  setUnfilteredSelectedTime,
+  onCalendarSelect
 }) => {
   const [dataStartTime, dataEndTime] = useSelector(store => mapSelectors.getDataLimitsFromLayers(store, mapId));
   return jsx(TimeSliderCurrentTimeBox, {
@@ -10111,6 +10093,7 @@ const TimeSliderCurrentTimeBoxConnectComponent = ({
     isAutoUpdating: isAutoUpdating,
     unfilteredSelectedTime: unfilteredSelectedTime,
     setUnfilteredSelectedTime: setUnfilteredSelectedTime,
+    onCalendarSelect: onCalendarSelect,
     onSetCenterTime: newTime => {
       setCenterTime({
         mapId,
@@ -10345,6 +10328,8 @@ const TimeSliderConnect = ({
   const [dataStartTime, dataEndTime] = useSelector(store => mapSelectors.getDataLimitsFromLayers(store, mapId));
   const isAnimating = useSelector(store => mapSelectors.isAnimating(store, mapId));
   const selectedTime = useSelector(store => mapSelectors.getSelectedTime(store, mapId));
+  const animationStartTime = useSelector(store => mapSelectors.getAnimationStartTime(store, mapId));
+  const animationEndTime = useSelector(store => mapSelectors.getAnimationEndTime(store, mapId));
   useUpdateTimestep(mapId);
   useUpdateTimeSpan(mapId, onSetTimeSliderSpan);
   const turnOffAutoUpdateIfItsOn = useTurnOffAutoUpdateIfItsOn(mapId);
@@ -10386,6 +10371,30 @@ const TimeSliderConnect = ({
       onsetNewDateDebounced(timeToIso(filteredIsoTime), onSetNewDate);
     }
   };
+  // Move animation bar when user changes time using time picker
+  // Animation bar however cannot be moved into a time where there is no data
+  const moveAnimationUsingCalendar = newTime => {
+    if (!animationEndTime || !animationStartTime || !dataStartTime || !dataEndTime) {
+      return;
+    }
+    const formatToIsoString = date => handleDateUtilsISOString(new Date(date).toISOString());
+    const {
+      newAnimationStartTime,
+      newAnimationEndTime
+    } = calculateNewAnimationTimeBounds(newTime, animationStartTime, animationEndTime, dataStartTime, dataEndTime);
+    dispatch(mapActions.setAnimationStartTime({
+      mapId,
+      animationStartTime: formatToIsoString(newAnimationStartTime)
+    }));
+    dispatch(mapActions.setAnimationEndTime({
+      mapId,
+      animationEndTime: formatToIsoString(newAnimationEndTime)
+    }));
+  };
+  const onCalendarSelect = newSelectedTime => {
+    setUnfilteredSelectedTime(newSelectedTime);
+    moveAnimationUsingCalendar(newSelectedTime);
+  };
   return jsx(TimeSlider, {
     timeStep: timeStep,
     dataStartTime: dataStartTime,
@@ -10407,7 +10416,8 @@ const TimeSliderConnect = ({
     timeBox: jsx(TimeSliderCurrentTimeBoxConnect, {
       mapId: mapId,
       unfilteredSelectedTime: unfilteredSelectedTime,
-      setUnfilteredSelectedTime: setUnfilteredSelectedTime
+      setUnfilteredSelectedTime: setUnfilteredSelectedTime,
+      onCalendarSelect: onCalendarSelect
     }),
     legend: jsx(TimeSliderLegendConnect, {
       mapId: mapId,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@opengeoweb/core",
-  "version": "9.33.0",
+  "version": "9.33.1-spike-ol.3",
   "description": "GeoWeb Core library for the opengeoweb project",
   "license": "Apache-2.0",
   "repository": {

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

@@ -3,7 +3,6 @@ import * as React from 'react';
 import { uiTypes } from '@opengeoweb/store';
 import { LayerManagerCustomSettings } from '../LayerManagerUtils';
 interface DescriptionRowProps extends React.ComponentProps<typeof Grid> {
-    mapPresetsModule?: React.ReactElement;
     source?: uiTypes.Source;
     settings?: LayerManagerCustomSettings['header'];
     addLayerComponent?: React.ReactElement;

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

@@ -14,7 +14,6 @@ interface LayerManagerProps {
     isOpen: boolean;
     order?: number;
     source?: uiTypes.Source;
-    leftHeaderComponent?: React.ReactElement;
     isLoading?: boolean;
     error?: string;
     isDockedLayerManager?: boolean;

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

@@ -9,7 +9,6 @@ interface LayerManagerConnectProps {
     bounds?: string;
     title?: string;
     showMapIdInTitle?: boolean;
-    leftHeaderComponent?: React.ReactElement;
     isMultiMap?: boolean;
     isDocked?: boolean;
     source?: uiTypes.Source;

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

@@ -59,9 +59,6 @@ export declare const layerManagerStyle: {
     '.header-layermanager': {
         containerType: string;
     };
-    '.header-mapPresets': {
-        display: string;
-    };
     '.medium-layermanager': {
         display: string;
     };
@@ -115,23 +112,8 @@ export declare const layerManagerStyle: {
             '.column-2': {
                 width: string;
             };
-            '.header-layer.mappresetsModule-enabled': {
-                display: string;
-            };
-            '.header-mapPresets': {
-                display: string;
-                '.MuiButtonBase-root': {
-                    height: number;
-                    '.MuiBox-root': {
-                        textAlign: string;
-                    };
-                };
-            };
         };
         '.header-layermanager': {
-            '.mapPresets-btn': {
-                display: string;
-            };
             '.collapseLarge-btn': {
                 display: string;
             };

package/src/lib/components/TimeSliderConnect/TimeSliderCurrentTimeBoxConnect.d.ts

@@ -10,11 +10,13 @@ interface TimeSliderCurrentTimeBoxConnectComponentProps {
     setCenterTime?: typeof mapActions.setTimeSliderCenterTime;
     unfilteredSelectedTime: number;
     setUnfilteredSelectedTime: (unfilteredSelectedTime: number) => void;
+    onCalendarSelect: (newTime: number) => void;
 }
 export declare const TimeSliderCurrentTimeBoxConnect: import("react-redux").ConnectedComponent<React.FC<TimeSliderCurrentTimeBoxConnectComponentProps>, {
     mapId: string;
     unfilteredSelectedTime: number;
     setUnfilteredSelectedTime: (unfilteredSelectedTime: number) => void;
+    onCalendarSelect: (newTime: number) => void;
     timeStep?: number | undefined;
     centerTime?: number | undefined;
     secondsPerPx?: number | undefined;

package/src/lib/components/TimeSliderConnect/timesliderUtils.d.ts

@@ -5,3 +5,8 @@ export declare const useTurnOffAutoUpdateIfItsOn: (mapId: string) => (() => void
  * Returns time bounds from the given dimension. If no time dimension given, current time is returned as default
  */
 export declare const getTimeBounds: (dimensions: mapTypes.Dimension[]) => TimeBounds;
+export declare const calculateNewAnimationEndTime: (newTimeInMilliseconds: number, dataStartTimeInMilliseconds: number, dataEndTimeInMilliseconds: number, animationDuration: number) => number;
+export declare const calculateNewAnimationTimeBounds: (newTime: number, animationStartTime: string, animationEndTime: string, dataStartTime: number, dataEndTime: number) => {
+    newAnimationStartTime: number;
+    newAnimationEndTime: number;
+};