@scoova/mgl 1.0.0

package/src/util/color_ramp.test.ts

@@ -0,0 +1,105 @@
+
+import {renderColorRamp} from './color_ramp';
+import {createPropertyExpression, StylePropertyExpression, StylePropertySpecification} from '@maplibre/maplibre-gl-style-spec';
+
+const spec = {
+    'function': true,
+    'property-function': true,
+    'type': 'color'
+} as any as StylePropertySpecification;
+
+function pixelAt(image, i) {
+    return image.data.slice(i * 4, (i + 1) * 4);
+}
+
+function nearlyEquals(a, b) {
+    // we're actually looking for colors that are _almost_ equal, but don't
+    // expect exact equal since 256 px need to represent a range from [0, 1]
+    // (inclusive) -- the first and last pixel should be exact, the halfway
+    // pixel may not be
+    return a.every((e, i) => Math.abs(e - b[i]) <= 3);
+}
+
+describe('renderColorRamp', () => {
+    test('renderColorRamp linear', () => {
+
+        const expression = createPropertyExpression([
+            'interpolate',
+            ['linear'],
+            ['line-progress'],
+            0, 'rgba(0,0,255,0)',
+            0.25, 'white',
+            0.5, 'rgba(0,255,255,0.5)',
+            0.75, 'black',
+            1, 'red'
+        ], spec).value as StylePropertyExpression;
+
+        const ramp = renderColorRamp({expression, evaluationKey: 'lineProgress'});
+
+        expect(ramp.width).toBe(256);
+        expect(ramp.height).toBe(1);
+
+        expect(pixelAt(ramp, 0)[3]).toBe(0);
+        expect(nearlyEquals(pixelAt(ramp, 63), [255, 255, 255, 255])).toBeTruthy();
+        expect(nearlyEquals(pixelAt(ramp, 127), [0, 255, 255, 127])).toBeTruthy();
+        expect(nearlyEquals(pixelAt(ramp, 191), [0, 0, 0, 255])).toBeTruthy();
+        expect(nearlyEquals(pixelAt(ramp, 255), [255, 0, 0, 255])).toBeTruthy();
+    });
+
+    test('renderColorRamp step', () => {
+
+        const expression = createPropertyExpression([
+            'step',
+            ['line-progress'],
+            'rgba(0, 0, 255, 0.1)',
+            0.1, 'red',
+            0.2, 'yellow',
+            0.3, 'white',
+            0.5, 'black',
+            1, 'black'
+        ], spec).value as StylePropertyExpression;
+
+        const ramp = renderColorRamp({expression, evaluationKey: 'lineProgress', resolution: 512});
+
+        expect(ramp.width).toBe(512);
+        expect(ramp.height).toBe(1);
+
+        expect(pixelAt(ramp, 0)[3]).toBe(25);
+        expect(nearlyEquals(pixelAt(ramp, 50), [0, 0, 255, 25])).toBeTruthy();
+        expect(nearlyEquals(pixelAt(ramp, 53), [255, 0, 0, 255])).toBeTruthy();
+        expect(nearlyEquals(pixelAt(ramp, 103), [255, 255, 0, 255])).toBeTruthy();
+        expect(nearlyEquals(pixelAt(ramp, 160), [255, 255, 255, 255])).toBeTruthy();
+        expect(nearlyEquals(pixelAt(ramp, 256), [0, 0, 0, 255])).toBeTruthy();
+
+    });
+
+    test('renderColorRamp usePlacement', () => {
+
+        const expression = createPropertyExpression([
+            'step',
+            ['line-progress'],
+            'rgba(255, 0, 0, 0.5)',
+            0.1, 'black',
+            0.2, 'red',
+            0.3, 'blue',
+            0.5, 'white',
+            1, 'white'
+        ], spec).value as StylePropertyExpression;
+
+        const ramp = renderColorRamp({expression, evaluationKey: 'lineProgress', resolution: 512});
+
+        expect(ramp.width).toBe(512);
+        expect(ramp.height).toBe(1);
+
+        renderColorRamp({expression, evaluationKey: 'lineProgress', resolution: 512, image: ramp});
+
+        expect(pixelAt(ramp, 0)[3]).toBe(127);
+        expect(nearlyEquals(pixelAt(ramp, 50), [255, 0, 0, 127])).toBeTruthy();
+        expect(nearlyEquals(pixelAt(ramp, 53), [0, 0, 0, 255])).toBeTruthy();
+        expect(nearlyEquals(pixelAt(ramp, 103), [255, 0, 0, 255])).toBeTruthy();
+        expect(nearlyEquals(pixelAt(ramp, 160), [0, 0, 255, 255])).toBeTruthy();
+        expect(nearlyEquals(pixelAt(ramp, 256), [255, 255, 255, 255])).toBeTruthy();
+
+    });
+
+});

