@scoova/mgl 1.0.0

package/src/util/image.ts

@@ -0,0 +1,150 @@
+import {register} from './web_worker_transfer';
+
+export type Size = {
+    width: number;
+    height: number;
+};
+
+type Point2D = {
+    x: number;
+    y: number;
+};
+
+function createImage(image: any, {
+    width,
+    height
+}: Size, channels: number, data?: Uint8Array | Uint8ClampedArray) {
+    if (!data) {
+        data = new Uint8Array(width * height * channels);
+    } else if (data instanceof Uint8ClampedArray) {
+        data = new Uint8Array(data.buffer);
+    } else if (data.length !== width * height * channels) {
+        throw new RangeError(`mismatched image size. expected: ${data.length} but got: ${width * height * channels}`);
+    }
+    image.width = width;
+    image.height = height;
+    image.data = data;
+    return image;
+}
+
+function resizeImage(image: any, {
+    width,
+    height
+}: Size, channels: number) {
+    if (width === image.width && height === image.height) {
+        return;
+    }
+
+    const newImage = createImage({}, {width, height}, channels);
+
+    copyImage(image, newImage, {x: 0, y: 0}, {x: 0, y: 0}, {
+        width: Math.min(image.width, width),
+        height: Math.min(image.height, height)
+    }, channels);
+
+    image.width = width;
+    image.height = height;
+    image.data = newImage.data;
+}
+
+function copyImage(srcImg: any, dstImg: any, srcPt: Point2D, dstPt: Point2D, size: Size, channels: number) {
+    if (size.width === 0 || size.height === 0) {
+        return dstImg;
+    }
+
+    if (size.width > srcImg.width ||
+        size.height > srcImg.height ||
+        srcPt.x > srcImg.width - size.width ||
+        srcPt.y > srcImg.height - size.height) {
+        throw new RangeError('out of range source coordinates for image copy');
+    }
+
+    if (size.width > dstImg.width ||
+        size.height > dstImg.height ||
+        dstPt.x > dstImg.width - size.width ||
+        dstPt.y > dstImg.height - size.height) {
+        throw new RangeError('out of range destination coordinates for image copy');
+    }
+
+    const srcData = srcImg.data;
+    const dstData = dstImg.data;
+
+    if (srcData === dstData) throw new Error('srcData equals dstData, so image is already copied');
+
+    for (let y = 0; y < size.height; y++) {
+        const srcOffset = ((srcPt.y + y) * srcImg.width + srcPt.x) * channels;
+        const dstOffset = ((dstPt.y + y) * dstImg.width + dstPt.x) * channels;
+        for (let i = 0; i < size.width * channels; i++) {
+            dstData[dstOffset + i] = srcData[srcOffset + i];
+        }
+    }
+    return dstImg;
+}
+
+/**
+ * An image with alpha color value
+ */
+export class AlphaImage {
+    width: number;
+    height: number;
+    data: Uint8Array;
+
+    constructor(size: Size, data?: Uint8Array | Uint8ClampedArray) {
+        createImage(this, size, 1, data);
+    }
+
+    resize(size: Size) {
+        resizeImage(this, size, 1);
+    }
+
+    clone() {
+        return new AlphaImage({width: this.width, height: this.height}, new Uint8Array(this.data));
+    }
+
+    static copy(srcImg: AlphaImage, dstImg: AlphaImage, srcPt: Point2D, dstPt: Point2D, size: Size) {
+        copyImage(srcImg, dstImg, srcPt, dstPt, size, 1);
+    }
+}
+
+/**
+ * An object to store image data not premultiplied, because ImageData is not premultiplied.
+ * UNPACK_PREMULTIPLY_ALPHA_WEBGL must be used when uploading to a texture.
+ */
+export class RGBAImage {
+    width: number;
+    height: number;
+
+    /**
+     * data must be a Uint8Array instead of Uint8ClampedArray because texImage2D does not support Uint8ClampedArray in all browsers.
+     */
+    data: Uint8Array;
+
+    constructor(size: Size, data?: Uint8Array | Uint8ClampedArray) {
+        createImage(this, size, 4, data);
+    }
+
+    resize(size: Size) {
+        resizeImage(this, size, 4);
+    }
+
+    replace(data: Uint8Array | Uint8ClampedArray, copy?: boolean) {
+        if (copy) {
+            this.data.set(data);
+        } else if (data instanceof Uint8ClampedArray) {
+            this.data = new Uint8Array(data.buffer);
+        } else {
+            this.data = data;
+        }
+    }
+
+    clone() {
+        return new RGBAImage({width: this.width, height: this.height}, new Uint8Array(this.data));
+    }
+
+    static copy(srcImg: RGBAImage | ImageData, dstImg: RGBAImage, srcPt: Point2D, dstPt: Point2D, size: Size) {
+        copyImage(srcImg, dstImg, srcPt, dstPt, size, 4);
+    }
+}
+
+register('AlphaImage', AlphaImage);
+register('RGBAImage', RGBAImage);

