@opengeoweb/webmap-react 13.1.0 → 13.2.1

package/index.esm.js

@@ -17,8 +17,8 @@ import { useTranslation } from 'react-i18next';
 import { Paper, Box, Typography, useTheme, Grid, TextField, FormControl, InputLabel, Select, MenuItem, Icon as Icon$2, FormLabel, Switch, styled, Slider } from '@mui/material';
 import { useQuery } from '@tanstack/react-query';
 import { Style, Icon as Icon$1, Circle, Stroke, Fill, Text } from 'ol/style';
-import { Point, MultiPoint, Polygon } from 'ol/geom';
-import { arrowUpPath, Home, Add, Minus, List, Delete, Edit, DrawRegion, DrawPolygon, Location, DrawFIRLand, ArrowUp, Equalizer, DimensionsElevation, Link, LinkOff, Info, DimensionsOther, DimensionsRefTime, DimensionsTime, locationPath } from '@opengeoweb/theme';
+import { Point, MultiPoint, LineString, Polygon } from 'ol/geom';
+import { arrowUpPath, Home, Add, Minus, List, Delete, Edit, DrawRegion, DrawPolygon, Location, DrawFIRLand, ArrowUp, SandStorm, Equalizer, DimensionsElevation, Link, LinkOff, Info, DimensionsOther, DimensionsRefTime, DimensionsTime, locationPath } from '@opengeoweb/theme';
 import { http, HttpResponse } from 'msw';
 import proj4 from 'proj4';
 import * as turf from '@turf/turf';
@@ -11668,6 +11668,7 @@ var DRAWMODE;
   DRAWMODE["MULTIPOINT"] = "MULTIPOINT";
   DRAWMODE["POINT"] = "POINT";
   DRAWMODE["LINESTRING"] = "LINESTRING";
+  DRAWMODE["SMOOTHLINE"] = "SMOOTHLINE";
 })(DRAWMODE || (DRAWMODE = {}));
 
 var defaultIntersectionStyleProperties = _objectSpread2(_objectSpread2({}, defaultGeoJSONStyleProperties), {}, {
@@ -11961,6 +11962,9 @@ var getToolIcon = function getToolIcon(selectionType) {
   if (selectionType === customLineButton.selectionType) {
     return jsx(ArrowUp, {});
   }
+  if (selectionType === smoothLineButton.selectionType) {
+    return jsx(SandStorm, {});
+  }
   return jsx("div", {});
 };
 // custom buttons
@@ -12164,6 +12168,18 @@ var basicExampleMultipleShapeWithValuesDrawOptions = _objectSpread2(_objectSprea
     }]
   }
 });
+var smoothLineButton = {
+  drawModeId: 'tool-smooth-line',
+  value: DRAWMODE.SMOOTHLINE,
+  title: 'Smooth LineString',
+  shape: emptyLineString,
+  isSelectable: true,
+  selectionType: 'smooth-line'
+};
+var basicExampleSmoothLineOptions = {
+  shouldAllowMultipleShapes: true,
+  defaultDrawModes: [].concat(_toConsumableArray(defaultModes), [smoothLineButton])
+};
 
 var getIntersectionToolIcon = function getIntersectionToolIcon(selectionType) {
   var defaultIcon = getIcon(selectionType);
@@ -16055,12 +16071,30 @@ var genericOpenLayersFeatureStyle = function genericOpenLayersFeatureStyle(featu
   var props = feature.getProperties();
   var fill = props.fill,
     stroke = props.stroke,
+    strokeOpacity = props['stroke-opacity'],
+    strokeWidth = props['stroke-width'],
     hover = props.hover,
     mapFeatureClass = props.mapFeatureClass,
     showNameOnHover = props.showNameOnHover,
     name = props.name,
     geometry = props.geometry,
     selectionType = props.selectionType;
+  if (selectionType === 'smooth-line') {
+    var geom = feature.getGeometry();
+    if (geom instanceof LineString) {
+      var coords = geom.getCoordinates();
+      var smoothed = catmullRomSpline(coords, 16);
+      // Smoothed line
+      return new Style$1({
+        geometry: new LineString(smoothed),
+        stroke: new Stroke({
+          width: strokeWidth || 3,
+          color: geowebColorToOpenLayersColor(stroke, strokeOpacity || 1)
+        })
+      });
+    }
+    return undefined;
+  }
   var shouldHighlight = mapFeatureClass !== MapFeatureClass.ObservationStation && !showNameOnHover && selectionType !== 'fir';
   // Highlight map polygons on hover
   if (hover && shouldHighlight) {
@@ -16119,6 +16153,57 @@ var drawPolygonLikeFeatureStyle = function drawPolygonLikeFeatureStyle(feature)
     }
   })];
 };
