@nextgis/leaflet-map-adapter 2.1.0 → 2.2.1

package/lib/leaflet-map-adapter.esm-browser.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 domain;
 
 // This constructor is used to store event handlers. Instantiating this is
@@ -14756,18 +14756,18 @@ function createFeaturePositionOptions(features) {
   };
 }
 
-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);
@@ -14796,19 +14796,19 @@ function convertMapClickEvent(evt) {
   };
 }
 
-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;
 };
@@ -14827,32 +14827,32 @@ function createMouseEvent({
   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) {
@@ -14912,21 +14912,21 @@ function isPaintCallback(paint) {
   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;
 };
@@ -14943,13 +14943,13 @@ var __objRest$2 = (source, exclude) => {
     }
   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) {
@@ -15076,27 +15076,27 @@ class GeoJsonPaint {
   }
 }
 
-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) => {
@@ -15122,22 +15122,22 @@ var __async = (__this, __arguments, generator) => {
 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);
@@ -15656,26 +15656,126 @@ class GeoJsonAdapter extends BaseAdapter {
   }
 }
 
-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) => {
@@ -15685,31 +15785,27 @@ var __publicField$3 = (obj, key, value) => {
 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;
+    });
   }
 }
 
@@ -15747,6 +15843,7 @@ class ImageLayer extends leafletSrcExports.Layer {
     __publicField$2(this, "_url");
     __publicField$2(this, "_currentUrl");
     __publicField$2(this, "_currentOverlay");
+    __publicField$2(this, "_loadedOverlay");
     this._url = url;
     const params = {};
     const opts = {};
@@ -15800,15 +15897,18 @@ class ImageLayer extends leafletSrcExports.Layer {
     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",
       () => {
@@ -15821,6 +15921,7 @@ class ImageLayer extends leafletSrcExports.Layer {
         } 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
@@ -15947,6 +16048,7 @@ class ImageAdapter extends BaseAdapter {
     }
   }
 }
+__publicField$1(ImageAdapter, "queue", imageQueue$1);
 
 function makeRemote(Base) {
   return class RemoteTileLayer extends Base {
@@ -15961,15 +16063,16 @@ function makeRemote(Base) {
     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;
       }
@@ -16478,6 +16581,12 @@ const _LeafletMapAdapter = class _LeafletMapAdapter {
       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,