@mapcomponents/react-maplibre 1.2.0 → 1.3.0

package/CHANGELOG.md

@@ -1,5 +1,11 @@
 # Change Log
 
+## [v1.2.0]
+
+## Changed
+- update React v18 -> v19
+- replace enzyme in jest tests with @testing-library/react
+
 ## [v1.1.0] - 2025-03-21
 
 ### Added

package/dist/index.cjs.js

@@ -41,7 +41,6 @@ var ControlPointIcon = require('@mui/icons-material/ControlPoint');
 var RemoveCircleOutlineIcon = require('@mui/icons-material/RemoveCircleOutline');
 var Divider = require('@mui/material/Divider');
 var syncMove = require('@mapbox/mapbox-gl-sync-move');
-var Paper = require('@mui/material/Paper');
 var xmldom = require('@xmldom/xmldom');
 var helpers = require('@turf/helpers');
 var WMSCapabilities = require('wms-capabilities');
@@ -2093,7 +2092,8 @@ function featureEditorStyle() {
             },
             paint: {
                 'line-color': '#009EE0',
-                'line-width': 3,
+                'line-width': 10,
+                'line-opacity': 0.2,
             },
         },
         {
@@ -2105,7 +2105,7 @@ function featureEditorStyle() {
                 'line-join': 'round',
             },
             paint: {
-                'line-color': "#009EE0",
+                'line-color': '#009EE0',
                 'line-dasharray': [0.2, 2],
                 'line-width': 2,
             },
@@ -2118,7 +2118,7 @@ function featureEditorStyle() {
                 'circle-radius': mediaIsMobile ? 5 : 4,
                 'circle-color': '#ffffff',
                 'circle-stroke-color': '#009EE0',
-                'circle-stroke-width': 1
+                'circle-stroke-width': 1,
             },
         },
         {
@@ -2138,7 +2138,7 @@ function featureEditorStyle() {
                 'circle-radius': mediaIsMobile ? 7 : 5,
                 'circle-color': '#ffffff',
                 'circle-stroke-color': '#009EE0',
-                'circle-stroke-width': 1
+                'circle-stroke-width': 1,
             },
         },
         {
@@ -2655,15 +2655,21 @@ var getDefaultPaintPropsByType = function (type, defaultPaintOverrides) {
                 return defaultPaintOverrides.fill;
             }
             return {
-                'fill-color': 'rgba(10,240,256,0.6)',
-                'fill-outline-color': 'rgba(20,230,256,0.8)',
+                // 'fill-color': 'rgba(10,240,256,0.6)',
+                // 'fill-outline-color': 'rgba(20,230,256,0.8)',
+                'fill-color': '#009EE0',
+                'fill-outline-color': '#009EE0',
             };
         case 'line':
             if (defaultPaintOverrides === null || defaultPaintOverrides === void 0 ? void 0 : defaultPaintOverrides.line) {
+                console.log(defaultPaintOverrides.line);
                 return defaultPaintOverrides.line;
             }
             return {
-                'line-color': 'rgb(203,211,2)',
+                // // 'line-color': 'rgb(203,211,2)',
+                // 'line-width': 5,
+                // 'line-blur': 0,
+                'line-color': '#009EE0',
                 'line-width': 5,
                 'line-blur': 0,
             };
@@ -2672,10 +2678,14 @@ var getDefaultPaintPropsByType = function (type, defaultPaintOverrides) {
                 return defaultPaintOverrides.circle;
             }
             return {
-                'circle-color': 'rgba(10,240,256,0.8)',
+                // 'circle-color': 'rgba(10,240,256,0.8)',
+                // 'circle-stroke-color': '#fff',
+                // 'circle-stroke-width': 2,
+                // 'circle-radius': 4,
+                'circle-color': '#009EE0',
                 'circle-stroke-color': '#fff',
                 'circle-stroke-width': 2,
-                'circle-radius': 4,
+                'circle-radius': 5,
             };
         default:
             return {};
@@ -4604,76 +4614,130 @@ var MlTransitionGeoJsonLayer = function (props) {
         React.createElement(MlGeoJsonLayer, __assign({}, restProps, { geojson: displayGeojson }))));
 };
 
