@opengeoweb/core 6.0.2 → 6.0.3

package/index.esm.js

@@ -1,7 +1,7 @@
 import * as React from 'react';
 import React__default, { forwardRef, useContext, useCallback, useEffect, createElement, PureComponent, useState, Component, cloneElement, useRef, isValidElement, createRef, useLayoutEffect } from 'react';
 import { Grid, Box as Box$2, MenuItem, Typography, useTheme as useTheme$2, Button, Popper, ListItemText, ListItemIcon, FormControl, InputLabel, Paper, List, ListItemButton, CircularProgress, ListSubheader, Dialog, DialogTitle, DialogContent, DialogContentText, TextField, InputAdornment, DialogActions, LinearProgress, Backdrop, ListItem, ListItemSecondaryAction, Checkbox, Switch, styled as styled$1, Slider, Menu, Tooltip, IconButton, ButtonGroup, Divider, Snackbar } from '@mui/material';
-import { CustomIconButton, TooltipSelect, AlertIcon, useControlledTooltip, CustomTooltip, tooltipContainerStyles, sliderHeaderStyle, CustomSlider, ToggleMenu, AlertBanner, CustomAccordion, ToolContainerDraggable, calculateDialogSizeAndPosition, CustomToggleButton, SearchHighlight, useMakeSureContainerStaysInsideWindow, withEggs } from '@opengeoweb/shared';
+import { CustomIconButton, TooltipSelect, AlertIcon, useControlledTooltip, CustomTooltip, tooltipContainerStyles, sliderHeaderStyle, CustomSlider, ToggleMenu, AlertBanner, CustomAccordion, ToolContainerDraggable, calculateDialogSizeAndPosition, CustomToggleButton, SearchHighlight, dateUtils, useMakeSureContainerStaysInsideWindow, withEggs } from '@opengeoweb/shared';
 import { CollapseSmall, CollapseMedium, CollapseLarge, CollapseWindow, ExpandWindow, Add, Copy, None, FastForward, AutoUpdateActive, Both, Visibility, VisibilityOff, Delete, DragHandle as DragHandle$1, Cached, Filter, Search, Clear, Info, DimensionsOther, DimensionsElevation, DimensionsRefTime, DimensionsTime, Edit, Close, Home, Minus, Layers, Equalizer, Link, LinkOff, AutoUpdateInActive, Speed, Clock, Now, Animation, Options, Pause, Play, StepForward, StepBackward, dragHandlePath, ChevronDown, ChevronUp, Location, DrawPolygon, DrawRegion, List as List$1, ChevronRight, ChevronLeft, Resize, ExitDomain, ThemeWrapper, lightTheme } from '@opengeoweb/theme';
 import { useDispatch, useSelector, connect, Provider } from 'react-redux';
 import { uiTypes, uiSelectors, uiActions, layerTypes, layerUtils, layerActions, layerSelectors, serviceSelectors, serviceActions, mapSelectors, mapActions, mapEnums, mapConstants, filterLayers, getUserAddedServices, layerSelectSelectors, layerSelectActions, storeUtils, snackbarActions, layerSelectTypes, mapUtils, genericActions, drawSelectors, drawActions, syncConstants, defaultLayers, syncGroupsSelectors, syncGroupsSelector, snackbarModuleConfig, snackbarSelectors, coreModuleConfig, routerUtils, routerModuleConfig, appModuleConfig, appActions } from '@opengeoweb/store';
@@ -16959,16 +16959,17 @@ var useCanvasTarget = function useCanvasTarget(eventType) {
   }, [eventType, pointerEventListener]); // Only add/remove event listener when listener really changes, that is, NOT necessarily between every re-render.
   return [isTargetNode, nodeRef];
 };
