@nextgis/leaflet-map-adapter 4.0.1 → 4.1.0

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

@@ -1,4 +1,4 @@
-/** Bundle of @nextgis/leaflet-map-adapter; version: 4.0.1; author: NextGIS */
+/** Bundle of @nextgis/leaflet-map-adapter; version: 4.1.0; author: NextGIS */
 function getElement(el) {
   if (typeof el === "string") {
     let el_ = document.getElementById(el);
@@ -15368,8 +15368,14 @@ function isObject(val) {
 }
 
 function updateUrlParams(urlStr, params) {
-  const url = new URL(urlStr);
-  const searchParams = new URLSearchParams(url.search);
+  const hashIndex = urlStr.indexOf("#");
+  const hash = hashIndex === -1 ? "" : urlStr.slice(hashIndex);
+  const url = hashIndex === -1 ? urlStr : urlStr.slice(0, hashIndex);
+  const queryIndex = url.indexOf("?");
+  const baseUrl = queryIndex === -1 ? url : url.slice(0, queryIndex);
+  const searchParams = new URLSearchParams(
+    queryIndex === -1 ? "" : url.slice(queryIndex + 1)
+  );
   Object.entries(params).forEach(([key, value]) => {
     if (value === void 0) {
       searchParams.delete(key);
@@ -15379,7 +15385,7 @@ function updateUrlParams(urlStr, params) {
   });
   searchParams.set("timestamp", String((/* @__PURE__ */ new Date()).getTime()));
   const newSearch = [...searchParams.entries()].map(([key, value]) => `${key}=${value}`).join("&");
-  return `${url.origin}${url.pathname}?${newSearch}`;
+  return `${baseUrl}?${newSearch}${hash}`;
 }
 
 function boundsToArray(bounds) {
@@ -16488,15 +16494,31 @@ class Queue {
   /**
    * @param {PromiseQueueOptions} options - Configuration options for the queue.
    */
-  constructor({ concurrency = 1, delay = 0 } = {}) {
+  constructor({
+    delay = 0,
+    limit,
+    timeout,
+    debounce,
+    concurrency = 1
+  } = {}) {
     __publicField$4(this, "queue", []);
+    __publicField$4(this, "activeRequests", []);
     __publicField$4(this, "concurrency");
-    __publicField$4(this, "activeCount", 0);
     __publicField$4(this, "timeoutId");
+    __publicField$4(this, "resumeTimer");
     __publicField$4(this, "delay");
-    __publicField$4(this, "toAbort", []);
-    this.concurrency = concurrency;
-    this.delay = delay;
+    __publicField$4(this, "timeout");
+    __publicField$4(this, "paused", false);
+    __publicField$4(this, "idleResolvers", []);
+    __publicField$4(this, "debounce");
+    this.concurrency = limit != null ? limit : concurrency;
+    this.delay = debounce != null ? debounce : delay;
+    this.debounce = this.delay;
+    this.timeout = timeout;
+  }
+  setLimit(limit) {
+    this.concurrency = limit;
+    this._next();
   }
   /**
    * Adds a task to the queue, which can be either a simple asynchronous function or an array containing a function and its abort handler.
@@ -16515,7 +16537,18 @@ class Queue {
    * ```
    */
   add(promise, abort) {
-    this.queue.push({ promise, abort });
+    var _a, _b;
+    const options = typeof abort === "function" ? { abort } : abort;
+    if ((options == null ? void 0 : options.id) !== void 0) {
+      this.removeById(options.id);
+    }
+    this.queue.push({
+      id: (_a = options == null ? void 0 : options.id) != null ? _a : Math.random().toString(36).slice(2),
+      promise,
+      abort: options == null ? void 0 : options.abort,
+      abortController: new AbortController(),
+      timeout: (_b = options == null ? void 0 : options.timeout) != null ? _b : this.timeout
+    });
     this.debouncedNext();
   }
   /**
@@ -16525,60 +16558,167 @@ class Queue {
    * queue.abort(); // Aborts all abortable tasks in the queue.
    */
   abort() {
-    for (const abort of this.toAbort) {
-      abort();
+    for (const item of [...this.queue, ...this.activeRequests]) {
+      this.abortRequest(item);
+      this.clearRequestTimeout(item);
+      item.completed = true;
     }
-    this.toAbort = [];
-    this.queue = [];
+    this.queue.length = 0;
+    this.activeRequests.length = 0;
     this._clearTimeout();
+    this.checkIdle();
+  }
+  remove(id) {
+    this.removeById(id);
+  }
+  clearQueue() {
+    for (const item of this.queue) {
+      this.abortRequest(item);
+      item.completed = true;
+    }
+    this.queue.length = 0;
+    this._clearTimeout();
+    this.checkIdle();
+  }
+  waitAll() {
+    return new Promise((resolve) => {
+      if (this.isIdle()) {
+        resolve();
+      } else {
+        this.idleResolvers.push(resolve);
+      }
+    });
+  }
+  pause(pauseDuration) {
+    this.paused = true;
+    this._clearTimeout();
+    this._clearResumeTimer();
+    if (pauseDuration) {
+      this.resumeTimer = setTimeout(() => this.resume(), pauseDuration);
+    }
+  }
+  resume() {
+    if (!this.paused) return;
+    this.paused = false;
+    this._clearResumeTimer();
+    this._next();
   }
   debouncedNext() {
+    if (this.paused) return;
+    if (this.activeRequests.length) {
+      this._next();
+      return;
+    }
     this._clearTimeout();
     this.timeoutId = setTimeout(() => this._next(), this.delay);
   }
   _clearTimeout() {
     if (this.timeoutId) {
       clearTimeout(this.timeoutId);
+      this.timeoutId = void 0;
+    }
+  }
+  _clearResumeTimer() {
+    if (this.resumeTimer) {
+      clearTimeout(this.resumeTimer);
+      this.resumeTimer = void 0;
     }
   }
   _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);
+    if (this.paused) return;
+    while (this.activeRequests.length < this.concurrency && this.queue.length) {
+      const item = this.queue.shift();
+      if (item.abortController.signal.aborted) continue;
+      this.activeRequests.push(item);
+      if (item.timeout && item.timeout > 0) {
+        item.timeoutId = setTimeout(() => {
+          this.abortRequest(
+            item,
+            new DOMException("Request timed out", "TimeoutError")
+          );
+          this.finishRequest(item);
+        }, item.timeout);
       }
-      request.finally(() => {
-        this.activeCount--;
-        if (toAbort) {
-          this.toAbort = this.toAbort.filter((a) => a !== toAbort);
+      try {
+        const execute = item.promise({ signal: item.abortController.signal });
+        const request = Array.isArray(execute) ? execute[0] : execute;
+        if (Array.isArray(execute)) {
+          const abort = item.abort;
+          item.abort = abort ? () => {
+            abort();
+            execute[1]();
+          } : execute[1];
         }
-        this.debouncedNext();
-      });
+        Promise.resolve(request).then(
+          () => this.finishRequest(item),
+          () => this.finishRequest(item)
+        );
+      } catch (error) {
+        this.finishRequest(item);
+        console.error(error);
+      }
+    }
+    this.checkIdle();
+  }
+  removeById(id) {
+    this.queue = this.queue.filter((item) => {
+      if (item.id !== id) return true;
+      this.abortRequest(item);
+      item.completed = true;
+      return false;
+    });
+    for (const item of [...this.activeRequests]) {
+      if (item.id === id) {
+        this.abortRequest(item);
+        this.finishRequest(item);
+      }
+    }
+    this.checkIdle();
+  }
+  abortRequest(item, reason) {
+    var _a;
+    if (!item.abortController.signal.aborted) {
+      item.abortController.abort(reason);
+    }
+    (_a = item.abort) == null ? void 0 : _a.call(item);
+  }
+  clearRequestTimeout(item) {
+    if (item.timeoutId) {
+      clearTimeout(item.timeoutId);
+      item.timeoutId = void 0;
+    }
+  }
+  finishRequest(item) {
+    if (item.completed) return;
+    item.completed = true;
+    this.clearRequestTimeout(item);
+    this.activeRequests = this.activeRequests.filter((x) => x !== item);
+    this.checkIdle();
+    this._next();
+  }
+  isIdle() {
+    return this.queue.length === 0 && this.activeRequests.length === 0;
+  }
+  checkIdle() {
+    if (this.isIdle()) {
+      this.idleResolvers.splice(0).forEach((resolve) => resolve());
     }
   }
 }
 
-const imageQueue = new Queue({ concurrency: 6, delay: 200 });
+const imageQueue = new Queue({ limit: 6, debounce: 150 });
 
 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) => __defNormalProp$6(obj, key + "" , value);
+const transparentImage = "data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEAAAAALAAAAAABAAEAAAIBAAA=";
 class ImageOverlay extends leafletSrcExports.ImageOverlay {
   constructor(imageUrl, bounds, options) {
     super(imageUrl, bounds, options);
     __publicField$3(this, "_aborter");
   }
   cancelLoad() {
+    imageQueue.remove(leafletSrcExports.Util.stamp(this));
     if (this._aborter) {
       this._aborter();
       this._aborter = void 0;
@@ -16590,19 +16730,27 @@ class ImageOverlay extends leafletSrcExports.ImageOverlay {
     const img = this._image;
     const src = img.src;
     img.src = "";
-    imageQueue.add(() => {
-      const [promise, abortFunc] = callAjax({
-        src,
-        headers,
-        request,
-        withCredentials
-      });
-      promise.then((imgUrl) => {
-        img.src = imgUrl;
-      });
-      this._aborter = abortFunc;
-      return promise;
-    });
+    imageQueue.add(
+      ({ signal }) => {
+        const [promise, abortFunc] = callAjax({
+          src,
+          headers,
+          request,
+          withCredentials
+        });
+        void promise.then((imgUrl) => {
+          if (!signal.aborted) img.src = imgUrl || transparentImage;
+        }).catch((error) => {
+          if (!signal.aborted) {
+            console.error(error);
+            img.src = transparentImage;
+          }
+        });
+        this._aborter = abortFunc;
+        return [promise, abortFunc];
+      },
+      { id: leafletSrcExports.Util.stamp(this) }
+    );
   }
 }
 
@@ -16672,6 +16820,12 @@ class ImageLayer extends leafletSrcExports.Layer {
       map.removeLayer(this._currentOverlay);
       delete this._currentOverlay;
     }
+    if (this._loadedOverlay) {
+      this._loadedOverlay.cancelLoad();
+      this._loadedOverlay.off("load");
+      map.removeLayer(this._loadedOverlay);
+      this._loadedOverlay = void 0;
+    }
     if (this._currentUrl) {
       delete this._currentUrl;
     }
@@ -16697,6 +16851,7 @@ class ImageLayer extends leafletSrcExports.Layer {
     if (this._loadedOverlay) {
       this._loadedOverlay.cancelLoad();
       this._loadedOverlay.off("load");
+      this._map.removeLayer(this._loadedOverlay);
       this._loadedOverlay = void 0;
     }
     const overlay = new ImageOverlay(url, bounds, {
@@ -16747,6 +16902,7 @@ class ImageLayer extends leafletSrcExports.Layer {
     if (this._currentOverlay) {
       this._currentOverlay.setOpacity(opacity);
     }
+    this.fire("opacitychange", { opacity });
   }
   bringToBack() {
     this.options.isBack = true;