@mapcomponents/react-maplibre 1.3.0 → 1.3.2

package/dist/index.esm.js

@@ -4,7 +4,7 @@ import React__default, { useMemo, useEffect, useCallback, useState, useRef, useC
 import { createTheme, ThemeProvider, styled as styled$2, useTheme } from '@mui/material/styles';
 import { v4 } from 'uuid';
 import 'maplibre-gl/dist/maplibre-gl.css';
-import { Button, CircularProgress, useMediaQuery, FormControl, InputLabel, Select, MenuItem, FormLabel, RadioGroup, FormControlLabel, Radio, styled, List, ListItem, ListItemIcon, IconButton, Checkbox, ListItemText, Grid, Paper, Box as Box$1, Typography, TextField, Slider, Drawer, SwipeableDrawer, Tooltip, Snackbar, DialogTitle as DialogTitle$1, DialogActions as DialogActions$1, ListItemButton, ListItemAvatar, Avatar, DialogContent as DialogContent$1, OutlinedInput, Accordion, AccordionSummary, Dialog as Dialog$1 } from '@mui/material';
+import { Button, CircularProgress, useMediaQuery, FormControl, InputLabel, Select, MenuItem, FormLabel, RadioGroup, FormControlLabel, Radio, styled, List, ListItem, ListItemIcon, IconButton, Checkbox, ListItemText, Grid, Paper, Box as Box$1, Typography, TextField, Slider, Drawer, SwipeableDrawer, Tooltip, Snackbar, FormGroup, DialogTitle as DialogTitle$1, DialogActions as DialogActions$1, ListItemButton, ListItemAvatar, Avatar, DialogContent as DialogContent$1, OutlinedInput, Accordion, AccordionSummary, Dialog as Dialog$1 } from '@mui/material';
 import FilterCenterFocusIcon from '@mui/icons-material/FilterCenterFocus';
 import PrinterIcon from '@mui/icons-material/Print';
 import Button$1 from '@mui/material/Button';
@@ -103,7 +103,7 @@ LOSS OF USE, DATA OR PROFITS, WHETHER IN AN ACTION OF CONTRACT, NEGLIGENCE OR
 OTHER TORTIOUS ACTION, ARISING OUT OF OR IN CONNECTION WITH THE USE OR
 PERFORMANCE OF THIS SOFTWARE.
 ***************************************************************************** */
-/* global Reflect, Promise, SuppressedError, Symbol */
+/* global Reflect, Promise, SuppressedError, Symbol, Iterator */
 
 
 var __assign = function() {
@@ -140,8 +140,8 @@ function __awaiter(thisArg, _arguments, P, generator) {
 }
 
 function __generator(thisArg, body) {
-    var _ = { label: 0, sent: function() { if (t[0] & 1) throw t[1]; return t[1]; }, trys: [], ops: [] }, f, y, t, g;
-    return g = { next: verb(0), "throw": verb(1), "return": verb(2) }, typeof Symbol === "function" && (g[Symbol.iterator] = function() { return this; }), g;
+    var _ = { label: 0, sent: function() { if (t[0] & 1) throw t[1]; return t[1]; }, trys: [], ops: [] }, f, y, t, g = Object.create((typeof Iterator === "function" ? Iterator : Object).prototype);
+    return g.next = verb(0), g["throw"] = verb(1), g["return"] = verb(2), typeof Symbol === "function" && (g[Symbol.iterator] = function() { return this; }), g;
     function verb(n) { return function (v) { return step([n, v]); }; }
     function step(op) {
         if (f) throw new TypeError("Generator is already executing.");
@@ -2068,8 +2068,7 @@ function featureEditorStyle() {
             },
             paint: {
                 'line-color': '#009EE0',
-                'line-width': 10,
-                'line-opacity': 0.2,
+                'line-width': 4,
             },
         },
         {
@@ -2634,7 +2633,7 @@ var getDefaultPaintPropsByType = function (type, defaultPaintOverrides) {
                 // 'fill-color': 'rgba(10,240,256,0.6)',
                 // 'fill-outline-color': 'rgba(20,230,256,0.8)',
                 'fill-color': '#009EE0',
-                'fill-outline-color': '#009EE0',
+                'fill-outline-color': '#009EE0'
             };
         case 'line':
             if (defaultPaintOverrides === null || defaultPaintOverrides === void 0 ? void 0 : defaultPaintOverrides.line) {
@@ -2646,7 +2645,7 @@ var getDefaultPaintPropsByType = function (type, defaultPaintOverrides) {
                 // 'line-width': 5,
                 // 'line-blur': 0,
                 'line-color': '#009EE0',
-                'line-width': 5,
+                'line-width': 4,
                 'line-blur': 0,
             };
         case 'circle':
@@ -4363,6 +4362,23 @@ MlLayerSwipe.defaultProps = {
     buttonStyle: {},
 };
 
+function _arrayLikeToArray(r, a) {
+  (null == a || a > r.length) && (a = r.length);
+  for (var e = 0, n = Array(a); e < a; e++) n[e] = r[e];
+  return n;
+}
+function _arrayWithoutHoles(r) {
+  if (Array.isArray(r)) return _arrayLikeToArray(r);
+}
+function _iterableToArray(r) {
+  if ("undefined" != typeof Symbol && null != r[Symbol.iterator] || null != r["@@iterator"]) return Array.from(r);
+}
+function _nonIterableSpread() {
+  throw new TypeError("Invalid attempt to spread non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.");
+}
+function _toConsumableArray(r) {
+  return _arrayWithoutHoles(r) || _iterableToArray(r) || _unsupportedIterableToArray(r) || _nonIterableSpread();
+}
 function _typeof(o) {
   "@babel/helpers - typeof";
 
@@ -4372,33 +4388,15 @@ function _typeof(o) {
     return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o;
   }, _typeof(o);
 }
-function _toConsumableArray(arr) {
-  return _arrayWithoutHoles(arr) || _iterableToArray(arr) || _unsupportedIterableToArray(arr) || _nonIterableSpread();
-}
-function _arrayWithoutHoles(arr) {
-  if (Array.isArray(arr)) return _arrayLikeToArray(arr);
-}
-function _iterableToArray(iter) {
-  if (typeof Symbol !== "undefined" && iter[Symbol.iterator] != null || iter["@@iterator"] != null) return Array.from(iter);
-}
-function _unsupportedIterableToArray(o, minLen) {
-  if (!o) return;
-  if (typeof o === "string") return _arrayLikeToArray(o, minLen);
-  var n = Object.prototype.toString.call(o).slice(8, -1);
-  if (n === "Object" && o.constructor) n = o.constructor.name;
-  if (n === "Map" || n === "Set") return Array.from(o);
-  if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen);
-}
-function _arrayLikeToArray(arr, len) {
-  if (len == null || len > arr.length) len = arr.length;
-  for (var i = 0, arr2 = new Array(len); i < len; i++) arr2[i] = arr[i];
-  return arr2;
-}
-function _nonIterableSpread() {
-  throw new TypeError("Invalid attempt to spread non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.");
+function _unsupportedIterableToArray(r, a) {
+  if (r) {
+    if ("string" == typeof r) return _arrayLikeToArray(r, a);
+    var t = {}.toString.call(r).slice(8, -1);
+    return "Object" === t && r.constructor && (t = r.constructor.name), "Map" === t || "Set" === t ? Array.from(r) : "Arguments" === t || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(t) ? _arrayLikeToArray(r, a) : void 0;
+  }
 }
 
-var _showNextTransitionSegment = function _showNextTransitionSegment(props, map, transitionInProgressRef, transitionGeojsonDataRef, transitionGeojsonCommonDataRef, currentTransitionStepRef, msPerStep, transitionTimeoutRef, setDisplayGeojson) {
+var _showNextTransitionSegment2 = function _showNextTransitionSegment(props, map, transitionInProgressRef, transitionGeojsonDataRef, transitionGeojsonCommonDataRef, currentTransitionStepRef, msPerStep, transitionTimeoutRef, setDisplayGeojson) {
   var _arguments = arguments;
   if (typeof transitionGeojsonDataRef.current[currentTransitionStepRef.current] !== "undefined") {
     // if at last transition step set to target geojson
@@ -4411,7 +4409,7 @@ var _showNextTransitionSegment = function _showNextTransitionSegment(props, map,
     currentTransitionStepRef.current++;
     if (transitionInProgressRef.current && currentTransitionStepRef.current < transitionGeojsonDataRef.current.length) {
       transitionTimeoutRef.current = setTimeout(function () {
-        return _showNextTransitionSegment.apply(void 0, _toConsumableArray(_arguments));
+        return _showNextTransitionSegment2.apply(void 0, _toConsumableArray(_arguments));
       }, msPerStep);
     } else {
       if (typeof props.onTransitionEnd === "function") {
@@ -4501,7 +4499,7 @@ var _transitionToGeojson = function _transitionToGeojson(props, transitionGeojso
   currentTransitionStepRef.current = 1;
   transitionInProgressRef.current = true;
   transitionTimeoutRef.current = setTimeout(function () {
-    return _showNextTransitionSegment(props, map, transitionInProgressRef, transitionGeojsonDataRef, transitionGeojsonCommonDataRef, currentTransitionStepRef, msPerStep, transitionTimeoutRef, setDisplayGeojson);
+    return _showNextTransitionSegment2(props, map, transitionInProgressRef, transitionGeojsonDataRef, transitionGeojsonCommonDataRef, currentTransitionStepRef, msPerStep, transitionTimeoutRef, setDisplayGeojson);
   }, msPerStep);
 };
 var createTransitionSteps = function createTransitionSteps(linestringCoordinates, perStepDistance, stepCnt) {
@@ -7043,6 +7041,10 @@ var MlSketchTool = function (props) {
                     : undefined });
         });
     };
+    var handleCheckboxChange = function (event) {
+        var _a;
+        (_a = props.onShowInstructionChange) === null || _a === void 0 ? void 0 : _a.call(props, event.target.checked);
+    };
     var SketchToolButtons = function () {
         return (React__default.createElement(React__default.Fragment, null, sketchTools.map(function (el) {
             var stateColor = function (theme) {
@@ -7074,6 +7076,9 @@ var MlSketchTool = function (props) {
             } },
             React__default.createElement(ButtonGroup, null,
                 React__default.createElement(SketchToolButtons, null))),
+        React__default.createElement(Box, { sx: { marginTop: '10px' } },
+            React__default.createElement(FormGroup, null,
+                React__default.createElement(FormControlLabel, { control: React__default.createElement(Checkbox, { size: "small", checked: props.showInstruction, onChange: handleCheckboxChange }), label: "Show instructions" }))),
         sketchState.drawMode && (React__default.createElement(MlFeatureEditor, { mode: sketchState.drawMode, geojson: sketchState.selectedGeoJson, onChange: function (feature) {
                 console.log(feature);
                 if (!(feature === null || feature === void 0 ? void 0 : feature[0]))
@@ -7118,70 +7123,112 @@ var MlSketchTool = function (props) {
                 setSketchState(function (_sketchState) { return (__assign(__assign({}, _sketchState), { drawMode: undefined, activeGeometryIndex: undefined, selectedGeoJson: undefined })); });
             } })),
         React__default.createElement(List$1, { sx: { zIndex: 105, marginBottom: '-10px' } },
-            sketchState.geometries.map(function (el) { return (React__default.createElement(React__default.Fragment, null,
-                React__default.createElement(Box, { key: el.id, sx: { display: 'flex', flexDirection: 'column' } },
-                    React__default.createElement("br", null),
-                    React__default.createElement(Box, { flexDirection: 'row', sx: {
-                            '&:hover': {
-                                backgroundColor: 'rgb(177, 177, 177, 0.2)',
-                            },
-                            marginTop: '25px',
-                        }, onMouseOver: function () {
-                            setHoveredGeometry(el);
-                        }, onMouseLeave: function () {
-                            setHoveredGeometry(undefined);
-                        } },
-                        React__default.createElement(LayerListItem, { listItemSx: buttonStyle, configurable: true, layerComponent: React__default.createElement(MlGeoJsonLayer, { mapId: props.mapId, geojson: el, layerId: String(el.id), defaultPaintOverrides: {
-                                    fill: { 'fill-opacity': 0.5 },
-                                } }), type: 'layer', name: String(el.id), description: el.geometry.type }),
-                        React__default.createElement(Box, { sx: {
-                                padding: '3px 30px',
+            sketchState.geometries.map(function (el, index) {
+                var _a, _b, _c;
+                return (React__default.createElement(React__default.Fragment, null,
+                    React__default.createElement(Box, { key: el.id, sx: { display: 'flex', flexDirection: 'column' } },
+                        React__default.createElement("br", null),
+                        React__default.createElement(Box, { flexDirection: 'row', sx: {
+                                '&:hover': {
+                                    backgroundColor: 'rgb(177, 177, 177, 0.2)',
+                                },
+                                marginTop: '25px',
+                            }, onMouseOver: function () {
+                                setHoveredGeometry(el);
+                            }, onMouseLeave: function () {
+                                setHoveredGeometry(undefined);
                             } },
-                            React__default.createElement(ButtonGroup, { size: "small" },
-                                React__default.createElement(Tooltip$1, { title: "Center" },
-                                    React__default.createElement(Button, { sx: __assign({ color: function (theme) { return theme.palette.primary.main; }, backgroundColor: function (theme) { return theme.palette.navigation.navColor; } }, buttonStyle), onClick: function () {
-                                            var _a;
-                                            (_a = mapHook === null || mapHook === void 0 ? void 0 : mapHook.map) === null || _a === void 0 ? void 0 : _a.map.setCenter(el.geometry.type === 'Point'
-                                                ? el.geometry.coordinates
-                                                : turf.centerOfMass(el).geometry.coordinates);
-                                        } },
-                                        React__default.createElement(GpsFixedIcon, null))),
-                                React__default.createElement(Tooltip$1, { title: "Edit" },
-                                    React__default.createElement(Button, { sx: __assign({ color: function (theme) {
-                                                var _a;
-                                                if (sketchState.drawMode === 'simple_select' &&
-                                                    ((_a = sketchState.selectedGeoJson) === null || _a === void 0 ? void 0 : _a.id) === el.id) {
-                                                    return theme.palette.navigation.navColor;
-                                                }
-                                                else {
-                                                    return theme.palette.primary.main;
-                                                }
-                                            }, backgroundColor: function (theme) {
-                                                var _a;
-                                                if (sketchState.drawMode === 'simple_select' &&
-                                                    ((_a = sketchState.selectedGeoJson) === null || _a === void 0 ? void 0 : _a.id) === el.id) {
-                                                    return theme.palette.primary.main;
-                                                }
-                                                else {
-                                                    return theme.palette.navigation.navColor;
-                                                }
-                                            } }, buttonStyle), onClick: function () {
-                                            setSketchState(function (_sketchState) {
+                            !((_a = el.properties) === null || _a === void 0 ? void 0 : _a.customName) && (React__default.createElement("input", { type: "text", value: ((_b = el.properties) === null || _b === void 0 ? void 0 : _b.name) || '', placeholder: "Assign name", onChange: function (e) {
+                                    var newName = e.target.value;
+                                    setSketchState(function (_sketchState) {
+                                        var updatedGeometries = __spreadArray([], _sketchState.geometries, true);
+                                        if (!updatedGeometries[index].properties) {
+                                            updatedGeometries[index].properties = {};
+                                        }
+                                        updatedGeometries[index].properties.name = newName;
+                                        return __assign(__assign({}, _sketchState), { geometries: updatedGeometries });
+                                    });
+                                }, style: {
+                                    padding: '5px',
+                                    border: '1px solid #ccc',
+                                    borderRadius: '4px',
+                                    outline: 'none',
+                                }, onFocus: function (e) { return (e.target.style.borderColor = '#009ee0'); }, onBlur: function (e) {
+                                    e.target.style.borderColor = '#ccc';
+                                    setSketchState(function (_sketchState) {
+                                        var updatedGeometries = __spreadArray([], _sketchState.geometries, true);
+                                        if (!updatedGeometries[index].properties) {
+                                            updatedGeometries[index].properties = {};
+                                        }
+                                        updatedGeometries[index].properties.customName = true;
+                                        return __assign(__assign({}, _sketchState), { geometries: updatedGeometries });
+                                    });
+                                } })),
+                            React__default.createElement(LayerListItem, { listItemSx: buttonStyle, configurable: true, layerComponent: React__default.createElement(MlGeoJsonLayer, { mapId: props.mapId, geojson: el, layerId: String(el.id), defaultPaintOverrides: {
+                                        fill: { 'fill-opacity': 0.5 },
+                                    } }), type: 'layer', name: React__default.createElement(Typography, { onClick: function () {
+                                        setSketchState(function (_sketchState) {
+                                            var updatedGeometries = __spreadArray([], _sketchState.geometries, true);
+                                            if (!updatedGeometries[index].properties) {
+                                                updatedGeometries[index].properties = {};
+                                            }
+                                            updatedGeometries[index].properties.customName = false;
+                                            return __assign(__assign({}, _sketchState), { geometries: updatedGeometries });
+                                        });
+                                    }, sx: {
+                                        cursor: 'pointer',
+                                        overflow: 'hidden',
+                                        whiteSpace: 'nowrap',
+                                    } }, ((_c = el.properties) === null || _c === void 0 ? void 0 : _c.name) || String(el.id)), description: el.geometry.type }),
+                            React__default.createElement(Box, { sx: {
+                                    padding: '3px 30px',
+                                } },
+                                React__default.createElement(ButtonGroup, { size: "small" },
+                                    React__default.createElement(Tooltip$1, { title: "Center" },
+                                        React__default.createElement(Button, { sx: __assign({ color: function (theme) { return theme.palette.primary.main; }, backgroundColor: function (theme) { return theme.palette.navigation.navColor; } }, buttonStyle), onClick: function () {
                                                 var _a;
-                                                var newDrawMode = _sketchState.drawMode === 'simple_select' &&
-                                                    ((_a = _sketchState.selectedGeoJson) === null || _a === void 0 ? void 0 : _a.id) === el.id
-                                                    ? undefined
-                                                    : 'simple_select';
-                                                return __assign(__assign({}, _sketchState), { selectedGeoJson: el, activeGeometryIndex: _sketchState.geometries.indexOf(el), drawMode: newDrawMode });
-                                            });
-                                        } },
-                                        React__default.createElement(EditIcon, null))),
-                                React__default.createElement(Tooltip$1, { title: "Delete" },
-                                    React__default.createElement(Button, { sx: __assign({ color: function (theme) { return theme.palette.primary.main; }, backgroundColor: function (theme) { return theme.palette.navigation.navColor; } }, buttonStyle), onClick: function () {
-                                            removeGeoJson(el);
-                                            setHoveredGeometry(undefined);
-                                        } },
-                                        React__default.createElement(DeleteIcon, null))))))))); }),
+                                                (_a = mapHook === null || mapHook === void 0 ? void 0 : mapHook.map) === null || _a === void 0 ? void 0 : _a.map.setCenter(el.geometry.type === 'Point'
+                                                    ? el.geometry.coordinates
+                                                    : turf.centerOfMass(el).geometry.coordinates);
+                                            } },
+                                            React__default.createElement(GpsFixedIcon, null))),
+                                    React__default.createElement(Tooltip$1, { title: "Edit" },
+                                        React__default.createElement(Button, { sx: __assign({ color: function (theme) {
+                                                    var _a;
+                                                    if (sketchState.drawMode === 'simple_select' &&
+                                                        ((_a = sketchState.selectedGeoJson) === null || _a === void 0 ? void 0 : _a.id) === el.id) {
+                                                        return theme.palette.navigation.navColor;
+                                                    }
+                                                    else {
+                                                        return theme.palette.primary.main;
+                                                    }
+                                                }, backgroundColor: function (theme) {
+                                                    var _a;
+                                                    if (sketchState.drawMode === 'simple_select' &&
+                                                        ((_a = sketchState.selectedGeoJson) === null || _a === void 0 ? void 0 : _a.id) === el.id) {
+                                                        return theme.palette.primary.main;
+                                                    }
+                                                    else {
+                                                        return theme.palette.navigation.navColor;
+                                                    }
+                                                } }, buttonStyle), onClick: function () {
+                                                setSketchState(function (_sketchState) {
+                                                    var _a;
+                                                    var newDrawMode = _sketchState.drawMode === 'simple_select' &&
+                                                        ((_a = _sketchState.selectedGeoJson) === null || _a === void 0 ? void 0 : _a.id) === el.id
+                                                        ? undefined
+                                                        : 'simple_select';
+                                                    return __assign(__assign({}, _sketchState), { selectedGeoJson: el, activeGeometryIndex: _sketchState.geometries.indexOf(el), drawMode: newDrawMode });
+                                                });
+                                            } },
+                                            React__default.createElement(EditIcon, null))),
+                                    React__default.createElement(Tooltip$1, { title: "Delete" },
+                                        React__default.createElement(Button, { sx: __assign({ color: function (theme) { return theme.palette.primary.main; }, backgroundColor: function (theme) { return theme.palette.navigation.navColor; } }, buttonStyle), onClick: function () {
+                                                removeGeoJson(el);
+                                                setHoveredGeometry(undefined);
+                                            } },
+                                            React__default.createElement(DeleteIcon, null)))))))));
+            }),
             hoveredGeometry && (React__default.createElement(MlGeoJsonLayer, { mapId: props.mapId, geojson: { type: 'FeatureCollection', features: [hoveredGeometry] }, layerId: 'highlightBorder', defaultPaintOverrides: {
                     circle: {
                         'circle-color': '#000000',