@opengeoweb/warnings 19.6.1-nightly-20260917 → 20.0.0

package/dist/index.esm.js

@@ -2,7 +2,7 @@ import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
 import { useDispatch, useSelector, useStore, shallowEqual } from 'react-redux';
 import { uiTypes, uiActions, getSingularDrawtoolDrawLayerId, drawingToolSelectors, layerSelectors, uiSelectors, layerActions, drawingToolActions, layerUtils, mapListener, layersListener, drawingToolListener, syncGroupsListener, openlayersListener, syncGroupsReducer, drawingToolReducer, uiReducer, layerReducer, mapReducer, useSetupDialog, PUBLIC_WARNING_DRAW_TOOL_ID, genericSelectors, useUpdateFeatureSyncLayers, genericActions, selectorMemoizationOptions, useRegisterFeatureSyncSource, syncGroupsSelector } from '@opengeoweb/store';
 import { Polygons, Edit, Delete, ExitDomain, ChevronDown, DrawPolygon, Remove, Options, Waterspouts, Snow, FreezingRain, CoastalEvent, TemperatureLow, TemperatureHigh, Rain, Lightning, Fog, Wind, Thunderstorm, SevereMountainWaves, VulcanicEruption, Haze, FreezingPrecipitation, ModerateAircraftIcing, SevereAircraftIcing, ModerateTurbulence, SevereTurbulence, SandStorm, RadioactiveMaterials, DrawMask, Visibility, Add, breakpoints, DragHandle, Info, ArrowUpCompact, ArrowDownCompact, CalendarToday, Expire, Cube, AlertBadge, ArrowDropDownDown, Extend24h, Copy, Update, Cancel, Success, VisibilityOff, ChevronUp, Close, Clock } from '@opengeoweb/theme';
-import { WEBMAP_REACT_NAMESPACE, defaultPolygon, emptyGeoJSON, MapControlButton, isGeoJSONGeometryEmpty, rewindGeometry, removeTransientFeatureProperties, defaultSmoothLine, defaultLineString, defaultFreehandLine, defaultOval, defaultCircle, defaultRotatableBox, defaultSquare, defaultLocation, defaultPoint, defaultSplit, defaultDelete, getDrawModeIdFromSelectionType, getIcon, getGeoJSONPropertyValue, DRAWMODE, currentlySupportedDrawModes, defaultLayers, viewUtils, OpenLayersMapView, MapControls, OpenLayersZoomControl, OpenLayersLayer, OpenLayersFeatureLayer, genericOpenLayersFeatureStyle, DEFAULT_GEOJSON_STYLE_FILL_OPACITY, FEATURE_DRAW_FILL_COLOR, FEATURE_DRAW_SECONDARY_FILL_COLOR, FEATURE_DRAW_STROKE_COLOR } from '@opengeoweb/webmap-react';
+import { WEBMAP_REACT_NAMESPACE, defaultPolygon, emptyGeoJSON, MapControlButton, isGeoJSONGeometryEmpty, rewindGeometry, removeTransientFeatureProperties, defaultSmoothLine, defaultLineString, defaultFreehandLine, defaultOval, defaultCircle, defaultRotatableBox, defaultSquare, defaultLocation, defaultPoint, defaultSplit, defaultDelete, getDrawModeIdFromSelectionType, getIcon, getGeoJSONPropertyValue, FEATURE_DRAW_SECONDARY_STROKE_COLOR, DRAWMODE, currentlySupportedDrawModes, defaultLayers, viewUtils, OpenLayersMapView, MapControls, OpenLayersZoomControl, OpenLayersLayer, OpenLayersFeatureLayer, genericOpenLayersFeatureStyle, DEFAULT_GEOJSON_STYLE_FILL_OPACITY, FEATURE_DRAW_FILL_COLOR, FEATURE_DRAW_SECONDARY_FILL_COLOR, FEATURE_DRAW_STROKE_COLOR } from '@opengeoweb/webmap-react';
 import { SHARED_NAMESPACE, useConfirmationDialog, dateUtils, sessionStorageProvider, ToggleMenu, calculateStartSize, ToolContainerDraggable, AlertBanner, ConfirmationDialog, CustomIconButton, usePrevious, usePreventBrowserClose, CustomTooltip, Avatar, getInitials, SwitchButton, Filter, CustomToggleButton, FilterChip, TooltipSelect, LastUpdateTime, DateTimePicker, StatusTag, FilterOption, getAxiosErrorMessage, CustomDialog, ConfirmationButtons, ErrorBoundary } from '@opengeoweb/shared';
 import { createEntityAdapter, createSlice, createSelector, createListenerMiddleware, combineReducers, configureStore } from '@reduxjs/toolkit';
 import { t } from 'i18next';
@@ -18,12 +18,12 @@ import { List, useListRef } from 'react-window';
 import { useQueryClient, useMutation, queryOptions, QueryClient, useQuery } from '@tanstack/react-query';
 import { getHeaders, handleResponse, AirmetPhenomena, SigmetPhenomena, useAuthQuery, useAuthenticationContext, optimisticUpdate, ProductStatus, LevelUnits } from '@opengeoweb/api';
 import { snackbarListener, snackbarReducer, snackbarActions, snackbarTypes } from '@opengeoweb/snackbar';
-import { isEqual, cloneDeep, clamp, concat, groupBy, pick } from 'lodash';
+import { isEqual, cloneDeep, clamp, omit, concat, groupBy, pick } from 'lodash';
 import { useFormContext, useFieldArray, useForm, FormProvider, useWatch } from 'react-hook-form';
-import { isEmpty, createEmpty, extend } from 'ol/extent';
+import { bbox, intersect, featureCollection, union, bboxClip, polygonToLine, lineSplit, along, length, booleanPointInPolygon, area } from '@turf/turf';
+import { intersects, buffer, getWidth, getHeight, isEmpty, createEmpty, extend } from 'ol/extent';
 import GeoJSON from 'ol/format/GeoJSON';
 import { ReactSortable } from 'react-sortablejs';
-import { intersect, area } from '@turf/turf';
 import Box$1 from '@mui/material/Box';
 import Tooltip$1 from '@mui/material/Tooltip';
 import { useTheme as useTheme$1 } from '@mui/material/styles';
