@opengeoweb/core 12.3.0 → 12.4.2

package/index.esm.js

@@ -2,7 +2,7 @@ import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
 import * as React from 'react';
 import React__default, { useState, useCallback, useEffect, useContext, useMemo } from 'react';
 import { Grid, Box, MenuItem, Typography, useTheme, Popper, Fade, Tooltip, styled, LinearProgress, FormControl, InputLabel, Paper, List, ListItemButton, ListItemText, CircularProgress, ListSubheader, DialogContentText, TextField, InputAdornment, Button, Autocomplete, ListItemIcon, Checkbox, Switch, Select } from '@mui/material';
-import { safelyInitI18nForTestsAndStories, sharedTranslations, SHARED_NAMESPACE, CustomIconButton, CustomTooltip, TooltipSelect, AlertIcon, sliderHeaderStyle, CustomSlider, ToggleMenu, tooltipContainerStyles, renderCounter, AlertBanner, CustomAccordion, CustomDialog, PROJECTION, calculateStartSize, useWheelStopPropagation, ToolContainerDraggable, sessionStorageProvider, useDebounce, dateUtils, usePrevious, ErrorBoundary } from '@opengeoweb/shared';
+import { safelyInitI18nForTestsAndStories, sharedTranslations, SHARED_NAMESPACE, CustomIconButton, CustomTooltip, TooltipSelect, AlertIcon, useScrollingInIsolation, sliderHeaderStyle, CustomSlider, ToggleMenu, tooltipContainerStyles, renderCounter, AlertBanner, CustomAccordion, CustomDialog, PROJECTION, calculateStartSize, useWheelStopPropagation, ToolContainerDraggable, sessionStorageProvider, useDebounce, dateUtils, usePrevious, ErrorBoundary } from '@opengeoweb/shared';
 import { CollapseSmall, CollapseMedium, CollapseLarge, CollapseWindow, ExpandWindow, LayersAdd, CloudLoading, ColumnCollapsed, ColumnCollapse, Copy, None, FastForward, AutoUpdateActive, Both, Delete, Visibility, VisibilityOff, DragHandle as DragHandle$1, Cached, Add, MapAdd, WorldMapProjection, Layers, Search, Exclamation, MyLocation, Close, ExitDomain, Info, ThemeWrapper, lightTheme, FlagBritain, FlagNetherlands, FlagFinland, FlagNorway } from '@opengeoweb/theme';
 import i18n from 'i18next';
 import { useTranslation, I18nextProvider } from 'react-i18next';
@@ -22,7 +22,9 @@ import axios from 'axios';
 import { ImageWMS } from 'ol/source';
 import DOMPurify from 'dompurify';
 import { unByKey } from 'ol/Observable';
+import GeoJSON from 'ol/format/GeoJSON';
 import { toLonLat } from 'ol/proj';
+import { getIntersection } from 'ol/extent';
 import { snackbarTypes, snackbarActions, SnackbarWrapperConnect } from '@opengeoweb/snackbar';
 import { useNavigate } from 'react-router-dom';
 import * as Sentry from '@sentry/react';
