@scoova/mgl 1.0.0

package/src/util/image_request.ts

@@ -0,0 +1,246 @@
+import {RequestParameters, makeRequest, sameOrigin, GetResourceResponse} from './ajax';
+import {arrayBufferToImageBitmap, arrayBufferToImage, extend, isWorker, isImageBitmap} from './util';
+import {webpSupported} from './webp_supported';
+import {config} from './config';
+import {createAbortError} from './abort_error';
+import {getProtocol} from '../source/protocol_crud';
+
+type ImageQueueThrottleControlCallback = () => boolean;
+
+export type ImageRequestQueueItem  = {
+    requestParameters: RequestParameters;
+    supportImageRefresh: boolean;
+    state: 'queued' | 'running' | 'completed';
+    abortController: AbortController;
+    onError: (error: Error) => void;
+    onSuccess: (response: GetResourceResponse<HTMLImageElement | ImageBitmap | null>) => void;
+}
+
+type ImageQueueThrottleCallbackDictionary = {
+    [Key: number]: ImageQueueThrottleControlCallback;
+}
+
+type HTMLImageElementWithPriority = HTMLImageElement &
+{
+    // fetchPriority is experimental property supported on Chromium browsers from Version 102
+    // By default images are downloaded with priority low, whereas fetch request downloads with priority high
+    // https://developer.mozilla.org/en-US/docs/Web/API/HTMLImageElement/fetchPriority
+    fetchPriority?: 'auto' | 'high' | 'low';
+};
+
+/**
+ * By default, the image queue is self driven, meaning as soon as one requested item is processed,
+ * it will move on to next one as quickly as it can while limiting
+ * the number of concurrent requests to MAX_PARALLEL_IMAGE_REQUESTS. The default behavior
+ * ensures that static views of the map can be rendered with minimal delay.
+ *
+ * However, the default behavior can prevent dynamic views of the map from rendering
+ * smoothly in that many requests can finish in one render frame, putting too much pressure on GPU.
+ *
+ * When the view of the map is moving dynamically, smoother frame rates can be achieved
+ * by throttling the number of items processed by the queue per frame. This can be
+ * accomplished by using {@link addThrottleControl} to allow the caller to
+ * use a lambda function to determine when the queue should be throttled (e.g. when isMoving())
+ * and manually calling {@link processQueue} in the render loop.
+ */
+export namespace ImageRequest {
+    let imageRequestQueue : ImageRequestQueueItem[];
+    let currentParallelImageRequests:number;
+
+    let throttleControlCallbackHandleCounter: number;
+    let throttleControlCallbacks: ImageQueueThrottleCallbackDictionary;
+
+    /**
+     * Reset the image request queue, removing all pending requests.
+     */
+    export const resetRequestQueue = (): void => {
+        imageRequestQueue = [];
+        currentParallelImageRequests = 0;
+        throttleControlCallbackHandleCounter = 0;
+        throttleControlCallbacks = {};
+    };
+
+    /**
+     * Install a callback to control when image queue throttling is desired.
+     * (e.g. when the map view is moving)
+     * @param callback - The callback function to install
+     * @returns handle that identifies the installed callback.
+     */
+    export const addThrottleControl = (callback: ImageQueueThrottleControlCallback): number => {
+        const handle = throttleControlCallbackHandleCounter++;
+        throttleControlCallbacks[handle] = callback;
+        return handle;
+    };
+
+    /**
+     * Remove a previously installed callback by passing in the handle returned
+     * by {@link addThrottleControl}.
+     * @param callbackHandle - The handle for the callback to remove.
+     */
+    export const removeThrottleControl = (callbackHandle: number): void => {
+        delete throttleControlCallbacks[callbackHandle];
+        // Try updating the queue
+        processQueue();
+    };
+
+    /**
+     * Check to see if any of the installed callbacks are requesting the queue
+     * to be throttled.
+     * @returns `true` if any callback is causing the queue to be throttled.
+     */
+    const isThrottled = (): boolean => {
+        for (const key of Object.keys(throttleControlCallbacks)) {
+            if (throttleControlCallbacks[key]()) {
+                return true;
+            }
+        }
+        return false;
+    };
+
+    /**
+     * Request to load an image.
+     * @param requestParameters - Request parameters.
+     * @param abortController - allows to abort the request.
+     * @param supportImageRefresh - `true`, if the image request need to support refresh based on cache headers.
+     * @returns - A promise resolved when the image is loaded.
+     */
+    export const getImage = (requestParameters: RequestParameters, abortController: AbortController, supportImageRefresh: boolean = true): Promise<GetResourceResponse<HTMLImageElement | ImageBitmap | null>> => {
+        return new Promise<GetResourceResponse<HTMLImageElement | ImageBitmap | null>>((resolve, reject) => {
+            if (webpSupported.supported) {
+                if (!requestParameters.headers) {
+                    requestParameters.headers = {};
+                }
+                requestParameters.headers.accept = 'image/webp,*/*';
+            }
+            extend(requestParameters, {type: 'image'});
+            const request: ImageRequestQueueItem = {
+                abortController,
+                requestParameters,
+                supportImageRefresh,
+                state: 'queued',
+                onError: (error: Error) => {
+                    reject(error);
+                },
+                onSuccess: (response) => {
+                    resolve(response);
+                }
+            };
+
+            imageRequestQueue.push(request);
+            processQueue();
+        });
+    };
+
+    const arrayBufferToCanvasImageSource = (data: ArrayBuffer): Promise<HTMLImageElement | ImageBitmap | null> => {
+        const imageBitmapSupported = typeof createImageBitmap === 'function';
+        if (imageBitmapSupported) {
+            return arrayBufferToImageBitmap(data);
+        } else {
+            return arrayBufferToImage(data);
+        }
+    };
+
+    const doImageRequest = async (itemInQueue: ImageRequestQueueItem) => {
+        itemInQueue.state = 'running';
+        const {requestParameters, supportImageRefresh, onError, onSuccess, abortController} = itemInQueue;
+        // - If refreshExpiredTiles is false, then we can use HTMLImageElement to download raster images.
+        // - Fetch/XHR (via MakeRequest API) will be used to download images for following scenarios:
+        //      1. Style image sprite will had a issue with HTMLImageElement as described
+        //          here: https://github.com/mapbox/mapbox-gl-js/issues/1470
+        //      2. If refreshExpiredTiles is true (default), then in order to read the image cache header,
+        //          fetch/XHR request will be required
+        // - For any special case handling like use of AddProtocol, worker initiated request or additional headers
+        //      let makeRequest handle it.
+        // - HtmlImageElement request automatically adds accept header for all the browser supported images
+        const canUseHTMLImageElement = supportImageRefresh === false &&
+            !isWorker(self) &&
+            !getProtocol(requestParameters.url) &&
+            (!requestParameters.headers ||
+                Object.keys(requestParameters.headers).reduce((acc, item) => acc && item === 'accept', true));
+
+        currentParallelImageRequests++;
+
+        const getImagePromise = canUseHTMLImageElement ?
+            getImageUsingHtmlImage(requestParameters, abortController) :
+            makeRequest(requestParameters, abortController);
+
+        try {
+            const response = await getImagePromise;
+            delete itemInQueue.abortController;
+            itemInQueue.state = 'completed';
+            if (response.data instanceof HTMLImageElement || isImageBitmap(response.data)) {
+                // User using addProtocol can directly return HTMLImageElement/ImageBitmap type
+                // If HtmlImageElement is used to get image then response type will be HTMLImageElement
+                onSuccess(response as GetResourceResponse<HTMLImageElement | ImageBitmap | null>);
+            } else if (response.data) {
+                const img = await arrayBufferToCanvasImageSource(response.data);
+                onSuccess({data: img, cacheControl: response.cacheControl, expires: response.expires});
+            }
+        } catch (err) {
+            delete itemInQueue.abortController;
+            onError(err);
+        } finally {
+            currentParallelImageRequests--;
+            processQueue();
+        }
+    };
+
+    /**
+     * Process some number of items in the image request queue.
+     */
+    const processQueue = (): void => {
+
+        const maxImageRequests = isThrottled() ?
+            config.MAX_PARALLEL_IMAGE_REQUESTS_PER_FRAME :
+            config.MAX_PARALLEL_IMAGE_REQUESTS;
+
+        // limit concurrent image loads to help with raster sources performance on big screens
+        for (let numImageRequests = currentParallelImageRequests;
+            numImageRequests < maxImageRequests && imageRequestQueue.length > 0;
+            numImageRequests++) {
+
+            const topItemInQueue: ImageRequestQueueItem = imageRequestQueue.shift();
+            if (topItemInQueue.abortController.signal.aborted) {
+                numImageRequests--;
+                continue;
+            }
+            doImageRequest(topItemInQueue);
+        }
+    };
+
+    const getImageUsingHtmlImage = (requestParameters: RequestParameters, abortController: AbortController): Promise<GetResourceResponse<HTMLImageElement | ImageBitmap | null>>  => {
+        return new Promise<GetResourceResponse<HTMLImageElement | ImageBitmap | null>>((resolve, reject) => {
+
+            const image = new Image() as HTMLImageElementWithPriority;
+            const url = requestParameters.url;
+            const credentials = requestParameters.credentials;
+            if (credentials && credentials === 'include') {
+                image.crossOrigin = 'use-credentials';
+            } else if ((credentials && credentials === 'same-origin') || !sameOrigin(url)) {
+                image.crossOrigin = 'anonymous';
+            }
+
+            abortController.signal.addEventListener('abort', () => {
+                // Set src to '' to actually cancel the request
+                image.src = '';
+                reject(createAbortError());
+            });
+
+            image.fetchPriority = 'high';
+            image.onload = () => {
+                image.onerror = image.onload = null;
+                resolve({data: image});
+            };
+            image.onerror = () => {
+                image.onerror = image.onload = null;
+                if (abortController.signal.aborted) {
+                    return;
+                }
+                reject(new Error('Could not load image. Please make sure to use a supported image type such as PNG or JPEG. Note that SVGs are not supported.'));
+            };
+            image.src = url;
+        });
+    };
+}
+
+ImageRequest.resetRequestQueue();

