@nextgis/leaflet-map-adapter 2.1.0 → 2.2.1

package/lib/leaflet-map-adapter.global.js

@@ -1,4 +1,4 @@
-/** Bundle of @nextgis/leaflet-map-adapter; version: 2.1.0; author: NextGIS */
+/** Bundle of @nextgis/leaflet-map-adapter; version: 2.2.1; author: NextGIS */
 var LeafletMapAdapter = (function () {
   'use strict';
 
@@ -14759,18 +14759,18 @@ var LeafletMapAdapter = (function () {
     };
   }
 
-  var __defProp$b = Object.defineProperty;
-  var __defNormalProp$b = (obj, key, value) => key in obj ? __defProp$b(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
-  var __publicField$7 = (obj, key, value) => {
-    __defNormalProp$b(obj, typeof key !== "symbol" ? key + "" : key, value);
+  var __defProp$c = Object.defineProperty;
+  var __defNormalProp$c = (obj, key, value) => key in obj ? __defProp$c(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+  var __publicField$8 = (obj, key, value) => {
+    __defNormalProp$c(obj, typeof key !== "symbol" ? key + "" : key, value);
     return value;
   };
   class BaseAdapter {
     constructor(map, options) {
       this.map = map;
       this.options = options;
-      __publicField$7(this, "layer");
-      __publicField$7(this, "pane", "order-0");
+      __publicField$8(this, "layer");
+      __publicField$8(this, "pane", "order-0");
       if (options.order !== void 0) {
         const pane = "order-" + options.order;
         let exist = map.getPane(pane);
@@ -14799,19 +14799,19 @@ var LeafletMapAdapter = (function () {
     };
   }
 
-  var __defProp$a = Object.defineProperty;
+  var __defProp$b = Object.defineProperty;
   var __getOwnPropSymbols$8 = Object.getOwnPropertySymbols;
   var __hasOwnProp$8 = Object.prototype.hasOwnProperty;
   var __propIsEnum$8 = Object.prototype.propertyIsEnumerable;
-  var __defNormalProp$a = (obj, key, value) => key in obj ? __defProp$a(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+  var __defNormalProp$b = (obj, key, value) => key in obj ? __defProp$b(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
   var __spreadValues$8 = (a, b) => {
     for (var prop in b || (b = {}))
       if (__hasOwnProp$8.call(b, prop))
-        __defNormalProp$a(a, prop, b[prop]);
+        __defNormalProp$b(a, prop, b[prop]);
     if (__getOwnPropSymbols$8)
       for (var prop of __getOwnPropSymbols$8(b)) {
         if (__propIsEnum$8.call(b, prop))
-          __defNormalProp$a(a, prop, b[prop]);
+          __defNormalProp$b(a, prop, b[prop]);
       }
     return a;
   };
@@ -14830,32 +14830,32 @@ var LeafletMapAdapter = (function () {
     return opt;
   }
 
-  var __defProp$9 = Object.defineProperty;
+  var __defProp$a = Object.defineProperty;
   var __getOwnPropSymbols$7 = Object.getOwnPropertySymbols;
   var __hasOwnProp$7 = Object.prototype.hasOwnProperty;
   var __propIsEnum$7 = Object.prototype.propertyIsEnumerable;
-  var __defNormalProp$9 = (obj, key, value) => key in obj ? __defProp$9(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+  var __defNormalProp$a = (obj, key, value) => key in obj ? __defProp$a(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
   var __spreadValues$7 = (a, b) => {
     for (var prop in b || (b = {}))
       if (__hasOwnProp$7.call(b, prop))
-        __defNormalProp$9(a, prop, b[prop]);
+        __defNormalProp$a(a, prop, b[prop]);
     if (__getOwnPropSymbols$7)
       for (var prop of __getOwnPropSymbols$7(b)) {
         if (__propIsEnum$7.call(b, prop))
-          __defNormalProp$9(a, prop, b[prop]);
+          __defNormalProp$a(a, prop, b[prop]);
       }
     return a;
   };
-  var __publicField$6 = (obj, key, value) => {
-    __defNormalProp$9(obj, typeof key !== "symbol" ? key + "" : key, value);
+  var __publicField$7 = (obj, key, value) => {
+    __defNormalProp$a(obj, typeof key !== "symbol" ? key + "" : key, value);
     return value;
   };
   class GeoJsonEvents {
     constructor(layer) {
-      __publicField$6(this, "layer");
-      __publicField$6(this, "_onclick");
-      __publicField$6(this, "_mouseout");
-      __publicField$6(this, "_mouseover");
+      __publicField$7(this, "layer");
+      __publicField$7(this, "_onclick");
+      __publicField$7(this, "_mouseout");
+      __publicField$7(this, "_mouseover");
       this.layer = layer;
     }
     handleMouseEvents(layer) {
@@ -14915,21 +14915,21 @@ var LeafletMapAdapter = (function () {
     return false;
   }
 
-  var __defProp$8 = Object.defineProperty;
+  var __defProp$9 = Object.defineProperty;
   var __defProps$4 = Object.defineProperties;
   var __getOwnPropDescs$4 = Object.getOwnPropertyDescriptors;
   var __getOwnPropSymbols$6 = Object.getOwnPropertySymbols;
   var __hasOwnProp$6 = Object.prototype.hasOwnProperty;
   var __propIsEnum$6 = Object.prototype.propertyIsEnumerable;
-  var __defNormalProp$8 = (obj, key, value) => key in obj ? __defProp$8(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+  var __defNormalProp$9 = (obj, key, value) => key in obj ? __defProp$9(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
   var __spreadValues$6 = (a, b) => {
     for (var prop in b || (b = {}))
       if (__hasOwnProp$6.call(b, prop))
-        __defNormalProp$8(a, prop, b[prop]);
+        __defNormalProp$9(a, prop, b[prop]);
     if (__getOwnPropSymbols$6)
       for (var prop of __getOwnPropSymbols$6(b)) {
         if (__propIsEnum$6.call(b, prop))
-          __defNormalProp$8(a, prop, b[prop]);
+          __defNormalProp$9(a, prop, b[prop]);
       }
     return a;
   };
@@ -14946,13 +14946,13 @@ var LeafletMapAdapter = (function () {
       }
     return target;
   };
-  var __publicField$5 = (obj, key, value) => {
-    __defNormalProp$8(obj, typeof key !== "symbol" ? key + "" : key, value);
+  var __publicField$6 = (obj, key, value) => {
+    __defNormalProp$9(obj, typeof key !== "symbol" ? key + "" : key, value);
     return value;
   };
   class GeoJsonPaint {
     constructor(layer) {
-      __publicField$5(this, "layer");
+      __publicField$6(this, "layer");
       this.layer = layer;
     }
     setPaintEachLayer(paint) {
@@ -15079,27 +15079,27 @@ var LeafletMapAdapter = (function () {
     }
   }
 
-  var __defProp$7 = Object.defineProperty;
+  var __defProp$8 = Object.defineProperty;
   var __defProps$3 = Object.defineProperties;
   var __getOwnPropDescs$3 = Object.getOwnPropertyDescriptors;
   var __getOwnPropSymbols$5 = Object.getOwnPropertySymbols;
   var __hasOwnProp$5 = Object.prototype.hasOwnProperty;
   var __propIsEnum$5 = Object.prototype.propertyIsEnumerable;
-  var __defNormalProp$7 = (obj, key, value) => key in obj ? __defProp$7(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+  var __defNormalProp$8 = (obj, key, value) => key in obj ? __defProp$8(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
   var __spreadValues$5 = (a, b) => {
     for (var prop in b || (b = {}))
       if (__hasOwnProp$5.call(b, prop))
-        __defNormalProp$7(a, prop, b[prop]);
+        __defNormalProp$8(a, prop, b[prop]);
     if (__getOwnPropSymbols$5)
       for (var prop of __getOwnPropSymbols$5(b)) {
         if (__propIsEnum$5.call(b, prop))
-          __defNormalProp$7(a, prop, b[prop]);
+          __defNormalProp$8(a, prop, b[prop]);
       }
     return a;
   };
   var __spreadProps$3 = (a, b) => __defProps$3(a, __getOwnPropDescs$3(b));
-  var __publicField$4 = (obj, key, value) => {
-    __defNormalProp$7(obj, typeof key !== "symbol" ? key + "" : key, value);
+  var __publicField$5 = (obj, key, value) => {
+    __defNormalProp$8(obj, typeof key !== "symbol" ? key + "" : key, value);
     return value;
   };
   var __async = (__this, __arguments, generator) => {
@@ -15125,22 +15125,22 @@ var LeafletMapAdapter = (function () {
   class GeoJsonAdapter extends BaseAdapter {
     constructor(map, options) {
       super(map, options);
-      __publicField$4(this, "layer");
-      __publicField$4(this, "selected", false);
-      __publicField$4(this, "type");
-      __publicField$4(this, "_layers", []);
-      __publicField$4(this, "_events");
-      __publicField$4(this, "paint");
-      __publicField$4(this, "selectedPaint");
-      __publicField$4(this, "_selectedLayers", []);
-      __publicField$4(this, "_filteredLayers", []);
-      __publicField$4(this, "_filterFun");
-      __publicField$4(this, "_openedPopup", []);
-      __publicField$4(this, "_paint");
-      __publicField$4(this, "$updateTooltip", debounce(() => {
+      __publicField$5(this, "layer");
+      __publicField$5(this, "selected", false);
+      __publicField$5(this, "type");
+      __publicField$5(this, "_layers", []);
+      __publicField$5(this, "_events");
+      __publicField$5(this, "paint");
+      __publicField$5(this, "selectedPaint");
+      __publicField$5(this, "_selectedLayers", []);
+      __publicField$5(this, "_filteredLayers", []);
+      __publicField$5(this, "_filterFun");
+      __publicField$5(this, "_openedPopup", []);
+      __publicField$5(this, "_paint");
+      __publicField$5(this, "$updateTooltip", debounce(() => {
         this.updateTooltip();
       }, 300));
-      __publicField$4(this, "$unselect", () => {
+      __publicField$5(this, "$unselect", () => {
         this.unselect();
       });
       this._events = new GeoJsonEvents(this);
@@ -15659,26 +15659,126 @@ var LeafletMapAdapter = (function () {
     }
   }
 
-  function callAjax(src, callback, headers) {
-    const xhr = new XMLHttpRequest();
-    xhr.open("GET", src);
-    xhr.responseType = "arraybuffer";
-    for (const h in headers) {
-      xhr.setRequestHeader(h, headers[h]);
-    }
-    xhr.onload = function() {
-      const arrayBufferView = new Uint8Array(this.response);
-      const blob = new Blob([arrayBufferView], { type: "image/png" });
-      const urlCreator = window.URL || window.webkitURL;
-      const imageUrl = urlCreator.createObjectURL(blob);
-      callback(imageUrl);
-    };
-    xhr.send();
-    return () => {
-      xhr.abort();
+  function callAjax(src, headers) {
+    let abortFunc = () => {
     };
+    const promise = new Promise((resolve, reject) => {
+      const xhr = new XMLHttpRequest();
+      xhr.open("GET", src);
+      xhr.responseType = "arraybuffer";
+      for (const h in headers) {
+        xhr.setRequestHeader(h, headers[h]);
+      }
+      xhr.onload = function() {
+        const arrayBufferView = new Uint8Array(this.response);
+        const blob = new Blob([arrayBufferView], { type: "image/png" });
+        const urlCreator = window.URL || window.webkitURL;
+        const imageUrl = urlCreator.createObjectURL(blob);
+        resolve(imageUrl);
+      };
+      xhr.onerror = reject;
+      xhr.send();
+      abortFunc = () => {
+        xhr.abort();
+        resolve("");
+      };
+    });
+    return [promise, abortFunc];
+  }
+
+  var __defProp$7 = Object.defineProperty;
+  var __defNormalProp$7 = (obj, key, value) => key in obj ? __defProp$7(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+  var __publicField$4 = (obj, key, value) => {
+    __defNormalProp$7(obj, typeof key !== "symbol" ? key + "" : key, value);
+    return value;
+  };
+  class Queue {
+    /**
+     * @param {PromiseQueueOptions} options - Configuration options for the queue.
+     */
+    constructor({ concurrency = 1, delay = 0 } = {}) {
+      __publicField$4(this, "queue", []);
+      __publicField$4(this, "concurrency");
+      __publicField$4(this, "activeCount", 0);
+      __publicField$4(this, "timeoutId");
+      __publicField$4(this, "delay");
+      __publicField$4(this, "toAbort", []);
+      this.concurrency = concurrency;
+      this.delay = delay;
+    }
+    /**
+     * Adds a task to the queue, which can be either a simple asynchronous function or an array containing a function and its abort handler.
+     *
+     * @param {PromiseFuncOrPromiseWithAbortArray} promise - The asynchronous task function or a tuple containing the task and an abort function.
+     * @param {Abort} [abort] - An optional abort function for the task.
+     *
+     * @example
+     * ```javascript
+     * // Add a task without an abort function.
+     * queue.add(() => new Promise(resolve => setTimeout(resolve, 1000)));
+     *
+     * // Add a task with an abort function.
+     * const controller = new AbortController();
+     * queue.add(() => fetch('https://example.com', { signal: controller.signal }), controller.abort);
+     * ```
+     */
+    add(promise, abort) {
+      this.queue.push({ promise, abort });
+      this.debouncedNext();
+    }
+    /**
+     * Aborts all tasks in the queue that have an abort function.
+     *
+     * @example
+     * queue.abort(); // Aborts all abortable tasks in the queue.
+     */
+    abort() {
+      for (const abort of this.toAbort) {
+        abort();
+      }
+      this.toAbort = [];
+      this.queue = [];
+      this._clearTimeout();
+    }
+    debouncedNext() {
+      this._clearTimeout();
+      this.timeoutId = setTimeout(() => this._next(), this.delay);
+    }
+    _clearTimeout() {
+      if (this.timeoutId) {
+        clearTimeout(this.timeoutId);
+      }
+    }
+    _next() {
+      while (this.activeCount < this.concurrency && this.queue.length > 0) {
+        const { promise, abort } = this.queue.shift();
+        this.activeCount++;
+        let toAbort = abort;
+        let request;
+        const execute = promise();
+        if (Array.isArray(execute)) {
+          request = execute[0];
+          toAbort = execute[1];
+        } else {
+          request = execute;
+        }
+        if (toAbort) {
+          this.toAbort.push(toAbort);
+        }
+        request.finally(() => {
+          this.activeCount--;
+          if (toAbort) {
+            this.toAbort = this.toAbort.filter((a) => a !== toAbort);
+          }
+          this.debouncedNext();
+        });
+      }
+    }
   }
 
+  const imageQueue = new Queue({ concurrency: 6, delay: 200 });
+  var imageQueue$1 = imageQueue;
+
   var __defProp$6 = Object.defineProperty;
   var __defNormalProp$6 = (obj, key, value) => key in obj ? __defProp$6(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
   var __publicField$3 = (obj, key, value) => {
@@ -15688,31 +15788,27 @@ var LeafletMapAdapter = (function () {
   class ImageOverlay extends leafletSrcExports.ImageOverlay {
     constructor(imageUrl, bounds, options) {
       super(imageUrl, bounds, options);
-      __publicField$3(this, "_abort", []);
+      __publicField$3(this, "_aborter");
     }
     cancelLoad() {
-      if (this._abort) {
-        this._abort.forEach((x) => x());
-        this._abort = [];
+      if (this._aborter) {
+        this._aborter();
+        this._aborter = void 0;
       }
     }
     _initImage() {
       super._initImage();
       const headers = this.options.headers;
-      if (headers) {
-        const img = this._image;
-        const src = img.src;
-        img.src = "";
-        this._abort.push(
-          callAjax(
-            src,
-            (response) => {
-              img.src = response;
-            },
-            headers
-          )
-        );
-      }
+      const img = this._image;
+      img.src = "";
+      imageQueue$1.add(() => {
+        const [promise, abortFunc] = callAjax(img.src, headers);
+        promise.then((imgUrl) => {
+          img.src = imgUrl;
+        });
+        this._aborter = abortFunc;
+        return promise;
+      });
     }
   }
 
@@ -15750,6 +15846,7 @@ var LeafletMapAdapter = (function () {
       __publicField$2(this, "_url");
       __publicField$2(this, "_currentUrl");
       __publicField$2(this, "_currentOverlay");
+      __publicField$2(this, "_loadedOverlay");
       this._url = url;
       const params = {};
       const opts = {};
@@ -15803,15 +15900,18 @@ var LeafletMapAdapter = (function () {
       this._currentUrl = url;
       const viewPortBuffer = this.options.viewPortBuffer || 0;
       const bounds = this._map.getBounds().pad(viewPortBuffer);
+      if (this._loadedOverlay) {
+        this._loadedOverlay.cancelLoad();
+        this._loadedOverlay.off("load");
+        this._loadedOverlay = void 0;
+      }
       const overlay = new ImageOverlay(url, bounds, {
         opacity: 0,
         pane: this.options.pane,
         headers: this.options.headers
       });
       overlay.addTo(this._map);
-      if (this._currentOverlay) {
-        this._currentOverlay.cancelLoad();
-      }
+      this._loadedOverlay = overlay;
       overlay.once(
         "load",
         () => {
@@ -15824,6 +15924,7 @@ var LeafletMapAdapter = (function () {
           } else if (this._currentOverlay) {
             this._map.removeLayer(this._currentOverlay);
           }
+          this._loadedOverlay = void 0;
           this._currentOverlay = overlay;
           overlay.setOpacity(
             this.options.opacity !== void 0 ? this.options.opacity : 1
@@ -15950,6 +16051,7 @@ var LeafletMapAdapter = (function () {
       }
     }
   }
+  __publicField$1(ImageAdapter, "queue", imageQueue$1);
 
   function makeRemote(Base) {
     return class RemoteTileLayer extends Base {
@@ -15964,15 +16066,16 @@ var LeafletMapAdapter = (function () {
       createTile(coords, done) {
         const url = this.getTileUrl(coords);
         const tile = document.createElement("img");
-        tile.abort = callAjax(
+        const [promise, abortFunc] = callAjax(
           url,
-          (response) => {
-            tile.src = response;
-            done(null, tile);
-          },
           // @ts-ignore
           this.options.headers
         );
+        promise.then((response) => {
+          tile.src = response;
+          done(null, tile);
+        });
+        tile.abort = abortFunc;
         if (this.options.crossOrigin || this.options.crossOrigin === "") {
           tile.crossOrigin = this.options.crossOrigin === true ? "" : this.options.crossOrigin;
         }
@@ -16481,6 +16584,12 @@ var LeafletMapAdapter = (function () {
         for (const e of this._universalEvents) {
           map.on(e, () => this.emitter.emit(e, this), map);
         }
+        map.on("movestart", () => {
+          ImageAdapter.queue.abort();
+        });
+        map.on("zoomstart", () => {
+          ImageAdapter.queue.abort();
+        });
         for (const e of this._positionEvents) {
           map.on(
             e,