package/src/util/color_ramp.ts

@@ -0,0 +1,56 @@
+import {RGBAImage} from './image';
+import {isPowerOfTwo} from './util';
+
+import type {StylePropertyExpression} from '@maplibre/maplibre-gl-style-spec';
+
+export type ColorRampParams = {
+    expression: StylePropertyExpression;
+    evaluationKey: string;
+    resolution?: number;
+    image?: RGBAImage;
+    clips?: Array<any>;
+};
+
+/**
+ * Given an expression that should evaluate to a color ramp,
+ * return a RGBA image representing that ramp expression.
+ */
+export function renderColorRamp(params: ColorRampParams): RGBAImage {
+    const evaluationGlobals = {};
+    const width = params.resolution || 256;
+    const height = params.clips ? params.clips.length : 1;
+    const image = params.image || new RGBAImage({width, height});
+
+    if (!isPowerOfTwo(width)) throw new Error(`width is not a power of 2 - ${width}`);
+
+    const renderPixel = (stride, index, progress) => {
+        evaluationGlobals[params.evaluationKey] = progress;
+        const pxColor = params.expression.evaluate(evaluationGlobals as any);
+        // the colors are being unpremultiplied because Color uses
+        // premultiplied values, and the Texture class expects unpremultiplied ones
+        image.data[stride + index + 0] = Math.floor(pxColor.r * 255 / pxColor.a);
+        image.data[stride + index + 1] = Math.floor(pxColor.g * 255 / pxColor.a);
+        image.data[stride + index + 2] = Math.floor(pxColor.b * 255 / pxColor.a);
+        image.data[stride + index + 3] = Math.floor(pxColor.a * 255);
+    };
+
+    if (!params.clips) {
+        for (let i = 0, j = 0; i < width; i++, j += 4) {
+            const progress = i / (width - 1);
+
+            renderPixel(0, j, progress);
+        }
+    } else {
+        for (let clip = 0, stride = 0; clip < height; ++clip, stride += width * 4) {
+            for (let i = 0, j = 0; i < width; i++, j += 4) {
+                // Remap progress between clips
+                const progress = i / (width - 1);
+                const {start, end} = params.clips[clip];
+                const evaluationProgress = start * (1 - progress) + end * progress;
+                renderPixel(stride, j, evaluationProgress);
+            }
+        }
+    }
+
+    return image;
+}

package/src/util/config.ts

@@ -0,0 +1,29 @@
+import type {RequestParameters, GetResourceResponse} from './ajax';
+
+/**
+ * This method type is used to register a protocol handler.
+ * Use the abort controller for aborting requests.
+ * Return a promise with the relevant resource response.
+ */
+export type AddProtocolAction = (requestParameters: RequestParameters, abortController: AbortController) => Promise<GetResourceResponse<any>>
+
+/**
+ * This is a global config object used to store the configuration
+ * It is available in the workers as well.
+ * Only serializable data should be stored in it.
+ */
+type Config = {
+    MAX_PARALLEL_IMAGE_REQUESTS: number;
+    MAX_PARALLEL_IMAGE_REQUESTS_PER_FRAME: number;
+    MAX_TILE_CACHE_ZOOM_LEVELS: number;
+    REGISTERED_PROTOCOLS: {[x: string]: AddProtocolAction };
+    WORKER_URL: string;
+};
+
+export const config: Config = {
+    MAX_PARALLEL_IMAGE_REQUESTS: 16,
+    MAX_PARALLEL_IMAGE_REQUESTS_PER_FRAME: 8,
+    MAX_TILE_CACHE_ZOOM_LEVELS: 5,
+    REGISTERED_PROTOCOLS: {},
+    WORKER_URL: ''
+};