package/src/util/intersection_tests.ts

@@ -0,0 +1,206 @@
+import {isCounterClockwise} from './util';
+
+import Point from '@mapbox/point-geometry';
+
+export {polygonIntersectsBufferedPoint, polygonIntersectsMultiPolygon, polygonIntersectsBufferedMultiLine, polygonIntersectsPolygon, distToSegmentSquared, polygonIntersectsBox};
+
+type Line = Array<Point>;
+type MultiLine = Array<Line>;
+type Ring = Array<Point>;
+type Polygon = Array<Point>;
+type MultiPolygon = Array<Polygon>;
+
+function polygonIntersectsPolygon(polygonA: Polygon, polygonB: Polygon) {
+    for (let i = 0; i < polygonA.length; i++) {
+        if (polygonContainsPoint(polygonB, polygonA[i])) return true;
+    }
+
+    for (let i = 0; i < polygonB.length; i++) {
+        if (polygonContainsPoint(polygonA, polygonB[i])) return true;
+    }
+
+    if (lineIntersectsLine(polygonA, polygonB)) return true;
+
+    return false;
+}
+
+function polygonIntersectsBufferedPoint(polygon: Polygon, point: Point, radius: number) {
+    if (polygonContainsPoint(polygon, point)) return true;
+    if (pointIntersectsBufferedLine(point, polygon, radius)) return true;
+    return false;
+}
+
+function polygonIntersectsMultiPolygon(polygon: Polygon, multiPolygon: MultiPolygon) {
+
+    if (polygon.length === 1) {
+        return multiPolygonContainsPoint(multiPolygon, polygon[0]);
+    }
+
+    for (let m = 0; m < multiPolygon.length; m++) {
+        const ring = multiPolygon[m];
+        for (let n = 0; n < ring.length; n++) {
+            if (polygonContainsPoint(polygon, ring[n])) return true;
+        }
+    }
+
+    for (let i = 0; i < polygon.length; i++) {
+        if (multiPolygonContainsPoint(multiPolygon, polygon[i])) return true;
+    }
+
+    for (let k = 0; k < multiPolygon.length; k++) {
+        if (lineIntersectsLine(polygon, multiPolygon[k])) return true;
+    }
+
+    return false;
+}
+
+function polygonIntersectsBufferedMultiLine(polygon: Polygon, multiLine: MultiLine, radius: number) {
+    for (let i = 0; i < multiLine.length; i++) {
+        const line = multiLine[i];
+
+        if (polygon.length >= 3) {
+            for (let k = 0; k < line.length; k++) {
+                if (polygonContainsPoint(polygon, line[k])) return true;
+            }
+        }
+
+        if (lineIntersectsBufferedLine(polygon, line, radius)) return true;
+    }
+    return false;
+}
+
+function lineIntersectsBufferedLine(lineA: Line, lineB: Line, radius: number) {
+
+    if (lineA.length > 1) {
+        if (lineIntersectsLine(lineA, lineB)) return true;
+
+        // Check whether any point in either line is within radius of the other line
+        for (let j = 0; j < lineB.length; j++) {
+            if (pointIntersectsBufferedLine(lineB[j], lineA, radius)) return true;
+        }
+    }
+
+    for (let k = 0; k < lineA.length; k++) {
+        if (pointIntersectsBufferedLine(lineA[k], lineB, radius)) return true;
+    }
+
+    return false;
+}
+
+function lineIntersectsLine(lineA: Line, lineB: Line) {
+    if (lineA.length === 0 || lineB.length === 0) return false;
+    for (let i = 0; i < lineA.length - 1; i++) {
+        const a0 = lineA[i];
+        const a1 = lineA[i + 1];
+        for (let j = 0; j < lineB.length - 1; j++) {
+            const b0 = lineB[j];
+            const b1 = lineB[j + 1];
+            if (lineSegmentIntersectsLineSegment(a0, a1, b0, b1)) return true;
+        }
+    }
+    return false;
+}
+
+function lineSegmentIntersectsLineSegment(a0: Point, a1: Point, b0: Point, b1: Point) {
+    return isCounterClockwise(a0, b0, b1) !== isCounterClockwise(a1, b0, b1) &&
+        isCounterClockwise(a0, a1, b0) !== isCounterClockwise(a0, a1, b1);
+}
+
+function pointIntersectsBufferedLine(p: Point, line: Line, radius: number) {
+    const radiusSquared = radius * radius;
+
+    if (line.length === 1) return p.distSqr(line[0]) < radiusSquared;
+
+    for (let i = 1; i < line.length; i++) {
+        // Find line segments that have a distance <= radius^2 to p
+        // In that case, we treat the line as "containing point p".
+        const v = line[i - 1], w = line[i];
+        if (distToSegmentSquared(p, v, w) < radiusSquared) return true;
+    }
+    return false;
+}
+
+// Code from https://stackoverflow.com/a/1501725/331379.
+function distToSegmentSquared(p: Point, v: Point, w: Point) {
+    const l2 = v.distSqr(w);
+    if (l2 === 0) return p.distSqr(v);
+    const t = ((p.x - v.x) * (w.x - v.x) + (p.y - v.y) * (w.y - v.y)) / l2;
+    if (t < 0) return p.distSqr(v);
+    if (t > 1) return p.distSqr(w);
+    return p.distSqr(w.sub(v)._mult(t)._add(v));
+}
+
+// point in polygon ray casting algorithm
+function multiPolygonContainsPoint(rings: Array<Ring>, p: Point) {
+    let c = false,
+        ring, p1, p2;
+
+    for (let k = 0; k < rings.length; k++) {
+        ring = rings[k];
+        for (let i = 0, j = ring.length - 1; i < ring.length; j = i++) {
+            p1 = ring[i];
+            p2 = ring[j];
+            if (((p1.y > p.y) !== (p2.y > p.y)) && (p.x < (p2.x - p1.x) * (p.y - p1.y) / (p2.y - p1.y) + p1.x)) {
+                c = !c;
+            }
+        }
+    }
+    return c;
+}
+
+function polygonContainsPoint(ring: Ring, p: Point) {
+    let c = false;
+    for (let i = 0, j = ring.length - 1; i < ring.length; j = i++) {
+        const p1 = ring[i];
+        const p2 = ring[j];
+        if (((p1.y > p.y) !== (p2.y > p.y)) && (p.x < (p2.x - p1.x) * (p.y - p1.y) / (p2.y - p1.y) + p1.x)) {
+            c = !c;
+        }
+    }
+    return c;
+}
+
+function polygonIntersectsBox(ring: Ring, boxX1: number, boxY1: number, boxX2: number, boxY2: number) {
+    for (const p of ring) {
+        if (boxX1 <= p.x &&
+            boxY1 <= p.y &&
+            boxX2 >= p.x &&
+            boxY2 >= p.y) return true;
+    }
+
+    const corners = [
+        new Point(boxX1, boxY1),
+        new Point(boxX1, boxY2),
+        new Point(boxX2, boxY2),
+        new Point(boxX2, boxY1)];
+
+    if (ring.length > 2) {
+        for (const corner of corners) {
+            if (polygonContainsPoint(ring, corner)) return true;
+        }
+    }
+
+    for (let i = 0; i < ring.length - 1; i++) {
+        const p1 = ring[i];
+        const p2 = ring[i + 1];
+        if (edgeIntersectsBox(p1, p2, corners)) return true;
+    }
+
+    return false;
+}
+
+function edgeIntersectsBox(e1: Point, e2: Point, corners: Array<Point>) {
+    const tl = corners[0];
+    const br = corners[2];
+    // the edge and box do not intersect in either the x or y dimensions
+    if (((e1.x < tl.x) && (e2.x < tl.x)) ||
+        ((e1.x > br.x) && (e2.x > br.x)) ||
+        ((e1.y < tl.y) && (e2.y < tl.y)) ||
+        ((e1.y > br.y) && (e2.y > br.y))) return false;
+
+    // check if all corners of the box are on the same side of the edge
+    const dir = isCounterClockwise(e1, e2, corners[0]);
+    return dir !== isCounterClockwise(e1, e2, corners[1]) ||
+        dir !== isCounterClockwise(e1, e2, corners[2]) ||
+        dir !== isCounterClockwise(e1, e2, corners[3]);
+}

package/src/util/is_char_in_unicode_block.test.ts

@@ -0,0 +1,15 @@
+import {unicodeBlockLookup} from './is_char_in_unicode_block';
+
+describe('unicodeBlockLookup', () => {
+    test('each code block lookup function follows the same pattern', () => {
+        for (const codeBlock in unicodeBlockLookup) {
+            const lookup = unicodeBlockLookup[codeBlock];
+            const match = lookup.toString().match(/^\(char\) => char >= 0x([0-9A-F]{4,6}) && char <= 0x([0-9A-F]{4,6})$/);
+            expect(match).not.toBeNull();
+            expect(match).toHaveLength(3);
+            const lower = parseInt(match[1], 16);
+            const upper = parseInt(match[2], 16);
+            expect(upper).toBeGreaterThan(lower);
+        }
+    });
+});