package/src/util/image_request.test.ts

@@ -0,0 +1,408 @@
+import {config} from './config';
+import {webpSupported} from './webp_supported';
+import {sleep, stubAjaxGetImage} from './test/util';
+import {fakeServer, type FakeServer} from 'nise';
+import {ImageRequest} from './image_request';
+import {isAbortError} from './abort_error';
+import * as ajax from './ajax';
+
+describe('ImageRequest', () => {
+    let server: FakeServer;
+    beforeEach(() => {
+        global.fetch = null;
+        server = fakeServer.create();
+        ImageRequest.resetRequestQueue();
+        stubAjaxGetImage(undefined);
+    });
+    afterEach(() => {
+        server.restore();
+    });
+
+    test('getImage respects maxParallelImageRequests', async () => {
+        server.respondWith(request => request.respond(200, {'Content-Type': 'image/png'}, ''));
+
+        const maxRequests = config.MAX_PARALLEL_IMAGE_REQUESTS;
+
+        const promises: Promise<any>[] = [];
+        for (let i = 0; i < maxRequests + 5; i++) {
+            promises.push(ImageRequest.getImage({url: ''}, new AbortController()));
+
+        }
+        expect(server.requests).toHaveLength(maxRequests);
+
+        server.requests[0].respond(200);
+        await promises[0];
+        expect(server.requests).toHaveLength(maxRequests + 1);
+        server.requests[1].respond(200);
+        await promises[1];
+        expect(server.requests).toHaveLength(maxRequests + 2);
+    });
+
+    test('getImage respects maxParallelImageRequests and continues to respond even when server returns 404', async () => {
+        server.respondWith(request => request.respond(404));
+
+        const maxRequests = config.MAX_PARALLEL_IMAGE_REQUESTS;
+
+        for (let i = 0; i < maxRequests + 5; i++) {
+            ImageRequest.getImage({url: ''}, new AbortController()).catch(() => {});
+        }
+        expect(server.requests).toHaveLength(maxRequests);
+        server.respond();
+        await sleep(0);
+        expect(server.requests).toHaveLength(maxRequests + 5);
+    });
+
+    test('Cancel: getImage cancelling frees up request for maxParallelImageRequests', async () => {
+        const maxRequests = config.MAX_PARALLEL_IMAGE_REQUESTS;
+
+        for (let i = 0; i < maxRequests + 1; i++) {
+            const abortController = new AbortController();
+            ImageRequest.getImage({url: ''}, abortController).catch((e) => expect(isAbortError(e)).toBeTruthy());
+            abortController.abort();
+            await sleep(0);
+        }
+        expect(server.requests).toHaveLength(maxRequests + 1);
+    });
+
+    test('Cancel: getImage requests that were once queued are still abortable', async () => {
+        const maxRequests = config.MAX_PARALLEL_IMAGE_REQUESTS;
+
+        const abortControllers: AbortController[] = [];
+        for (let i = 0; i < maxRequests; i++) {
+            const abortController = new AbortController();
+            abortControllers.push(abortController);
+            ImageRequest.getImage({url: ''}, abortController).catch(() => {});
+        }
+
+        // the limit of allowed requests is reached
+        expect(server.requests).toHaveLength(maxRequests);
+
+        const queuedURL = 'this-is-the-queued-request';
+        const abortController = new AbortController();
+        ImageRequest.getImage({url: queuedURL}, abortController).catch((e) => expect(isAbortError(e)).toBeTruthy());
+
+        // the new requests is queued because the limit is reached
+        expect(server.requests).toHaveLength(maxRequests);
+
+        // cancel the first request to let the queued request start
+        abortControllers[0].abort();
+        await sleep(0);
+        expect(server.requests).toHaveLength(maxRequests + 1);
+
+        // abort the previously queued request and confirm that it is aborted
+        const queuedRequest = server.requests[server.requests.length - 1];
+        expect(queuedRequest.url).toBe(queuedURL);
+        expect((queuedRequest as any).aborted).toBeUndefined();
+        abortController.abort();
+        expect((queuedRequest as any).aborted).toBe(true);
+    });
+
+    test('getImage sends accept/webp when supported', async () => {
+        server.respondWith((request) => {
+            expect(request.requestHeaders.accept.includes('image/webp')).toBeTruthy();
+            request.respond(200, {'Content-Type': 'image/webp'}, '');
+        });
+
+        // mock webp support
+        webpSupported.supported = true;
+
+        const promise = ImageRequest.getImage({url: ''}, new AbortController());
+
+        server.respond();
+
+        await expect(promise).resolves.toBeDefined();
+    });
+
+    test('getImage uses createImageBitmap when supported', async () => {
+        server.respondWith(request => request.respond(200, {'Content-Type': 'image/png',
+            'Cache-Control': 'cache',
+            'Expires': 'expires'}, ''));
+
+        stubAjaxGetImage(() => Promise.resolve(new ImageBitmap()));
+        const promise = ImageRequest.getImage({url: ''}, new AbortController());
+        server.respond();
+
+        const response = await promise;
+
+        expect(response.data).toBeInstanceOf(ImageBitmap);
+        expect(response.cacheControl).toBe('cache');
+        expect(response.expires).toBe('expires');
+    });
+
+    test('getImage using createImageBitmap throws exception', async () => {
+        server.respondWith(request => request.respond(200, {'Content-Type': 'image/png',
+            'Cache-Control': 'cache',
+            'Expires': 'expires'}, ''));
+
+        stubAjaxGetImage(() => Promise.reject(new Error('error')));
+
+        const promise = ImageRequest.getImage({url: ''}, new AbortController());
+
+        server.respond();
+
+        await expect(promise).rejects.toThrow();
+    });
+
+    test('getImage uses HTMLImageElement when createImageBitmap is not supported', async () => {
+        const makeRequestSky = jest.spyOn(ajax, 'makeRequest');
+        server.respondWith(request => request.respond(200, {'Content-Type': 'image/png',
+            'Cache-Control': 'cache',
+            'Expires': 'expires'}, ''));
+
+        const promise = ImageRequest.getImage({url: ''}, new AbortController());
+
+        server.respond();
+        expect(makeRequestSky).toHaveBeenCalledTimes(1);
+        makeRequestSky.mockClear();
+        const response = await promise;
+        expect(response.data).toBeInstanceOf(HTMLImageElement);
+        expect(response.cacheControl).toBe('cache');
+        expect(response.expires).toBe('expires');
+    });
+
+    test('getImage using HTMLImageElement with same-origin credentials', async () => {
+        const makeRequestSky = jest.spyOn(ajax, 'makeRequest');
+        const promise = ImageRequest.getImage({url: '', credentials: 'same-origin'}, new AbortController(), false);
+
+        expect(makeRequestSky).toHaveBeenCalledTimes(0);
+        makeRequestSky.mockClear();
+
+        const response = await promise;
+
+        expect(response.data).toBeInstanceOf(HTMLImageElement);
+        expect((response.data as HTMLImageElement).crossOrigin).toBe('anonymous');
+    });
+
+    test('getImage using HTMLImageElement with include credentials', async () => {
+        const makeRequestSky = jest.spyOn(ajax, 'makeRequest');
+        const promise = ImageRequest.getImage({url: '', credentials: 'include'}, new AbortController(), false);
+
+        expect(makeRequestSky).toHaveBeenCalledTimes(0);
+        makeRequestSky.mockClear();
+
+        const response = await promise;
+
+        expect(response.data).toBeInstanceOf(HTMLImageElement);
+        expect((response.data as HTMLImageElement).crossOrigin).toBe('use-credentials');
+    });
+
+    test('getImage using HTMLImageElement with accept header', async () => {
+        const makeRequestSky = jest.spyOn(ajax, 'makeRequest');
+        const promise = ImageRequest.getImage({url: '', credentials: 'include', headers: {accept: 'accept'}}, new AbortController(), false);
+
+        expect(makeRequestSky).toHaveBeenCalledTimes(0);
+        makeRequestSky.mockClear();
+
+        const response = await promise;
+        expect(response.data).toBeInstanceOf(HTMLImageElement);
+        expect((response.data as HTMLImageElement).crossOrigin).toBe('use-credentials');
+    });
+
+    test('getImage uses makeRequest when custom Headers are added', () => {
+        const makeRequestSky = jest.spyOn(ajax, 'makeRequest');
+
+        ImageRequest.getImage({url: '', credentials: 'include', headers: {custom: 'test', accept: 'image'}}, new AbortController(), false);
+
+        expect(makeRequestSky).toHaveBeenCalledTimes(1);
+        makeRequestSky.mockClear();
+    });
+
+    test('getImage request returned 404 response for fetch request', async () => {
+        server.respondWith(request => request.respond(404));
+
+        const promise = ImageRequest.getImage({url: ''}, new AbortController());
+
+        server.respond();
+
+        await expect(promise).rejects.toThrow('Not Found');
+    });
+
+    test('getImage request failed for HTTPImageRequest', async () => {
+        const promise = ImageRequest.getImage({url: 'error'},  new AbortController(), false);
+        await expect(promise).rejects.toThrow(/Could not load image.*/);
+    });
+
+    test('Cancel: getImage request cancelled for HTTPImageRequest', async () => {
+        let imageUrl;
+        const requestUrl = 'test';
+        // eslint-disable-next-line accessor-pairs
+        Object.defineProperty(global.Image.prototype, 'src', {
+            set(url: string) {
+                imageUrl = url;
+            }
+        });
+
+        const abortController = new AbortController();
+        ImageRequest.getImage({url: requestUrl}, abortController, false).catch(() => {});
+
+        expect(imageUrl).toBe(requestUrl);
+        expect(abortController.signal.aborted).toBeFalsy();
+        abortController.abort();
+        expect(abortController.signal.aborted).toBeTruthy();
+        expect(imageUrl).toBe('');
+    });
+
+    test('Cancel: getImage request cancelled', async () => {
+        server.respondWith(request => request.respond(200, {'Content-Type': 'image/png',
+            'Cache-Control': 'cache',
+            'Expires': 'expires'}, ''));
+
+        const abortController = new AbortController();
+        let response = false;
+        ImageRequest.getImage({url: ''}, abortController)
+            .then(() => { response = true; })
+            .catch(() => { response = true; });
+
+        abortController.abort();
+
+        server.respond();
+
+        expect(response).toBeFalsy();
+    });
+
+    test('Cancel: Cancellation of an image which has not yet been requested', async () => {
+        const maxRequests = config.MAX_PARALLEL_IMAGE_REQUESTS;
+
+        let callbackCounter = 0;
+        const promiseCallback = () => { callbackCounter++; };
+
+        const abortConstollers: {url: string; abortController: AbortController}[] = [];
+        for (let i = 0; i < maxRequests + 100; i++) {
+            const url = `${i}`;
+            const abortController = new AbortController();
+            abortConstollers.push({url, abortController});
+            ImageRequest.getImage({url}, abortController).then(promiseCallback).catch(() => {});
+        }
+
+        abortConstollers[0].abortController.abort();
+        await sleep(0);
+        // Queue should move forward and next request is made
+        expect(server.requests).toHaveLength(maxRequests + 1);
+
+        // Cancel request should not call callback
+        expect(callbackCounter).toBe(0);
+
+        // Cancel request which is not yet issued. It should not fire callback
+        const nextRequestInQueue = abortConstollers[server.requests.length];
+        const cancelledImageUrl = nextRequestInQueue.url;
+        nextRequestInQueue.abortController.abort();
+
+        // Queue should not move forward as cancelled image was sitting in queue
+        expect(server.requests).toHaveLength(maxRequests + 1);
+        expect(callbackCounter).toBe(0);
+
+        // On server response, next image queued should not be the cancelled image
+        server.requests[1].respond(200);
+        await sleep(0);
+        expect(callbackCounter).toBe(1);
+        expect(server.requests).toHaveLength(maxRequests + 2);
+        // Verify that the last request made skipped the cancelled image request
+        expect(server.requests[server.requests.length - 1].url).toBe((parseInt(cancelledImageUrl) + 1).toString());
+    });
+
+    test('throttling: one throttling client will result in throttle behavior for all', () => {
+        const maxRequestsPerFrame = config.MAX_PARALLEL_IMAGE_REQUESTS_PER_FRAME;
+        const callbackHandles = [];
+
+        // add one for each
+        callbackHandles.push(ImageRequest.addThrottleControl(() => false));
+        callbackHandles.push(ImageRequest.addThrottleControl(() => true));
+
+        let callbackCounter = 0;
+        const promiseCallback = () => { callbackCounter++; };
+
+        for (let i = 0; i < maxRequestsPerFrame + 1; i++) {
+            ImageRequest.getImage({url: ''}, new AbortController()).then(promiseCallback);
+        }
+
+        expect(server.requests).toHaveLength(maxRequestsPerFrame);
+
+        // all pending
+        expect(callbackCounter).toBe(0);
+
+        for (const handle of callbackHandles) {
+            ImageRequest.removeThrottleControl(handle);
+        }
+    });
+
+    test('throttling: image queue will process MAX_PARALLEL_IMAGE_REQUESTS_PER_FRAME if throttling control returns true', () => {
+        const maxRequestsPerFrame = config.MAX_PARALLEL_IMAGE_REQUESTS_PER_FRAME;
+        const maxRequests = config.MAX_PARALLEL_IMAGE_REQUESTS;
+        const controlId = ImageRequest.addThrottleControl(() => true);
+
+        let callbackCounter = 0;
+        const promiseCallback = () => { callbackCounter++; };
+
+        for (let i = 0; i < maxRequests; i++) {
+            ImageRequest.getImage({url: ''}, new AbortController()).then(promiseCallback);
+        }
+
+        // Should only fire request to a max allowed per frame
+        expect(server.requests).toHaveLength(maxRequestsPerFrame);
+
+        // all pending
+        expect(callbackCounter).toBe(0);
+
+        ImageRequest.removeThrottleControl(controlId);
+    });
+
+    test('throttling: image queue will process MAX_PARALLEL_IMAGE_REQUESTS if throttling control returns false', () => {
+        const maxRequests = config.MAX_PARALLEL_IMAGE_REQUESTS;
+        const controlId = ImageRequest.addThrottleControl(() => false);
+
+        let callbackCounter = 0;
+        const promiseCallback = () => { callbackCounter++; };
+
+        for (let i = 0; i < maxRequests + 100; i++) {
+            ImageRequest.getImage({url: ''}, new AbortController()).then(promiseCallback);
+        }
+
+        // all should be processed because throttle control is returning false
+        expect(server.requests).toHaveLength(maxRequests);
+
+        // all pending
+        expect(callbackCounter).toBe(0);
+
+        ImageRequest.removeThrottleControl(controlId);
+    });
+
+    test('throttling: removing throttling client will process all requests', async () => {
+        const requestParameter = {'Content-Type': 'image/png', url: ''};
+        const maxRequestsPerFrame = config.MAX_PARALLEL_IMAGE_REQUESTS_PER_FRAME;
+
+        // add 10, and one of them is throttling
+        const throttlingIndex = 5;
+        for (let i = 0; i < 10; i++) {
+            const throttlingClient: boolean = (i === throttlingIndex);
+            ImageRequest.addThrottleControl(() => throttlingClient);
+        }
+
+        // make 2 times + 1 more requests
+        const requestsMade = 2 * maxRequestsPerFrame + 1;
+        const completedMap: {[index: number]: boolean} = {};
+        for (let i = 0; i < requestsMade; i++) {
+            const promise = ImageRequest.getImage(requestParameter, new AbortController());
+            promise.catch(() => {});
+            promise.then(() => { completedMap[i] = true; });
+        }
+
+        // up to the config value
+        expect(server.requests).toHaveLength(maxRequestsPerFrame);
+
+        const itemIndexToComplete = 6;
+        server.requests[itemIndexToComplete].respond(200);
+
+        // unleash it by removing the throttling client
+        ImageRequest.removeThrottleControl(throttlingIndex);
+        await sleep(0);
+        expect(server.requests).toHaveLength(requestsMade);
+
+        // all pending
+        expect(Object.keys(completedMap)).toHaveLength(1);
+
+        // everything should still be pending except itemIndexToComplete
+        for (let i = 0; i < maxRequestsPerFrame + 1; i++) {
+            expect(completedMap[i]).toBe(i === itemIndexToComplete ? true : undefined);
+        }
+    });
+});