fix: detached buffer during contouring in worker

Author: terraputix

src/om-protocol.ts

@@ -2,9 +2,7 @@ import { type GetResourceResponse, type RequestParameters } from 'maplibre-gl';
 
 import { setupGlobalCache } from '@openmeteo/file-reader';
 
-import { WorkerPool } from './worker-pool';
-
-import { getIndexFromLatLong } from './utils/math';
+import { TilePromise, WorkerPool } from './worker-pool';
 
 import {
 	getBorderPoints,
@@ -119,7 +117,7 @@ const getTile = async (
 	{ z, x, y }: TileIndex,
 	omUrl: string,
 	type: 'image' | 'arrayBuffer'
-): Promise<ImageBitmap> => {
+): TilePromise => {
 	const key = `${omUrl}/${tileSize}/${z}/${x}/${y}`;
 
 	return await workerPool.requestTile({
@@ -305,7 +303,7 @@ export const omProtocol = async (
 	params: RequestParameters,
 	abortController?: AbortController,
 	omProtocolSettings = defaultOmProtocolSettings
-): Promise<GetResourceResponse<TileJSON | ImageBitmap>> => {
+): Promise<GetResourceResponse<TileJSON | ImageBitmap | ArrayBuffer>> => {
 	if (params.type == 'json') {
 		try {
 			await initOMFile(params.url, omProtocolSettings);

src/worker-pool.ts

@@ -23,20 +23,26 @@ export interface TileRequest {
 	mapBounds: number[];
 }
 
-export type TileResponse = {
+export type TileResponse = ImageBitmap | ArrayBuffer;
+export type TilePromise = Promise<TileResponse>;
+
+export type WorkerResponse = {
 	type: 'returnImage' | 'returnArrayBuffer';
-	tile: ImageBitmap;
+	tile: TileResponse;
 	key: string;
 };
 
 export class WorkerPool {
 	private workers: Worker[] = [];
 	private nextWorker = 0;
 	/** Stores pending tile requests by key to avoid duplicate requests for the same tile */
-	private pendingTiles = new Map<string, Promise<ImageBitmap>>();
+	private pendingTiles = new Map<string, TilePromise>();
 
-	/** Stores resolve functions for pending promises, used to fulfill promises when worker responses arrive */
-	private resolvers = new Map<string, (tile: ImageBitmap) => void>();
+	/**
+	 * Stores an array of resolve functions for each pending key.
+	 * This allows for multiple subscribers for the same tile key.
+	 */
+	private resolvers = new Map<string, Array<(tile: TileResponse) => void>>();
 
 	constructor() {
 		if (typeof window === 'undefined' || typeof Worker === 'undefined') {
@@ -47,16 +53,35 @@ export class WorkerPool {
 		for (let i = 0; i < workerCount; i++) {
 			const worker = new TileWorker();
 			worker.onmessage = (message: MessageEvent) => this.handleMessage(message);
+			worker.onerror = (error: ErrorEvent) => this.handleError(error);
 			this.workers.push(worker);
 		}
 	}
 
 	private handleMessage(message: MessageEvent): void {
-		const data = message.data as TileResponse;
+		const data = message.data as WorkerResponse;
 		if (data.type.startsWith('return')) {
-			const resolve = this.resolvers.get(data.key);
-			if (resolve) {
-				resolve(data.tile);
+			const resolveFns = this.resolvers.get(data.key);
+
+			if (resolveFns && resolveFns.length > 0) {
+				const originalTile = data.tile;
+
+				// The first subscriber can receive the original (transferred) buffer.
+				const firstResolver = resolveFns.shift()!;
+				firstResolver(originalTile);
+
+				// All other subscribers must receive a clone.
+				resolveFns.forEach((resolve) => {
+					if (originalTile instanceof ArrayBuffer) {
+						// Create a copy for each subsequent subscriber.
+						resolve(originalTile.slice(0));
+					} else {
+						// ImageBitmaps are safe to share without cloning.
+						resolve(originalTile);
+					}
+				});
+
+				// Clean up now that all promises for this key are resolved.
 				this.resolvers.delete(data.key);
 				this.pendingTiles.delete(data.key);
 			} else {
@@ -65,6 +90,11 @@ export class WorkerPool {
 		}
 	}
 
+	private handleError(error: ErrorEvent): void {
+		// Simplified error handler: just log for now
+		console.error('Error in worker:', error.message, error);
+	}
+
 	public getNextWorker(): Worker | undefined {
 		if (this.workers.length === 0) return undefined;
 
@@ -73,22 +103,29 @@ export class WorkerPool {
 		return worker;
 	}
 
-	public requestTile(request: TileRequest): Promise<ImageBitmap> {
-		const existingPromise = this.pendingTiles.get(request.key);
-		if (existingPromise) {
-			return existingPromise;
+	public requestTile(request: TileRequest): TilePromise {
+		// If a request for this key is already in flight...
+		if (this.pendingTiles.has(request.key)) {
+			// ...create a new promise and add its resolver to the list for this key.
+			return new Promise<TileResponse>((resolve) => {
+				this.resolvers.get(request.key)!.push(resolve);
+			});
 		}
 
+		// This is the first request for this key.
 		const worker = this.getNextWorker();
 		if (!worker) {
 			return Promise.reject(new Error('No workers available (likely running in SSR)'));
 		}
 
-		const promise = new Promise<ImageBitmap>((resolve) => {
-			this.resolvers.set(request.key, resolve);
+		// Create the promise and store its resolver in a new array.
+		const promise = new Promise<TileResponse>((resolve) => {
+			this.resolvers.set(request.key, [resolve]);
 		});
 
+		// Store the master promise to indicate a request is in-flight.
 		this.pendingTiles.set(request.key, promise);
+
 		worker.postMessage(request);
 
 		return promise;

src/worker.ts

@@ -295,6 +295,9 @@ self.onmessage = async (message) => {
 		}
 
 		const buffer = pbf.finish();
-		postMessage({ type: 'returnArrayBuffer', tile: buffer, key: key }, { transfer: [buffer] });
+		postMessage(
+			{ type: 'returnArrayBuffer', tile: buffer.buffer, key: key },
+			{ transfer: [buffer.buffer] }
+		);
 	}
 };