package/src/util/dictionary_coder.ts

@@ -0,0 +1,23 @@
+export class DictionaryCoder {
+    _stringToNumber: {[_: string]: number};
+    _numberToString: Array<string>;
+
+    constructor(strings: Array<string>) {
+        this._stringToNumber = {};
+        this._numberToString = [];
+        for (let i = 0; i < strings.length; i++) {
+            const string = strings[i];
+            this._stringToNumber[string] = i;
+            this._numberToString[i] = string;
+        }
+    }
+
+    encode(string: string) {
+        return this._stringToNumber[string];
+    }
+
+    decode(n: number) {
+        if (n >= this._numberToString.length) throw new Error(`Out of bounds. Index requested n=${n} can't be >= this._numberToString.length ${this._numberToString.length}`);
+        return this._numberToString[n];
+    }
+}

package/src/util/dispatcher.test.ts

@@ -0,0 +1,76 @@
+import {Actor} from './actor';
+import {Dispatcher} from './dispatcher';
+import {workerFactory} from './web_worker';
+import {WorkerPool} from './worker_pool';
+
+describe('Dispatcher', () => {
+    test('requests and releases workers from pool', () => {
+        const workers = [workerFactory(), workerFactory()];
+        const mapId = 1;
+        const releaseCalled = [];
+        const workerPool = {
+            acquire () {
+                return workers;
+            },
+            release (id) {
+                releaseCalled.push(id);
+            }
+        } as any as WorkerPool;
+
+        const dispatcher = new Dispatcher(workerPool, mapId);
+        expect(dispatcher.actors.map((actor) => { return actor.target; })).toEqual(workers);
+        dispatcher.remove();
+        expect(dispatcher.actors).toHaveLength(0);
+        expect(releaseCalled).toEqual([mapId]);
+
+    });
+
+    test('reuse workers till map is disposed', () => {
+        let workers = null;
+        const mapId = 1;
+        const releaseCalled = [];
+        const workerPool = {
+            acquire () {
+                if (!workers) {
+                    workers = [workerFactory(), workerFactory()];
+                }
+                return workers;
+            },
+            release (id) {
+                releaseCalled.push(id);
+                workers = null;
+            }
+        } as any as WorkerPool;
+
+        let dispatcher = new Dispatcher(workerPool, mapId);
+        expect(dispatcher.actors.map((actor) => { return actor.target; })).toEqual(workers);
+
+        // Remove dispatcher, but map is not disposed (During style change)
+        dispatcher.remove(false);
+        expect(dispatcher.actors).toHaveLength(0);
+        expect(releaseCalled).toHaveLength(0);
+
+        // Create new instance of dispatcher
+        dispatcher = new Dispatcher(workerPool, mapId);
+        expect(dispatcher.actors.map((actor) => { return actor.target; })).toEqual(workers);
+        dispatcher.remove(true); // mapRemoved = true
+        expect(dispatcher.actors).toHaveLength(0);
+        expect(releaseCalled).toEqual([mapId]);
+
+    });
+
+    test('#remove destroys actors', () => {
+        const actorsRemoved = [];
+        const mapId = 1;
+        const spy = jest.fn().mockImplementation(() => { actorsRemoved.push(this); });
+        Actor.prototype.remove = spy;
+        WorkerPool.workerCount = 4;
+
+        const workerPool = new WorkerPool();
+        const dispatcher = new Dispatcher(workerPool, mapId);
+        dispatcher.remove();
+        expect(actorsRemoved).toHaveLength(4);
+    });
+
+});
+