@@ -418,6 +418,9 @@ var en = {
 	"drawing-tool-form-masks-clear": "Clear",
 	"drawing-tool-form-masks-tooltip": "Select a mask to clip your drawing",
 	"drawing-tool-form-masks-empty": "No masks available. Please contact your administrator.",
+	"drawing-tool-form-mask-no-overlap": "The drawing does not overlap with the selected mask",
+	"drawing-tool-form-mask-clip-error": "The drawing could not be clipped with the selected mask",
+	"drawing-tool-form-mask-saved": "Saved mask",
 	"warning-event-button-add-drawing": "Add a drawing to this event, then choose individual objects for each warning",
 	"warning-event-button-assign-object": "Assign an object from the chosen drawing to this warning",
 	"warning-event-objects-menu-title": "Objects",
@@ -767,6 +770,9 @@ var nl = {
 	"drawing-tool-form-masks-clear": "Wissen",
 	"drawing-tool-form-masks-tooltip": "Selecteer een masker om je tekening bij te snijden",
 	"drawing-tool-form-masks-empty": "Geen maskers beschikbaar. Neem contact op met je beheerder.",
+	"drawing-tool-form-mask-no-overlap": "De tekening overlapt niet met het geselecteerde masker",
+	"drawing-tool-form-mask-clip-error": "De tekening kon niet worden bijgesneden met het geselecteerde masker",
+	"drawing-tool-form-mask-saved": "Opgeslagen masker",
 	"warning-event-button-add-drawing": "Voeg een tekening toe aan dit event. Wijs daarna individuele objecten toe aan elke waarschuwing",
 	"warning-event-button-assign-object": "Wijs een object uit de gekozen tekening toe aan deze waarschuwing",
 	"warning-event-objects-menu-title": "Objecten",
@@ -1068,6 +1074,9 @@ var fi = {
 	"drawing-tool-form-masks-clear": "ei käännetty",
 	"drawing-tool-form-masks-tooltip": "ei käännetty",
 	"drawing-tool-form-masks-empty": "ei käännetty",
+	"drawing-tool-form-mask-no-overlap": "ei käännetty",
+	"drawing-tool-form-mask-clip-error": "ei käännetty",
+	"drawing-tool-form-mask-saved": "ei käännetty",
 	"warning-event-button-add-drawing": "ei käännetty",
 	"warning-event-button-assign-object": "ei käännetty",
 	"warning-event-objects-menu-title": "ei käännetty",
@@ -1367,6 +1376,9 @@ var no = {
 	"drawing-tool-form-masks-clear": "ikke oversatt",
 	"drawing-tool-form-masks-tooltip": "ikke oversatt",
 	"drawing-tool-form-masks-empty": "ikke oversatt",
+	"drawing-tool-form-mask-no-overlap": "ikke oversatt",
+	"drawing-tool-form-mask-clip-error": "ikke oversatt",
+	"drawing-tool-form-mask-saved": "ikke oversatt",
 	"warning-event-button-add-drawing": "ikke oversatt",
 	"warning-event-button-assign-object": "ikke oversatt",
 	"warning-event-objects-menu-title": "Objekter",
@@ -1595,6 +1607,20 @@ function _regeneratorDefine(e, r, n, t) {
     }) : e[r] = n : (o("next", 0), o("throw", 1), o("return", 2));
   }, _regeneratorDefine(e, r, n, t);
 }
+function _toPrimitive(t, r) {
+  if ("object" != typeof t || !t) return t;
+  var e = t[Symbol.toPrimitive];
+  if (void 0 !== e) {
+    var i = e.call(t, r);
+    if ("object" != typeof i) return i;
+    throw new TypeError("@@toPrimitive must return a primitive value.");
+  }
+  return (String )(t);
+}
+function _toPropertyKey(t) {
+  var i = _toPrimitive(t, "string");
+  return "symbol" == typeof i ? i : i + "";
+}
 function _unsupportedIterableToArray(r, a) {
   if (r) {
     if ("string" == typeof r) return _arrayLikeToArray(r, a);
@@ -5724,6 +5750,7 @@ var AreaDrawingManagerConnect = function AreaDrawingManagerConnect(_ref2) {
     setSelectedDrawingId(drawingId);
   };
   useEffect(function () {
+    var _drawingDetails$trans, _drawingDetails$trans2;
     if (!selectedDrawingId || !drawingDetails || (drawingDetails == null ? void 0 : drawingDetails.id) !== selectedDrawingId || isFetchingDetails) {
       return;
     }
@@ -5732,7 +5759,7 @@ var AreaDrawingManagerConnect = function AreaDrawingManagerConnect(_ref2) {
       id: selectedDrawingId,
       drawingInstanceId: drawingDialogType
     }));
-    openDrawDialog(drawingDetails.geoJSON);
+    openDrawDialog((_drawingDetails$trans = (_drawingDetails$trans2 = drawingDetails.transformation) == null ? void 0 : _drawingDetails$trans2.original) != null ? _drawingDetails$trans : drawingDetails.geoJSON);
     setSelectedDrawingId(undefined);
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [selectedDrawingId, drawingDetails, dispatch, isFetchingDetails]);
@@ -6320,6 +6347,7 @@ var DrawingToolFormContentsNoMemo = function DrawingToolFormContentsNoMemo(_ref)
     geoJSONProperties = _ref.geoJSONProperties,
     masks = _ref.masks,
     isLoadingMasks = _ref.isLoadingMasks,
+    maskError = _ref.maskError,
     selectedMaskId = _ref.selectedMaskId,
     onSelectMask = _ref.onSelectMask,
     onHoverMask = _ref.onHoverMask;
@@ -6437,19 +6465,28 @@ var DrawingToolFormContentsNoMemo = function DrawingToolFormContentsNoMemo(_ref)
               }
             }
           })]