+// Simple Catmull-Rom spline smoothing
+var catmullRomSpline = function catmullRomSpline(points) {
+  var numPoints = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 16;
+  var result = [];
+  if (points.length < 2) {
+    return points;
+  }
+  for (var i = 0; i < points.length - 1; i += 1) {
+    var _points, _points2;
+    var p0 = (_points = points[i - 1]) !== null && _points !== void 0 ? _points : points[i];
+    var p1 = points[i];
+    var p2 = points[i + 1];
+    var p3 = (_points2 = points[i + 2]) !== null && _points2 !== void 0 ? _points2 : p2;
+    // always include the control point
+    result.push(p1);
+    for (var pointIndex = 1; pointIndex < numPoints; pointIndex += 1) {
+      var t = pointIndex / numPoints;
+      var t2 = t * t;
+      var t3 = t2 * t;
+      var x = 0.5 * (2 * p1[0] + (-p0[0] + p2[0]) * t + (2 * p0[0] - 5 * p1[0] + 4 * p2[0] - p3[0]) * t2 + (-p0[0] + 3 * p1[0] - 3 * p2[0] + p3[0]) * t3);
+      var y = 0.5 * (2 * p1[1] + (-p0[1] + p2[1]) * t + (2 * p0[1] - 5 * p1[1] + 4 * p2[1] - p3[1]) * t2 + (-p0[1] + 3 * p1[1] - 3 * p2[1] + p3[1]) * t3);
+      result.push([x, y]);
+    }
+  }
+  // include the very last control point
+  result.push(points[points.length - 1]);
+  return result;
+};
+var smoothLineLikeFeatureStyle = function smoothLineLikeFeatureStyle(feature) {
+  var props = feature.getProperties();
+  var stroke = props.stroke,
+    strokeOpacity = props['stroke-opacity'],
+    strokeWidth = props['stroke-width'];
+  var geom = feature.getGeometry();
+  if (geom instanceof LineString) {
+    var coords = geom.getCoordinates();
+    var smoothed = catmullRomSpline(coords, 16);
+    return [
+    // Smoothed line
+    new Style$1({
+      geometry: new LineString(smoothed),
+      stroke: new Stroke({
+        width: strokeWidth || 3,
+        color: geowebColorToOpenLayersColor(stroke || '#ff7800', strokeOpacity || 1)
+      })
+    }),
+    // Vertices
+    FEATURE_VERTICES_EDIT_HANDLES];
+  }
+  return undefined;
+};
 var drawPointLikeFeatureStyle = ICON_LOCATIONMARKER_MODIFY;
 var modifyPolygonLikeFeatureStyle = [
 // Area
@@ -16133,6 +16218,7 @@ var drawStyles = {
   POLYGON: drawPolygonLikeFeatureStyle,
   BOX: drawPolygonLikeFeatureStyle,
   LINESTRING: drawPolygonLikeFeatureStyle,
+  SMOOTHLINE: smoothLineLikeFeatureStyle,
   POINT: drawPointLikeFeatureStyle,
   MULTIPOINT: drawPointLikeFeatureStyle,
   DELETE: [],
@@ -16142,6 +16228,7 @@ var modifyStyles = {
   POLYGON: modifyPolygonLikeFeatureStyle,
   BOX: modifyPolygonLikeFeatureStyle,
   LINESTRING: modifyPolygonLikeFeatureStyle,
+  SMOOTHLINE: smoothLineLikeFeatureStyle,
   POINT: [modifyPointLikeFeatureStyle],
   MULTIPOINT: [modifyPointLikeFeatureStyle],
   DELETE: [],
@@ -16163,6 +16250,10 @@ var createDrawOperation = function createDrawOperation(type) {
       return {
         type: 'LineString'
       };
+    case 'SMOOTHLINE':
+      return {
+        type: 'LineString'
+      };
     case 'POLYGON':
     default:
       return {
@@ -16229,6 +16320,8 @@ var selectionTypeToDrawModeValue = function selectionTypeToDrawModeValue(selecti
     case 'linestring':
     case 'custom-line':
       return DRAWMODE.LINESTRING;
+    case 'smooth-line':
+      return DRAWMODE.SMOOTHLINE;
     case 'delete':
       return 'DELETE';
     case 'fir':
@@ -16561,4 +16654,4 @@ var getLayerUpdateInfo = function getLayerUpdateInfo(wmLayer, mapId) {
   return updateObject;
 };
 
-export { BaseLayerType, ClickOnMapTool, DRAWMODE, DefaultBaseLayers, DimensionSelectButton, DimensionSelectDialog, DimensionSelectSlider, EditModeButton as EditModeButtonField, FEATURE_FILL, FEATURE_STROKE, FEATURE_STROKE_EDIT, FEATURE_VERTICES_EDIT_HANDLES, FEATURE_VERTICE_HANDLE_IMAGE, FEATURE_VERTICE_IMAGE, FeatureLayer, FeatureLayers, GeoJSONTextField, ICON_LOCATIONMARKER, ICON_LOCATIONMARKER_MODIFY, IntersectionSelect, LayerInfoButton, LayerInfoDialog, LayerInfoLegend, LayerInfoList, LayerInfoText, Legend, LegendButton, LegendDialog, LegendLayout, MapContext, MapControlButton, MapControls, MapDimensionSelect, MapFeatureClass, MapTime, MapWarningProperties, NEW_FEATURE_CREATED, NEW_LINESTRING_CREATED, NEW_POINT_CREATED, OpenLayersFeatureLayer, OpenLayersGetFeatureInfo, OpenLayersLayer, OpenLayersMapDraw, OpenLayersMapView, OpenLayersZoomControl, Proj4js, SelectField, StoryLayoutGrid, TimeAwareEDRLocationLayer, TimeContext, TimeawareImageSource, TimeawareImageSourceWMSLayer, WEBMAP_REACT_NAMESPACE, WMSLayer, WMTSLayer, XYZLayer, ZoomControls, addFeatureProperties, addGeoJSONProperties, addSelectionTypeToGeoJSON, basicExampleDrawOptions, basicExampleMultipleShapeDrawOptions, basicExampleMultipleShapeWithValuesDrawOptions, clearImageCacheForAllMaps, colorMaps, createIconStyle, createInterSections, currentlySupportedDrawModes, defaultBox, defaultDelete, defaultGeoJSONStyleProperties, defaultIntersectionStyleProperties, defaultLayers, defaultModes, defaultPoint, defaultPolygon, defaultTimeFormat, dimensionConfig, drawPolyStoryStyles, drawStyles, emptyGeoJSON, endToolExampleConfig, exampleIntersectionOptions, exampleIntersectionWithShapeOptions, exampleIntersections, exampleIntersectionsMultiDrawTool, fakeEdrLayerApiHandlers, featureBox, featureMultiPoint, featurePoint, featurePolygon, fillOptions, firSelectionType, formatTime, generateImageFromLegend, genericOpenLayersFeatureStyle, geowebColorToOpenLayersColor, getDimensionIcon, getDimensionLabel, getDimensionValue, getDimensionsList, getDoubleControlToolIcon, getFeatureCollection, getFeatureExtent, getFirTitle, getGeoJSONPropertyValue, getGeoJson, getIcon, getIntersectionToolIcon, getIsInsideAcceptanceTime, getLastEmptyFeatureIndex, getLayerBbox, getLayerStyles, getLayerUpdateInfo, getLegendClass, getProj4, getTimeDimension, getToolIcon, initializeOpenLayersProjections, inlineFeatureStyle, intersectPointGeoJSONS, intersectPolygonGeoJSONS, intersectionFeatureBE, intersectionFeatureNL, isGeoJSONFeatureCreatedByTool, isGeoJSONGeometryEmpty, isPointFeatureCollection, lineString, lineStringCollection, makeFeatureStyleDisc, makeFeatureStyleLoading, makeFeatureStyleMultiParam, makeFeatureStyleMultiParamLoading, makeFeatureStyleWind, makeLegendFromColorMap, makeLegendFromStyleName, makeTimeList, makeView, marksByDimension, modifyStyles, moveFeature, multiLineStringLabelStyle, multiPolygonLabelStyle, opacityOptions, openLayersGetMapImageStore, precipitationMMLegendColorsWoW, projectorCache, publicLayers, publicServices, rewindGeometry, selectPreferredWMSProjection, setMapCenter, setViewFromExtent, setViewFromFeature, simpleBoxGeoJSON, simpleBoxGeoJSONWrongOrder, simpleFlightRouteLineStringGeoJSON, simpleFlightRoutePointsGeoJSON, simpleGeometryCollectionGeoJSON, simpleLineStringGeoJSON, simpleMultiPolygon, simplePointsGeojson, simplePolygonGeoJSON, simpleSmallLineStringGeoJSON, startToolExampleConfig, strokeWidthOptions, styleNameToStyleLike, temperatureLegendColorsCWK, temperatureLegendColorsWoW, textLabelStyle, textStyle, textStyleWithMargin, updateEditModeButtonsWithFir, useAnimationForLayer, useEDRLayerCollection, useEDRLayerCollectionCube, useGeoJSON, useGetEDRLayerInstance, useGetWMLayerInstance, useGetWMSLayerStyleList, useIconStyle, useMapDrawTool, useProjection, useQueryGetWMSGetCapabilities, useQueryGetWMSLayer, useQueryGetWMSLayers, useQueryGetWMSLayersTree, useQueryGetWMSServiceInfo, useQueryWMTSGetCapabilities, useSetIntervalWhenVisible, useViewFromLayer, viewUtils, webmapReactTranslations };
+export { BaseLayerType, ClickOnMapTool, DRAWMODE, DefaultBaseLayers, DimensionSelectButton, DimensionSelectDialog, DimensionSelectSlider, EditModeButton as EditModeButtonField, FEATURE_FILL, FEATURE_STROKE, FEATURE_STROKE_EDIT, FEATURE_VERTICES_EDIT_HANDLES, FEATURE_VERTICE_HANDLE_IMAGE, FEATURE_VERTICE_IMAGE, FeatureLayer, FeatureLayers, GeoJSONTextField, ICON_LOCATIONMARKER, ICON_LOCATIONMARKER_MODIFY, IntersectionSelect, LayerInfoButton, LayerInfoDialog, LayerInfoLegend, LayerInfoList, LayerInfoText, Legend, LegendButton, LegendDialog, LegendLayout, MapContext, MapControlButton, MapControls, MapDimensionSelect, MapFeatureClass, MapTime, MapWarningProperties, NEW_FEATURE_CREATED, NEW_LINESTRING_CREATED, NEW_POINT_CREATED, OpenLayersFeatureLayer, OpenLayersGetFeatureInfo, OpenLayersLayer, OpenLayersMapDraw, OpenLayersMapView, OpenLayersZoomControl, Proj4js, SelectField, StoryLayoutGrid, TimeAwareEDRLocationLayer, TimeContext, TimeawareImageSource, TimeawareImageSourceWMSLayer, WEBMAP_REACT_NAMESPACE, WMSLayer, WMTSLayer, XYZLayer, ZoomControls, addFeatureProperties, addGeoJSONProperties, addSelectionTypeToGeoJSON, basicExampleDrawOptions, basicExampleMultipleShapeDrawOptions, basicExampleMultipleShapeWithValuesDrawOptions, basicExampleSmoothLineOptions, catmullRomSpline, clearImageCacheForAllMaps, colorMaps, createIconStyle, createInterSections, currentlySupportedDrawModes, defaultBox, defaultDelete, defaultGeoJSONStyleProperties, defaultIntersectionStyleProperties, defaultLayers, defaultModes, defaultPoint, defaultPolygon, defaultTimeFormat, dimensionConfig, drawPolyStoryStyles, drawStyles, emptyGeoJSON, endToolExampleConfig, exampleIntersectionOptions, exampleIntersectionWithShapeOptions, exampleIntersections, exampleIntersectionsMultiDrawTool, fakeEdrLayerApiHandlers, featureBox, featureMultiPoint, featurePoint, featurePolygon, fillOptions, firSelectionType, formatTime, generateImageFromLegend, genericOpenLayersFeatureStyle, geowebColorToOpenLayersColor, getDimensionIcon, getDimensionLabel, getDimensionValue, getDimensionsList, getDoubleControlToolIcon, getFeatureCollection, getFeatureExtent, getFirTitle, getGeoJSONPropertyValue, getGeoJson, getIcon, getIntersectionToolIcon, getIsInsideAcceptanceTime, getLastEmptyFeatureIndex, getLayerBbox, getLayerStyles, getLayerUpdateInfo, getLegendClass, getProj4, getTimeDimension, getToolIcon, initializeOpenLayersProjections, inlineFeatureStyle, intersectPointGeoJSONS, intersectPolygonGeoJSONS, intersectionFeatureBE, intersectionFeatureNL, isGeoJSONFeatureCreatedByTool, isGeoJSONGeometryEmpty, isPointFeatureCollection, lineString, lineStringCollection, makeFeatureStyleDisc, makeFeatureStyleLoading, makeFeatureStyleMultiParam, makeFeatureStyleMultiParamLoading, makeFeatureStyleWind, makeLegendFromColorMap, makeLegendFromStyleName, makeTimeList, makeView, marksByDimension, modifyStyles, moveFeature, multiLineStringLabelStyle, multiPolygonLabelStyle, opacityOptions, openLayersGetMapImageStore, precipitationMMLegendColorsWoW, projectorCache, publicLayers, publicServices, rewindGeometry, selectPreferredWMSProjection, setMapCenter, setViewFromExtent, setViewFromFeature, simpleBoxGeoJSON, simpleBoxGeoJSONWrongOrder, simpleFlightRouteLineStringGeoJSON, simpleFlightRoutePointsGeoJSON, simpleGeometryCollectionGeoJSON, simpleLineStringGeoJSON, simpleMultiPolygon, simplePointsGeojson, simplePolygonGeoJSON, simpleSmallLineStringGeoJSON, startToolExampleConfig, strokeWidthOptions, styleNameToStyleLike, temperatureLegendColorsCWK, temperatureLegendColorsWoW, textLabelStyle, textStyle, textStyleWithMargin, updateEditModeButtonsWithFir, useAnimationForLayer, useEDRLayerCollection, useEDRLayerCollectionCube, useGeoJSON, useGetEDRLayerInstance, useGetWMLayerInstance, useGetWMSLayerStyleList, useIconStyle, useMapDrawTool, useProjection, useQueryGetWMSGetCapabilities, useQueryGetWMSLayer, useQueryGetWMSLayers, useQueryGetWMSLayersTree, useQueryGetWMSServiceInfo, useQueryWMTSGetCapabilities, useSetIntervalWhenVisible, useViewFromLayer, viewUtils, webmapReactTranslations };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@opengeoweb/webmap-react",
-  "version": "13.1.0",
+  "version": "13.2.1",
   "description": "GeoWeb react wrapper for webmap",
   "license": "Apache-2.0",
   "repository": {
@@ -8,9 +8,9 @@
     "url": "git@gitlab.com:opengeoweb/opengeoweb.git"
   },
   "dependencies": {
-    "@opengeoweb/webmap": "13.1.0",
-    "@opengeoweb/theme": "13.1.0",
-    "@opengeoweb/shared": "13.1.0",
+    "@opengeoweb/webmap": "13.2.1",
+    "@opengeoweb/theme": "13.2.1",
+    "@opengeoweb/shared": "13.2.1",
     "lodash": "^4.17.21",
     "ol": "^10.4.0",
     "proj4": "^2.9.2",

package/src/lib/components/MapDrawTool/storyExamplesMapDrawTool.d.ts

@@ -8,3 +8,4 @@ export declare const getToolIcon: (selectionType: SelectionType) => React.ReactE
 export declare const basicExampleDrawOptions: MapDrawToolOptions;
 export declare const basicExampleMultipleShapeDrawOptions: MapDrawToolOptions;
 export declare const basicExampleMultipleShapeWithValuesDrawOptions: MapDrawToolOptions;
+export declare const basicExampleSmoothLineOptions: MapDrawToolOptions;

package/src/lib/components/OpenLayers/OlStyles.d.ts

@@ -2,6 +2,8 @@ import { ColorLike } from 'ol/colorlike';
 import { FeatureLike } from 'ol/Feature';
 import { Circle, Fill, Stroke } from 'ol/style';
 import Style, { StyleFunction, StyleLike } from 'ol/style/Style';
+import { Coordinate } from 'ol/coordinate';
+import { LineCoordType } from 'ol/interaction/Draw';
 import { DrawModeValue } from '../MapDrawTool';
 export declare enum MapFeatureClass {
     MyLocation = "MyLocation",
@@ -25,5 +27,6 @@ export declare const multiLineStringLabelStyle: (text: string) => Style;
 export declare const geowebColorToOpenLayersColor: (color: string, opacity?: string | number) => ColorLike;
 export declare const inlineFeatureStyle: (feature: FeatureLike) => Style[];
 export declare const genericOpenLayersFeatureStyle: StyleFunction;
+export declare const catmullRomSpline: (points: LineCoordType, numPoints?: number) => Coordinate[];
 export declare const drawStyles: Record<DrawModeValue, StyleLike>;
-export declare const modifyStyles: Record<DrawModeValue, Style[]>;
+export declare const modifyStyles: Record<DrawModeValue, Style[] | StyleLike>;

package/src/lib/components/OpenLayers/draw/OpenLayersMapDraw.stories.d.ts

@@ -7,3 +7,4 @@ export declare const OlBasicMapDrawTool: Story;
 export declare const OlBasicMapDrawToolShape: Story;
 export declare const OlBasicMapDrawToolWithMultipleShapes: Story;
 export declare const OlBasicMapDrawToolWithMultipleShapesValues: Story;
+export declare const OlBasicMapDrawToolWithSmoothLines: Story;

package/src/lib/components/OpenLayers/draw/types.d.ts

@@ -3,7 +3,8 @@ export declare enum DRAWMODE {
     BOX = "BOX",
     MULTIPOINT = "MULTIPOINT",
     POINT = "POINT",
-    LINESTRING = "LINESTRING"
+    LINESTRING = "LINESTRING",
+    SMOOTHLINE = "SMOOTHLINE"
 }
 export interface FeatureEvent {
     coordinateIndexInFeature: number;