-var needleGeom = {
+var timeBoxGeom = {
   smallWidth: 126,
   largeWidth: 167,
   height: 24,
   cornerRadius: 5,
-  lineWidth: 1
+  lineWidth: 1,
+  iconWidth: 25
 };
 var AUTO_MOVE_AREA_PADDING = 1;
 var getAutoMoveAreaWidth = function getAutoMoveAreaWidth(scale) {
-  return (scale === mapEnums.Scale.Year ? needleGeom.largeWidth : needleGeom.smallWidth) / 2 + AUTO_MOVE_AREA_PADDING;
+  return (scale === mapEnums.Scale.Year ? timeBoxGeom.largeWidth + timeBoxGeom.iconWidth : timeBoxGeom.smallWidth + timeBoxGeom.iconWidth) / 2 + AUTO_MOVE_AREA_PADDING;
 };
 /** Reusable business logic for how to handle events that set time to now (closest).
  * Used in NowButton and TimeSliderLegend.
@@ -17102,7 +17103,7 @@ var timeSliderUtils = /*#__PURE__*/Object.freeze({
   getNewCenterOfFixedPointZoom: getNewCenterOfFixedPointZoom,
   moveRelativeToTimePoint: moveRelativeToTimePoint,
   useCanvasTarget: useCanvasTarget,
-  needleGeom: needleGeom,
+  timeBoxGeom: timeBoxGeom,
   AUTO_MOVE_AREA_PADDING: AUTO_MOVE_AREA_PADDING,
   getAutoMoveAreaWidth: getAutoMoveAreaWidth,
   handleSetNowEvent: handleSetNowEvent,
@@ -19329,8 +19330,8 @@ var drawRoundedRectangle = function drawRoundedRectangle(ctx, x, y, width, heigh
   ctx.beginPath();
   ctx.strokeStyle = playerTimeMarkers.fill;
   ctx.fillStyle = playerTimeMarkers.fill;
-  ctx.lineWidth = needleGeom.lineWidth;
-  var halfLineWidth = needleGeom.lineWidth / 2;
+  ctx.lineWidth = timeBoxGeom.lineWidth;
+  var halfLineWidth = timeBoxGeom.lineWidth / 2;
   // Top left corner
   ctx.moveTo(halfLineWidth, height / 2);
   ctx.arcTo(halfLineWidth, halfLineWidth, width / 2, halfLineWidth, cornerRadius);
@@ -19376,18 +19377,18 @@ var drawTextAnnotation = function drawTextAnnotation(ctx, x, y, text, theme) {
   ctx.restore();
 };
 var drawNewCurrentTimeBox = function drawNewCurrentTimeBox(ctx, selectedTime, selectedPx, span, theme, isAutoUpdating) {
-  var iconWidth = 25;
-  var smallWidth = needleGeom.smallWidth,
-    largeWidth = needleGeom.largeWidth,
-    height = needleGeom.height;
-  var boxWidth = span > secondsInYear ? largeWidth : smallWidth;
+  var smallWidth = timeBoxGeom.smallWidth,
+    largeWidth = timeBoxGeom.largeWidth,
+    height = timeBoxGeom.height,
+    iconWidth = timeBoxGeom.iconWidth;
+  var boxWidth = span >= secondsInYear ? largeWidth : smallWidth;
   var needleX = selectedPx - boxWidth / 2;
-  var needleY = needleGeom.lineWidth;
-  drawRoundedRectangle(ctx, needleX - iconWidth, needleY, boxWidth + iconWidth, height, needleGeom.cornerRadius, theme);
-  var timeFormat = span > secondsInYear ? 'Y ddd DD MMM HH:mm' : 'ddd DD MMM HH:mm';
+  var needleY = timeBoxGeom.lineWidth;
+  drawRoundedRectangle(ctx, needleX - iconWidth / 2, needleY, boxWidth + iconWidth, height, timeBoxGeom.cornerRadius, theme);
+  var timeFormat = span >= secondsInYear ? 'Y ddd DD MMM HH:mm' : 'ddd DD MMM HH:mm';
   var timeText = moment.utc(selectedTime * 1000).format(timeFormat).toString();
-  drawTextAnnotation(ctx, needleX + boxWidth / 2 - iconWidth, needleY + height / 2, timeText, theme);
-  drawAutoUpdateIcon(ctx, needleX + boxWidth - iconWidth, needleY, theme, isAutoUpdating);
+  drawTextAnnotation(ctx, needleX + boxWidth / 2 - iconWidth / 2, needleY + height / 2, timeText, theme);
+  drawAutoUpdateIcon(ctx, needleX + boxWidth - iconWidth / 2, needleY, theme, isAutoUpdating);
 };
 var renderTimeSliderCurrentTimeBox = function renderTimeSliderCurrentTimeBox(ctx, theme, width, height, centerTime, selected, secondsPerPx, span, isAutoUpdating) {
   // map unix timestamps to pixel values
@@ -19414,7 +19415,8 @@ var TimeSliderCurrentTimeBox = function TimeSliderCurrentTimeBox(_ref) {
     unfilteredSelectedTime = _ref.unfilteredSelectedTime,
     isAutoUpdating = _ref.isAutoUpdating,
     onSetNewDate = _ref.onSetNewDate,
-    setUnfilteredSelectedTime = _ref.setUnfilteredSelectedTime;
+    setUnfilteredSelectedTime = _ref.setUnfilteredSelectedTime,
+    onSetCenterTime = _ref.onSetCenterTime;
   var TIME_BOX_WIDTH = 140;
   var theme = useTheme$2();
   var _useCanvasTarget = useCanvasTarget('mousedown'),
@@ -19432,6 +19434,20 @@ var TimeSliderCurrentTimeBox = function TimeSliderCurrentTimeBox(_ref) {
     _React$useState6 = _slicedToArray(_React$useState5, 2),
     canvasWidth = _React$useState6[0],
     setCanvasWidth = _React$useState6[1];
+  // Move TimeBox back to view if it goes out of bounds
+  useEffect(function () {
+    if (!(onSetCenterTime && canvasWidth && !mouseDownInTimeBox)) {
+      return;
+    }
+    var receivedTimePx = timestampToPixel(selectedTime || moment.utc().unix(), centerTime, canvasWidth, secondsPerPx);
+    var moveWidth = getAutoMoveAreaWidth(getFundamentalScale$1(secondsPerPx));
+    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
+  }, [selectedTime]);
   var isTimeBoxArea = function isTimeBoxArea(x, selectedTimePx) {
     return x > selectedTimePx - TIME_BOX_WIDTH / 2 && x < selectedTimePx + TIME_BOX_WIDTH / 2;
   };
@@ -20270,7 +20286,8 @@ var connectRedux = connect(function (store, props) {
 }, {
   setTimeSliderUnfilteredSelectedTime: mapActions.setTimeSliderUnfilteredSelectedTime,
   stopMapAnimation: mapActions.mapStopAnimation,
-  setTime: genericActions.setTime
+  setTime: genericActions.setTime,
+  setCenterTime: mapActions.setTimeSliderCenterTime
 });
 var TimeSliderCurrentTimeBoxConnectComponent = function TimeSliderCurrentTimeBoxConnectComponent(_ref) {
   var mapId = _ref.mapId,
@@ -20286,7 +20303,8 @@ var TimeSliderCurrentTimeBoxConnectComponent = function TimeSliderCurrentTimeBox
     stopMapAnimation = _ref.stopMapAnimation,
     unfilteredSelectedTime = _ref.unfilteredSelectedTime,
     setTimeSliderUnfilteredSelectedTime = _ref.setTimeSliderUnfilteredSelectedTime,
-    setTime = _ref.setTime;
+    setTime = _ref.setTime,
+    setCenterTime = _ref.setCenterTime;
   var _getTimeBounds = getTimeBounds(dimensions),
     selectedTime = _getTimeBounds.selectedTime;
   var _getDataLimitsFromLay = getDataLimitsFromLayers(layers),
@@ -20322,6 +20340,12 @@ var TimeSliderCurrentTimeBoxConnectComponent = function TimeSliderCurrentTimeBox
         origin: 'TimeSliderConnect, 139',
         value: handleMomentISOString(newDate)
       });
+    },
+    onSetCenterTime: function onSetCenterTime(newTime) {
+      setCenterTime({
+        mapId: mapId,
+        timeSliderCenterTime: newTime
+      });
     }
   });
 };
@@ -25413,6 +25437,7 @@ var MapDraw = /*#__PURE__*/function (_React$PureComponent) {
     _this.addPointToMultiPointFeature = _this.addPointToMultiPointFeature.bind(_assertThisInitialized$1(_this));
     _this.addVerticesToPolygonFeature = _this.addVerticesToPolygonFeature.bind(_assertThisInitialized$1(_this));
     _this.checkIfFeatureIsBox = _this.checkIfFeatureIsBox.bind(_assertThisInitialized$1(_this));
+    _this.handleGeoJSONUpdate = _this.handleGeoJSONUpdate.bind(_assertThisInitialized$1(_this));
     _this.handleDrawMode(props.drawMode);
     _this.textPositions = [];
     _this.mouseOverPolygonCoordinates = [];
@@ -25450,15 +25475,33 @@ var MapDraw = /*#__PURE__*/function (_React$PureComponent) {
     key: "componentDidMount",
     value: function componentDidMount() {
       document.addEventListener('keydown', this.handleKeyDown);
+      var _this$props = this.props,
+        mapId = _this$props.mapId,
+        isInDeleteMode = _this$props.isInDeleteMode;
+      var webmapjs = webmapUtils.getWMJSMapById(mapId);
+      if (this.disabled === undefined) {
+        this.disabled = isInDeleteMode;
+      }
+      if (webmapjs !== undefined && this.listenersInitialized !== true) {
+        this.listenersInitialized = true;
+        webmapjs.addListener('beforecanvasdisplay', this.beforeDraw, true);
+        webmapjs.addListener('beforemousemove', this.mouseMove, true);
+        webmapjs.addListener('beforemousedown', this.mouseDown, true);
+        webmapjs.addListener('beforemouseup', this.mouseUp, true);
+        this.disabled = false;
+      }
+      if (webmapjs !== undefined) {
+        webmapjs.draw();
+      }
     }
   }, {
     key: "componentDidUpdate",
     value: function componentDidUpdate(prevProps) {
-      var _this$props = this.props,
-        geojson = _this$props.geojson,
-        isInEditMode = _this$props.isInEditMode,
-        isInDeleteMode = _this$props.isInDeleteMode,
-        drawMode = _this$props.drawMode;
+      var _this$props2 = this.props,
+        geojson = _this$props2.geojson,
+        isInEditMode = _this$props2.isInEditMode,
+        isInDeleteMode = _this$props2.isInDeleteMode,
+        drawMode = _this$props2.drawMode;
       var prevGeojson = prevProps && prevProps.geojson;
       var prevIsInEditMode = prevProps && prevProps.isInEditMode;
       var prevIsInDeleteMode = prevProps && prevProps.isInDeleteMode;
@@ -25535,7 +25578,8 @@ var MapDraw = /*#__PURE__*/function (_React$PureComponent) {
   }, {
     key: "getPixelCoordFromGeoCoord",
     value: function getPixelCoordFromGeoCoord(featureCoords) {
-      var webmapjs = this.props.webmapjs;
+      var mapId = this.props.mapId;
+      var webmapjs = webmapUtils.getWMJSMapById(mapId);
       var _webmapjs$getSize = webmapjs.getSize(),
         width = _webmapjs$getSize.width,
         height = _webmapjs$getSize.height;
@@ -25651,10 +25695,10 @@ var MapDraw = /*#__PURE__*/function (_React$PureComponent) {
     key: "mouseMove",
     value: function mouseMove(event) {
       var _this2 = this;
-      var _this$props2 = this.props,
-        isInEditMode = _this$props2.isInEditMode,
-        featureNrToEdit = _this$props2.featureNrToEdit,
-        onHoverFeature = _this$props2.onHoverFeature;
+      var _this$props3 = this.props,
+        isInEditMode = _this$props3.isInEditMode,
+        featureNrToEdit = _this$props3.featureNrToEdit,
+        onHoverFeature = _this$props3.onHoverFeature;
       if (event && event.rightButton === true) {
         return undefined;
       }
@@ -25685,7 +25729,8 @@ var MapDraw = /*#__PURE__*/function (_React$PureComponent) {
           } else {
             _this2.featureEvent = undefined;
           }
-          var webmapjs = _this2.props.webmapjs;
+          var mapId = _this2.props.mapId;
+          var webmapjs = webmapUtils.getWMJSMapById(mapId);
           webmapjs && webmapjs.draw('MapDraw::onHoverFeature');
         };
         window.clearTimeout(this.mouseStoppedTimer);
@@ -25698,7 +25743,8 @@ var MapDraw = /*#__PURE__*/function (_React$PureComponent) {
       if (!feature) {
         return undefined;
       }
-      var webmapjs = this.props.webmapjs;
+      var mapId = this.props.mapId;
+      var webmapjs = webmapUtils.getWMJSMapById(mapId);
       this.mouseGeoCoord = webmapjs.getLatLongFromPixelCoord({
         x: mouseX,
         y: mouseY
@@ -25795,9 +25841,10 @@ var MapDraw = /*#__PURE__*/function (_React$PureComponent) {
     value: function insertVertexInEdge(event) {
       var mouseX = event.mouseX,
         mouseY = event.mouseY;
-      var _this$props3 = this.props,
-        webmapjs = _this$props3.webmapjs,
-        featureNrToEdit = _this$props3.featureNrToEdit;
+      var _this$props4 = this.props,
+        mapId = _this$props4.mapId,
+        featureNrToEdit = _this$props4.featureNrToEdit;
+      var webmapjs = webmapUtils.getWMJSMapById(mapId);
       if (this.myDrawMode === DRAWMODE.POLYGON) {
         if (this.selectedEdge !== EDGE.NONE && this.myEditMode !== EDITMODE.DELETE_FEATURES) {
           this.mouseGeoCoord = webmapjs.getLatLongFromPixelCoord({
@@ -25846,9 +25893,10 @@ var MapDraw = /*#__PURE__*/function (_React$PureComponent) {
     value: function createNewFeature(event) {
       var mouseX = event.mouseX,
         mouseY = event.mouseY;
-      var _this$props4 = this.props,
-        webmapjs = _this$props4.webmapjs,
-        featureNrToEdit = _this$props4.featureNrToEdit;
+      var _this$props5 = this.props,
+        mapId = _this$props5.mapId,
+        featureNrToEdit = _this$props5.featureNrToEdit;
+      var webmapjs = webmapUtils.getWMJSMapById(mapId);
       if (this.myEditMode === EDITMODE.EMPTY) {
         this.myEditMode = EDITMODE.ADD_FEATURE;
         var feature = this.geojson.features[featureNrToEdit];
@@ -25960,9 +26008,10 @@ var MapDraw = /*#__PURE__*/function (_React$PureComponent) {
     value: function addPointToMultiPointFeature(event) {
       var mouseX = event.mouseX,
         mouseY = event.mouseY;
-      var _this$props5 = this.props,
-        webmapjs = _this$props5.webmapjs,
-        featureNrToEdit = _this$props5.featureNrToEdit;
+      var _this$props6 = this.props,
+        mapId = _this$props6.mapId,
+        featureNrToEdit = _this$props6.featureNrToEdit;
+      var webmapjs = webmapUtils.getWMJSMapById(mapId);
       if (this.myDrawMode === DRAWMODE.MULTIPOINT) {
         if (this.myEditMode === EDITMODE.ADD_FEATURE && this.snappedPolygonIndex !== SNAPPEDFEATURE.NONE) {
           this.mouseGeoCoord = webmapjs.getLatLongFromPixelCoord({
@@ -25985,9 +26034,10 @@ var MapDraw = /*#__PURE__*/function (_React$PureComponent) {
     value: function addVerticesToPolygonFeature(event) {
       var mouseX = event.mouseX,
         mouseY = event.mouseY;
-      var _this$props6 = this.props,
-        webmapjs = _this$props6.webmapjs,
-        featureNrToEdit = _this$props6.featureNrToEdit;
+      var _this$props7 = this.props,
+        mapId = _this$props7.mapId,
+        featureNrToEdit = _this$props7.featureNrToEdit;
+      var webmapjs = webmapUtils.getWMJSMapById(mapId);
       if (this.myDrawMode === DRAWMODE.POLYGON) {
         if (this.myEditMode === EDITMODE.ADD_FEATURE && this.snappedPolygonIndex !== SNAPPEDFEATURE.NONE) {
           this.mouseGeoCoord = webmapjs.getLatLongFromPixelCoord({
@@ -26010,9 +26060,10 @@ var MapDraw = /*#__PURE__*/function (_React$PureComponent) {
     value: function addPointToLineStringFeature(event) {
       var mouseX = event.mouseX,
         mouseY = event.mouseY;
-      var _this$props7 = this.props,
-        webmapjs = _this$props7.webmapjs,
-        featureNrToEdit = _this$props7.featureNrToEdit;
+      var _this$props8 = this.props,
+        mapId = _this$props8.mapId,
+        featureNrToEdit = _this$props8.featureNrToEdit;
+      var webmapjs = webmapUtils.getWMJSMapById(mapId);
       if (this.myDrawMode === DRAWMODE.LINESTRING) {
         if (this.myEditMode === EDITMODE.ADD_FEATURE) {
           this.mouseGeoCoord = webmapjs.getLatLongFromPixelCoord({
@@ -26084,9 +26135,9 @@ var MapDraw = /*#__PURE__*/function (_React$PureComponent) {
   }, {
     key: "deletePolygon",
     value: function deletePolygon(index) {
-      var _this$props8 = this.props,
-        featureNrToEdit = _this$props8.featureNrToEdit,
-        deletePolygonCallback = _this$props8.deletePolygonCallback;
+      var _this$props9 = this.props,
+        featureNrToEdit = _this$props9.featureNrToEdit,
+        deletePolygonCallback = _this$props9.deletePolygonCallback;
       var feature = this.geojson.features[featureNrToEdit];
       feature.geometry.coordinates.splice(index, 1);
       if (deletePolygonCallback) {
@@ -26099,9 +26150,10 @@ var MapDraw = /*#__PURE__*/function (_React$PureComponent) {
     key: "deleteFeature",
     value: function deleteFeature() {
       /* Deletes any features under the mousecursor */
-      var _this$props9 = this.props,
-        webmapjs = _this$props9.webmapjs,
-        featureNrToEdit = _this$props9.featureNrToEdit;
+      var _this$props10 = this.props,
+        mapId = _this$props10.mapId,
+        featureNrToEdit = _this$props10.featureNrToEdit;
+      var webmapjs = webmapUtils.getWMJSMapById(mapId);
       if (this.mouseIsOverVertexNr === VERTEX.NONE) {
         return;
       }
@@ -26137,9 +26189,9 @@ var MapDraw = /*#__PURE__*/function (_React$PureComponent) {
     key: "mouseUp",
     value: function mouseUp(event) {
       var _this4 = this;
-      var _this$props10 = this.props,
-        isInEditMode = _this$props10.isInEditMode,
-        onClickFeature = _this$props10.onClickFeature;
+      var _this$props11 = this.props,
+        isInEditMode = _this$props11.isInEditMode,
+        onClickFeature = _this$props11.onClickFeature;
       if (event && event.rightButton === true) {
         return;
       }
@@ -26190,13 +26242,14 @@ var MapDraw = /*#__PURE__*/function (_React$PureComponent) {
   }, {
     key: "cancelEdit",
     value: function cancelEdit(cancelLastPoint) {
-      var _this$props11 = this.props,
-        isInEditMode = _this$props11.isInEditMode,
-        featureNrToEdit = _this$props11.featureNrToEdit;
+      var _this$props12 = this.props,
+        isInEditMode = _this$props12.isInEditMode,
+        featureNrToEdit = _this$props12.featureNrToEdit;
       if (isInEditMode === false) {
         return;
       }
-      var webmapjs = this.props.webmapjs;
+      var mapId = this.props.mapId;
+      var webmapjs = webmapUtils.getWMJSMapById(mapId);
       /* When in addpolygon mode, finish the polygon */
       if (this.myEditMode === EDITMODE.ADD_FEATURE) {
         this.myEditMode = EDITMODE.EMPTY;
@@ -26383,7 +26436,8 @@ var MapDraw = /*#__PURE__*/function (_React$PureComponent) {
     value: function componentCleanup() {
       // this will hold the cleanup code
       document.removeEventListener('keydown', this.handleKeyDown);
-      var webmapjs = this.props.webmapjs;
+      var mapId = this.props.mapId;
+      var webmapjs = webmapUtils.getWMJSMapById(mapId);
       if (webmapjs !== undefined && this.listenersInitialized === true) {
         this.listenersInitialized = undefined;
         webmapjs.removeListener('beforecanvasdisplay', this.beforeDraw);
@@ -26483,9 +26537,9 @@ var MapDraw = /*#__PURE__*/function (_React$PureComponent) {
        just before viewer will flip the back canvas buffer to the front.
        You are free to draw anything you like on the canvas.
       */
-      var _this$props12 = this.props,
-        featureNrToEdit = _this$props12.featureNrToEdit,
-        isInEditMode = _this$props12.isInEditMode;
+      var _this$props13 = this.props,
+        featureNrToEdit = _this$props13.featureNrToEdit,
+        isInEditMode = _this$props13.isInEditMode;
       if (!this.geojson || !this.geojson.features || !this.geojson.features.length) {
         return;
       }
@@ -26888,9 +26942,9 @@ var MapDraw = /*#__PURE__*/function (_React$PureComponent) {
   }, {
     key: "drawLine",
     value: function drawLine(ctx, XYCoords, featureIndex, lineStringIndex) {
-      var _this$props13 = this.props,
-        isInEditMode = _this$props13.isInEditMode,
-        featureNrToEdit = _this$props13.featureNrToEdit;
+      var _this$props14 = this.props,
+        isInEditMode = _this$props14.isInEditMode,
+        featureNrToEdit = _this$props14.featureNrToEdit;
       var feature = this.geojson.features[featureIndex];
       if (!feature || !feature.geometry) {
         return;
@@ -26963,9 +27017,9 @@ var MapDraw = /*#__PURE__*/function (_React$PureComponent) {
   }, {
     key: "drawPolygon",
     value: function drawPolygon(ctx, XYCoords, featureIndex, polygonIndex) {
-      var _this$props14 = this.props,
-        isInEditMode = _this$props14.isInEditMode,
-        featureNrToEdit = _this$props14.featureNrToEdit;
+      var _this$props15 = this.props,
+        isInEditMode = _this$props15.isInEditMode,
+        featureNrToEdit = _this$props15.featureNrToEdit;
       var feature = this.geojson.features[featureIndex];
       if (!feature || !feature.geometry) {
         return;
@@ -27039,7 +27093,8 @@ var MapDraw = /*#__PURE__*/function (_React$PureComponent) {
   }, {
     key: "convertGeoCoordsToScreenCoords",
     value: function convertGeoCoordsToScreenCoords(featureCoords) {
-      var webmapjs = this.props.webmapjs;
+      var mapId = this.props.mapId;
+      var webmapjs = webmapUtils.getWMJSMapById(mapId);
       var XYCoords = [];
       for (var j = 0; j < featureCoords.length; j += 1) {
         if (featureCoords[j].length < 2) {
@@ -27134,23 +27189,6 @@ var MapDraw = /*#__PURE__*/function (_React$PureComponent) {
   }, {
     key: "render",
     value: function render() {
-      var _this$props15 = this.props,
-        webmapjs = _this$props15.webmapjs,
-        isInDeleteMode = _this$props15.isInDeleteMode;
-      if (this.disabled === undefined) {
-        this.disabled = isInDeleteMode;
-      }
-      if (webmapjs !== undefined && this.listenersInitialized !== true) {
-        this.listenersInitialized = true;
-        webmapjs.addListener('beforecanvasdisplay', this.beforeDraw, true);
-        webmapjs.addListener('beforemousemove', this.mouseMove, true);
-        webmapjs.addListener('beforemousedown', this.mouseDown, true);
-        webmapjs.addListener('beforemouseup', this.mouseUp, true);
-        this.disabled = false;
-      }
-      if (webmapjs !== undefined) {
-        webmapjs.draw();
-      }
       return /*#__PURE__*/React.createElement("div", null);
     }
   }]);
@@ -27181,7 +27219,7 @@ MapDraw.defaultProps = {
  * */
 var MapDrawContainer = function MapDrawContainer(_ref) {
   var featureLayers = _ref.featureLayers,
-    webMapJS = _ref.webMapJS;
+    mapId = _ref.mapId;
   return /*#__PURE__*/React.createElement(React.Fragment, null, featureLayers.map(function (layer) {
     return /*#__PURE__*/React.createElement("div", {
       "data-testid": "featureLayer-".concat(layer.id),
@@ -27194,7 +27232,7 @@ var MapDrawContainer = function MapDrawContainer(_ref) {
       isInEditMode: layer.isInEditMode,
       isInDeleteMode: layer.isInDeleteMode,
       drawMode: layer.drawMode,
-      webmapjs: webMapJS,
+      mapId: mapId,
       onHoverFeature: function onHoverFeature(hoverInfo) {
         if (layer.onHoverFeature) {
           layer.onHoverFeature(hoverInfo);
@@ -27684,6 +27722,9 @@ var DrawingTool = function DrawingTool(_ref) {
 };
 
 var opacityOptions = [100, 90, 80, 70, 60, 50, 40, 30, 20, 10, 0];
+var getAreaName = function getAreaName(areaName) {
+  return areaName || "".concat(dateUtils.dateToString(new Date(), 'dd/MM/yyyy HH:mm', true), " UTC");
+};
 var SAVE_AREA_BUTTON = 'Save area';
 var INPUT_AREA = 'Area name';
 var INPUT_OPACITY = 'Opacity';
@@ -27869,15 +27910,15 @@ var DrawingToolForm = function DrawingToolForm(_ref) {
 var Wrapper = function Wrapper(props) {
   var _props$id = props.id,
     id = _props$id === void 0 ? '' : _props$id,
-    areaName = props.areaName,
+    _props$areaName = props.areaName,
+    areaName = _props$areaName === void 0 ? '' : _props$areaName,
     area = props.area;
   return /*#__PURE__*/React.createElement(ReactHookFormProvider, {
     options: Object.assign(Object.assign({}, defaultFormOptions), {
       defaultValues: {
         id: id,
         area: area,
-        // TODO https://gitlab.com/opengeoweb/opengeoweb/-/issues/3954: use date as default name
-        areaName: areaName || 'Area 51'
+        areaName: getAreaName(areaName)
       }
     })
   }, /*#__PURE__*/React.createElement(DrawingToolForm, Object.assign({}, props)));
@@ -28644,7 +28685,6 @@ var ReactMapView = /*#__PURE__*/function (_React$Component) {
         mapId = _this$props5.mapId;
       var adagucInitialised = this.state.adagucInitialised;
       var featureLayers = getFeatureLayers(children);
-      var wmjsMap = webmapUtils.getWMJSMapById(mapId);
       return /*#__PURE__*/React.createElement("div", {
         className: "MapView",
         style: {
@@ -28688,7 +28728,7 @@ var ReactMapView = /*#__PURE__*/function (_React$Component) {
         }
       }, /*#__PURE__*/React.createElement("div", null, children), adagucInitialised && featureLayers && featureLayers.length ? /*#__PURE__*/React.createElement(MapDrawContainer, {
         featureLayers: featureLayers,
-        webMapJS: wmjsMap
+        mapId: mapId
       }) : null), passiveMap &&
       /*#__PURE__*/
       // eslint-disable-next-line jsx-a11y/click-events-have-key-events, jsx-a11y/control-has-associated-label, jsx-a11y/interactive-supports-focus
@@ -33973,12 +34013,13 @@ var componentsLookUp = function componentsLookUp(_ref) {
     case 'Map':
       {
         var mapPreset = initialProps.mapPreset,
-          mapControls = initialProps.mapControls;
+          mapControls = initialProps.mapControls,
+          shouldDisplayDrawControls = initialProps.shouldDisplayDrawControls;
         return /*#__PURE__*/React__default.createElement(ConfigurableMapConnect, Object.assign({}, mapPreset, {
           id: id,
           "data-testid": "coreConfigurableMapConnect",
           displayGetFeatureInfoButtonInMap: true,
-          shouldDisplayDrawControls: true,
+          shouldDisplayDrawControls: shouldDisplayDrawControls,
           mapControls: mapControls
         }));
       }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@opengeoweb/core",
-  "version": "6.0.2",
+  "version": "6.0.3",
   "description": "GeoWeb Core library for the opengeoweb project",
   "license": "Apache-2.0",
   "repository": {
@@ -14,12 +14,12 @@
   "peerDependencies": {
     "@mui/material": "5.12.0",
     "@mui/system": "5.14.5",
-    "@opengeoweb/api": "6.0.2",
-    "@opengeoweb/form-fields": "6.0.2",
-    "@opengeoweb/shared": "6.0.2",
-    "@opengeoweb/store": "6.0.2",
-    "@opengeoweb/theme": "6.0.2",
-    "@opengeoweb/webmap": "6.0.2",
+    "@opengeoweb/api": "6.0.3",
+    "@opengeoweb/form-fields": "6.0.3",
+    "@opengeoweb/shared": "6.0.3",
+    "@opengeoweb/store": "6.0.3",
+    "@opengeoweb/theme": "6.0.3",
+    "@opengeoweb/webmap": "6.0.3",
     "@redux-eggs/redux-toolkit": "2.2.0",
     "@redux-eggs/saga-extension": "2.2.0",
     "@reduxjs/toolkit": "1.9.5",

package/src/lib/components/ComponentsLookUp/componentsLookUp.d.ts

@@ -11,6 +11,7 @@ export interface InitialMapProps {
     mapPreset: mapTypes.MapPreset;
     syncGroupsIds: string[];
     mapControls?: React.ReactNode;
+    shouldDisplayDrawControls?: boolean;
 }
 interface InitialSliderProps {
     sliderPreset: {

package/src/lib/components/MapDraw/DrawingToolForm/DrawingToolForm.d.ts

@@ -1,5 +1,6 @@
 import * as React from 'react';
 export declare const opacityOptions: number[];
+export declare const getAreaName: (areaName: string) => string;
 export declare const SAVE_AREA_BUTTON = "Save area";
 export declare const INPUT_AREA = "Area name";
 export declare const INPUT_OPACITY = "Opacity";

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

@@ -1,6 +1,5 @@
 import * as React from 'react';
 import { GeoJsonProperties, GeometryObject, Position } from 'geojson';
-import { WMJSMap } from '@opengeoweb/webmap';
 import { GeoJsonFeatureType, GeoJsonFeature, GeoFeatureStyle, Coordinate } from './geojsonShapes';
 type DrawStyle = {
     x: number;
@@ -23,7 +22,7 @@ export interface FeatureEvent {
     feature: GeoJsonFeature;
 }
 export interface MapDrawProps {
-    webmapjs: WMJSMap;
+    mapId: string;
     geojson: GeoJSON.FeatureCollection;
     drawMode: string;
     deletePolygonCallback?: string;

package/src/lib/components/MapDraw/MapDrawContainer.d.ts

@@ -1,6 +1,5 @@
 import * as React from 'react';
 import { GeometryObject } from 'geojson';
-import { WMJSMap } from '@opengeoweb/webmap';
 import { DrawModeExitCallback, FeatureEvent } from './MapDraw';
 export type FeatureLayer = {
     id: string;
@@ -18,7 +17,7 @@ export type FeatureLayer = {
 };
 interface MapDrawContainerProps {
     featureLayers: FeatureLayer[];
-    webMapJS: WMJSMap;
+    mapId: string;
 }
 declare const MapDrawContainer: React.FC<MapDrawContainerProps>;
 export default MapDrawContainer;

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

@@ -11,6 +11,7 @@ export interface TimeSliderCurrentTimeBoxProps {
     isAutoUpdating?: boolean;
     setUnfilteredSelectedTime: (unfilteredSelectedTime: number) => void;
     onSetNewDate?: (newDate: string) => void;
+    onSetCenterTime?: (newTime: number) => void;
 }
 declare const TimeSliderCurrentTimeBox: React.FC<TimeSliderCurrentTimeBoxProps>;
 export default TimeSliderCurrentTimeBox;

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

@@ -15,6 +15,7 @@ interface TimeSliderCurrentTimeBoxConnectComponentProps {
     setTimeSliderUnfilteredSelectedTime?: typeof mapActions.setTimeSliderUnfilteredSelectedTime;
     stopMapAnimation?: typeof mapActions.mapStopAnimation;
     setTime?: typeof genericActions.setTime;
+    setCenterTime?: typeof mapActions.setTimeSliderCenterTime;
 }
 declare const TimeSliderCurrentTimeBoxConnect: import("react-redux").ConnectedComponent<React.FC<TimeSliderCurrentTimeBoxConnectComponentProps>, {
     mapId: string;
@@ -31,6 +32,7 @@ declare const TimeSliderCurrentTimeBoxConnect: import("react-redux").ConnectedCo
     setTimeSliderUnfilteredSelectedTime?: import("@reduxjs/toolkit").ActionCreatorWithPayload<mapTypes.SetTimeSliderUnfilteredSelectedTimePayload, "mapReducer/setTimeSliderUnfilteredSelectedTime"> | undefined;
     stopMapAnimation?: import("@reduxjs/toolkit").ActionCreatorWithPayload<mapTypes.SetMapAnimationStopPayload, "mapReducer/mapStopAnimation"> | undefined;
     setTime?: import("@reduxjs/toolkit").ActionCreatorWithPayload<import("dist/libs/store/src/store/generic/types").SetTimePayload, string> | undefined;
+    setCenterTime?: import("@reduxjs/toolkit").ActionCreatorWithPayload<mapTypes.SetTimeSliderCenterTimePayload, "mapReducer/setTimeSliderCenterTime"> | undefined;
     context?: React.Context<import("react-redux").ReactReduxContextValue<any, import("redux").AnyAction>> | undefined;
     store?: import("redux").Store<any, import("redux").AnyAction> | undefined;
 }>;

package/src/lib/components/TimeSlider/timeSliderUtils.d.ts

@@ -69,12 +69,13 @@ export declare const moveRelativeToTimePoint: (timePoint: number, timePointPx: n
  *  ...
  */
 export declare const useCanvasTarget: (eventType: string) => [boolean, React.RefObject<CanvasComponent>];
-export declare const needleGeom: {
+export declare const timeBoxGeom: {
     smallWidth: number;
     largeWidth: number;
     height: number;
     cornerRadius: number;
     lineWidth: number;
+    iconWidth: number;
 };
 export declare const AUTO_MOVE_AREA_PADDING = 1;
 export declare const getAutoMoveAreaWidth: (scale: mapEnums.Scale) => number;