@nextgis/ngw-leaflet 1.18.3 → 1.18.6

package/lib/ngw-leaflet.esm-browser.js

@@ -1,4 +1,4 @@
-/** Bundle of @nextgis/ngw-leaflet; version: 1.18.3; author: NextGIS */
+/** Bundle of @nextgis/ngw-leaflet; version: 1.18.6; author: NextGIS */
 function styleInject(css, ref) {
   if ( ref === void 0 ) ref = {};
   var insertAt = ref.insertAt;
@@ -19016,8 +19016,9 @@ class NgwConnector {
      * ```
      */
     apiRequest(name, params_ = {}, requestOptions = {}) {
-        var _a;
+        var _a, _b;
         const { method, headers, withCredentials, responseType } = requestOptions;
+        params_ = (_a = requestOptions.params) !== null && _a !== void 0 ? _a : params_;
         const params = objectRemoveEmpty(params_);
         const makeApiRequest = () => apiRequest({ name, params, requestOptions, connector: this });
         if (requestOptions.cache && method === 'GET') {
@@ -19029,7 +19030,7 @@ class NgwConnector {
                     withCredentials,
                     responseType,
                     baseUrl: this.options.baseUrl,
-                    userId: (_a = this.user) === null || _a === void 0 ? void 0 : _a.id,
+                    userId: (_b = this.user) === null || _b === void 0 ? void 0 : _b.id,
                 }),
             });
         }
@@ -22077,15 +22078,16 @@ const svgPath = {
     minus: '<path d="m12 7.5v-3h-12v3z"/>',
     asterisk: '<path d="m7.59 12v-3.27l2.83 1.64 1.58-2.74-2.85-1.64 2.83-1.64-1.56-2.74-2.83 1.64v-3.24h-3.17v3.24l-2.85-1.64-1.57 2.74 2.84 1.64-2.84 1.64 1.57 2.74 2.85-1.64v3.27z"/>',
 };
+const VIEW_BOX = 12;
 const STROKE = 0.8;
-function generateSvg(width, height, stroke = 0, content) {
+function generateSvg({ width, height, stroke = 0, content, }) {
     const s = stroke / 2;
     const svg = `<svg
     version="1.1"
     xmlns="http://www.w3.org/2000/svg"
     width="${width}"
     height="${height}"
-    viewBox="-${s} -${s} ${width + stroke} ${height + stroke}"
+    viewBox="-${s} -${s} ${VIEW_BOX + stroke} ${VIEW_BOX + stroke}"
   >${content}</svg>`;
     return svg;
 }
@@ -22094,36 +22096,45 @@ function insertSvg(svg) {
     const oDOM = oParser.parseFromString(svg, 'image/svg+xml');
     return oDOM.documentElement;
 }
+/**
+ * Retrieves an icon with the provided options.
+ * @function
+ * @param {IconOptions} [opt={}] - Options for the icon.
+ * @returns {IconPaint} Icon paint object.
+ */
 function getIcon(opt = {}) {
-    var _a, _b, _c, _d, _e;
-    // default values
+    var _a, _b, _c, _d, _e, _f;
+    // Default values
     const shape = (_a = opt.shape) !== null && _a !== void 0 ? _a : 'circle';
     const color = (_b = opt.color) !== null && _b !== void 0 ? _b : 'blue';
     const strokeColor = (_c = opt.strokeColor) !== null && _c !== void 0 ? _c : 'white';
-    const size = (_d = opt.size) !== null && _d !== void 0 ? _d : 12;
+    const size = (_d = opt.size) !== null && _d !== void 0 ? _d : VIEW_BOX;
     const rotate = (_e = opt.rotate) !== null && _e !== void 0 ? _e : 0;
-    const anchor = size / 2;
-    const defSize = 12;
+    const anchor = (_f = opt.anchor) !== null && _f !== void 0 ? _f : [size / 2, size / 2];
     const stroke = opt.stroke !== undefined ? Number(opt.stroke) : STROKE;
-    const scale = size / defSize;
     const pathAlias = opt.p || svgPath[shape] || 'circle';
     const path = typeof pathAlias === 'string' ? pathAlias : pathAlias(opt);
-    const svg = insertSvg(opt.svg || generateSvg(size, size, stroke * scale, path));
-    const fistChild = svg.firstChild;
-    const scaledAnchor = defSize / 2;
-    const transform = `scale(${scale}) rotate(${rotate}, ${scaledAnchor}, ${scaledAnchor})`;
-    fistChild.setAttribute('fill', color);
+    const svg = insertSvg(opt.svg ||
+        generateSvg({
+            width: size,
+            height: size,
+            stroke,
+            content: path,
+        }));
+    svg.setAttribute('width', String(size));
+    svg.setAttribute('height', String(size));
+    svg.setAttribute('fill', color);
     if (stroke) {
-        fistChild.setAttribute('stroke', strokeColor);
-        fistChild.setAttribute('stroke-width', String(stroke));
+        svg.setAttribute('stroke', strokeColor);
+        svg.setAttribute('stroke-width', String(stroke));
     }
-    fistChild.setAttribute('transform', transform);
     const s = new XMLSerializer();
     return {
         type: 'icon',
         iconSize: [size, size],
-        iconAnchor: [anchor, anchor],
+        iconAnchor: anchor,
         html: s.serializeToString(svg),
+        rotate,
         svg,
     };
 }
@@ -22928,19 +22939,6 @@ function createFeaturePositionOptions(features) {
     };
 }
 
-function createMouseEvent({ layer, source, }) {
-    const layer_ = source.target;
-    const feature = layer_.feature;
-    const opt = {
-        layer,
-        feature,
-        event: convertMapClickEvent(source),
-        source,
-        ...createFeaturePositionOptions(feature),
-    };
-    return opt;
-}
-
 function findMostFrequentGeomType(arr) {
     const counts = {};
     for (let fry = 0; fry < arr.length; fry++) {
@@ -22995,6 +22993,201 @@ class BaseAdapter {
     }
 }
 
+function createMouseEvent({ layer, source, }) {
+    const layer_ = source.target;
+    const feature = layer_.feature;
+    const opt = {
+        layer,
+        feature,
+        event: convertMapClickEvent(source),
+        source,
+        ...createFeaturePositionOptions(feature),
+    };
+    return opt;
+}
+
+class GeoJsonEvents {
+    constructor(layer) {
+        this.layer = layer;
+    }
+    handleMouseEvents(layer) {
+        const { onClick, onLayerClick, onMouseOut, onMouseOver } = this.layer.options;
+        // TODO: remove backward compatibility for onLayerClick
+        const onClick_ = onClick || onLayerClick;
+        if (onClick_) {
+            this._onclick = (e) => {
+                const selected = !!this.layer._getSelected(layer);
+                onClick_({
+                    selected,
+                    ...this._createMouseEvent(e),
+                });
+            };
+            layer.on('click', this._onclick, this);
+        }
+        if (onMouseOut) {
+            this._mouseout = (e) => {
+                onMouseOut(this._createMouseEvent(e));
+            };
+            layer.on('mouseout', this._mouseout, this);
+        }
+        if (onMouseOver) {
+            this._mouseover = (e) => {
+                onMouseOver(this._createMouseEvent(e));
+            };
+            layer.on('mouseover', this._mouseover, this);
+        }
+    }
+    stopMouseEvents(layer) {
+        if (this._mouseover) {
+            layer.off('mouseover', this._mouseover, this);
+        }
+        if (this._mouseout) {
+            layer.off('mouseout', this._mouseout, this);
+        }
+        if (this._onclick) {
+            layer.off('click', this._onclick, this);
+        }
+    }
+    _createMouseEvent(source) {
+        return createMouseEvent({
+            layer: this.layer,
+            source: source,
+        });
+    }
+}
+
+class GeoJsonPaint {
+    constructor(layer) {
+        this.layer = layer;
+    }
+    setPaintEachLayer(paint) {
+        this.layer._layers.forEach((layerDef) => {
+            this.setPaint(layerDef, paint);
+        });
+    }
+    setPaint(layerDef, paint) {
+        let style = undefined;
+        const { layer, feature } = layerDef;
+        if (layer && feature) {
+            if (isPaintCallback(paint)) {
+                style = paint(feature);
+            }
+            else if (isPaint(paint)) {
+                style = paint;
+            }
+            if (style) {
+                if (this.layer.type === 'point' && style.type === 'icon') {
+                    const marker = layer;
+                    const divIcon = this._createDivIcon(style);
+                    setTimeout(() => {
+                        marker.setIcon(divIcon);
+                    }, 10);
+                }
+                else if ('setStyle' in layer) {
+                    layer.setStyle(this.preparePaint(style));
+                }
+            }
+        }
+    }
+    preparePaint(paint) {
+        if (paint.type !== 'get-paint') {
+            const paintAliases = [
+                ['color', 'strokeColor'],
+                ['opacity', 'strokeOpacity'],
+                ['stroke', 'stroke'],
+                ['fillColor', 'fillColor'],
+                ['fillOpacity', 'fillOpacity'],
+                ['fill', 'fill'],
+                ['weight', 'weight'],
+            ];
+            const aliases = this.layer.type === 'line'
+                ? [
+                    ['color', 'strokeColor'],
+                    ['opacity', 'strokeOpacity'],
+                    ['weight', 'weight'],
+                ]
+                : paintAliases;
+            const readyPaint = {};
+            if ('radius' in paint && typeof paint.radius === 'number') {
+                readyPaint.radius = paint.radius;
+            }
+            for (const [to, from] of aliases) {
+                const opacity = this.layer.options.opacity;
+                let paintProp = paint[from];
+                if (defined(opacity) && from.toLowerCase().indexOf('opacity') !== -1) {
+                    paintProp = Number(paintProp) * opacity;
+                }
+                if (paintProp !== undefined) {
+                    Object.defineProperty(readyPaint, to, {
+                        enumerable: true,
+                        value: paintProp,
+                    });
+                }
+            }
+            return readyPaint;
+        }
+        return PAINT;
+    }
+    _createDivIcon(icon) {
+        const { html, rotate, className, ...toLIconOpt } = icon;
+        const element = document.createElement('div');
+        if (className) {
+            element.className = className;
+        }
+        if (rotate) {
+            element.style.transform = `rotateZ(${rotate}deg)`;
+        }
+        if (html) {
+            element.innerHTML = html;
+        }
+        const divIcon = new leafletSrc.exports.DivIcon({
+            className: '',
+            ...toLIconOpt,
+            html: element,
+        });
+        return divIcon;
+    }
+    createPaintToLayer(icon) {
+        if (icon && icon.type) {
+            if (icon.type === 'icon') {
+                const iconClassName = icon.className;
+                const html = icon.html;
+                if (iconClassName || html) {
+                    return (_, latlng) => {
+                        const divIcon = this._createDivIcon(icon);
+                        return new leafletSrc.exports.Marker(latlng, { icon: divIcon });
+                    };
+                }
+            }
+            else if (icon.type === 'pin') {
+                return (_, latlng) => {
+                    return new leafletSrc.exports.Marker(latlng);
+                };
+            }
+        }
+        return (_, latlng) => {
+            const p = PAINT;
+            return new leafletSrc.exports.CircleMarker(latlng, this.preparePaint({ ...p, ...icon }));
+        };
+    }
+    createPaintOptions(paint) {
+        const geoJsonOptions = {};
+        const newPaint = this.preparePaint(paint);
+        if (paint) {
+            geoJsonOptions.style = () => {
+                return newPaint;
+            };
+        }
+        if (this.layer.type === 'point') {
+            geoJsonOptions.pointToLayer = this.createPaintToLayer(paint);
+        }
+        else if (this.layer.type === 'line') {
+            newPaint.stroke = true;
+        }
+        return geoJsonOptions;
+    }
+}
+
 class GeoJsonAdapter extends BaseAdapter {
     constructor(map, options) {
         super(map, options);
@@ -23009,6 +23202,8 @@ class GeoJsonAdapter extends BaseAdapter {
         this.$unselect = () => {
             this.unselect();
         };
+        this._events = new GeoJsonEvents(this);
+        this._paint = new GeoJsonPaint(this);
     }
     addLayer(options) {
         Object.assign(this.options, options);
@@ -23039,7 +23234,7 @@ class GeoJsonAdapter extends BaseAdapter {
         else if (!this.selected) {
             this.selected = true;
             if (this.selectedPaint) {
-                this._setPaintEachLayer(this.selectedPaint);
+                this._paint.setPaintEachLayer(this.selectedPaint);
             }
         }
     }
@@ -23055,7 +23250,7 @@ class GeoJsonAdapter extends BaseAdapter {
                 this._removePopup(p[0]);
             }
             if (this.paint) {
-                this._setPaintEachLayer(this.paint);
+                this._paint.setPaintEachLayer(this.paint);
             }
             this._selectedLayers.length = 0;
             this.selected = false;
@@ -23226,7 +23421,7 @@ class GeoJsonAdapter extends BaseAdapter {
         if (paint) {
             this.paint = paint;
             for (const l of this._layers) {
-                this._setPaint(l, paint);
+                this._paint.setPaint(l, paint);
             }
         }
     }
@@ -23234,22 +23429,25 @@ class GeoJsonAdapter extends BaseAdapter {
         if (paint) {
             this.selectedPaint = paint;
             for (const l of this._selectedLayers) {
-                this._setPaint(l, paint);
+                this._paint.setPaint(l, paint);
             }
         }
     }
     updatePaint(paint) {
         this.paint = { ...this.paint, ...paint };
         for (const l of this._layers) {
-            this._setPaint(l, this.paint);
+            this._paint.setPaint(l, this.paint);
         }
     }
     updateSelectedPaint(paint) {
         this.selectedPaint = { ...this.selectedPaint, ...paint };
         for (const l of this._selectedLayers) {
-            this._setPaint(l, this.selectedPaint);
+            this._paint.setPaint(l, this.selectedPaint);
         }
     }
+    _getSelected(layer) {
+        return this._selectedLayers.find((x) => x.layer === layer);
+    }
     _updateTooltip(layerDef) {
         const { feature, layer } = layerDef;
         if (feature && layer && feature.properties && this.options.labelField) {
@@ -23339,77 +23537,6 @@ class GeoJsonAdapter extends BaseAdapter {
             }
         }
     }
-    _setPaintEachLayer(paint) {
-        this._layers.forEach((l) => {
-            this._setPaint(l, paint);
-        });
-    }
-    _setPaint(def, paint) {
-        let style = undefined;
-        const { layer, feature } = def;
-        if (layer && feature) {
-            if (isPaintCallback(paint)) {
-                style = paint(feature);
-            }
-            else if (isPaint(paint)) {
-                style = paint;
-            }
-            if (style) {
-                if (this.type === 'point' && style.type === 'icon') {
-                    const marker = layer;
-                    const divIcon = this._createDivIcon(style);
-                    marker.setIcon(divIcon);
-                }
-                else if ('setStyle' in layer) {
-                    layer.setStyle(this._preparePaint(style));
-                }
-            }
-        }
-    }
-    _preparePaint(paint) {
-        if (paint.type !== 'get-paint') {
-            // const path: CircleMarkerOptions | PathOptions = paint as CircleMarkerOptions | PathOptions;
-            // if (path.opacity) {
-            //   path.fillOpacity = path.opacity;
-            // }
-            const paintAliases = [
-                // ['color', 'color'],
-                ['color', 'strokeColor'],
-                ['opacity', 'strokeOpacity'],
-                ['stroke', 'stroke'],
-                ['fillColor', 'fillColor'],
-                ['fillOpacity', 'fillOpacity'],
-                ['fill', 'fill'],
-                ['weight', 'weight'],
-            ];
-            const aliases = this.type === 'line'
-                ? [
-                    ['color', 'strokeColor'],
-                    ['opacity', 'strokeOpacity'],
-                    ['weight', 'weight'],
-                ]
-                : paintAliases;
-            const readyPaint = {};
-            if ('radius' in paint && typeof paint.radius === 'number') {
-                readyPaint.radius = paint.radius;
-            }
-            for (const [to, from] of aliases) {
-                let paintProp = paint[from];
-                if (defined(this.options.opacity) &&
-                    from.toLowerCase().indexOf('opacity') !== -1) {
-                    paintProp = Number(paintProp) * this.options.opacity;
-                }
-                if (paintProp !== undefined) {
-                    Object.defineProperty(readyPaint, to, {
-                        enumerable: true,
-                        value: paintProp,
-                    });
-                }
-            }
-            return readyPaint;
-        }
-        return PAINT;
-    }
     _getGeoJsonOptions(options, type) {
         const paint = options.paint;
         let lopt = {};
@@ -23418,7 +23545,7 @@ class GeoJsonAdapter extends BaseAdapter {
                 // TODO: fix types (@geoman-io/leaflet-geoman-free)
                 lopt.pointToLayer = (feature, latLng) => {
                     const iconOpt = paint(feature);
-                    const pointToLayer = this._createPaintToLayer(iconOpt);
+                    const pointToLayer = this._paint.createPaintToLayer(iconOpt);
                     return pointToLayer(feature, latLng);
                 };
             }
@@ -23426,17 +23553,17 @@ class GeoJsonAdapter extends BaseAdapter {
                 lopt = {
                     style: (feature) => {
                         if (feature) {
-                            return this._preparePaint({ ...PAINT, ...paint(feature) });
+                            return this._paint.preparePaint({ ...PAINT, ...paint(feature) });
                         }
                         else {
-                            return this._preparePaint({ ...PAINT, type: 'path' });
+                            return this._paint.preparePaint({ ...PAINT, type: 'path' });
                         }
                     },
                 };
             }
         }
         else {
-            lopt = this._createPaintOptions(paint, type);
+            lopt = this._paint.createPaintOptions(paint);
         }
         lopt.onEachFeature = (feature, layer) => {
             this._onEachFeature(feature, layer);
@@ -23452,7 +23579,6 @@ class GeoJsonAdapter extends BaseAdapter {
                 layer,
                 ...createFeaturePositionOptions(feature),
             };
-            // @ts-ignore
             layer.options.pane = this.pane;
             this._layers.push(def);
             let ok = true;
@@ -23477,7 +23603,7 @@ class GeoJsonAdapter extends BaseAdapter {
                         layer.on('click', (e) => this._selectOnLayerClick(e), this);
                     }
                 }
-                this._handleMouseEvents(layer);
+                this._events.handleMouseEvents(layer);
                 // The timeout is needed to display the popup immediately when adding a layer to the map.
                 // Without a timeout, the layer may not yet have a _map object
                 setTimeout(() => {
@@ -23494,39 +23620,6 @@ class GeoJsonAdapter extends BaseAdapter {
             }
         }
     }
-    _handleMouseEvents(layer) {
-        const { onClick, onLayerClick, onMouseOut, onMouseOver } = this.options;
-        // TODO: remove backward compatibility for onLayerClick
-        const onClick_ = onClick || onLayerClick;
-        if (onClick_) {
-            layer.on('click', (e) => {
-                const selected = !!this._getSelected(layer);
-                onClick_({
-                    selected,
-                    ...this._createMouseEvent(e),
-                });
-            }, this);
-        }
-        if (onMouseOut) {
-            layer.on('mouseout', (e) => {
-                onMouseOut(this._createMouseEvent(e));
-            }, this);
-        }
-        if (onMouseOver) {
-            layer.on('mouseover', (e) => {
-                onMouseOver(this._createMouseEvent(e));
-            }, this);
-        }
-    }
-    _createMouseEvent(source) {
-        return createMouseEvent({
-            layer: this,
-            source: source,
-        });
-    }
-    _getSelected(layer) {
-        return this._selectedLayers.find((x) => x.layer === layer);
-    }
     _selectOnLayerClick(e) {
         leafletSrc.exports.DomEvent.stopPropagation(e);
         const layer = e.target;
@@ -23560,7 +23653,7 @@ class GeoJsonAdapter extends BaseAdapter {
         this.selected = true;
         const { selectedPaint, popupOnSelect, popupOptions } = this.options;
         if (selectedPaint && def.layer) {
-            this._setPaint(def, selectedPaint);
+            this._paint.setPaint(def, selectedPaint);
         }
         if (popupOnSelect) {
             this._openPopup(def, popupOptions, type, latlng);
@@ -23581,7 +23674,7 @@ class GeoJsonAdapter extends BaseAdapter {
             this._selectedLayers.splice(index, 1);
             if (this.options) {
                 if (this.options.paint) {
-                    this._setPaint(def, this.options.paint);
+                    this._paint.setPaint(def, this.options.paint);
                 }
                 if (this.options.popupOnSelect && def.layer) {
                     this._removePopup(def.layer);
@@ -23590,50 +23683,6 @@ class GeoJsonAdapter extends BaseAdapter {
         }
         this.selected = this._selectedLayers.length > 0;
     }
-    _createDivIcon(icon) {
-        const { ...toLIconOpt } = icon;
-        return new leafletSrc.exports.DivIcon({ className: '', ...toLIconOpt });
-    }
-    _createPaintToLayer(icon) {
-        if (icon && icon.type) {
-            if (icon.type === 'icon') {
-                const iconClassName = icon.className;
-                const html = icon.html;
-                if (iconClassName || html) {
-                    return (geoJsonPoint, latlng) => {
-                        const divIcon = this._createDivIcon(icon);
-                        return new leafletSrc.exports.Marker(latlng, { icon: divIcon });
-                    };
-                }
-            }
-            else if (icon.type === 'pin') {
-                return (geoJsonPoint, latlng) => {
-                    // const divIcon = this.createDivIcon(icon);
-                    return new leafletSrc.exports.Marker(latlng);
-                };
-            }
-        }
-        return (geoJsonPoint, latlng) => {
-            const p = PAINT;
-            return new leafletSrc.exports.CircleMarker(latlng, this._preparePaint({ ...p, ...icon }));
-        };
-    }
-    _createPaintOptions(paintOptions, type) {
-        const geoJsonOptions = {};
-        const paint = (paintOptions && this._preparePaint(paintOptions)) || {};
-        if (paintOptions) {
-            geoJsonOptions.style = () => {
-                return paint;
-            };
-        }
-        if (type === 'point') {
-            geoJsonOptions.pointToLayer = this._createPaintToLayer(paintOptions);
-        }
-        else if (type === 'line') {
-            paint.stroke = true;
-        }
-        return geoJsonOptions;
-    }
     _addMapClickListener() {
         const map = this.map;
         if (map) {