@opengeoweb/time-slider 13.2.1 → 14.0.0

package/index.esm.js

@@ -1240,9 +1240,11 @@ var TimeSliderMenu = function TimeSliderMenu(_ref) {
       onClose: function onClose() {
         return setOpen(false);
       },
-      BackdropProps: {
-        sx: {
-          backgroundColor: 'transparent'
+      slotProps: {
+        backdrop: {
+          sx: {
+            backgroundColor: 'transparent'
+          }
         }
       },
       anchorOrigin: {
@@ -1307,8 +1309,10 @@ var TimeSliderMenu = function TimeSliderMenu(_ref) {
               padding: 0,
               color: 'geowebColors.greys.accessible'
             },
-            titleTypographyProps: {
-              fontSize: 12
+            slotProps: {
+              title: {
+                fontSize: 12
+              }
             }
           }), jsxs(Box, {
             sx: {
@@ -3212,10 +3216,12 @@ var TimeSliderLegend = function TimeSliderLegend(_ref) {
     children: [jsx(CustomTooltip, {
       title: getTooltipText(),
       open: Boolean(showTooltip),
-      PopperProps: {
-        popperRef: popperRef,
-        anchorEl: {
-          getBoundingClientRect: setTooltipPosition
+      slotProps: {
+        popper: {
+          popperRef: popperRef,
+          anchorEl: {
+            getBoundingClientRect: setTooltipPosition
+          }
         }
       },
       children: jsx(Box, {
@@ -3745,8 +3751,10 @@ var CalendarButton = function CalendarButton(_ref) {
       },
       children: [jsx(CustomTooltip, {
         title: !open && t('timeslider-marker-placement'),
-        TransitionProps: {
-          exit: false
+        slotProps: {
+          transition: {
+            exit: false
+          }
         },
         children: jsx(CustomToggleButton, {
           sx: style,
@@ -3798,6 +3806,7 @@ var getTimeBoxWidth = function getTimeBoxWidth(span) {
   return mainWidth + iconWidth + calendarWidth;
 };
 var CALENDAR_ICON_LEFT_SPACING = 1;
+var DEFAULT_PX_TO_MOVE_TIMESLIDER_CENTER = 25; // When the timeslider centertime is reaching the end of the canvas, move the timeslider center a bit
 var TimeSliderCurrentTimeBox = function TimeSliderCurrentTimeBox(_ref) {
   var centerTime = _ref.centerTime,
     _ref$secondsPerPx = _ref.secondsPerPx,
@@ -3808,6 +3817,7 @@ var TimeSliderCurrentTimeBox = function TimeSliderCurrentTimeBox(_ref) {
     dataStartTime = _ref.dataStartTime,
     dataEndTime = _ref.dataEndTime,
     unfilteredSelectedTime = _ref.unfilteredSelectedTime,
+    linkedMapAnimationInfo = _ref.linkedMapAnimationInfo,
     isAutoUpdating = _ref.isAutoUpdating,
     setUnfilteredSelectedTime = _ref.setUnfilteredSelectedTime,
     onCalendarSelect = _ref.onCalendarSelect,
@@ -3825,20 +3835,25 @@ var TimeSliderCurrentTimeBox = function TimeSliderCurrentTimeBox(_ref) {
   var _React$useState3 = React__default.useState(0),
     canvasWidth = _React$useState3[0],
     setCanvasWidth = _React$useState3[1];
+  var isAnimating = linkedMapAnimationInfo == null ? void 0 : linkedMapAnimationInfo.isAnimating;
   // Move TimeBox back to view if it goes out of bounds
   useEffect(function () {
     if (!(onSetCenterTime && canvasWidth && !mouseDownInTimeBox)) {
       return;
     }
     var receivedTimePx = timestampToPixel(unfilteredSelectedTime, centerTime, canvasWidth, secondsPerPx);
-    var moveWidth = getAutoMoveAreaWidth(getFundamentalScale(secondsPerPx));
+    var moveWidth = isAnimating ? DEFAULT_PX_TO_MOVE_TIMESLIDER_CENTER : getAutoMoveAreaWidth(getFundamentalScale(secondsPerPx));
+    if (moveWidth > canvasWidth / 2 || canvasWidth < 100) {
+      // don't move if the moveWidth is larger than half the canvaswidth or canvaswidth is very small
+      return;
+    }
     if (receivedTimePx < moveWidth) {
       onSetCenterTime(pixelToTimestamp(canvasWidth / 2 - (moveWidth - receivedTimePx), centerTime, canvasWidth, secondsPerPx));
     } else if (receivedTimePx > canvasWidth - moveWidth) {
       onSetCenterTime(pixelToTimestamp(canvasWidth / 2 + (receivedTimePx - (canvasWidth - moveWidth)), centerTime, canvasWidth, secondsPerPx));
     }
     // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [unfilteredSelectedTime]);
+  }, [unfilteredSelectedTime, isAnimating]);
   var isTimeBoxArea = function isTimeBoxArea(x, selectedTimePx) {
     return x > selectedTimePx - timeBoxWidth / 2 && x < selectedTimePx + timeBoxWidth / 2;
   };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@opengeoweb/time-slider",
-  "version": "13.2.1",
+  "version": "14.0.0",
   "description": "GeoWeb time-slider library for the opengeoweb project",
   "license": "Apache-2.0",
   "repository": {
@@ -8,9 +8,9 @@
     "url": "git@gitlab.com:opengeoweb/opengeoweb.git"
   },
   "dependencies": {
-    "@opengeoweb/shared": "13.2.1",
+    "@opengeoweb/shared": "14.0.0",
     "lodash": "^4.17.21",
-    "@opengeoweb/theme": "13.2.1",
+    "@opengeoweb/theme": "14.0.0",
     "@mui/x-date-pickers": "^8.11.2",
     "react-draggable": "^4.4.6",
     "re-resizable": "^6.9.11",

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

@@ -7,6 +7,10 @@ export interface TimeSliderCurrentTimeBoxProps {
     dataEndTime?: number;
     timeStep?: number;
     unfilteredSelectedTime: number;
+    linkedMapAnimationInfo?: {
+        id: string;
+        isAnimating: boolean;
+    };
     isAutoUpdating?: boolean;
     setUnfilteredSelectedTime: (unfilteredSelectedTime: number) => void;
     onCalendarSelect: (newTime: number) => void;