@mapcomponents/react-maplibre 1.3.0 → 1.3.1

package/CHANGELOG.md

@@ -1,5 +1,22 @@
 # Change Log
 
+## [v1.3.1]
+
+## Changed
+- 3f6b50c: Upgrade to maplibre to 5.5.0 (from 5.3.0) (#223)
+
+## [v1.3.0]
+
+## Changed
+- UI design/ogc in MlSketchTool and MlOgcApiFeatures
+
+## Fixed
+- fix MlMarker and improve performance by using a maplibre marker instead of an absolute positioned HTML element
+- fix Storybook demos: MlLayerSwitcher, useCameraFollowPath, MlVectorTileLayer, MlPdfForm, MlThreeJsLayer, MlNavigationCompass
+
+## Removed
+- remove MlComponentTemplate from storybook
+
 ## [v1.2.0]
 
 ## Changed

package/dist/index.cjs.js

@@ -127,7 +127,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() {
@@ -164,8 +164,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.");
@@ -2092,8 +2092,7 @@ function featureEditorStyle() {
             },
             paint: {
                 'line-color': '#009EE0',
-                'line-width': 10,
-                'line-opacity': 0.2,
+                'line-width': 4,
             },
         },
         {
@@ -2658,7 +2657,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) {
@@ -2670,7 +2669,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':
@@ -4387,6 +4386,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";
 
@@ -4396,33 +4412,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
@@ -4435,7 +4433,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") {
@@ -4525,7 +4523,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) {
@@ -7067,6 +7065,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.createElement(React.Fragment, null, sketchTools.map(function (el) {
             var stateColor = function (theme) {
@@ -7098,6 +7100,9 @@ var MlSketchTool = function (props) {
             } },
             React.createElement(ButtonGroup, null,
                 React.createElement(SketchToolButtons, null))),
+        React.createElement(system.Box, { sx: { marginTop: '10px' } },
+            React.createElement(material.FormGroup, null,
+                React.createElement(material.FormControlLabel, { control: React.createElement(material.Checkbox, { size: "small", checked: props.showInstruction, onChange: handleCheckboxChange }), label: "Show instructions" }))),
         sketchState.drawMode && (React.createElement(MlFeatureEditor, { mode: sketchState.drawMode, geojson: sketchState.selectedGeoJson, onChange: function (feature) {
                 console.log(feature);
                 if (!(feature === null || feature === void 0 ? void 0 : feature[0]))
@@ -7142,70 +7147,112 @@ var MlSketchTool = function (props) {
                 setSketchState(function (_sketchState) { return (__assign(__assign({}, _sketchState), { drawMode: undefined, activeGeometryIndex: undefined, selectedGeoJson: undefined })); });
             } })),
         React.createElement(List, { sx: { zIndex: 105, marginBottom: '-10px' } },
-            sketchState.geometries.map(function (el) { return (React.createElement(React.Fragment, null,
-                React.createElement(system.Box, { key: el.id, sx: { display: 'flex', flexDirection: 'column' } },
-                    React.createElement("br", null),
-                    React.createElement(system.Box, { flexDirection: 'row', sx: {
-                            '&:hover': {
-                                backgroundColor: 'rgb(177, 177, 177, 0.2)',
-                            },
-                            marginTop: '25px',
-                        }, onMouseOver: function () {
-                            setHoveredGeometry(el);
-                        }, onMouseLeave: function () {
-                            setHoveredGeometry(undefined);
-                        } },
-                        React.createElement(LayerListItem, { listItemSx: buttonStyle, configurable: true, layerComponent: React.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.createElement(system.Box, { sx: {
-                                padding: '3px 30px',
+            sketchState.geometries.map(function (el, index) {
+                var _a, _b, _c;
+                return (React.createElement(React.Fragment, null,
+                    React.createElement(system.Box, { key: el.id, sx: { display: 'flex', flexDirection: 'column' } },
+                        React.createElement("br", null),
+                        React.createElement(system.Box, { flexDirection: 'row', sx: {
+                                '&:hover': {
+                                    backgroundColor: 'rgb(177, 177, 177, 0.2)',
+                                },
+                                marginTop: '25px',
+                            }, onMouseOver: function () {
+                                setHoveredGeometry(el);
+                            }, onMouseLeave: function () {
+                                setHoveredGeometry(undefined);
                             } },
-                            React.createElement(ButtonGroup, { size: "small" },
-                                React.createElement(Tooltip, { title: "Center" },
-                                    React.createElement(material.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__namespace.centerOfMass(el).geometry.coordinates);
-                                        } },
-                                        React.createElement(GpsFixedIcon, null))),
-                                React.createElement(Tooltip, { title: "Edit" },
-                                    React.createElement(material.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.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.createElement(LayerListItem, { listItemSx: buttonStyle, configurable: true, layerComponent: React.createElement(MlGeoJsonLayer, { mapId: props.mapId, geojson: el, layerId: String(el.id), defaultPaintOverrides: {
+                                        fill: { 'fill-opacity': 0.5 },
+                                    } }), type: 'layer', name: React.createElement(material.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.createElement(system.Box, { sx: {
+                                    padding: '3px 30px',
+                                } },
+                                React.createElement(ButtonGroup, { size: "small" },
+                                    React.createElement(Tooltip, { title: "Center" },
+                                        React.createElement(material.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.createElement(EditIcon, null))),
-                                React.createElement(Tooltip, { title: "Delete" },
-                                    React.createElement(material.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.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__namespace.centerOfMass(el).geometry.coordinates);
+                                            } },
+                                            React.createElement(GpsFixedIcon, null))),
+                                    React.createElement(Tooltip, { title: "Edit" },
+                                        React.createElement(material.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.createElement(EditIcon, null))),
+                                    React.createElement(Tooltip, { title: "Delete" },
+                                        React.createElement(material.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.createElement(DeleteIcon, null)))))))));
+            }),
             hoveredGeometry && (React.createElement(MlGeoJsonLayer, { mapId: props.mapId, geojson: { type: 'FeatureCollection', features: [hoveredGeometry] }, layerId: 'highlightBorder', defaultPaintOverrides: {
                     circle: {
                         'circle-color': '#000000',