@luomus/laji-form 15.1.51 → 15.1.53

package/dist/styles.css

@@ -1900,6 +1900,24 @@ li.laji-map-layer-control-layer-item.active span {
 	z-index: -1;
 }
 
+.laji-map .leaflet-control-locate-location circle {
+  animation: laji-map-control-locate-throb 4s ease infinite;
+}
+
+@keyframes laji-map-control-locate-throb {
+  0% {
+    stroke-width: 1;
+  }
+
+  50% {
+    stroke-width: 3;
+    transform: scale(0.8, 0.8);
+  }
+
+  100% {
+    stroke-width: 1;
+  }
+}
 
 
 .leaflet-measure-path-measurement {

package/lib/components/components.js

@@ -401,8 +401,8 @@ function Label({ label, children, id, required, registry = {}, uiSchema = {} })
     }, []);
     const LabelComponent = labelComponent || "label";
     const labelElem = (React.createElement(LabelComponent, { htmlFor: id, "aria-describedby": `${id}--help` },
-        React.createElement("div", null,
-            React.createElement("strong", { dangerouslySetInnerHTML: { __html: label + requiredHtml } }),
+        React.createElement("div", { style: { whiteSpace: "normal" } },
+            React.createElement("span", { dangerouslySetInnerHTML: { __html: label + requiredHtml } }),
             showHelp ? React.createElement(Help, { focusable: true, onFocus: onHelpFocus, onBlur: onHelpBlur, onClick: onHelpClick, id: id }) : null),
         children));
     return help ? React.createElement(React.Fragment, null,

package/lib/components/fields/LocationChooserField.js

@@ -411,7 +411,7 @@ class LocationButton extends React.Component {
             else {
                 const { translations } = that.props.formContext;
                 const overlay = hasCoordinates ? (React.createElement(Popover, { id: `${id}-location-peeker`, title: `${translations.ChooseLocation} (${translations.below} ${translations.currentLocation})` },
-                    React.createElement(MapArrayField_1.Map, Object.assign({}, this.state.miniMap, { hidden: !this.state.miniMap || this.state.modalMap, style: { width: 200, height: 200 }, singleton: true, formContext: that.props.formContext, bodyAsDialogRoot: false, ref: this.setMiniMapRef })))) : (React.createElement(Tooltip, { id: `${id}-location-peeker` }, label || that.props.formContext.translations.ChooseLocation));
+                    React.createElement(MapArrayField_1.Map, Object.assign({}, this.state.miniMap, { hidden: !this.state.miniMap || this.state.modalMap, style: { width: 200, height: 200 }, singleton: true, formContext: that.props.formContext, bodyAsDialogRoot: false, syncZoomToDataOnDataChangeOnSingleton: true, ref: this.setMiniMapRef })))) : (React.createElement(Tooltip, { id: `${id}-location-peeker` }, label || that.props.formContext.translations.ChooseLocation));
                 return (React.createElement(components_1.OverlayTrigger, { key: `${id}-set-coordinates-${glyph}`, overlay: overlay, placement: "left", hoverable: true, formContext: that.props.formContext, onEntered: hasCoordinates ? this.onEntered : undefined }, button));
             }
         };

package/lib/components/fields/MapArrayField.js

