@nextgis/leaflet-map-adapter 1.18.3 → 1.18.6

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

@@ -1,7 +1,7 @@
-/** Bundle of @nextgis/leaflet-map-adapter; version: 1.18.3; author: NextGIS */
+/** Bundle of @nextgis/leaflet-map-adapter; version: 1.18.6; author: NextGIS */
 import { EventEmitter } from 'events';
-import { Control, DomEvent, GeoJSON, FeatureGroup, DivIcon, Marker, CircleMarker, ImageOverlay as ImageOverlay$1, Layer, Util, CRS, GridLayer, DomUtil, TileLayer as TileLayer$1, Map } from 'leaflet';
-import { debounce as debounce$1, defined } from '@nextgis/utils';
+import { Control, DomEvent, GeoJSON, DivIcon, Marker, CircleMarker, FeatureGroup, ImageOverlay as ImageOverlay$1, Layer, Util, CRS, GridLayer, DomUtil, TileLayer as TileLayer$1, Map } from 'leaflet';
+import { defined, debounce as debounce$1 } from '@nextgis/utils';
 import { isPaintCallback, isPaint } from '@nextgis/paint';
 
 function convertMapClickEvent(evt) {
@@ -173,19 +173,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++) {
@@ -240,6 +227,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 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 Marker(latlng, { icon: divIcon });
+                    };
+                }
+            }
+            else if (icon.type === 'pin') {
+                return (_, latlng) => {
+                    return new Marker(latlng);
+                };
+            }
+        }
+        return (_, latlng) => {
+            const p = PAINT;
+            return new 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);
@@ -254,6 +436,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);
@@ -284,7 +468,7 @@ class GeoJsonAdapter extends BaseAdapter {
         else if (!this.selected) {
             this.selected = true;
             if (this.selectedPaint) {
-                this._setPaintEachLayer(this.selectedPaint);
+                this._paint.setPaintEachLayer(this.selectedPaint);
             }
         }
     }
@@ -300,7 +484,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;
@@ -471,7 +655,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);
             }
         }
     }
@@ -479,22 +663,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) {
@@ -584,77 +771,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 = {};
@@ -663,7 +779,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);
                 };
             }
@@ -671,17 +787,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);
@@ -697,7 +813,6 @@ class GeoJsonAdapter extends BaseAdapter {
                 layer,
                 ...createFeaturePositionOptions(feature),
             };
-            // @ts-ignore
             layer.options.pane = this.pane;
             this._layers.push(def);
             let ok = true;
@@ -722,7 +837,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(() => {
@@ -739,39 +854,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) {
         DomEvent.stopPropagation(e);
         const layer = e.target;
@@ -805,7 +887,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);
@@ -826,7 +908,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);
@@ -835,50 +917,6 @@ class GeoJsonAdapter extends BaseAdapter {
         }
         this.selected = this._selectedLayers.length > 0;
     }
-    _createDivIcon(icon) {
-        const { ...toLIconOpt } = icon;
-        return new 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 Marker(latlng, { icon: divIcon });
-                    };
-                }
-            }
-            else if (icon.type === 'pin') {
-                return (geoJsonPoint, latlng) => {
-                    // const divIcon = this.createDivIcon(icon);
-                    return new Marker(latlng);
-                };
-            }
-        }
-        return (geoJsonPoint, latlng) => {
-            const p = PAINT;
-            return new 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) {