package/src/util/dispatcher.ts

@@ -0,0 +1,78 @@
+import {Actor, MessageHandler} from './actor';
+import {getGlobalWorkerPool} from './global_worker_pool';
+import {GLOBAL_DISPATCHER_ID, makeRequest} from './ajax';
+
+import type {WorkerPool} from './worker_pool';
+import type {WorkerSource} from '../source/worker_source'; /* eslint-disable-line */ // this is used for the docs' import
+import type {RequestResponseMessageMap} from './actor_messages';
+import {MessageType} from './actor_messages';
+
+/**
+ * Responsible for sending messages from a {@link Source} to an associated
+ * {@link WorkerSource}.
+ */
+export class Dispatcher {
+    workerPool: WorkerPool;
+    actors: Array<Actor>;
+    currentActor: number;
+    id: string | number;
+
+    constructor(workerPool: WorkerPool, mapId: string | number) {
+        this.workerPool = workerPool;
+        this.actors = [];
+        this.currentActor = 0;
+        this.id = mapId;
+        const workers = this.workerPool.acquire(mapId);
+        for (let i = 0; i < workers.length; i++) {
+            const worker = workers[i];
+            const actor = new Actor(worker, mapId);
+            actor.name = `Worker ${i}`;
+            this.actors.push(actor);
+        }
+        if (!this.actors.length) throw new Error('No actors found');
+    }
+
+    /**
+     * Broadcast a message to all Workers.
+     */
+    broadcast<T extends MessageType>(type: T, data: RequestResponseMessageMap[T][0]): Promise<RequestResponseMessageMap[T][1][]> {
+        const promises: Promise<RequestResponseMessageMap[T][1]>[] = [];
+        for (const actor of this.actors) {
+            promises.push(actor.sendAsync({type, data}));
+        }
+        return Promise.all(promises);
+    }
+
+    /**
+     * Acquires an actor to dispatch messages to. The actors are distributed in round-robin fashion.
+     * @returns An actor object backed by a web worker for processing messages.
+     */
+    getActor(): Actor {
+        this.currentActor = (this.currentActor + 1) % this.actors.length;
+        return this.actors[this.currentActor];
+    }
+
+    remove(mapRemoved: boolean = true) {
+        this.actors.forEach((actor) => { actor.remove(); });
+        this.actors = [];
+        if (mapRemoved) this.workerPool.release(this.id);
+    }
+
+    public registerMessageHandler<T extends MessageType>(type: T, handler: MessageHandler<T>) {
+        for (const actor of this.actors) {
+            actor.registerMessageHandler(type, handler);
+        }
+    }
+}
+
+let globalDispatcher: Dispatcher;
+
+export function getGlobalDispatcher(): Dispatcher {
+    if (!globalDispatcher) {
+        globalDispatcher = new Dispatcher(getGlobalWorkerPool(), GLOBAL_DISPATCHER_ID);
+        globalDispatcher.registerMessageHandler(MessageType.getResource, (_mapId, params, abortController) => {
+            return makeRequest(params, abortController);
+        });
+    }
+    return globalDispatcher;
+}

package/src/util/dom.ts