@@ -1512,7 +1514,6 @@ var RenderLayers = function RenderLayers(_ref) {
     onChangeMouseWheel: function onChangeMouseWheel(e) {
       return onChangeLayerName(e.value);
     },
-    requiresCtrlToChange: true,
     skipLocalStyling: skipLocalStyling,
     renderValue: function renderValue(value) {
       return extendedLayers.find(function (layer) {
@@ -1605,8 +1606,11 @@ var OpacitySelect = function OpacitySelect(_ref) {
       closeSliderPopper();
     }
   }, [anchorEl]);
+  var scrollInIsolationRef = useScrollingInIsolation({
+    onWheel: onWheel
+  });
   return jsxs(Box, {
-    onWheel: onWheel,
+    ref: scrollInIsolationRef,
     "data-testid": "scrollOpacity",
     sx: {
       width: '100%',
@@ -1787,7 +1791,6 @@ var RenderStyles = function RenderStyles(_ref) {
     onChangeMouseWheel: function onChangeMouseWheel(e) {
       return onChangeLayerStyle(e.value);
     },
-    requiresCtrlToChange: true,
     IconComponent: icon,
     skipLocalStyling: skipLocalStyling,
     children: [jsx(MenuItem, {
@@ -1974,7 +1977,6 @@ var AcceptanceTime = function AcceptanceTime(_ref) {
     onChangeMouseWheel: function onChangeMouseWheel(e) {
       _onChange(e.value);
     },
-    requiresCtrlToChange: true,
     list: acceptanceTimesValues,
     currentIndex: acceptanceTimes.findIndex(function (time) {
       return layerAcceptanceTime === time.value;
@@ -3476,15 +3478,12 @@ var LayerContainerRow = /*#__PURE__*/React.memo(function (_ref) {
     collapsedColumns = _ref.collapsedColumns,
     gridProps = _objectWithoutPropertiesLoose(_ref, _excluded$4);
   var dispatch = useDispatch();
-  var _React$useState = React.useState(false),
-    keyPressed = _React$useState[0],
-    setKeyPressed = _React$useState[1];
   var _React$useTransition = React.useTransition(),
     isPending = _React$useTransition[0],
     startTransition = _React$useTransition[1];
-  var _React$useState2 = React.useState(0),
-    rowsToDisplay = _React$useState2[0],
-    setRowsToDisplay = _React$useState2[1];
+  var _React$useState = React.useState(0),
+    rowsToDisplay = _React$useState[0],
+    setRowsToDisplay = _React$useState[1];
   var layerIds = useSelector(function (store) {
     return mapSelectors.getLayerIds(store, mapId);
   });
@@ -3500,9 +3499,9 @@ var LayerContainerRow = /*#__PURE__*/React.memo(function (_ref) {
       origin: layerTypes.LayerActionOrigin.layerManager
     }));
   }, [dispatch]);
-  var _React$useState3 = React.useState(null),
-    activeDragIndex = _React$useState3[0],
-    setActiveDragIndex = _React$useState3[1];
+  var _React$useState2 = React.useState(null),
+    activeDragIndex = _React$useState2[0],
+    setActiveDragIndex = _React$useState2[1];
   var onSetList = function onSetList() {}; // since we use activeDragIndex, we don't need inner state handling of ReactSortable
   var onStart = React.useCallback(function (_ref3) {
     var oldIndex = _ref3.oldIndex;
@@ -3528,38 +3527,6 @@ var LayerContainerRow = /*#__PURE__*/React.memo(function (_ref) {
   };
   var isSorting = activeDragIndex !== null;
   var isDragDisabled = layerLength === 1;
-  var keyPressedTrue = function keyPressedTrue(event) {
-    if (event.ctrlKey || event.metaKey) {
-      setKeyPressed(true);
-    }
-  };
-  var keyPressedFalse = function keyPressedFalse() {
-    setKeyPressed(false);
-  };
-  React.useEffect(function () {
-    window.addEventListener('keydown', keyPressedTrue);
-    window.addEventListener('keyup', keyPressedFalse);
-    return function () {
-      window.removeEventListener('keydown', keyPressedTrue);
-      window.removeEventListener('keyup', keyPressedFalse);
-    };
-  }, []);
-  var preventDefault = React.useCallback(function (event) {
-    event.preventDefault();
-    event.stopPropagation();
-  }, []);
-  React.useEffect(function () {
-    if (keyPressed === true) {
-      window.addEventListener('wheel', preventDefault, {
-        passive: false
-      });
-    } else {
-      window.removeEventListener('wheel', preventDefault);
-    }
-    return function () {
-      return window.removeEventListener('wheel', preventDefault);
-    };
-  }, [keyPressed, preventDefault]);
   var contents = layerIds.map(function (layerId) {
     var _settings$dragHandle, _settings$dragHandle2;
     return jsx(LayerRowConnect, {
@@ -4740,7 +4707,6 @@ var ProjectionSelect = function ProjectionSelect(_ref) {
           onChangeMouseWheel: function onChangeMouseWheel(e) {
             return selectProjection(e.value);
           },
-          requiresCtrlToChange: true,
           children: [jsx(MenuItem, {
             disabled: true,
             children: title
@@ -7254,6 +7220,73 @@ var getCenterOfLinkedFeature = function getCenterOfLinkedFeature(feature, srs) {
   }
   return null;
 };
+function useFitAndHighlightWarningFeature(_ref) {
+  var view = _ref.view,
+    warningDialogFeatures = _ref.warningDialogFeatures,
+    srs = _ref.srs,
+    mapId = _ref.mapId;
+  var dispatch = useDispatch();
+  useEffect(function () {
+    var _warningDialogFeature, _geoJsonFeature$prope, _warningDialogFeature2, _geoJsonFeature$bbox;
+    if (!view || !(warningDialogFeatures != null && warningDialogFeatures.length) || !srs) {
+      return;
+    }
+    var geoJsonFeature = (_warningDialogFeature = warningDialogFeatures[0]) == null || (_warningDialogFeature = _warningDialogFeature.geoJSON) == null || (_warningDialogFeature = _warningDialogFeature.features) == null ? void 0 : _warningDialogFeature[0];
+    var warningLevel = geoJsonFeature == null || (_geoJsonFeature$prope = geoJsonFeature.properties) == null ? void 0 : _geoJsonFeature$prope.warningLevel;
+    var isAviationWarning = warningLevel === 'SIG' || warningLevel === 'AIR';
+    if (!geoJsonFeature) {
+      return;
+    }
+    var warningDialogFeature = new GeoJSON().readFeature(geoJsonFeature, {
+      featureProjection: srs
+    });
+    var geometry = Array.isArray(warningDialogFeature) ? (_warningDialogFeature2 = warningDialogFeature[0]) == null ? void 0 : _warningDialogFeature2.getGeometry() : warningDialogFeature.getGeometry();
+    if (!geometry) {
+      return;
+    }
+    var featureExtent = (_geoJsonFeature$bbox = geoJsonFeature.bbox) != null ? _geoJsonFeature$bbox : geometry.getExtent();
+    var currentExtent = view.calculateExtent();
+    var intersection = getIntersection(currentExtent, featureExtent);
+    var isCompletelyOutside = !intersection || intersection[0] >= intersection[2] || intersection[1] >= intersection[3];
+    var shouldPan = false;
+    if (isCompletelyOutside) {
+      shouldPan = true;
+    } else {
+      var featureArea = (featureExtent[2] - featureExtent[0]) * (featureExtent[3] - featureExtent[1]);
+      var visibleArea = (intersection[2] - intersection[0]) * (intersection[3] - intersection[1]);
+      var visibleRatio = visibleArea / featureArea;
+      shouldPan = visibleRatio <= 0.5;
+    }
+    if (shouldPan) {
+      view.fit(featureExtent, {
+        duration: 500,
+        padding: [40, 40, 40, 40],
+        maxZoom: 5
+      });
+    }
+    if (!isAviationWarning) {
+      dispatch(layerActions.addLayer({
+        mapId: mapId,
+        layer: {
+          geojson: {
+            type: 'FeatureCollection',
+            features: [geoJsonFeature]
+          },
+          layerType: LayerType.featureLayer
+        },
+        layerId: 'highlight-layer',
+        origin: 'OlMapViewConnect'
+      }));
+      // eslint-disable-next-line consistent-return
+      return function () {
+        dispatch(layerActions.layerDelete({
+          mapId: mapId,
+          layerId: 'highlight-layer'
+        }));
+      };
+    }
+  }, [view, warningDialogFeatures, srs, dispatch, mapId]);
+}
 
 var OlMapViewLayerConnect = function OlMapViewLayerConnect(layerProps) {
   var layerId = layerProps.layerId,
@@ -7381,10 +7414,24 @@ var OlMapViewConnect = function OlMapViewConnect(_ref) {
   var featureLayers = useSelector(function (store) {
     return mapSelectors.getMapFeatureLayers(store, mapId);
   });
+  var _useSelector = useSelector(function (state) {
+      return genericSelectors.selectSharedData(state, 'warning-dialog');
+    }),
+    warningDialogFeatures = _useSelector.features;
+  var warningDialogOriginalIds = React.useMemo(function () {
+    return warningDialogFeatures == null ? void 0 : warningDialogFeatures.map(function (feature) {
+      return feature.originalId;
+    });
+  }, [warningDialogFeatures]);
   var linkedFeaturesFromState = useSelector(function (store) {
     var _store$syncGroups;
     return genericSelectors.selectLinkedFeatures((_store$syncGroups = store.syncGroups) == null ? void 0 : _store$syncGroups.linkedState, mapId);
   });
+  var filteredLinkedFeaturesFromState = React.useMemo(function () {
+    return linkedFeaturesFromState.filter(function (feature) {
+      return !(warningDialogOriginalIds != null && warningDialogOriginalIds.includes(feature.originalId));
+    });
+  }, [linkedFeaturesFromState, warningDialogOriginalIds]);
   var linkedFormFeaturesFromState = useSelector(function (store) {
     var _store$syncGroups2;
     return genericSelectors.selectLinkedFormFeatures((_store$syncGroups2 = store.syncGroups) == null ? void 0 : _store$syncGroups2.linkedState, mapId);
@@ -7392,7 +7439,7 @@ var OlMapViewConnect = function OlMapViewConnect(_ref) {
   var linkedFeatures = React.useMemo(function () {
     return {
       type: 'FeatureCollection',
-      features: linkedFeaturesFromState.flatMap(function (feature) {
+      features: filteredLinkedFeaturesFromState.flatMap(function (feature) {
         return feature.geoJSON.features.map(function (geoFeature) {
           return Object.assign({}, geoFeature, {
             properties: Object.assign({}, geoFeature.properties, {
@@ -7402,7 +7449,7 @@ var OlMapViewConnect = function OlMapViewConnect(_ref) {
         });
       })
     };
-  }, [linkedFeaturesFromState]);
+  }, [filteredLinkedFeaturesFromState]);
   var linkedFormFeatures = React.useMemo(function () {
     return {
       type: 'FeatureCollection',
@@ -7681,6 +7728,12 @@ var OlMapViewConnect = function OlMapViewConnect(_ref) {
     }
     return style;
   }, [isSearchDialogOpen]);
+  useFitAndHighlightWarningFeature({
+    view: view,
+    warningDialogFeatures: warningDialogFeatures,
+    srs: srs,
+    mapId: mapId
+  });
   var combinedLinkedFeatures = React.useMemo(function () {
     return {
       type: 'FeatureCollection',
@@ -10123,4 +10176,4 @@ var LanguageSelect = function LanguageSelect(_ref) {
   });
 };
 
-export { CORE_NAMESPACE, ConfigurableMapConnect, CoreI18nProvider, CoreStoreProvider, CoreThemeProvider, CoreThemeStoreProvider, DemoWrapper, DemoWrapperConnect, HarmonieTempAndPrecipPreset, LanguageSelect, LayerInfoButtonConnect, LayerInfoDialogConnect, LayerManager, BaseLayerRow as LayerManagerBaseLayerRow, LayerManagerConnect, DescriptionRow as LayerManagerDescriptionRow, HeaderOptions as LayerManagerHeaderOptions, LayerContainerRow as LayerManagerLayerContainerRow, LayerManagerMapButtonConnect, LegendConnect, LegendMapButtonConnect, LocationSearch, LocationSearchConnect, MapViewConnect, MultiDimensionSelectMapButtonsConnect, MultiMapMultiDimensionSelectConnect as MultiMapDimensionSelectConnect, MultiMapViewConnect, MyMapLocation, OlMapViewConnect, RouterWrapperConnect, SearchControlButtonConnect, SentryRecordButton, SyncGroupViewerConnect, TimeSliderConnect, ZoomControlConnect, componentsLookUp, coreTranslations, defaultBbox, defaultConfigurations, filterMapPresets, filterServices, filterTimeSeriesServices, getCenterOfLinkedFeature, getLanguageFromLocalStorage, languageLocalStorageKey, makeLayerInfoPayload, makePrefetchTimeSpan, saveLanguageToLocalStorage, testLayers, useFetchServices, useUpdateTimeSpan, useUpdateTimestep };
+export { CORE_NAMESPACE, ConfigurableMapConnect, CoreI18nProvider, CoreStoreProvider, CoreThemeProvider, CoreThemeStoreProvider, DemoWrapper, DemoWrapperConnect, HarmonieTempAndPrecipPreset, LanguageSelect, LayerInfoButtonConnect, LayerInfoDialogConnect, LayerManager, BaseLayerRow as LayerManagerBaseLayerRow, LayerManagerConnect, DescriptionRow as LayerManagerDescriptionRow, HeaderOptions as LayerManagerHeaderOptions, LayerContainerRow as LayerManagerLayerContainerRow, LayerManagerMapButtonConnect, LegendConnect, LegendMapButtonConnect, LocationSearch, LocationSearchConnect, MapViewConnect, MultiDimensionSelectMapButtonsConnect, MultiMapMultiDimensionSelectConnect as MultiMapDimensionSelectConnect, MultiMapViewConnect, MyMapLocation, OlMapViewConnect, RouterWrapperConnect, SearchControlButtonConnect, SentryRecordButton, SyncGroupViewerConnect, TimeSliderConnect, ZoomControlConnect, componentsLookUp, coreTranslations, defaultBbox, defaultConfigurations, filterMapPresets, filterServices, filterTimeSeriesServices, getCenterOfLinkedFeature, getLanguageFromLocalStorage, languageLocalStorageKey, makeLayerInfoPayload, makePrefetchTimeSpan, saveLanguageToLocalStorage, testLayers, useFetchServices, useFitAndHighlightWarningFeature, useUpdateTimeSpan, useUpdateTimestep };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@opengeoweb/core",
-  "version": "12.3.0",
+  "version": "12.4.2",
   "description": "GeoWeb Core library for the opengeoweb project",
   "license": "Apache-2.0",
   "repository": {
@@ -8,31 +8,31 @@
     "url": "git@gitlab.com:opengeoweb/opengeoweb.git"
   },
   "dependencies": {
-    "@opengeoweb/shared": "12.3.0",
+    "@opengeoweb/shared": "12.4.2",
     "react-redux": "^9.2.0",
-    "@opengeoweb/store": "12.3.0",
-    "@opengeoweb/timeslider": "12.3.0",
+    "@opengeoweb/store": "12.4.2",
+    "@opengeoweb/timeslider": "12.4.2",
     "@reduxjs/toolkit": "^2.6.1",
-    "@opengeoweb/webmap-react": "12.3.0",
-    "@opengeoweb/webmap": "12.3.0",
-    "@opengeoweb/theme": "12.3.0",
+    "@opengeoweb/webmap-react": "12.4.2",
+    "@opengeoweb/webmap": "12.4.2",
+    "@opengeoweb/theme": "12.4.2",
     "axios": "^1.7.7",
-    "@opengeoweb/layer-select": "12.3.0",
+    "@opengeoweb/layer-select": "12.4.2",
     "lodash": "^4.17.21",
     "ol": "^10.4.0",
     "react-sortablejs": "^6.1.4",
     "sortablejs": "^1.15.1",
     "@mui/system": "^7.0.1",
-    "@opengeoweb/snackbar": "12.3.0",
+    "@opengeoweb/snackbar": "12.4.2",
     "react-router-dom": "^6.21.0",
     "react-draggable": "^4.4.6",
-    "i18next": "^23.11.5",
+    "i18next": "^25.0.1",
     "react-i18next": "^15.1.1",
     "dompurify": "^3.0.6",
     "@mui/material": "^7.0.1",
     "@sentry/react": "^8.34.0",
     "@tanstack/react-query": "^5.69.2",
-    "@opengeoweb/api": "12.3.0"
+    "@opengeoweb/api": "12.4.2"
   },
   "peerDependencies": {
     "react": "18",

package/src/lib/components/MapViewConnect/olMapUtils.d.ts

@@ -1,7 +1,19 @@
 import { TimeSliderStartCenterEndTime } from '@opengeoweb/store';
 import { Dimension } from '@opengeoweb/webmap';
 import { MapLocation, OnInitializeLayerProps, TimeContextType, UpdateLayerInfoPayload } from '@opengeoweb/webmap-react';
-import { Feature } from 'ol';
+import { Feature, View } from 'ol';
 export declare const makePrefetchTimeSpan: (timeSliderStartCenterEndTime: TimeSliderStartCenterEndTime, animationStartTime: string | undefined, animationEndTime: string | undefined, isAnimating: boolean) => TimeContextType;
 export declare const makeLayerInfoPayload: (payload: OnInitializeLayerProps, mapDimensions: Dimension[], mapId: string) => UpdateLayerInfoPayload;
 export declare const getCenterOfLinkedFeature: (feature: Feature | undefined, srs: string) => MapLocation | null;
+interface UseFitAndHighlightWarningFeatureOptions {
+    view: View | undefined;
+    warningDialogFeatures?: {
+        id: string;
+        originalId?: string;
+        geoJSON: GeoJSON.FeatureCollection;
+    }[];
+    srs: string | undefined;
+    mapId: string;
+}
+export declare function useFitAndHighlightWarningFeature({ view, warningDialogFeatures, srs, mapId, }: UseFitAndHighlightWarningFeatureOptions): void;
+export {};