-        }), jsx(Grid, {
+        }), jsxs(Grid, {
           container: true,
           sx: {
             marginBottom: 1
           },
-          children: jsx(DrawingToolFormMasks, {
+          children: [jsx(DrawingToolFormMasks, {
             isDisabled: isLoading,
             isLoadingMasks: isLoadingMasks,
             masks: masks,
             onHoverMask: onHoverMask,
             onSelectMask: onSelectMask,
             selectedMaskId: selectedMaskId
-          })
+          }), maskError ? jsx(FormHelperText, {
+            "data-testid": "drawingToolForm-masks-error",
+            error: true,
+            sx: {
+              marginLeft: 0,
+              width: '100%'
+            },
+            variant: "filled",
+            children: t(maskError)
+          }) : null]
         }), jsx(Grid, {
           container: true,
           size: "grow",
@@ -6598,7 +6635,7 @@ var DrawingToolFormContentsNoMemo = function DrawingToolFormContentsNoMemo(_ref)
       },
       children: jsx(Button, {
         "data-testid": "saveDrawingFormButton",
-        disabled: isLoading || hasErrors,
+        disabled: isLoading || hasErrors || !!maskError,
         onClick: onSubmit,
         sx: {
           width: '100%',
@@ -6696,6 +6733,7 @@ var DrawingToolForm = function DrawingToolForm(_ref) {
     masks = _ref$masks === void 0 ? emptyMasks$1 : _ref$masks,
     _ref$isLoadingMasks = _ref.isLoadingMasks,
     isLoadingMasks = _ref$isLoadingMasks === void 0 ? false : _ref$isLoadingMasks,
+    maskError = _ref.maskError,
     selectedMaskId = _ref.selectedMaskId,
     _ref$onSelectMask = _ref.onSelectMask,
     onSelectMask = _ref$onSelectMask === void 0 ? noopSelectMask : _ref$onSelectMask,
@@ -6830,6 +6868,7 @@ var DrawingToolForm = function DrawingToolForm(_ref) {
     isInEditMode: isInEditMode,
     isLoading: isLoading,
     isLoadingMasks: isLoadingMasks,
+    maskError: maskError,
     masks: masks,
     onBlurName: onBlurName,
     onBlurObjectName: onBlurObjectName,
@@ -6865,6 +6904,265 @@ var Wrapper = function Wrapper(props) {
   });
 };
 
+var CLIPPED_RESULT_FILL_OPACITY = 0.4;
+var MASKED_FILL_OPACITY_KEY = 'maskedFillOpacity';
+var getDrawnFeatureIndexes = function getDrawnFeatureIndexes(geoJSON) {
+  return geoJSON.features.reduce(function (indexes, feature, index) {
+    return isGeoJSONGeometryEmpty(feature) ? indexes : [].concat(indexes, [index]);
+  }, []);
+};
+var getFeatureIndexesToHideFill = function getFeatureIndexesToHideFill(geoJSON) {
+  return getDrawnFeatureIndexes(geoJSON).filter(function (index) {
+    var _geoJSON$features$ind;
+    return ((_geoJSON$features$ind = geoJSON.features[index].properties) == null ? void 0 : _geoJSON$features$ind['fill-opacity']) !== 0;
+  });
+};
+var getFeatureIndexesToRestoreFill = function getFeatureIndexesToRestoreFill(geoJSON) {
+  return geoJSON.features.reduce(function (indexes, feature, index) {
+    var _feature$properties;
+    return ((_feature$properties = feature.properties) == null ? void 0 : _feature$properties[MASKED_FILL_OPACITY_KEY]) !== undefined ? [].concat(indexes, [index]) : indexes;
+  }, []);
+};
+var restoreMaskedFillProperties = function restoreMaskedFillProperties(properties) {
+  if ((properties == null ? void 0 : properties[MASKED_FILL_OPACITY_KEY]) === undefined) {
+    return properties;
+  }
+  var fillOpacity = properties[MASKED_FILL_OPACITY_KEY],
+    restProperties = _objectWithoutPropertiesLoose(properties, [MASKED_FILL_OPACITY_KEY].map(_toPropertyKey));
+  return fillOpacity === null ? omit(restProperties, 'fill-opacity') : Object.assign({}, restProperties, {
+    'fill-opacity': fillOpacity
+  });
+};
+var restoreMaskedFill = function restoreMaskedFill(geoJSON) {
+  return Object.assign({}, geoJSON, {
+    features: geoJSON.features.map(function (feature) {
+      return Object.assign({}, feature, {
+        properties: restoreMaskedFillProperties(feature.properties)
+      });
+    })
+  });
+};
+var maskPolygonCache = new WeakMap();
+var maskPartsCache = new WeakMap();
+var clippedGeometryCache = new WeakMap();
+var isPolygonFeature = function isPolygonFeature(feature) {
+  var _feature$geometry, _feature$geometry2;
+  return ((_feature$geometry = feature.geometry) == null ? void 0 : _feature$geometry.type) === 'Polygon' || ((_feature$geometry2 = feature.geometry) == null ? void 0 : _feature$geometry2.type) === 'MultiPolygon';
+};
+var getMaskPolygon = function getMaskPolygon(mask) {
+  var _polygons$;
+  var cachedMaskPolygon = maskPolygonCache.get(mask);
+  if (cachedMaskPolygon !== undefined) {
+    return cachedMaskPolygon;
+  }
+  var polygons = mask.features.filter(isPolygonFeature);
+  var maskPolygon = polygons.length > 1 ? union(featureCollection(polygons)) : (_polygons$ = polygons[0]) != null ? _polygons$ : null;
+  maskPolygonCache.set(mask, maskPolygon);
+  return maskPolygon;
+};
+var getMaskParts = function getMaskParts(mask) {
+  var cachedMaskParts = maskPartsCache.get(mask);
+  if (cachedMaskParts) {
+    return cachedMaskParts;
+  }
+  var maskParts = mask.features.filter(isPolygonFeature).map(function (polygon) {
+    return {
+      polygon: polygon,
+      bbox: bbox(polygon)
+    };
+  });
+  maskPartsCache.set(mask, maskParts);
+  return maskParts;
+};
+var padBBox = function padBBox(geometryBBox) {
+  return buffer(geometryBBox, Math.max(getWidth(geometryBBox), getHeight(geometryBBox)) * 0.01 + 1e-6);
+};
+var removeEmptyRings = function removeEmptyRings(polygon) {
+  var isRing = function isRing(ring) {
+    return ring.length > 3;
+  };
+  if (polygon.geometry.type === 'Polygon') {
+    return Object.assign({}, polygon, {
+      geometry: Object.assign({}, polygon.geometry, {
+        coordinates: polygon.geometry.coordinates.filter(isRing)
+      })
+    });
+  }
+  return Object.assign({}, polygon, {
+    geometry: Object.assign({}, polygon.geometry, {
+      coordinates: polygon.geometry.coordinates.map(function (rings) {
+        return rings.filter(isRing);
+      }).filter(function (rings) {
+        return rings.length > 0;
+      })
+    })
+  });
+};
+var getMaskPolygonInBBox = function getMaskPolygonInBBox(maskPolygon, maskBBox, geometryBBox) {
+  if (!intersects(maskBBox, geometryBBox)) {
+    return null;
+  }
+  var clippedMask = removeEmptyRings(bboxClip(maskPolygon, padBBox(geometryBBox)));
+  return clippedMask.geometry.coordinates.length ? clippedMask : null;
+};
+var isPointInMask = function isPointInMask(position, maskPolygon) {
+  return booleanPointInPolygon(position, maskPolygon);
+};
+var clipLine = function clipLine(coordinates, maskPolygon, splitterPolygon) {
+  var line = {
+    type: 'Feature',
+    properties: {},
+    geometry: {
+      type: 'LineString',
+      coordinates: coordinates
+    }
+  };
+  var outline = polygonToLine(splitterPolygon);
+  var outlines = outline.type === 'FeatureCollection' ? outline.features : [outline];
+  var segments = outlines.reduce(function (currentSegments, splitter) {
+    return currentSegments.flatMap(function (segment) {
+      var split = lineSplit(segment, splitter);
+      return split.features.length ? split.features : [segment];
+    });
+  }, [line]);
+  return segments.filter(function (segment) {
+    var midpoint = along(segment, length(segment) / 2);
+    return isPointInMask(midpoint.geometry.coordinates, maskPolygon);
+  }).map(function (segment) {
+    return segment.geometry.coordinates;
+  });
+};
+var isPointInAnyMaskPart = function isPointInAnyMaskPart(position, mask) {
+  return getMaskParts(mask).some(function (part) {
+    return isPointInMask(position, part.polygon);
+  });
+};
+var clipGeometry = function clipGeometry(geometry, mask) {
+  switch (geometry.type) {
+    case 'Polygon':
+    case 'MultiPolygon':
+      {
+        var _union$geometry, _union;
+        var geometryBBox = bbox(geometry);
+        var feature = {
+          type: 'Feature',
+          properties: {},
+          geometry: geometry
+        };
+        var clippedParts = getMaskParts(mask).reduce(function (result, part) {
+          var maskInBBox = getMaskPolygonInBBox(part.polygon, part.bbox, geometryBBox);
+          var clippedPart = maskInBBox && intersect(featureCollection([feature, maskInBBox]));
+          return clippedPart ? [].concat(result, [clippedPart]) : result;
+        }, []);
+        if (clippedParts.length <= 1) {
+          var _clippedParts$0$geome, _clippedParts$;
+          return (_clippedParts$0$geome = (_clippedParts$ = clippedParts[0]) == null ? void 0 : _clippedParts$.geometry) != null ? _clippedParts$0$geome : null;
+        }
+        return (_union$geometry = (_union = union(featureCollection(clippedParts))) == null ? void 0 : _union.geometry) != null ? _union$geometry : null;
+      }
+    case 'LineString':
+    case 'MultiLineString':
+      {
+        var maskPolygon = getMaskPolygon(mask);
+        var maskInBBox = maskPolygon && getMaskPolygonInBBox(maskPolygon, bbox(maskPolygon), bbox(geometry));
+        if (!maskPolygon || !maskInBBox) {
+          return null;
+        }
+        var lines = geometry.type === 'LineString' ? [geometry.coordinates] : geometry.coordinates;
+        var clipped = lines.flatMap(function (line) {
+          return clipLine(line, maskPolygon, maskInBBox);
+        });
+        if (clipped.length === 0) {
+          return null;
+        }
+        return clipped.length === 1 ? {
+          type: 'LineString',
+          coordinates: clipped[0]
+        } : {
+          type: 'MultiLineString',
+          coordinates: clipped
+        };
+      }
+    case 'Point':
+      return isPointInAnyMaskPart(geometry.coordinates, mask) ? geometry : null;
+    case 'MultiPoint':
+      {
+        var points = geometry.coordinates.filter(function (point) {
+          return isPointInAnyMaskPart(point, mask);
+        });
+        return points.length ? {
+          type: 'MultiPoint',
+          coordinates: points
+        } : null;
+      }
+    default:
+      return geometry;
+  }
+};
+var getClippedGeometry = function getClippedGeometry(geometry, mask) {
+  var _clippedGeometryCache;
+  var cachedByMask = (_clippedGeometryCache = clippedGeometryCache.get(geometry)) != null ? _clippedGeometryCache : new WeakMap();
+  if (cachedByMask.has(mask)) {
+    return cachedByMask.get(mask);
+  }
+  var clippedGeometry = clipGeometry(geometry, mask);
+  cachedByMask.set(mask, clippedGeometry);
+  clippedGeometryCache.set(geometry, cachedByMask);
+  return clippedGeometry;
+};
+var clipGeoJSONWithMask = function clipGeoJSONWithMask(geoJSON, mask) {
+  if (getMaskParts(mask).length === 0) {
+    return Object.assign({}, geoJSON, {
+      features: []
+    });
+  }
+  var features = geoJSON.features.reduce(function (result, feature) {
+    if (!feature.geometry || isGeoJSONGeometryEmpty(feature)) {
+      return result;
+    }
+    var geometry = getClippedGeometry(feature.geometry, mask);
+    return geometry ? [].concat(result, [Object.assign({}, feature, {
+      geometry: geometry
+    })]) : result;
+  }, []);
+  return Object.assign({}, geoJSON, {
+    features: features
+  });
+};
+var findMaskForTransformation = function findMaskForTransformation(masks, transformation) {
+  if (!transformation) {
+    return undefined;
+  }
+  var getGeometries = function getGeometries(geoJSON) {
+    return geoJSON.features.map(function (feature) {
+      return feature.geometry;
+    });
+  };
+  var transformationGeometries = getGeometries(transformation.mask);
+  return masks.find(function (mask) {
+    return isEqual(getGeometries(mask.geoJSON), transformationGeometries);
+  });
+};
+var buildClippedHighlightGeoJSON = function buildClippedHighlightGeoJSON(clipped) {
+  return Object.assign({}, clipped, {
+    features: clipped.features.map(function (feature, index) {
+      var _feature$id;
+      return Object.assign({}, feature, {
+        id: "mask-result-" + ((_feature$id = feature.id) != null ? _feature$id : index),
+        properties: Object.assign({}, feature.properties, {
+          isReadonly: true,
+          mapFeatureClass: 'default',
+          isSelected: false,
+          fill: '#186DFF',
+          'fill-opacity': CLIPPED_RESULT_FILL_OPACITY,
+          'stroke-width': 0,
+          'stroke-opacity': 0
+        })
+      });
+    })
+  });
+};
+
 /* *
  * Licensed under the Apache License, Version 2.0 (the "License");
  * you may not use this file except in compliance with the License.
@@ -6882,10 +7180,13 @@ var Wrapper = function Wrapper(props) {
  * Copyright 2026 - Finnish Meteorological Institute (FMI)
  * Copyright 2026 - The Norwegian Meteorological Institute (MET Norway)
  * */
-var MASK_PREVIEW_FILL_OPACITY = 0.1;
+var MASK_PREVIEW_FILL_OPACITY = 0;
 var getMaskPreviewLayerId = function getMaskPreviewLayerId(mapId) {
   return "drawing-mask-preview-" + mapId;
 };
+var getClippedResultLayerId = function getClippedResultLayerId(mapId) {
+  return "drawing-mask-result-" + mapId;
+};
 var buildMaskPreviewGeoJSON = function buildMaskPreviewGeoJSON(mask) {
   return Object.assign({}, mask.geoJSON, {
     features: mask.geoJSON.features.map(function (feature, index) {
@@ -6896,21 +7197,19 @@ var buildMaskPreviewGeoJSON = function buildMaskPreviewGeoJSON(mask) {
           isReadonly: true,
           mapFeatureClass: 'default',
           isSelected: false,
-          fill: '#186DFF',
+          // TODO https://gitlab.com/opengeoweb/opengeoweb/-/work_items/7413: remove this property and make the hover effect based on selectionType
+          selectionType: 'fir',
+          fill: FEATURE_DRAW_SECONDARY_STROKE_COLOR,
           'fill-opacity': MASK_PREVIEW_FILL_OPACITY,
-          stroke: '#006CFD',
-          'stroke-width': 2
+          'stroke-width': 3,
+          stroke: '#F59E0B'
         })
       });
     })
   });
 };
-var useMaskPreviewLayer = function useMaskPreviewLayer(mapId, mask) {
+var useReadonlyFeatureLayer = function useReadonlyFeatureLayer(mapId, layerId, geojson) {
   var dispatch = useDispatch();
-  var layerId = getMaskPreviewLayerId(mapId);
-  var geojson = React.useMemo(function () {
-    return mask ? buildMaskPreviewGeoJSON(mask) : emptyGeoJSON;
-  }, [mask]);
   React.useEffect(function () {
     if (!mapId) {
       return undefined;
@@ -6943,6 +7242,18 @@ var useMaskPreviewLayer = function useMaskPreviewLayer(mapId, mask) {
     }
   }, [dispatch, geojson, layerId, mapId]);
 };
+var useMaskPreviewLayer = function useMaskPreviewLayer(mapId, mask) {
+  var geojson = React.useMemo(function () {
+    return mask ? buildMaskPreviewGeoJSON(mask) : emptyGeoJSON;
+  }, [mask]);
+  useReadonlyFeatureLayer(mapId, getMaskPreviewLayerId(mapId), geojson);
+};
+var useClippedResultLayer = function useClippedResultLayer(mapId, clippedGeoJSON) {
+  var geojson = React.useMemo(function () {
+    return clippedGeoJSON ? buildClippedHighlightGeoJSON(clippedGeoJSON) : emptyGeoJSON;
+  }, [clippedGeoJSON]);
+  useReadonlyFeatureLayer(mapId, getClippedResultLayerId(mapId), geojson);
+};
 
 /* *
  * Licensed under the Apache License, Version 2.0 (the "License");
@@ -7018,27 +7329,129 @@ var useSelectDrawFeature = function useSelectDrawFeature(layerId) {
 };
 
 var emptyMasks = [];
-var useDrawingToolMasks = function useDrawingToolMasks() {
+var SAVED_MASK_ID = 'saved-mask';
+var useRestoreSavedMask = function useRestoreSavedMask(drawingId, masks, isLoadingMasks, onRestoreMask) {
+  var _useWarningsTranslati = useWarningsTranslation(),
+    t = _useWarningsTranslati.t;
+  var _useDrawingDetails = useDrawingDetails(drawingId),
+    drawingDetails = _useDrawingDetails.data;
+  var restoredDrawingIdRef = React.useRef(undefined);
+  var _React$useState = React.useState(),
+    unmatchedSavedMask = _React$useState[0],
+    setUnmatchedSavedMask = _React$useState[1];
+  React.useEffect(function () {
+    if (!drawingId || restoredDrawingIdRef.current === drawingId || (drawingDetails == null ? void 0 : drawingDetails.id) !== drawingId || isLoadingMasks) {
+      return;
+    }
+    restoredDrawingIdRef.current = drawingId;
+    var savedMask = findMaskForTransformation(masks, drawingDetails.transformation);
+    if (savedMask) {
+      onRestoreMask(savedMask.id);
+      return;
+    }
+    if (drawingDetails.transformation) {
+      setUnmatchedSavedMask({
+        id: SAVED_MASK_ID,
+        objectName: t('drawing-tool-form-mask-saved'),
+        geoJSON: drawingDetails.transformation.mask,
+        lastUpdatedTime: drawingDetails.lastUpdatedTime,
+        scope: 'user'
+      });
+      onRestoreMask(SAVED_MASK_ID);
+    }
+  }, [drawingDetails, drawingId, isLoadingMasks, masks, onRestoreMask, t]);
+  return unmatchedSavedMask;
+};
+var useClippedGeoJSON = function useClippedGeoJSON(mapId, geoJSON, mask) {
+  var result = React.useMemo(function () {
+    if (!mask || !geoJSON) {
+      return {};
+    }
+    try {
+      return {
+        clippedGeoJSON: clipGeoJSONWithMask(geoJSON, mask.geoJSON)
+      };
+    } catch (_unused) {
+      return {
+        hasClipError: true
+      };
+    }
+  }, [geoJSON, mask]);
+  useClippedResultLayer(mapId, result.clippedGeoJSON);
+  return result;
+};
+var getMaskError = function getMaskError(_ref, geoJSON) {
+  var clippedGeoJSON = _ref.clippedGeoJSON,
+    hasClipError = _ref.hasClipError;
+  if (hasClipError) {
+    return 'drawing-tool-form-mask-clip-error';
+  }
+  var hasDrawnFeatures = !!geoJSON && getDrawnFeatureIndexes(geoJSON).length > 0;
+  return clippedGeoJSON && hasDrawnFeatures && !clippedGeoJSON.features.length ? 'drawing-tool-form-mask-no-overlap' : undefined;
+};
+var useHideFillOutsideMask = function useHideFillOutsideMask(layerId, geoJSON, isMaskSelected) {
+  var dispatch = useDispatch();
+  React.useEffect(function () {
+    if (!layerId || !geoJSON) {
+      return;
+    }
+    if (isMaskSelected) {
+      getFeatureIndexesToHideFill(geoJSON).forEach(function (targetFeatureIndex) {
+        var _geoJSON$features$tar, _geoJSON$features$tar2, _properties;
+        dispatch(layerActions.updateFeatureProperties({
+          layerId: layerId,
+          properties: (_properties = {
+            'fill-opacity': 0
+          }, _properties[MASKED_FILL_OPACITY_KEY] = (_geoJSON$features$tar = (_geoJSON$features$tar2 = geoJSON.features[targetFeatureIndex].properties) == null ? void 0 : _geoJSON$features$tar2['fill-opacity']) != null ? _geoJSON$features$tar : null, _properties),
+          targetFeatureIndex: targetFeatureIndex,
+          origin: 'DrawingToolFormConnect'
+        }));
+      });
+      return;
+    }
+    getFeatureIndexesToRestoreFill(geoJSON).forEach(function (targetFeatureIndex) {
+      var _geoJSON$features$tar3, _geoJSON$features$tar4, _properties2;
+      dispatch(layerActions.updateFeatureProperties({
+        layerId: layerId,
+        properties: (_properties2 = {
+          'fill-opacity': (_geoJSON$features$tar3 = (_geoJSON$features$tar4 = geoJSON.features[targetFeatureIndex].properties) == null ? void 0 : _geoJSON$features$tar4[MASKED_FILL_OPACITY_KEY]) != null ? _geoJSON$features$tar3 : undefined
+        }, _properties2[MASKED_FILL_OPACITY_KEY] = undefined, _properties2),
+        targetFeatureIndex: targetFeatureIndex,
+        origin: 'DrawingToolFormConnect'
+      }));
+    });
+  }, [dispatch, geoJSON, isMaskSelected, layerId]);
+};
+var useDrawingToolMasks = function useDrawingToolMasks(drawingId, geoJSON) {
+  var _masks$find;
   var dispatch = useDispatch();
   var _useDrawings = useDrawings({
       keywords: 'mask'
     }),
     _useDrawings$data = _useDrawings.data,
-    masks = _useDrawings$data === void 0 ? emptyMasks : _useDrawings$data,
+    fetchedMasks = _useDrawings$data === void 0 ? emptyMasks : _useDrawings$data,
     isLoading = _useDrawings.isLoading;
-  var _React$useState = React.useState(),
-    selectedMaskId = _React$useState[0],
-    setSelectedMaskId = _React$useState[1];
   var _React$useState2 = React.useState(),
-    hoveredMaskId = _React$useState2[0],
-    setHoveredMaskId = _React$useState2[1];
+    selectedMaskId = _React$useState2[0],
+    setSelectedMaskId = _React$useState2[1];
+  var _React$useState3 = React.useState(),
+    hoveredMaskId = _React$useState3[0],
+    setHoveredMaskId = _React$useState3[1];
   var mapId = useSelector(function (store) {
     return uiSelectors.getDialogMapId(store, drawingDialogType);
   });
-  var previewMask = masks.find(function (mask) {
-    return mask.id === (hoveredMaskId != null ? hoveredMaskId : selectedMaskId);
+  var unmatchedSavedMask = useRestoreSavedMask(drawingId, fetchedMasks, isLoading, setSelectedMaskId);
+  var masks = React.useMemo(function () {
+    return unmatchedSavedMask ? [].concat(fetchedMasks, [unmatchedSavedMask]) : fetchedMasks;
+  }, [fetchedMasks, unmatchedSavedMask]);
+  var selectedMask = masks.find(function (mask) {
+    return mask.id === selectedMaskId;
   });
+  var previewMask = (_masks$find = masks.find(function (mask) {
+    return mask.id === hoveredMaskId;
+  })) != null ? _masks$find : selectedMask;
   useMaskPreviewLayer(mapId, previewMask);
+  var clipResult = useClippedGeoJSON(mapId, geoJSON, selectedMask);
   var onSelectMask = React.useCallback(function (maskId) {
     setSelectedMaskId(maskId);
     dispatch(warningsDrawingsActions.setFormDirty({
@@ -7049,12 +7462,15 @@ var useDrawingToolMasks = function useDrawingToolMasks() {
   return {
     masks: masks,
     isLoading: isLoading,
+    selectedMask: selectedMask,
     selectedMaskId: selectedMaskId,
+    maskError: getMaskError(clipResult, geoJSON),
     onSelectMask: onSelectMask,
     onHoverMask: setHoveredMaskId
   };
 };
 var DrawingToolFormConnect = function DrawingToolFormConnect() {
+  var _drawing$id;
   var dispatch = useDispatch();
   var _useMutateSaveOrUpdat = useMutateSaveOrUpdateDrawing(),
     saveOrUpdateDrawing = _useMutateSaveOrUpdat.mutate,
@@ -7081,29 +7497,65 @@ var DrawingToolFormConnect = function DrawingToolFormConnect() {
     return getWarningFormDirty(store, drawingDialogType);
   });
   usePreventBrowserClose(isFormDirty || isLayerInEditMode);
-  var _useDrawingToolMasks = useDrawingToolMasks(),
+  var _useDrawingToolMasks = useDrawingToolMasks((_drawing$id = drawing == null ? void 0 : drawing.id) != null ? _drawing$id : '', layerFeatureGeoJSON),
     masks = _useDrawingToolMasks.masks,
     isLoadingMasks = _useDrawingToolMasks.isLoading,
+    selectedMask = _useDrawingToolMasks.selectedMask,
     selectedMaskId = _useDrawingToolMasks.selectedMaskId,
+    maskError = _useDrawingToolMasks.maskError,
     onSelectMask = _useDrawingToolMasks.onSelectMask,
     onHoverMask = _useDrawingToolMasks.onHoverMask;
+  useHideFillOutsideMask(drawTool == null ? void 0 : drawTool.geoJSONLayerId, layerFeatureGeoJSON, !!selectedMask);
+  var formGeoJSONRef = React.useRef(undefined);
+  var formGeoJSON = React.useMemo(function () {
+    var restoredGeoJSON = layerFeatureGeoJSON && restoreMaskedFill(layerFeatureGeoJSON);
+    if (!isEqual(formGeoJSONRef.current, restoredGeoJSON)) {
+      formGeoJSONRef.current = restoredGeoJSON;
+    }
+    return formGeoJSONRef.current;
+  }, [layerFeatureGeoJSON]);
+  var geoJSONProperties = React.useMemo(function () {
+    return restoreMaskedFillProperties(featureLayerGeoJSONProperties);
+  }, [featureLayerGeoJSONProperties]);
   var onSubmitForm = React.useCallback(function (formValues) {
+    var original = formValues.geoJSON;
     saveOrUpdateDrawing({
       id: drawing == null ? void 0 : drawing.id,
-      data: {
-        geoJSON: formValues.geoJSON,
+      data: Object.assign({
+        geoJSON: selectedMask ? clipGeoJSONWithMask(original, selectedMask.geoJSON) : original,
         objectName: formValues.objectName,
         scope: 'user'
-      }
+      }, selectedMask && {
+        transformation: {
+          mask: selectedMask.geoJSON,
+          original: original
+        }
+      })
     });
-  }, [drawing == null ? void 0 : drawing.id, saveOrUpdateDrawing]);
+  }, [drawing == null ? void 0 : drawing.id, saveOrUpdateDrawing, selectedMask]);
   var onChangeGeoJSONProperties = React.useCallback(function (properties) {
+    var layerId = drawTool == null ? void 0 : drawTool.geoJSONLayerId;
     dispatch(layerActions.updateFeatureProperties({
-      layerId: drawTool == null ? void 0 : drawTool.geoJSONLayerId,
+      layerId: layerId,
       properties: properties,
       origin: 'DrawingToolFormConnect'
     }));
-  }, [dispatch, drawTool == null ? void 0 : drawTool.geoJSONLayerId]);
+    var fillOpacity = properties == null ? void 0 : properties['fill-opacity'];
+    if (!selectedMask || typeof fillOpacity !== 'number') {
+      return;
+    }
+    getDrawnFeatureIndexes(layerFeatureGeoJSON != null ? layerFeatureGeoJSON : emptyGeoJSON).forEach(function (targetFeatureIndex) {
+      var _properties3;
+      dispatch(layerActions.updateFeatureProperties({
+        layerId: layerId,
+        properties: (_properties3 = {
+          'fill-opacity': 0
+        }, _properties3[MASKED_FILL_OPACITY_KEY] = fillOpacity, _properties3),
+        targetFeatureIndex: targetFeatureIndex,
+        origin: 'DrawingToolFormConnect'
+      }));
+    });
+  }, [dispatch, drawTool == null ? void 0 : drawTool.geoJSONLayerId, layerFeatureGeoJSON, selectedMask]);
   var onChangeObjectName = React.useCallback(function (featureId, objectName) {
     var _layerFeatureGeoJSON$;
     var featureIndex = ((_layerFeatureGeoJSON$ = layerFeatureGeoJSON == null ? void 0 : layerFeatureGeoJSON.features) != null ? _layerFeatureGeoJSON$ : []).findIndex(function (feature) {
@@ -7167,12 +7619,13 @@ var DrawingToolFormConnect = function DrawingToolFormConnect() {
     dialogError: error == null ? void 0 : error.message,
     drawModes: drawTool == null ? void 0 : drawTool.drawModes,
     drawingName: drawing == null ? void 0 : drawing.objectName,
-    geoJSON: layerFeatureGeoJSON,
-    geoJSONProperties: featureLayerGeoJSONProperties,
+    geoJSON: formGeoJSON,
+    geoJSONProperties: geoJSONProperties,
     id: drawing == null ? void 0 : drawing.id,
     isInEditMode: isLayerInEditMode,
     isLoading: isPending,
     isLoadingMasks: isLoadingMasks,
+    maskError: maskError,
     masks: masks,
     onChangeDrawMode: onChangeDrawMode,
     onChangeName: onChangeName,

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

@@ -26,6 +26,7 @@ export interface DrawingToolFormComponentProps {
     geoJSON: FeatureCollection<Geometry, GeoJsonProperties> | undefined;
     masks?: DrawingListItem[];
     isLoadingMasks?: boolean;
+    maskError?: string;
     selectedMaskId?: string;
     onSelectMask?: (maskId?: string) => void;
     onHoverMask?: (maskId?: string) => void;

package/dist/src/lib/components/DrawingToolForm/DrawingToolFormConnect.d.ts

@@ -1,2 +1,3 @@
 import React from 'react';
+export declare const SAVED_MASK_ID = "saved-mask";
 export declare const DrawingToolFormConnect: React.FC;

package/dist/src/lib/components/DrawingToolForm/DrawingToolFormContents.d.ts

@@ -37,6 +37,7 @@ export interface DrawingToolFormContentsProps {
     geoJSONProperties?: GeoJSON.GeoJsonProperties;
     masks: DrawingListItem[];
     isLoadingMasks: boolean;
+    maskError?: string;
     selectedMaskId?: string;
     onSelectMask: (maskId?: string) => void;
     onHoverMask: (maskId?: string) => void;

package/dist/src/lib/components/DrawingToolForm/maskUtils.d.ts

@@ -0,0 +1,15 @@
+import type { Feature, FeatureCollection, MultiPolygon, Polygon } from 'geojson';
+import type { DrawingListItem, DrawingTransformation } from '../../store/warningsDrawings/types';
+type MaskPolygon = Feature<Polygon | MultiPolygon>;
+export declare const CLIPPED_RESULT_FILL_OPACITY = 0.4;
+export declare const MASKED_FILL_OPACITY_KEY = "maskedFillOpacity";
+export declare const getDrawnFeatureIndexes: (geoJSON: FeatureCollection) => number[];
+export declare const getFeatureIndexesToHideFill: (geoJSON: FeatureCollection) => number[];
+export declare const getFeatureIndexesToRestoreFill: (geoJSON: FeatureCollection) => number[];
+export declare const restoreMaskedFillProperties: (properties: GeoJSON.GeoJsonProperties) => GeoJSON.GeoJsonProperties;
+export declare const restoreMaskedFill: (geoJSON: FeatureCollection) => FeatureCollection;
+export declare const getMaskPolygon: (mask: FeatureCollection) => MaskPolygon | null;
+export declare const clipGeoJSONWithMask: (geoJSON: FeatureCollection, mask: FeatureCollection) => FeatureCollection;
+export declare const findMaskForTransformation: (masks: DrawingListItem[], transformation?: DrawingTransformation) => DrawingListItem | undefined;
+export declare const buildClippedHighlightGeoJSON: (clipped: FeatureCollection) => FeatureCollection;
+export {};

package/dist/src/lib/components/DrawingToolForm/useMaskPreviewLayer.d.ts

@@ -1,5 +1,7 @@
 import type { DrawingListItem } from '../../store/warningsDrawings/types';
-export declare const MASK_PREVIEW_FILL_OPACITY = 0.1;
+export declare const MASK_PREVIEW_FILL_OPACITY = 0;
 export declare const getMaskPreviewLayerId: (mapId: string) => string;
+export declare const getClippedResultLayerId: (mapId: string) => string;
 export declare const buildMaskPreviewGeoJSON: (mask: DrawingListItem) => GeoJSON.FeatureCollection;
 export declare const useMaskPreviewLayer: (mapId: string, mask?: DrawingListItem) => void;
+export declare const useClippedResultLayer: (mapId: string, clippedGeoJSON?: GeoJSON.FeatureCollection) => void;

package/dist/src/lib/store/warningsDrawings/types.d.ts

@@ -12,10 +12,15 @@ export interface BaseDrawingListItem {
     objectName: string;
     lastUpdatedTime: string;
 }
+export interface DrawingTransformation {
+    mask: GeoJSON.FeatureCollection;
+    original: GeoJSON.FeatureCollection;
+}
 export interface DrawingListItem extends BaseDrawingListItem {
     scope: DrawingScope;
     geoJSON: GeoJSON.FeatureCollection;
     keywords?: string;
+    transformation?: DrawingTransformation;
 }
 export interface AreaListItem extends BaseDrawingListItem {
     scope: DrawingScope;

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@opengeoweb/warnings",
-    "version": "19.6.1-nightly-20260917",
+    "version": "20.0.0",
     "description": "GeoWeb warinings library for the opengeoweb project",
     "license": "Apache-2.0",
     "repository": {
@@ -20,24 +20,24 @@
         }
     },
     "dependencies": {
-        "@opengeoweb/api": "19.6.1-nightly-20260917",
-        "@opengeoweb/shared": "19.6.1-nightly-20260917",
-        "@opengeoweb/store": "19.6.1-nightly-20260917",
-        "@opengeoweb/webmap-react": "19.6.1-nightly-20260917",
+        "@opengeoweb/api": "20.0.0",
+        "@opengeoweb/shared": "20.0.0",
+        "@opengeoweb/store": "20.0.0",
+        "@opengeoweb/webmap-react": "20.0.0",
         "@tanstack/react-query": "^5.85.5",
         "react-redux": "^9.2.0",
-        "@opengeoweb/theme": "19.6.1-nightly-20260917",
-        "@opengeoweb/form-fields": "19.6.1-nightly-20260917",
+        "@opengeoweb/theme": "20.0.0",
+        "@opengeoweb/form-fields": "20.0.0",
         "react-hook-form": "^7.50.1",
         "lodash": "^4.18.1",
         "@reduxjs/toolkit": "^2.6.1",
-        "@opengeoweb/snackbar": "19.6.1-nightly-20260917",
+        "@opengeoweb/snackbar": "20.0.0",
         "react-window": "^2.2.6",
         "axios": "^1.18.0",
-        "@opengeoweb/core": "19.6.1-nightly-20260917",
-        "@opengeoweb/webmap": "19.6.1-nightly-20260917",
-        "@opengeoweb/authentication": "19.6.1-nightly-20260917",
-        "@opengeoweb/sigmet-airmet": "19.6.1-nightly-20260917",
+        "@opengeoweb/core": "20.0.0",
+        "@opengeoweb/webmap": "20.0.0",
+        "@opengeoweb/authentication": "20.0.0",
+        "@opengeoweb/sigmet-airmet": "20.0.0",
         "react-i18next": "^15.1.1",
         "i18next": "^25.0.1",
         "@mui/material": "^9.0.1",