@@ -0,0 +1,135 @@
+import Point from '@mapbox/point-geometry';
+
+type ScaleReturnValue = {
+    x: number;
+    y: number;
+    boundingClientRect: DOMRect;
+};
+
+export class DOM {
+    private static readonly docStyle = typeof window !== 'undefined' && window.document && window.document.documentElement.style;
+
+    private static userSelect: string;
+
+    private static selectProp = DOM.testProp(['userSelect', 'MozUserSelect', 'WebkitUserSelect', 'msUserSelect']);
+
+    private static transformProp = DOM.testProp(['transform', 'WebkitTransform']);
+
+    private static testProp(props: string[]): string {
+        if (!DOM.docStyle) return props[0];
+        for (let i = 0; i < props.length; i++) {
+            if (props[i] in DOM.docStyle) {
+                return props[i];
+            }
+        }
+        return props[0];
+    }
+
+    public static create<K extends keyof HTMLElementTagNameMap>(tagName: K, className?: string, container?: HTMLElement): HTMLElementTagNameMap[K] {
+        const el = window.document.createElement(tagName);
+        if (className !== undefined) el.className = className;
+        if (container) container.appendChild(el);
+        return el;
+    }
+
+    public static createNS(namespaceURI: string, tagName: string) {
+        const el = window.document.createElementNS(namespaceURI, tagName);
+        return el;
+    }
+
+    public static disableDrag() {
+        if (DOM.docStyle && DOM.selectProp) {
+            DOM.userSelect = DOM.docStyle[DOM.selectProp];
+            DOM.docStyle[DOM.selectProp] = 'none';
+        }
+    }
+
+    public static enableDrag() {
+        if (DOM.docStyle && DOM.selectProp) {
+            DOM.docStyle[DOM.selectProp] = DOM.userSelect;
+        }
+    }
+
+    public static setTransform(el: HTMLElement, value: string) {
+        el.style[DOM.transformProp] = value;
+    }
+
+    public static addEventListener(target: HTMLElement | Window | Document, type: string, callback: EventListenerOrEventListenerObject, options: {
+        passive?: boolean;
+        capture?: boolean;
+    } = {}) {
+        if ('passive' in options) {
+            target.addEventListener(type, callback, options);
+        } else {
+            target.addEventListener(type, callback, options.capture);
+        }
+    }
+
+    public static removeEventListener(target: HTMLElement | Window | Document, type: string, callback: EventListenerOrEventListenerObject, options: {
+        passive?: boolean;
+        capture?: boolean;
+    } = {}) {
+        if ('passive' in options) {
+            target.removeEventListener(type, callback, options);
+        } else {
+            target.removeEventListener(type, callback, options.capture);
+        }
+    }
+
+    // Suppress the next click, but only if it's immediate.
+    private static suppressClickInternal(e) {
+        e.preventDefault();
+        e.stopPropagation();
+        window.removeEventListener('click', DOM.suppressClickInternal, true);
+    }
+
+    public static suppressClick() {
+        window.addEventListener('click', DOM.suppressClickInternal, true);
+        window.setTimeout(() => {
+            window.removeEventListener('click', DOM.suppressClickInternal, true);
+        }, 0);
+    }
+
+    private static getScale(element: HTMLElement): ScaleReturnValue {
+        const rect = element.getBoundingClientRect();
+        return {
+            x: (rect.width / element.offsetWidth) || 1,
+            y: (rect.height / element.offsetHeight) || 1,
+            boundingClientRect: rect,
+        };
+    }
+
+    private static getPoint(el: HTMLElement, scale: ScaleReturnValue, e: MouseEvent | Touch): Point {
+        const rect = scale.boundingClientRect;
+        return new Point(
+            // rect.left/top values are in page scale (like clientX/Y),
+            // whereas clientLeft/Top (border width) values are the original values (before CSS scale applies).
+            ((e.clientX - rect.left) / scale.x) - el.clientLeft,
+            ((e.clientY - rect.top) / scale.y) - el.clientTop
+        );
+    }
+
+    public static mousePos(el: HTMLElement, e: MouseEvent | Touch): Point {
+        const scale = DOM.getScale(el);
+        return DOM.getPoint(el, scale, e);
+    }
+
+    public static touchPos(el: HTMLElement, touches: TouchList) {
+        const points: Point[] = [];
+        const scale = DOM.getScale(el);
+        for (let i = 0; i < touches.length; i++) {
+            points.push(DOM.getPoint(el, scale, touches[i]));
+        }
+        return points;
+    }
+
+    public static mouseButton(e: MouseEvent) {
+        return e.button;
+    }
+
+    public static remove(node: HTMLElement) {
+        if (node.parentNode) {
+            node.parentNode.removeChild(node);
+        }
+    }
+}