@nextgis/leaflet-map-adapter 1.18.1 → 1.18.6

package/lib/leaflet-map-adapter.esm-browser.js

@@ -1,4 +1,4 @@
-/** Bundle of @nextgis/leaflet-map-adapter; version: 1.18.1; author: NextGIS */
+/** Bundle of @nextgis/leaflet-map-adapter; version: 1.18.6; author: NextGIS */
 var commonjsGlobal = typeof globalThis !== 'undefined' ? globalThis : typeof window !== 'undefined' ? window : typeof global !== 'undefined' ? global : typeof self !== 'undefined' ? self : {};
 
 var events = {exports: {}};
@@ -14681,19 +14681,6 @@ function debounce(cb, wait = 10) {
     return wrapper;
 }
 
-function isPaint(paint) {
-    if (Object.prototype.toString.call(paint) === '[object Object]') {
-        return true;
-    }
-    return false;
-}
-function isPaintCallback(paint) {
-    if (typeof paint === 'function') {
-        return true;
-    }
-    return false;
-}
-
 function boundsToArray(bounds) {
     const ne = bounds.getNorthEast();
     const sw = bounds.getSouthWest();
@@ -14761,19 +14748,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++) {
@@ -14828,6 +14802,214 @@ 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,
+        });
+    }
+}
+
+function isPaint(paint) {
+    if (Object.prototype.toString.call(paint) === '[object Object]') {
+        return true;
+    }
+    return false;
+}
+function isPaintCallback(paint) {
+    if (typeof paint === 'function') {
+        return true;
+    }
+    return false;
+}
+
+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);
@@ -14842,6 +15024,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);
@@ -14872,7 +15056,7 @@ class GeoJsonAdapter extends BaseAdapter {
         else if (!this.selected) {
             this.selected = true;
             if (this.selectedPaint) {
-                this._setPaintEachLayer(this.selectedPaint);
+                this._paint.setPaintEachLayer(this.selectedPaint);
             }
         }
     }
@@ -14888,7 +15072,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;
@@ -15059,7 +15243,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);
             }
         }
     }
@@ -15067,22 +15251,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) {
@@ -15172,77 +15359,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 = {};
@@ -15251,7 +15367,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);
                 };
             }
@@ -15259,17 +15375,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);
@@ -15285,7 +15401,6 @@ class GeoJsonAdapter extends BaseAdapter {
                 layer,
                 ...createFeaturePositionOptions(feature),
             };
-            // @ts-ignore
             layer.options.pane = this.pane;
             this._layers.push(def);
             let ok = true;
@@ -15310,7 +15425,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(() => {
@@ -15327,39 +15442,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;
@@ -15393,7 +15475,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);
@@ -15414,7 +15496,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);
@@ -15423,50 +15505,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) {