ImageOverlay: Respect abort signals (#1625)

* Respect abort signals

* Add comment

Author: gkjohnson

src/three/plugins/images/ImageOverlayPlugin.js

@@ -1428,7 +1428,15 @@ export class ImageOverlay {
 
 		}
 
-		return this.downloadQueue.add( { priority: - performance.now() }, () => fetch( url, options ) );
+		const item = { priority: - performance.now() };
+		const promise = this.downloadQueue.add( item, () => fetch( url, options ) );
+		if ( options.signal ) {
+
+			options.signal.addEventListener( 'abort', () => this.downloadQueue.remove( item ), { once: true } );
+
+		}
+
+		return promise;
 
 	}
 
@@ -2102,7 +2110,16 @@ export class CesiumIonOverlay extends TiledImageOverlay {
 
 		}
 
-		return this.downloadQueue.add( { priority: - performance.now() }, () => this.auth.fetch( url, options ) );
+		// TODO: we should provide a better way to sort these
+		const item = { priority: - performance.now() };
+		const promise = this.downloadQueue.add( item, () => this.auth.fetch( url, options ) );
+		if ( options.signal ) {
+
+			options.signal.addEventListener( 'abort', () => this.downloadQueue.remove( item ), { once: true } );
+
+		}
+
+		return promise;
 
 	}
 
@@ -2176,7 +2193,15 @@ export class GoogleMapsOverlay extends TiledImageOverlay {
 
 		}
 
-		return this.downloadQueue.add( { priority: - performance.now() }, () => this.auth.fetch( url, options ) );
+		const item = { priority: - performance.now() };
+		const promise = this.downloadQueue.add( item, () => this.auth.fetch( url, options ) );
+		if ( options.signal ) {
+
+			options.signal.addEventListener( 'abort', () => this.downloadQueue.remove( item ), { once: true } );
+
+		}
+
+		return promise;
 
 	}
 

src/three/plugins/images/sources/MVTImageSource.js

@@ -182,7 +182,7 @@ export class MVTImageSource extends RegionImageSource {
 
 	}
 
-	async fetchItem( [ minX, minY, maxX, maxY, level ], _signal ) {
+	async fetchItem( [ minX, minY, maxX, maxY, level ], signal ) {
 
 		const { resolution, _contentCache } = this;
 		const canvas = document.createElement( 'canvas' );
@@ -200,6 +200,12 @@ export class MVTImageSource extends RegionImageSource {
 
 		await Promise.all( promises );
 
+		if ( signal && signal.aborted ) {
+
+			return null;
+
+		}
+
 		this._drawToCanvas( canvas, regionBounds, level );
 
 		const tex = new CanvasTexture( canvas );

src/three/plugins/images/sources/RegionImageSource.js

@@ -73,7 +73,11 @@ export class TiledRegionImageSource extends RegionImageSource {
 		// lock tiles for the requested level
 		await this._markImages( range, level, false );
 
-		//
+		if ( signal && signal.aborted ) {
+
+			return null;
+
+		}
 
 		// Fast path: if the range maps to exactly one tile with matching bounds, use its
 		// texture directly without compositing into an intermediate canvas to save memory.