-/**
- * Adds a marker to the map and displays the contents of the "content" property in an iframe next to it
- */
-var MlMarker = function (props) {
+var getBoxTransform = function (anchor) {
+    if (anchor === void 0) { anchor = 'top'; }
+    switch (anchor) {
+        case 'bottom':
+            return 'translate(-50%, 0%)';
+        case 'left':
+            return 'translate(-100%, -50%)';
+        case 'right':
+            return 'translate(0%, -50%)';
+        case 'top-left':
+            return 'translate(-100%, -100%)';
+        case 'top-right':
+            return 'translate(0%, -100%)';
+        case 'bottom-left':
+            return 'translate(-100%, 0%)';
+        case 'bottom-right':
+            return 'translate(0%, 0%)';
+        default:
+        case 'top':
+            return 'translate(-50%, -100%)';
+    }
+};
+function getBoxMargins(anchor, offset, style) {
+    var w = parseInt(String((style === null || style === void 0 ? void 0 : style.width) || 14), 10);
+    var h = parseInt(String((style === null || style === void 0 ? void 0 : style.height) || 14), 10);
+    var m = {};
+    switch (anchor) {
+        case 'bottom':
+            m.marginTop = "".concat(offset, "px");
+            break;
+        case 'left':
+            m.marginLeft = "-".concat(offset, "px");
+            break;
+        case 'right':
+            m.marginLeft = "".concat(w + offset, "px");
+            break;
+        case 'top-left':
+            m.marginTop = "-".concat(h + offset, "px");
+            m.marginLeft = "-".concat(offset, "px");
+            break;
+        case 'top-right':
+            m.marginTop = "-".concat(h + offset, "px");
+            m.marginLeft = "".concat(w + offset, "px");
+            break;
+        case 'bottom-left':
+            m.marginTop = "".concat(offset, "px");
+            m.marginLeft = "-".concat(offset, "px");
+            break;
+        case 'bottom-right':
+            m.marginTop = "".concat(offset, "px");
+            m.marginLeft = "".concat(w + offset, "px");
+            break;
+        case 'top':
+        default:
+            m.marginTop = "-".concat(h + offset, "px");
+            break;
+    }
+    return m;
+}
+var MlMarker = function (_a) {
+    var _b = _a.passEventsThrough, passEventsThrough = _b === void 0 ? true : _b, _c = _a.contentOffset, contentOffset = _c === void 0 ? 5 : _c, props = __rest(_a, ["passEventsThrough", "contentOffset"]);
     var mapHook = useMap({
         mapId: props.mapId,
         waitForLayer: props.insertBeforeLayer,
     });
-    var mapState = useMapState({
-        mapId: props.mapId,
-        watch: { viewport: true },
-    });
-    var iframe = React.useRef(null);
-    var _a = React.useState({
-        width: "400px",
-        height: "500px",
-    }), iframeDimensions = _a[0], setIframeDimensions = _a[1];
-    var _b = React.useState(), markerPixelPos = _b[0], setMarkerPixelPos = _b[1];
-    React.useEffect(function () {
-        var _a, _b;
-        if (!((_b = (_a = mapHook.map) === null || _a === void 0 ? void 0 : _a.map) === null || _b === void 0 ? void 0 : _b.project))
-            return;
-        var _pixelPos = mapHook.map.map.project([props.lng, props.lat]);
-        setMarkerPixelPos(_pixelPos);
-    }, [mapHook.map, props.lng, props.lat, mapState.viewport]);
+    var _d = React.useState(null), marker = _d[0], setMarker = _d[1];
+    var container = React.useRef(null);
+    var iframeRef = React.useRef(null);
     React.useEffect(function () {
-        var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m;
-        if (!mapHook.map ||
-            !((_d = (_c = (_b = (_a = iframe.current) === null || _a === void 0 ? void 0 : _a.contentWindow) === null || _b === void 0 ? void 0 : _b.document) === null || _c === void 0 ? void 0 : _c.body) === null || _d === void 0 ? void 0 : _d.scrollHeight))
+        if (!mapHook.map)
             return;
-        var mapHeight = mapHook.map.map._container.clientHeight;
-        var _pixelPos = mapHook.map.map.project([props.lng, props.lat]);
-        var pixelToBottom = mapHeight - _pixelPos.y;
-        var iframeHeight = (_h = (_g = (_f = (_e = iframe.current) === null || _e === void 0 ? void 0 : _e.contentWindow) === null || _f === void 0 ? void 0 : _f.document) === null || _g === void 0 ? void 0 : _g.body) === null || _h === void 0 ? void 0 : _h.scrollHeight;
-        var iframeWidth = (_m = (_l = (_k = (_j = iframe.current) === null || _j === void 0 ? void 0 : _j.contentWindow) === null || _k === void 0 ? void 0 : _k.document) === null || _l === void 0 ? void 0 : _l.body) === null || _m === void 0 ? void 0 : _m.scrollWidth;
-        setIframeDimensions({
-            width: iframeWidth + "px",
-            height: (pixelToBottom < iframeHeight ? pixelToBottom : iframeHeight) + "px",
+        container.current = document.createElement('div');
+        var defaultMarkerStyle = {
+            width: '12px',
+            height: '12px',
+            background: 'linear-gradient(135deg, rgb(186, 208, 218) 0%, rgb(96, 209, 253) 100%)',
+            border: '1px solid rgba(255, 255, 255, 0.7)',
+            boxShadow: '0 2px 6px rgba(90, 0, 0, 0.2), 0 0 0 2px rgba(240, 147, 251, 0.2)',
+            borderRadius: '50%',
+        };
+        var markerStyle = __assign(__assign({}, defaultMarkerStyle), props.markerStyle);
+        var maplibreMarker = new maplibregl.Marker({
+            element: container.current,
+            anchor: 'center',
+        })
+            .setLngLat([props.lng, props.lat])
+            .addTo(mapHook.map.map);
+        setMarker(maplibreMarker);
+        var markerDot = document.createElement('div');
+        Object.entries(markerStyle).forEach(function (_a) {
+            var key = _a[0], value = _a[1];
+            markerDot.style.setProperty(key.replace(/([A-Z])/g, '-$1').toLowerCase(), String(value));
         });
-    }, [props.lng, props.lat, props.content]);
-    return (React.createElement(React.Fragment, null,
-        React.createElement(MlGeoJsonLayer, { geojson: {
-                type: "Feature",
-                geometry: {
-                    type: "Point",
-                    coordinates: [props.lng, props.lat],
-                },
-                properties: {},
-            }, paint: {
-                "circle-radius": 14,
-                "circle-color": "rgba(40,200,20,0.5)",
-            }, type: "circle", mapId: props.mapId }),
-        markerPixelPos && (React.createElement(Paper, { sx: {
-                opacity: 0.7,
-                position: "fixed",
-                display: "flex",
-                /** TODO: fix positioning delay when moving the map */
-                left: markerPixelPos.x,
-                top: markerPixelPos.y,
-                width: iframeDimensions.width,
-                height: iframeDimensions.height,
-                "&:hover": {
+        container.current.appendChild(markerDot);
+        return function () {
+            var _a;
+            markerDot.remove();
+            maplibreMarker.remove();
+            (_a = container.current) === null || _a === void 0 ? void 0 : _a.remove();
+        };
+    }, [mapHook.map, props.lng, props.lat, props.markerStyle, props.anchor]);
+    React.useEffect(function () {
+        if (marker) {
+            marker.setLngLat([props.lng, props.lat]);
+        }
+    }, [marker, props.lng, props.lat]);
+    function handleIframeLoad() {
+        var _a, _b, _c;
+        var iframeDoc = (_b = (_a = iframeRef.current) === null || _a === void 0 ? void 0 : _a.contentWindow) === null || _b === void 0 ? void 0 : _b.document;
+        if (iframeDoc && ((_c = iframeRef.current) === null || _c === void 0 ? void 0 : _c.parentElement)) {
+            var scrollHeight = iframeDoc.documentElement.scrollHeight;
+            iframeRef.current.parentElement.style.height = "".concat(scrollHeight, "px");
+        }
+    }
+    return (container.current &&
+        ReactDOM.createPortal(React.createElement(material.Box, { sx: __assign(__assign(__assign({ position: 'absolute', display: 'flex', width: '300px', maxHeight: '500px', opacity: passEventsThrough ? 1 : 0.7, zIndex: -1, transform: getBoxTransform(props.anchor) }, getBoxMargins(props.anchor, contentOffset, props.markerStyle)), { pointerEvents: passEventsThrough ? 'none' : 'auto', '&:hover': {
                     opacity: 1,
-                },
-                zIndex: -1,
-            } },
-            React.createElement("iframe", { style: { width: "100%" }, srcDoc: props.content, ref: iframe, sandbox: "allow-same-origin allow-popups-to-escape-sandbox", frameBorder: "0", title: mapHook.componentId })))));
-};
-MlMarker.defaultProps = {
-    mapId: undefined,
+                } }), props.containerStyle) },
+            React.createElement("iframe", { ref: iframeRef, onLoad: handleIframeLoad, style: __assign({ width: '100%', borderStyle: 'none' }, props.iframeStyle), srcDoc: "<div>\n\t<style>\n\t\tbody {\n\t\t\t".concat(Object.entries(props.iframeBodyStyle || {})
+                    .map(function (_a) {
+                    var key = _a[0], val = _a[1];
+                    return "".concat(key.replace(/([A-Z])/g, '-$1').toLowerCase(), ": ").concat(val, ";");
+                })
+                    .join(' '), "\n\t\t}\n\t</style>\n\t").concat(props.content || '', "\n</div>"), sandbox: "allow-same-origin allow-popups-to-escape-sandbox allow-scripts", title: mapHook.componentId })), container.current));
 };
 
 /**
@@ -6952,37 +7016,53 @@ var sketchTools = [
  *
  */
 var MlSketchTool = function (props) {
-    var _a, _b;
     var mapHook = useMap({
         mapId: props.mapId,
         waitForLayer: props.insertBeforeLayer,
     });
-    var _c = React.useState(), hoveredGeometry = _c[0], setHoveredGeometry = _c[1];
-    var _d = React.useState({
+    var _a = React.useState(), hoveredGeometry = _a[0], setHoveredGeometry = _a[1];
+    var _b = React.useState({
         activeGeometryIndex: undefined,
         selectedGeoJson: undefined,
         geometries: [],
         drawMode: undefined,
-    }), sketchState = _d[0], setSketchState = _d[1];
+    }), sketchState = _b[0], setSketchState = _b[1];
+    console.log(sketchState);
     React.useEffect(function () {
         if (!(typeof props.onChange === 'function'))
             return;
         props.onChange(sketchState);
     }, [sketchState, props.onChange]);
     var buttonStyle = __assign({}, props.buttonStyleOverride);
+    // const buttonClickHandler = (buttonDrawMode: keyof MapboxDraw.Modes) => {
+    // 	setSketchState((_state) => ({
+    // 		drawMode: _state.drawMode !== buttonDrawMode ? buttonDrawMode : undefined,
+    // 		geometries: _state.geometries,
+    // 		activeGeometryIndex: undefined,
+    // 		selectedGeoJson: undefined,
+    // 	}));
+    // };
     var buttonClickHandler = function (buttonDrawMode) {
-        setSketchState(function (_state) { return ({
-            drawMode: _state.drawMode !== buttonDrawMode ? buttonDrawMode : undefined,
-            geometries: _state.geometries,
-            activeGeometryIndex: undefined,
-            selectedGeoJson: undefined,
-        }); });
+        var modeRef = undefined;
+        setSketchState(function (prevState) {
+            modeRef = prevState.drawMode;
+            return __assign(__assign({}, prevState), { drawMode: undefined, activeGeometryIndex: undefined, selectedGeoJson: undefined });
+        });
+        requestAnimationFrame(function () {
+            setSketchState(function (prevState) {
+                if ((modeRef === 'draw_polygon' || modeRef === 'draw_line_string') &&
+                    buttonDrawMode === 'draw_point') {
+                    return __assign(__assign({}, prevState), { drawMode: undefined });
+                }
+                return __assign(__assign({}, prevState), { drawMode: buttonDrawMode });
+            });
+        });
     };
     var removeGeoJson = function (geoJson) {
         setSketchState(function (_sketchState) {
             var _geometries = __spreadArray([], _sketchState.geometries, true);
             _geometries.splice(_geometries.indexOf(geoJson), 1);
-            return __assign(__assign({}, _sketchState), { geometries: _geometries, activeGeometryIndex: _sketchState.activeGeometryIndex
+            return __assign(__assign({}, _sketchState), { drawMode: undefined, geometries: _geometries, activeGeometryIndex: _sketchState.activeGeometryIndex
                     ? _sketchState.activeGeometryIndex - 1
                     : undefined });
         });
@@ -7019,6 +7099,7 @@ var MlSketchTool = function (props) {
             React.createElement(ButtonGroup, null,
                 React.createElement(SketchToolButtons, null))),
         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]))
                     return;
                 setSketchState(function (_sketchState) {
@@ -7037,6 +7118,24 @@ var MlSketchTool = function (props) {
                     else {
                         _geometries[_sketchState.activeGeometryIndex] = feature[0];
                     }
+                    // Check if the geometry type is point and if the coordinates have changed to exit draw mode after editing
+                    var changedPoint = function () {
+                        var _a, _b, _c, _d;
+                        if (_sketchState.selectedGeoJson &&
+                            typeof _sketchState.activeGeometryIndex !== 'undefined' &&
+                            _sketchState.geometries[_sketchState.activeGeometryIndex] &&
+                            _sketchState.geometries[_sketchState.activeGeometryIndex].geometry.type ===
+                                'Point') {
+                            var selectedCoords = (_b = (_a = _sketchState.selectedGeoJson) === null || _a === void 0 ? void 0 : _a.geometry) === null || _b === void 0 ? void 0 : _b.coordinates;
+                            var activeCoords = (_d = (_c = _sketchState.geometries[_sketchState.activeGeometryIndex]) === null || _c === void 0 ? void 0 : _c.geometry) === null || _d === void 0 ? void 0 : _d.coordinates;
+                            // Compare coordinates
+                            return JSON.stringify(selectedCoords) !== JSON.stringify(activeCoords);
+                        }
+                        return false;
+                    };
+                    if (changedPoint()) {
+                        _sketchState.drawMode = undefined;
+                    }
                     return __assign(__assign({}, _sketchState), { geometries: _geometries });
                 });
             }, onFinish: function () {
@@ -7056,46 +7155,73 @@ var MlSketchTool = function (props) {
                         }, onMouseLeave: function () {
                             setHoveredGeometry(undefined);
                         } },
-                        React.createElement(LayerListItem, { listItemSx: buttonStyle, configurable: true, layerComponent: React.createElement(MlGeoJsonLayer, { mapId: props.mapId, geojson: el, layerId: String(el.id) }), type: 'layer', name: String(el.id), description: el.geometry.type }),
+                        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',
                             } },
                             React.createElement(ButtonGroup, { size: "small" },
-                                React.createElement(material.Button, { 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(material.Button, { sx: buttonStyle, onClick: function () {
-                                        setSketchState(function (_sketchState) { return (__assign(__assign({}, _sketchState), { selectedGeoJson: el, activeGeometryIndex: _sketchState.geometries.indexOf(el), drawMode: 'simple_select' })); });
-                                    } },
-                                    React.createElement(EditIcon, null)),
-                                React.createElement(material.Button, { sx: buttonStyle, onClick: function () {
-                                        removeGeoJson(el);
-                                        setHoveredGeometry(undefined);
-                                    } },
-                                    React.createElement(DeleteIcon, null)))))))); }),
+                                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) {
+                                                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': '#dd9900',
-                        'circle-opacity': 0.4,
+                        'circle-color': '#000000',
+                        'circle-opacity': 0.2,
                         'circle-radius': 10,
                     },
                     line: {
-                        'line-color': '#dd9900',
-                        'line-opacity': 0.4,
+                        'line-color': '#000000',
+                        'line-opacity': 0.2,
                         'line-width': 10,
                     },
                     fill: {
-                        'fill-color': '#dd9900',
-                        'fill-opacity': 0.4,
+                        'fill-color': '#000000',
+                        'fill-opacity': 0.2,
                     },
-                } }))),
-        sketchState.drawMode === 'simple_select' && (React.createElement(material.Typography, { sx: { fontSize: '0.6em' } },
-            "Edit ", (_b = (_a = sketchState.selectedGeoJson) === null || _a === void 0 ? void 0 : _a.geometry) === null || _b === void 0 ? void 0 :
-            _b.type))));
+                } })))));
 };
 MlSketchTool.defaultProps = {
     mapId: undefined,