ZwaarContrast · Aug 14, 2026 · Aug 14, 2026 · Aug 14, 2026 · coderabbitai · Aug 14, 2026
diff --git a/packages/render/src/tilecache/CacheableWorkerImageDataTile.ts b/packages/render/src/tilecache/CacheableWorkerImageDataTile.ts
@@ -1,4 +1,4 @@
-import { proxy as comlinkProxy, type Remote as ComlinkRemote } from 'comlink'
+import { type Remote as ComlinkRemote } from 'comlink'
 
 import { FetchableTile } from './FetchableTile.js'
 import { CacheableTile, CachedTile } from './CacheableTile.js'
@@ -18,6 +18,7 @@ import type { ApplySpritesImageDataWorkerType } from '../workers/apply-sprites-i
 export class CacheableWorkerImageDataTile extends CacheableTile<ImageData> {
   #workerPool: WorkerPool<FetchAndGetImageDataWorkerType>
   #spritesWorker: ComlinkRemote<ApplySpritesImageDataWorkerType>
+  #fetchingWorker: ComlinkRemote<FetchAndGetImageDataWorkerType> | null = null
 
   constructor(
     fetchableTile: FetchableTile,
@@ -37,46 +38,60 @@ export class CacheableWorkerImageDataTile extends CacheableTile<ImageData> {
    */
   async fetch() {
     const { worker, index } = this.#workerPool.acquire()
-    try {
-      worker
-        .getImageData(
-          this.fetchableTile.tileUrl,
-          comlinkProxy(() => this.abortController.abort()),
-          this.fetchFn,
-          this.fetchableTile.tile.tileZoomLevel.width,
-          this.fetchableTile.tile.tileZoomLevel.height
+    this.#fetchingWorker = worker
+
+    worker
+      .getImageData(
+        this.fetchableTile.tileUrl,
+        this.fetchFn,
+        this.fetchableTile.tile.tileZoomLevel.width,
+        this.fetchableTile.tile.tileZoomLevel.height
+      )
+      .then((response) => {
+        if (this.abortController.signal.aborted) {
+          return
+        }
+
+        this.data = response
+        this.dispatchEvent(
+          new WarpedMapEvent(WarpedMapEventType.TILEFETCHED, {
+            tileUrl: this.fetchableTile.tileUrl
+          })
         )
-        .then((response) => {
-          this.data = response
-          this.dispatchEvent(
-            new WarpedMapEvent(WarpedMapEventType.TILEFETCHED, {
-              tileUrl: this.fetchableTile.tileUrl
-            })
-          )
-        })
-        .catch((err) => {
-          if (err instanceof Error && err.name === 'AbortError') {
-            console.log('Fetch aborted') // Handle the abort error
-          } else {
-            console.error(err) // Handle other errors
-          }
-        })
-        .finally(() => {
-          this.#workerPool.release(index)
-        })
-    } catch (err) {
-      this.#workerPool.release(index) // release even if setup itself throws synchronously
-      if (err instanceof Error && err.name === 'AbortError') {
-        // fetchImage was aborted because viewport was moved and tile
-        // is no longer needed. This error can be ignored, nothing to do.
-      } else {
-        this.dispatchTileFetchError(err)
-      }
-    }
+      })
+      .catch((err) => {
+        if (!this.#isOwnAbortError(err)) {
+          // TODO: comlink keeps only message/name/stack, so a
+          // ResourceFetchError arrives stripped and reports as 'unknown'.
+          this.dispatchTileFetchError(err)
+        }
+      })
+      .finally(() => {
+        this.#fetchingWorker = null
+        this.#workerPool.release(index)
+      })
 
     return this.data
   }
 
+  /** Our own abort is expected. One we did not ask for is a failure. */
+  #isOwnAbortError(err: unknown) {
+    return this.abortController.signal.aborted && this.isAbortError(err)
+  }
+
+  /** The worker cannot see our AbortSignal, so it has to be told separately. */
+  override abort() {
+    if (this.abortController.signal.aborted) {
+      return
+    }
+
+    super.abort()
+    // Nobody awaits this reply; swallow so a rejection is not left unhandled.
+    this.#fetchingWorker
+      ?.abort(this.fetchableTile.tileUrl)
+      .catch(() => undefined)
+  }
+
   async applySprites() {
     const data = this.data
     const spritesInfo = this.fetchableTile.options?.spritesInfo

diff --git a/packages/render/src/tilecache/TileCache.ts b/packages/render/src/tilecache/TileCache.ts
@@ -34,14 +34,25 @@ export class TileCache<D> extends EventTarget {
   protected mapIdsByTileUrl: Map<string, Set<string>> = new Map()
   protected tileUrlsByMapId: Map<string, Set<string>> = new Map()
 
-  protected tilesFetchingCount = 0
   protected tileRemoveQueue: {
     tileUrl: string
     mapId: string
   }[] = []
 
   protected fetchableTiles: FetchableTile[] = []
 
+  /**
+   * The tiles in flight. Deleting returns true only for the first caller, so a
+   * tile is counted out exactly once no matter how it ends: fetched, failed, or
+   * removed while still fetching.
+   */
+  #tilesFetching: Set<string> = new Set()
+
+  #waitingForTiles: Set<{
+    resolve: () => void
+    reject: (error: Error) => void
+  }> = new Set()
+
   #boundTileFetched = this.tileFetched.bind(this)
   #boundTileFetchError = this.tileFetchError.bind(this)
   #boundTilesFromSpriteTile = this.tilesFromSpriteTile.bind(this)
@@ -211,26 +222,16 @@ export class TileCache<D> extends EventTarget {
 
   /**
    * Returns a promise that resolves when all requested tiles are loaded.
-   * This could happen immidiately, in case there are no ongoing requests and the tilesFetchingCount is zero,
-   * or in a while, when the count reaches zero and the ALLREQUESTEDTILESLOADED event is fired.
+   * This could happen immidiately, in case there are no ongoing requests,
+   * or in a while, when the last one finishes and ALLREQUESTEDTILESLOADED is fired.
    */
   async allRequestedTilesLoaded(): Promise<void> {
-    return new Promise((resolve) => {
-      if (this.finished) {
-        resolve()
-      } else {
-        const listener = () => {
-          this.removeEventListener(
-            WarpedMapEventType.ALLREQUESTEDTILESLOADED,
-            listener
-          )
-          resolve()
-        }
-        this.addEventListener(
-          WarpedMapEventType.ALLREQUESTEDTILESLOADED,
-          listener
-        )
-      }
+    if (this.finished) {
+      return
+    }
+
+    return new Promise((resolve, reject) => {
+      this.#waitingForTiles.add({ resolve, reject })
     })
   }
 
@@ -268,7 +269,11 @@ export class TileCache<D> extends EventTarget {
     this.tilesByTileUrl = new Map()
     this.mapIdsByTileUrl = new Map()
     this.tileUrlsByMapId = new Map()
-    this.tilesFetchingCount = 0
+    this.#tilesFetching = new Set()
-    this.#tilesFetching = new Set()
+    const wasFetching = this.#tilesFetching.size > 0
+    this.#tilesFetching = new Set()
+
+    if (wasFetching) {
+      this.dispatchEvent(
+        new WarpedMapEvent(WarpedMapEventType.ALLREQUESTEDTILESLOADED)
+      )
+    }
-    this.#tilesFetching = new Set()
+    const wasFetching = this.#tilesFetching.size > 0
+    this.#tilesFetching = new Set()
+
+    if (wasFetching) {
+      this.dispatchEvent(
+        new WarpedMapEvent(WarpedMapEventType.ALLREQUESTEDTILESLOADED)
+      )
+    }
+
+    this.#stopWaitingForTiles(
+      new Error('Tile cache was cleared while waiting for tiles')
+    )
   }
 
   destroy() {
@@ -310,7 +315,7 @@ export class TileCache<D> extends EventTarget {
     // This is an async function that we are not awaiting to continue
     // The results are handled inside the tile using events
     cacheableTile.fetch()
-    this.updateTilesFetchingCount(1)
+    this.startFetching(cacheableTile.fetchableTile.tileUrl)
   }
 
   // Directly add cached tiles created from sprites
@@ -335,6 +340,14 @@ export class TileCache<D> extends EventTarget {
   }
 
   protected delayedRemoveCacheableTileForMapId(tileUrl: string, mapId: string) {
+    const cacheableTile = this.tilesByTileUrl.get(tileUrl)
+
+    // No pixels yet to keep, so queueing only pays for the rest of a download.
+    if (cacheableTile && !cacheableTile.isCachedTile()) {
+      this.removeCacheableTileForMapId(tileUrl, mapId)
+      return
+    }
+
     if (
       this.tileRemoveQueue.some(
         (tile) => tile.tileUrl === tileUrl && tile.mapId === mapId
@@ -375,15 +388,14 @@ export class TileCache<D> extends EventTarget {
     const mapIds = this.removeMapIdForTileurl(/sitelet?url=https%3A%2F%2Fgithub.com%2Fallmaps%2Fallmaps%2Fpull%2F602%2FmapId%2C%2520tileUrl)
     this.removeTileUrlForMapId(tileUrl, mapId)
 
-    // If there are no other maps for this tile and it's still fetching,
-    // abort the fetch and delete the tile from the cache.
+    // No other map wants this tile, so it leaves the cache.
     if (!mapIds.size) {
-      if (!cacheableTile.isCachedTile()) {
-        // Cancel fetch if tile is still being fetched
+      // Still fetching means the download is live, so stop it.
+      if (this.stopFetching(tileUrl)) {
         cacheableTile.abort()
-        this.updateTilesFetchingCount(-1)
       }
 
+      this.removeEventListenersFromCacheableTile(cacheableTile)
       this.tilesByTileUrl.delete(tileUrl)
     }
 
@@ -402,7 +414,7 @@ export class TileCache<D> extends EventTarget {
       }
       const { tileUrl } = event.data
 
-      this.updateTilesFetchingCount(-1)
+      this.stopFetching(tileUrl)
 
       for (const mapId of this.mapIdsByTileUrl.get(tileUrl) || []) {
         this.dispatchEvent(
@@ -439,11 +451,7 @@ export class TileCache<D> extends EventTarget {
       }
       const { tileUrl } = event.data
 
-      // A failed fetch must decrement the in-flight count just like a successful
-      // one (see tileFetched), otherwise tilesFetchingCount never reaches zero.
-      if (this.tilesByTileUrl.has(tileUrl)) {
-        this.updateTilesFetchingCount(-1)
-      }
+      this.stopFetching(tileUrl)
 
       const mapIds = [
         ...new Set([
@@ -577,23 +585,47 @@ export class TileCache<D> extends EventTarget {
   }
 
   get finished() {
-    return this.tilesFetchingCount === 0
+    return this.#tilesFetching.size === 0
   }
 
-  protected updateTilesFetchingCount(delta: number) {
-    const previousTilesFetchingCount = this.tilesFetchingCount
-    this.tilesFetchingCount += delta
+  protected startFetching(tileUrl: string) {
+    const previousCount = this.#tilesFetching.size
+    this.#tilesFetching.add(tileUrl)
 
-    if (previousTilesFetchingCount === 0 && this.tilesFetchingCount > 0) {
+    if (previousCount === 0 && this.#tilesFetching.size > 0) {
       this.dispatchEvent(
         new WarpedMapEvent(WarpedMapEventType.REQUESTEDTILESLOADING)
       )
     }
+  }
+
+  /** False if it had already stopped, so each tile is counted out once. */
+  protected stopFetching(tileUrl: string) {
+    if (!this.#tilesFetching.delete(tileUrl)) {
+      return false
+    }
 
-    if (this.tilesFetchingCount === 0) {
+    if (this.#tilesFetching.size === 0) {
       this.dispatchEvent(
         new WarpedMapEvent(WarpedMapEventType.ALLREQUESTEDTILESLOADED)
       )
+      this.#stopWaitingForTiles()
+    }
+
+    return true
+  }
+
+  /** With an error, so a cleared cache never reads as loaded. */
+  #stopWaitingForTiles(error?: Error) {
+    const waiting = this.#waitingForTiles
+    this.#waitingForTiles = new Set()
+
+    for (const { resolve, reject } of waiting) {
+      if (error) {
+        reject(error)
+      } else {
+        resolve()
+      }
     }
   }
 

diff --git a/packages/render/src/workers/fetch-and-get-image-data.ts b/packages/render/src/workers/fetch-and-get-image-data.ts
@@ -4,42 +4,56 @@ import { fetchUrl } from '@allmaps/stdlib'
 
 import type { FetchFn } from '@allmaps/types'
 
-const fetchAndGetImageDataWorker = {
+export const abortControllers = new Map<string, AbortController>()
+
+export const fetchAndGetImageDataWorker = {
   async getImageData(
     tileUrl: string,
-    onAbort: () => void, // Define as a no-arguments function
     fetchFn: FetchFn | undefined,
     width: number,
     height: number
   ): Promise<ImageData> {
-    const workerAbortController = new AbortController()
+    const abortController = new AbortController()
+    const { signal } = abortController
+    abortControllers.set(tileUrl, abortController)
 
-    // Connect the abort signal with a listener
-    onAbort()
+    try {
+      const response = await fetchurl(/sitelet?url=https%3A%2F%2Fgithub.com%2Fallmaps%2Fallmaps%2Fpull%2F602%2FtileUrl%2C%2520%257B%2520signal%2520%257D%2C%2520fetchFn%253C%2Fspan%253E)
 
-    const response = await fetchUrl(
-      tileUrl,
-      {
-        signal: workerAbortController.signal
-      },
-      fetchFn
-    )
+      const blob = await response.blob()
+      signal.throwIfAborted()
 
-    const blob = await response.blob()
+      const imageBitmap = await createImageBitmap(blob, 0, 0, width, height)
 
-    const imageBitmap = await createImageBitmap(blob, 0, 0, width, height)
+      try {
+        signal.throwIfAborted()
 
-    const canvas = new OffscreenCanvas(width, height)
-    const context = canvas.getContext('2d')
+        const canvas = new OffscreenCanvas(width, height)
+        const context = canvas.getContext('2d')
 
-    if (!context) {
-      throw new Error('Could not create OffscreenCanvas context')
-    }
+        if (!context) {
+          throw new Error('Could not create OffscreenCanvas context')
+        }
 
-    context.drawImage(imageBitmap, 0, 0)
-    const imageData = context.getImageData(0, 0, width, height)
+        context.drawImage(imageBitmap, 0, 0)
+        const imageData = context.getImageData(0, 0, width, height)
+
+        return transfer(imageData, [imageData.data.buffer])
+      } finally {
+        imageBitmap.close()
+      }
+    } finally {
+      // A later fetch for this url may own the entry now; deleting it then
+      // would leave that fetch unabortable.
+      if (abortControllers.get(tileUrl) === abortController) {
+        abortControllers.delete(tileUrl)
+      }
+    }
+  },
 
-    return transfer(imageData, [imageData.data.buffer])
+  /** Runs while getImageData is still awaiting: the worker is idle on I/O. */
+  abort(tileUrl: string): void {
+    abortControllers.get(tileUrl)?.abort()
   }
 }