@@ -1688,7 +1688,9 @@ class Map extends React.Component {
                     default:
                         if (!equals(mapOptions[key], prevMapOptions[key])) {
                             this.map.setOption(key, mapOptions[key]);
-                            if (this.props.singleton && mapOptions.zoomToData && key === "data") {
+                            if (this.props.syncZoomToDataOnDataChangeOnSingleton
+                                && this.props.singleton
+                                && mapOptions.zoomToData && key === "data") {
                                 this.map.zoomToData(mapOptions.zoomToData);
                             }
                         }

package/lib/components/fields/MapField.d.ts

@@ -31,17 +31,15 @@ export default class MapField extends React.Component<any, any, any> {
     map: any;
     showMobileEditorMap: () => void;
     getDrawOptions: (props: any) => any;
-    getEditWithModalFeatureStyle: () => {
-        fillOpacity: number;
-        color: string;
-        weight: string;
-    };
     getGeometry: (props: any) => any;
+    getMobileGeometry: () => any;
+    setMoved: (moved: any) => void;
     onOptionsChanged: (options: any) => void;
     onChange: (events: any) => void;
     onMobileEditorChange: (point: any) => void;
     onHideMobileEditorMap: (options: any) => void;
-    onLocate: (latlng: any, radius: any, forceShow: any) => void;
+    onLocate: (latlng: any, forceShow: any) => void;
+    onLocateError: () => void;
     renderBlocker(): JSX.Element | undefined;
 }
 import * as React from "react";

package/lib/components/fields/MapField.js

@@ -108,22 +108,35 @@ class MapField extends React.Component {
         this.getDrawOptions = (props) => {
             const { uiSchema, disabled, readonly } = props;
             const options = utils_1.getUiOptions(uiSchema);
-            const { mapOptions = {}, mobileEditor } = options;
-            const drawOptions = Object.assign(Object.assign({}, (mapOptions.draw || {})), { geoData: this.getGeometry(props), onChange: this.onChange, editable: !disabled && !readonly });
-            if (mobileEditor) {
-                drawOptions.getFeatureStyle = this.getEditWithModalFeatureStyle;
-            }
+            const { mapOptions = {} } = options;
+            const drawOptions = Object.assign(Object.assign({}, (mapOptions.draw || {})), { geoData: this.getGeometry(props), onChange: this.onChange, editable: !disabled && !readonly && !options.mobileEditor });
             return drawOptions;
         };
-        this.getEditWithModalFeatureStyle = () => ({
-            fillOpacity: 0,
-            color: "black",
-            weight: "2",
-        });
         this.getGeometry = (props) => {
             const { formData } = props;
             return formData && Object.keys(formData).length ? formData : undefined;
         };
+        this.getMobileGeometry = () => {
+            var _a;
+            if (this.props.formData) {
+                return this.props.formData;
+            }
+            else if ((_a = this.map) === null || _a === void 0 ? void 0 : _a.userLocation) {
+                return {
+                    type: "Point",
+                    coordinates: [this.map.userLocation.latlng.lng, this.map.userLocation.latlng.lat]
+                };
+            }
+            else {
+                return {
+                    type: "Point",
+                    coordinates: [24.94782264266911, 60.17522413438655]
+                };
+            }
+        };
+        this.setMoved = (moved) => {
+            this.setState({ moved });
+        };
         this.onOptionsChanged = (options) => {
             this.setState({ mapOptions: Object.assign(Object.assign({}, this.state.mapOptions), options) });
         };
@@ -170,7 +183,7 @@ class MapField extends React.Component {
         this.onHideMobileEditorMap = (options) => {
             this.setState({ mobileEditor: { visible: false, options } });
         };
-        this.onLocate = (latlng, radius, forceShow) => {
+        this.onLocate = (latlng, forceShow) => {
             const { geometryCollection = true, mobileEditor, createOnLocate } = utils_1.getUiOptions(this.props.uiSchema);
             const isEmpty = !this.getGeometry(this.props);
             if (!latlng || !isEmpty) {
@@ -182,8 +195,6 @@ class MapField extends React.Component {
                     this.setState({
                         mobileEditor: {
                             visible: true,
-                            center: latlng,
-                            radius,
                             options: (this.state.mobileEditor || {}).options || {}
                         },
                         located: true
@@ -197,7 +208,18 @@ class MapField extends React.Component {
                 this.props.onChange(geometryCollection ? { type: "GeometryCollection", geometries: [geometry] } : geometry);
             }
         };
-        this.state = { located: false };
+        this.onLocateError = () => {
+            this.setState({
+                mobileEditor: {
+                    visible: true,
+                    options: (this.state.mobileEditor || {}).options || {}
+                },
+            });
+        };
+        this.state = {
+            located: false,
+            moved: false
+        };
         this.props.formContext.services.settings.bind(this, props);
     }
     componentDidMount() {
@@ -225,13 +247,15 @@ class MapField extends React.Component {
         }
     }
     render() {
+        var _a;
         const TitleFieldTemplate = utils_3.getTemplate("TitleFieldTemplate", this.props.registry, utils_1.getUiOptions(this.props.uiSchema));
         const { uiSchema, formData } = this.props;
         const { height = 400, emptyHelp, mapOptions = {}, mobileEditor: _mobileEditor, data } = utils_1.getUiOptions(uiSchema);
         const isEmpty = !formData || !formData.geometries || !formData.geometries.length;
         const _mapOptions = Object.assign(Object.assign(Object.assign({ controls: true, clickBeforeZoomAndPan: true }, mapOptions), (this.state.mapOptions || {})), { locate: {
                 on: this.state.locateOn || false,
-                onLocationFound: this.onLocate
+                onLocationFound: this.onLocate,
+                onLocationError: this.onLocateError
             } });
         const isSingleton = _mapOptions.singleton;
         let singletonHasLocate = false;
@@ -258,14 +282,6 @@ class MapField extends React.Component {
         const { lang, topOffset, bottomOffset } = this.props.formContext;
         const { mobileEditor } = this.state;
         let mobileEditorOptions = utils_1.isObject(mobileEditor) ? mobileEditor : {};
-        const geometry = this.getGeometry(this.props);
-        if (geometry) {
-            const { center, radius } = getCenterAndRadiusFromGeometry(geometry);
-            mobileEditorOptions = {
-                center,
-                radius
-            };
-        }
         if (this.map && this.map.userLocation) {
             mobileEditorOptions.userLocation = this.map.userLocation;
         }
@@ -277,7 +293,7 @@ class MapField extends React.Component {
                     React.createElement(MapArrayField_1.MapComponent, Object.assign({}, _mapOptions, { ref: this.setMapRef, draw: this.getDrawOptions(this.props), data: extraData, lang: lang, zoomToData: { paddingInMeters: 200 }, panel: emptyHelp && isEmpty ? { panelTextContent: emptyHelp } : undefined, formContext: this.props.formContext, onOptionsChanged: this.onOptionsChanged })),
                     this.map && this.map.container && react_dom_1.createPortal(this.renderBlocker(), this.map.container))),
             this.state.mapRendered && mobileEditor && mobileEditor.visible &&
-                React.createElement(MobileEditorMap, Object.assign({}, mobileEditorOptions, { options: mobileEditor.options, onChange: this.onMobileEditorChange, onClose: this.onHideMobileEditorMap, map: this.map, formContext: this.props.formContext }))));
+                React.createElement(MobileEditorMap, Object.assign({}, mobileEditorOptions, { options: mobileEditor.options, onChange: this.onMobileEditorChange, onClose: this.onHideMobileEditorMap, map: this.map, formContext: this.props.formContext, geometry: this.getMobileGeometry(), moved: this.state.moved, setMoved: this.setMoved, defaultLocation: !this.props.formData && !((_a = this.map) === null || _a === void 0 ? void 0 : _a.userLocation) }))));
     }
     renderBlocker() {
         const { blockBeforeLocation } = utils_1.getUiOptions(this.props.uiSchema);
@@ -310,7 +326,6 @@ MapField.propTypes = {
 };
 class MobileEditorMap extends React.Component {
     constructor(props) {
-        var _a, _b;
         super(props);
         this.DEFAULT_RADIUS_PIXELS = 100;
         this.setMobileEditorMapRef = (mapComponent) => {
@@ -322,56 +337,31 @@ class MobileEditorMap extends React.Component {
         this.setOkButtonRef = (elem) => {
             this.okButtonElem = react_dom_1.findDOMNode(elem);
         };
-        this.updateDimensions = () => {
-            var _a, _b;
-            this.setState({ width: ((_a = window.visualViewport) === null || _a === void 0 ? void 0 : _a.width) || window.innerWidth, height: ((_b = window.visualViewport) === null || _b === void 0 ? void 0 : _b.height) || window.innerHeight });
-        };
         this.onChange = () => {
-            const { map } = this.map;
-            const centerLatLng = map.getCenter();
-            const centerPoint = map.latLngToContainerPoint(centerLatLng);
-            const leftEdgeAsLatLng = map.containerPointToLatLng({ x: centerPoint.x - this.DEFAULT_RADIUS_PIXELS, y: centerPoint.y });
-            const radius = map.getCenter().distanceTo(leftEdgeAsLatLng);
-            this.props.onChange({
-                type: "Point",
-                coordinates: [centerLatLng.lng, centerLatLng.lat],
-                radius
-            });
+            if (this.marker) {
+                const { lat, lng } = this.marker.getLatLng();
+                this.map.map.setView({ lng, lat }, 12);
+                const markerGeometry = {
+                    type: "Point",
+                    coordinates: [lng, lat]
+                };
+                this.props.onChange(markerGeometry);
+            }
             this.onClose();
         };
-        this.computePadding = () => {
-            var _a, _b;
-            // If the rendered element wasn't full screen, we couldn't use these as height/width.
-            const height = ((_a = window.visualViewport) === null || _a === void 0 ? void 0 : _a.height) || window.innerHeight;
-            const width = ((_b = window.visualViewport) === null || _b === void 0 ? void 0 : _b.width) || window.innerWidth;
-            const topToCircleEdgePixels = parseInt(height / 2 - this.DEFAULT_RADIUS_PIXELS);
-            const leftToCircleEdgePixels = parseInt(width / 2 - this.DEFAULT_RADIUS_PIXELS);
-            const padding = [
-                leftToCircleEdgePixels,
-                topToCircleEdgePixels
-            ];
-            return padding;
+        this.handleMapClick = (e) => {
+            if (!this.props.moved) {
+                this.props.setMoved(true);
+            }
+            this.setMarkerLatLng(e.latlng);
         };
-        this.setViewFromCenterAndRadius = (center, radius) => {
-            if (center) {
-                if (radius) {
-                    const centerLatLng = L.latLng(center);
-                    const data = {
-                        geoData: {
-                            type: "Point",
-                            coordinates: [centerLatLng.lng, centerLatLng.lat],
-                            radius
-                        },
-                        getFeatureStyle: this.invisibleStyle
-                    };
-                    const zoomToData = {
-                        padding: this.computePadding()
-                    };
-                    return { data, zoomToData };
-                }
-                return { center };
+        this.setMarkerLatLng = (latlng) => {
+            if (this.marker) {
+                this.marker.setLatLng(latlng);
+            }
+            else {
+                this.marker = L.marker(latlng, { icon: this.map._createIcon(), draggable: true }).addTo(this.map.map);
             }
-            return {};
         };
         this.invisibleStyle = () => {
             return {
@@ -384,65 +374,56 @@ class MobileEditorMap extends React.Component {
                 this.onClose();
             }
         };
-        this.onLocate = (latlng, accuracy) => {
-            if (this.props.center || !this.mounted)
-                return;
-            const options = this.setViewFromCenterAndRadius(latlng, accuracy);
-            if (options.data && options.zoomToData) {
-                this.setState({ mapOptions: { data: options.data } }, () => {
-                    this.map.zoomToData(options.zoomToData);
-                });
-            }
-            else if (options.center) {
-                this.map.setCenter(options.center);
-            }
-        };
         this.onClose = () => {
             this.props.onClose(this.map.getOptions());
         };
-        const { center, radius } = this.props;
+        const { geometry } = this.props;
         this.state = {
-            mapOptions: this.setViewFromCenterAndRadius(center, radius),
-            width: ((_a = window.visualViewport) === null || _a === void 0 ? void 0 : _a.width) || window.innerWidth,
-            height: ((_b = window.visualViewport) === null || _b === void 0 ? void 0 : _b.height) || window.innerHeight,
+            geometry: [{ geoData: geometry }]
         };
     }
     componentDidMount() {
         this.mounted = true;
         this.okButtonElem.focus();
-        window.addEventListener("resize", this.updateDimensions);
+        if (this.props.geometry) {
+            const [lng, lat] = this.props.geometry.coordinates;
+            this.setMarkerLatLng({ lng, lat });
+            if (this.props.defaultLocation) {
+                this.map.map.setView({ lng, lat }, 4);
+            }
+            else {
+                this.map.map.setView({ lng, lat }, 12);
+                this.props.setMoved(true);
+            }
+            this.marker.on("dragend", () => {
+                if (!this.props.moved) {
+                    this.props.setMoved(true);
+                }
+            });
+        }
+        this.map.map.on("click", this.handleMapClick);
     }
-    componenWillUnmount() {
+    componentWillUnmount() {
         this.mounted = false;
-        window.removeEventListener("resize", this.updateDimensions);
-    }
-    getCircle(radiusPixels) {
-        return (React.createElement("svg", { width: this.state.width, height: this.state.height, style: { position: "absolute", zIndex: 1000, top: 0, left: 0, pointerEvents: "none" } },
-            React.createElement("defs", null,
-                React.createElement("mask", { id: "mask", x: "0", y: "0", width: this.state.width, height: this.state.height },
-                    React.createElement("rect", { x: "0", y: "0", width: this.state.width, height: this.state.height, fill: "#fff" }),
-                    React.createElement("circle", { cx: this.state.width / 2, cy: this.state.height / 2, r: radiusPixels }))),
-            React.createElement("rect", { x: "0", y: "0", width: this.state.width, height: this.state.height, mask: "url(#mask)", fillOpacity: "0.2" }),
-            React.createElement("circle", { cx: this.state.width / 2, cy: this.state.height / 2, r: radiusPixels, stroke: "black", strokeWidth: "2", fillOpacity: "0" }),
-            React.createElement("line", { x1: this.state.width / 2, y1: this.state.height / 2 - radiusPixels, x2: this.state.width / 2, y2: this.state.height / 2 + radiusPixels, stroke: "black", strokeWidth: "2" }),
-            React.createElement("line", { x1: this.state.width / 2 - radiusPixels, y1: this.state.height / 2, x2: this.state.width / 2 + radiusPixels, y2: this.state.height / 2, stroke: "black", strokeWidth: "2" })));
+        if (this.marker) {
+            this.marker.remove();
+        }
+        this.map.map.off("click", this.handleMapClick);
     }
     render() {
-        let _a = this.props.map.getOptions(), { rootElem, customControls, draw, data, zoomToData, zoom, center, locate } = _a, options = __rest(_a, ["rootElem", "customControls", "draw", "data", "zoomToData", "zoom", "center", "locate"]); // eslint-disable-line @typescript-eslint/no-unused-vars
+        let _a = this.props.map.getOptions(), { rootElem, customControls, draw, data, zoomToData, zoom, locate } = _a, options = __rest(_a, ["rootElem", "customControls", "draw", "data", "zoomToData", "zoom", "locate"]); // eslint-disable-line @typescript-eslint/no-unused-vars
         const { userLocation } = this.props;
-        options = Object.assign(Object.assign(Object.assign({}, options), (this.props.options || {})), this.state.mapOptions);
-        options.locate = {
-            on: true,
-            userLocation,
-            onLocationFound: this.onLocate,
-            panOnFound: false
-        };
         const { translations } = this.props.formContext;
+        const mapComponentProps = Object.assign(Object.assign(Object.assign({}, options), (this.props.options || {})), { locate: {
+                on: true,
+                userLocation,
+                panOnFound: false,
+            }, singleton: true, clickBeforeZoomAndPan: false, viewLocked: false, controls: { draw: false }, ref: this.setMobileEditorMapRef, formContext: this.props.formContext, panel: {
+                panelTextContent: this.props.formContext.translations.MobileMapInstructions
+            } });
         return (React.createElement(components_2.Fullscreen, { onKeyDown: this.onKeyDown, tabIndex: -1, ref: this.setContainerRef, formContext: this.props.formContext },
-            React.createElement(MapArrayField_1.MapComponent, Object.assign({}, options, { singleton: true, clickBeforeZoomAndPan: false, viewLocked: false, controls: { draw: false }, ref: this.setMobileEditorMapRef, formContext: this.props.formContext })),
-            this.state.mapRendered && react_dom_1.createPortal(this.getCircle(this.DEFAULT_RADIUS_PIXELS), this.map.container),
+            React.createElement(MapArrayField_1.MapComponent, Object.assign({}, mapComponentProps)),
             React.createElement("div", { className: "floating-buttons-container" },
-                React.createElement(components_2.Button, { block: true, onClick: this.onChange, ref: this.setOkButtonRef }, translations.ChooseThisLocation),
-                React.createElement(components_2.Button, { block: true, onClick: this.onClose }, translations.Cancel))));
+                React.createElement(components_2.Button, { block: true, onClick: this.onChange, variant: "primary", ref: this.setOkButtonRef, disabled: !this.props.moved }, translations.ChooseThisLocation))));
     }
 }

package/lib/translations.json

@@ -524,6 +524,11 @@
         "en": "Exit fullscreen mode",
         "sv": "Avsluta helskärmsläge"
     },
+    "mobileMapInstructions": {
+        "fi": "Valitse sijainti napauttamalla karttaa tai raahaamalla olemassa olevaa pistettä.",
+        "en": "Select a location by tapping the map or dragging an existing point.",
+        "sv": "Välj en plats genom att trycka på kartan eller dra en befintlig punkt."
+    },
     "openShorthand": {
         "fi": "Avaa pikasyöttötila",
         "en": "Open shorthand mode",

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@luomus/laji-form",
-  "version": "15.1.51",
+  "version": "15.1.53",
   "description": "React module capable of building dynamic forms from Laji form json schemas",
   "main": "lib/index.js",
   "types": "lib/index.d.ts",
@@ -39,7 +39,7 @@
   "repository": "git+https://github.com/luomus/laji-form.git",
   "license": "MIT",
   "dependencies": {
-    "@luomus/laji-map": "^5.1.13",
+    "@luomus/laji-map": "^5.1.16",
     "@luomus/laji-validate": "^0.0.122",
     "@rjsf/core": "~5.1.0",
     "@rjsf/utils": "~5.1.0",