@scoova/mgl 1.0.0

package/src/index.test.ts

@@ -0,0 +1,121 @@
+import {config} from './util/config';
+import {addProtocol, getWorkerCount, removeProtocol, getVersion} from './index';
+import {getJSON, getArrayBuffer} from './util/ajax';
+import {ImageRequest} from './util/image_request';
+import {isAbortError} from './util/abort_error';
+
+describe('maplibre', () => {
+    beforeEach(() => {
+        config.REGISTERED_PROTOCOLS = {};
+    });
+    afterAll(() => {
+        config.REGISTERED_PROTOCOLS = {};
+    });
+
+    test('workerCount', () => {
+        expect(typeof getWorkerCount() === 'number').toBeTruthy();
+    });
+
+    test('addProtocol', () => {
+        const protocolName = 'custom';
+        expect(Object.keys(config.REGISTERED_PROTOCOLS)).toHaveLength(0);
+
+        addProtocol(protocolName, async () => Promise.resolve({} as any));
+        expect(Object.keys(config.REGISTERED_PROTOCOLS)[0]).toBe(protocolName);
+    });
+
+    test('removeProtocol', () => {
+        const protocolName = 'custom';
+        expect(Object.keys(config.REGISTERED_PROTOCOLS)).toHaveLength(0);
+
+        addProtocol(protocolName, () => Promise.resolve({} as any));
+        expect(Object.keys(config.REGISTERED_PROTOCOLS)[0]).toBe(protocolName);
+
+        removeProtocol(protocolName);
+        expect(Object.keys(config.REGISTERED_PROTOCOLS)).toHaveLength(0);
+    });
+
+    test('#addProtocol - getJSON', async () => {
+        let protocolCallbackCalled = false;
+        addProtocol('custom', () => {
+            protocolCallbackCalled = true;
+            return Promise.resolve({data: {'foo': 'bar'}});
+        });
+        const response = await getJSON({url: 'custom://test/url/json'}, new AbortController());
+        expect(response.data).toEqual({foo: 'bar'});
+        expect(protocolCallbackCalled).toBeTruthy();
+    });
+
+    test('#addProtocol - getArrayBuffer', async () => {
+        let protocolCallbackCalled = false;
+        addProtocol('custom', () => {
+            protocolCallbackCalled = true;
+            return Promise.resolve({data: new ArrayBuffer(1), cacheControl: 'cache-control', expires: 'expires'});
+        });
+        const response = await getArrayBuffer({url: 'custom://test/url/getArrayBuffer'}, new AbortController());
+        expect(response.data).toBeInstanceOf(ArrayBuffer);
+        expect(response.cacheControl).toBe('cache-control');
+        expect(response.expires).toBe('expires');
+        expect(protocolCallbackCalled).toBeTruthy();
+    });
+
+    test('#addProtocol - returning ImageBitmap for getImage', async () => {
+        let protocolCallbackCalled = false;
+        addProtocol('custom', () => {
+            protocolCallbackCalled = true;
+            return Promise.resolve({data: new ImageBitmap()});
+        });
+
+        const img = await ImageRequest.getImage({url: 'custom://test/url/getImage'}, new AbortController());
+        expect(img.data).toBeInstanceOf(ImageBitmap);
+        expect(protocolCallbackCalled).toBeTruthy();
+    });
+
+    test('#addProtocol - returning HTMLImageElement for getImage', async () => {
+        let protocolCallbackCalled = false;
+        addProtocol('custom', () => {
+            protocolCallbackCalled = true;
+            return Promise.resolve({data: new Image()});
+        });
+        const img = await ImageRequest.getImage({url: 'custom://test/url/getImage'}, new AbortController());
+        expect(img.data).toBeInstanceOf(HTMLImageElement);
+        expect(protocolCallbackCalled).toBeTruthy();
+    });
+
+    test('#addProtocol - error', () => {
+        addProtocol('custom', () => Promise.reject(new Error('test error')));
+
+        getJSON({url: 'custom://test/url/json'}, new AbortController()).catch((error) => {
+            expect(error).toBeTruthy();
+        });
+    });
+
+    test('#addProtocol - Cancel request', async () => {
+        let cancelCalled = false;
+        addProtocol('custom', (_req, abortController) => {
+            abortController.signal.addEventListener('abort', () => {
+                cancelCalled = true;
+            });
+            return Promise.resolve({} as any);
+        });
+        const abortController = new AbortController();
+        const promise = getJSON({url: 'custom://test/url/json'}, abortController);
+        abortController.abort();
+        try {
+            await promise;
+        } catch (err) {
+            expect(isAbortError(err)).toBeTruthy();
+        }
+
+        expect(cancelCalled).toBeTruthy();
+    });
+
+    test('version', () => {
+        expect(typeof getVersion() === 'string').toBeTruthy();
+
+        // Semver regex: https://gist.github.com/jhorsman/62eeea161a13b80e39f5249281e17c39
+        // Backslashes are doubled to escape them
+        const regexp = new RegExp('^([0-9]+)\\.([0-9]+)\\.([0-9]+)(?:-([0-9A-Za-z-]+(?:\\.[0-9A-Za-z-]+)*))?(?:\\+[0-9A-Za-z-]+)?$');
+        expect(regexp.test(getVersion())).toBeTruthy();
+    });
+});

package/src/index.ts

@@ -0,0 +1,250 @@
+import packageJSON from '../package.json' with {type: 'json'};
+import {Map} from './ui/map';
+import {NavigationControl} from './ui/control/navigation_control';
+import {GeolocateControl} from './ui/control/geolocate_control';
+import {AttributionControl} from './ui/control/attribution_control';
+import {LogoControl} from './ui/control/logo_control';
+import {ScaleControl} from './ui/control/scale_control';
+import {FullscreenControl} from './ui/control/fullscreen_control';
+import {TerrainControl} from './ui/control/terrain_control';
+import {Popup} from './ui/popup';
+import {Marker} from './ui/marker';
+import {Style} from './style/style';
+import {LngLat, LngLatLike} from './geo/lng_lat';
+import {LngLatBounds, LngLatBoundsLike} from './geo/lng_lat_bounds';
+import Point from '@mapbox/point-geometry';
+import {MercatorCoordinate} from './geo/mercator_coordinate';
+import {Evented} from './util/evented';
+import {config} from './util/config';
+import {rtlMainThreadPluginFactory} from './source/rtl_text_plugin_main_thread';
+import {WorkerPool} from './util/worker_pool';
+import {prewarm, clearPrewarmedResources} from './util/global_worker_pool';
+import {AJAXError} from './util/ajax';
+import {GeoJSONSource} from './source/geojson_source';
+import {CanvasSource, CanvasSourceSpecification} from './source/canvas_source';
+import {ImageSource} from './source/image_source';
+import {RasterDEMTileSource} from './source/raster_dem_tile_source';
+import {RasterTileSource} from './source/raster_tile_source';
+import {VectorTileSource} from './source/vector_tile_source';
+import {VideoSource} from './source/video_source';
+import {Source, addSourceType} from './source/source';
+import {addProtocol, removeProtocol} from './source/protocol_crud';
+import {getGlobalDispatcher} from './util/dispatcher';
+import {IControl} from './ui/control/control';
+import {EdgeInsets, PaddingOptions} from './geo/edge_insets';
+import {MapTerrainEvent, MapStyleImageMissingEvent, MapStyleDataEvent, MapSourceDataEvent, MapLibreZoomEvent, MapLibreEvent, MapLayerTouchEvent, MapLayerMouseEvent, MapLayerEventType, MapEventType, MapDataEvent, MapContextEvent, MapWheelEvent, MapTouchEvent, MapMouseEvent} from './ui/events';
+import {BoxZoomHandler} from './ui/handler/box_zoom';
+import {DragRotateHandler} from './ui/handler/shim/drag_rotate';
+import {DragPanHandler} from './ui/handler/shim/drag_pan';
+import {ScrollZoomHandler} from './ui/handler/scroll_zoom';
+import {TwoFingersTouchZoomRotateHandler} from './ui/handler/shim/two_fingers_touch';
+import {CustomLayerInterface} from './style/style_layer/custom_style_layer';
+import {PointLike} from './ui/camera';
+import {Hash} from './ui/hash';
+import {CooperativeGesturesHandler} from './ui/handler/cooperative_gestures';
+import {DoubleClickZoomHandler} from './ui/handler/shim/dblclick_zoom';
+import {KeyboardHandler} from './ui/handler/keyboard';
+import {TwoFingersTouchPitchHandler, TwoFingersTouchRotateHandler, TwoFingersTouchZoomHandler} from './ui/handler/two_fingers_touch';
+import {MessageType} from './util/actor_messages';
+const version = packageJSON.version;
+
+export type * from '@maplibre/maplibre-gl-style-spec';
+
+/**
+ * Sets the map's [RTL text plugin](https://www.mapbox.com/mapbox-gl-js/plugins/#mapbox-gl-rtl-text).
+ * Necessary for supporting the Arabic and Hebrew languages, which are written right-to-left.
+ *
+ * @param pluginURL - URL pointing to the Mapbox RTL text plugin source.
+ * @param lazy - If set to `true`, maplibre will defer loading the plugin until rtl text is encountered,
+ * rtl text will then be rendered only after the plugin finishes loading.
+ * @example
+ * ```ts
+ * setRTLTextPlugin('https://unpkg.com/@mapbox/mapbox-gl-rtl-text@0.2.3/mapbox-gl-rtl-text.js', false);
+ * ```
+ * @see [Add support for right-to-left scripts](https://maplibre.org/maplibre-gl-js/docs/examples/mapbox-gl-rtl-text/)
+ */
+function setRTLTextPlugin(pluginURL: string, lazy: boolean): Promise<void> {
+    return rtlMainThreadPluginFactory().setRTLTextPlugin(pluginURL, lazy);
+}
+/**
+ * Gets the map's [RTL text plugin](https://www.mapbox.com/mapbox-gl-js/plugins/#mapbox-gl-rtl-text) status.
+ * The status can be `unavailable` (i.e. not requested or removed), `loading`, `loaded` or `error`.
+ * If the status is `loaded` and the plugin is requested again, an error will be thrown.
+ *
+ * @example
+ * ```ts
+ * const pluginStatus = getRTLTextPluginStatus();
+ * ```
+ */
+function getRTLTextPluginStatus(): string {
+    return rtlMainThreadPluginFactory().getRTLTextPluginStatus();
+}
+/**
+ * Returns the package version of the library
+ * @returns Package version of the library
+ */
+function getVersion() { return version; }
+/**
+ * Gets the number of web workers instantiated on a page with GL JS maps.
+ * By default, workerCount is 1 except for Safari browser where it is set to half the number of CPU cores (capped at 3).
+ * Make sure to set this property before creating any map instances for it to have effect.
+ *
+ * @returns Number of workers currently configured.
+ * @example
+ * ```ts
+ * const workerCount = getWorkerCount()
+ * ```
+ */
+function getWorkerCount() { return WorkerPool.workerCount; }
+/**
+ * Sets the number of web workers instantiated on a page with GL JS maps.
+ * By default, workerCount is 1 except for Safari browser where it is set to half the number of CPU cores (capped at 3).
+ * Make sure to set this property before creating any map instances for it to have effect.
+ *
+ * @example
+ * ```ts
+ * setWorkerCount(2);
+ * ```
+ */
+function setWorkerCount(count: number) { WorkerPool.workerCount = count; }
+/**
+ * Gets and sets the maximum number of images (raster tiles, sprites, icons) to load in parallel,
+ * which affects performance in raster-heavy maps. 16 by default.
+ *
+ * @returns Number of parallel requests currently configured.
+ * @example
+ * ```ts
+ * getMaxParallelImageRequests();
+ * ```
+ */
+function getMaxParallelImageRequests() { return config.MAX_PARALLEL_IMAGE_REQUESTS; }
+/**
+ * Sets the maximum number of images (raster tiles, sprites, icons) to load in parallel,
+ * which affects performance in raster-heavy maps. 16 by default.
+ *
+ * @example
+ * ```ts
+ * setMaxParallelImageRequests(10);
+ * ```
+ */
+function setMaxParallelImageRequests(numRequests: number) { config.MAX_PARALLEL_IMAGE_REQUESTS = numRequests; }
+/**
+ * Gets the worker url
+ * @returns The worker url
+ */
+function getWorkerUrl() { return config.WORKER_URL; }
+/**
+ * Sets the worker url
+ */
+function setWorkerUrl(value: string) { config.WORKER_URL = value; }
+/**
+ * Allows loading javascript code in the worker thread.
+ * *Note* that since this is using some very internal classes and flows it is considered experimental and can break at any point.
+ *
+ * It can be useful for the following examples:
+ * 1. Using `self.addProtocol` in the worker thread - note that you might need to also register the protocol on the main thread.
+ * 2. Using `self.registerWorkerSource(workerSource: WorkerSource)` to register a worker source, which should come with `addSourceType` usually.
+ * 3. using `self.actor.registerMessageHandler` to override some internal worker operations
+ * @param workerUrl - the worker url e.g. a url of a javascript file to load in the worker
+ * @returns
+ *
+ * @example
+ * ```ts
+ * // below is an example of sending a js file to the worker to load the method there
+ * // Note that you'll need to call the global function `addProtocol` in the worker to register the protocol there.
+ * // add-protocol-worker.js
+ * async function loadFn(params, abortController) {
+ *     const t = await fetch(`https://${params.url.split("://")[1]}`);
+ *     if (t.status == 200) {
+ *         const buffer = await t.arrayBuffer();
+ *         return {data: buffer}
+ *     } else {
+ *         throw new Error(`Tile fetch error: ${t.statusText}`);
+ *     }
+ * }
+ * self.addProtocol('custom', loadFn);
+ *
+ * // main.js
+ * importScriptInWorkers('add-protocol-worker.js');
+ * ```
+ */
+function importScriptInWorkers(workerUrl: string) { return getGlobalDispatcher().broadcast(MessageType.importScript, workerUrl); }
+
+export {
+    Map,
+    NavigationControl,
+    GeolocateControl,
+    AttributionControl,
+    LogoControl,
+    ScaleControl,
+    FullscreenControl,
+    TerrainControl,
+    Hash,
+    Popup,
+    Marker,
+    Style,
+    LngLat,
+    LngLatBounds,
+    Point,
+    MercatorCoordinate,
+    Evented,
+    AJAXError,
+    config,
+    CanvasSource,
+    GeoJSONSource,
+    ImageSource,
+    RasterDEMTileSource,
+    RasterTileSource,
+    VectorTileSource,
+    VideoSource,
+    EdgeInsets,
+    BoxZoomHandler,
+    DragRotateHandler,
+    DragPanHandler,
+    ScrollZoomHandler,
+    TwoFingersTouchZoomRotateHandler,
+    CooperativeGesturesHandler,
+    DoubleClickZoomHandler,
+    KeyboardHandler,
+    TwoFingersTouchZoomHandler,
+    TwoFingersTouchRotateHandler,
+    TwoFingersTouchPitchHandler,
+    MapWheelEvent,
+    MapTouchEvent,
+    MapMouseEvent,
+    type IControl,
+    type CustomLayerInterface,
+    type CanvasSourceSpecification,
+    type PaddingOptions,
+    type LngLatLike,
+    type PointLike,
+    type LngLatBoundsLike,
+    type Source,
+    type MapTerrainEvent,
+    type MapStyleImageMissingEvent,
+    type MapStyleDataEvent,
+    type MapSourceDataEvent,
+    type MapLibreZoomEvent,
+    type MapLibreEvent,
+    type MapLayerTouchEvent,
+    type MapLayerMouseEvent,
+    type MapLayerEventType,
+    type MapEventType,
+    type MapDataEvent,
+    type MapContextEvent,
+    setRTLTextPlugin,
+    getRTLTextPluginStatus,
+    prewarm,
+    clearPrewarmedResources,
+    getVersion,
+    getWorkerCount,
+    setWorkerCount,
+    getMaxParallelImageRequests,
+    setMaxParallelImageRequests,
+    getWorkerUrl,
+    setWorkerUrl,
+    addProtocol,
+    removeProtocol,
+    addSourceType,
+    importScriptInWorkers
+};

package/src/render/draw_background.ts

@@ -0,0 +1,53 @@
+import {StencilMode} from '../gl/stencil_mode';
+import {DepthMode} from '../gl/depth_mode';
+import {CullFaceMode} from '../gl/cull_face_mode';
+import {
+    backgroundUniformValues,
+    backgroundPatternUniformValues
+} from './program/background_program';
+
+import type {Painter} from './painter';
+import type {SourceCache} from '../source/source_cache';
+import type {BackgroundStyleLayer} from '../style/style_layer/background_style_layer';
+import {OverscaledTileID} from '../source/tile_id';
+
+export function drawBackground(painter: Painter, sourceCache: SourceCache, layer: BackgroundStyleLayer, coords?: Array<OverscaledTileID>) {
+    const color = layer.paint.get('background-color');
+    const opacity = layer.paint.get('background-opacity');
+
+    if (opacity === 0) return;
+
+    const context = painter.context;
+    const gl = context.gl;
+    const transform = painter.transform;
+    const tileSize = transform.tileSize;
+    const image = layer.paint.get('background-pattern');
+    if (painter.isPatternMissing(image)) return;
+
+    const pass = (!image && color.a === 1 && opacity === 1 && painter.opaquePassEnabledForLayer()) ? 'opaque' : 'translucent';
+    if (painter.renderPass !== pass) return;
+
+    const stencilMode = StencilMode.disabled;
+    const depthMode = painter.depthModeForSublayer(0, pass === 'opaque' ? DepthMode.ReadWrite : DepthMode.ReadOnly);
+    const colorMode = painter.colorModeForRenderPass();
+    const program = painter.useProgram(image ? 'backgroundPattern' : 'background');
+    const tileIDs = coords ? coords : transform.coveringTiles({tileSize, terrain: painter.style.map.terrain});
+
+    if (image) {
+        context.activeTexture.set(gl.TEXTURE0);
+        painter.imageManager.bind(painter.context);
+    }
+
+    const crossfade = layer.getCrossfadeParameters();
+    for (const tileID of tileIDs) {
+        const matrix = coords ? tileID.posMatrix : painter.transform.calculatePosMatrix(tileID.toUnwrapped());
+        const uniformValues = image ?
+            backgroundPatternUniformValues(matrix, opacity, painter, image, {tileID, tileSize}, crossfade) :
+            backgroundUniformValues(matrix, opacity, color);
+        const terrainData = painter.style.map.terrain && painter.style.map.terrain.getTerrainData(tileID);
+
+        program.draw(context, gl.TRIANGLES, depthMode, stencilMode, colorMode, CullFaceMode.disabled,
+            uniformValues, terrainData, layer.id, painter.tileExtentBuffer,
+            painter.quadTriangleIndexBuffer, painter.tileExtentSegments);
+    }
+}

package/src/render/draw_circle.ts

@@ -0,0 +1,113 @@
+import {StencilMode} from '../gl/stencil_mode';
+import {DepthMode} from '../gl/depth_mode';
+import {CullFaceMode} from '../gl/cull_face_mode';
+import {Program} from './program';
+import {circleUniformValues} from './program/circle_program';
+import {SegmentVector} from '../data/segment';
+import {OverscaledTileID} from '../source/tile_id';
+
+import type {Painter} from './painter';
+import type {SourceCache} from '../source/source_cache';
+import type {CircleStyleLayer} from '../style/style_layer/circle_style_layer';
+import type {CircleBucket} from '../data/bucket/circle_bucket';
+import type {ProgramConfiguration} from '../data/program_configuration';
+import type {VertexBuffer} from '../gl/vertex_buffer';
+import type {IndexBuffer} from '../gl/index_buffer';
+import type {UniformValues} from './uniform_binding';
+import type {CircleUniformsType} from './program/circle_program';
+import type {TerrainData} from '../render/terrain';
+
+type TileRenderState = {
+    programConfiguration: ProgramConfiguration;
+    program: Program<any>;
+    layoutVertexBuffer: VertexBuffer;
+    indexBuffer: IndexBuffer;
+    uniformValues: UniformValues<CircleUniformsType>;
+    terrainData: TerrainData;
+};
+
+type SegmentsTileRenderState = {
+    segments: SegmentVector;
+    sortKey: number;
+    state: TileRenderState;
+};
+
+export function drawCircles(painter: Painter, sourceCache: SourceCache, layer: CircleStyleLayer, coords: Array<OverscaledTileID>) {
+    if (painter.renderPass !== 'translucent') return;
+
+    const opacity = layer.paint.get('circle-opacity');
+    const strokeWidth = layer.paint.get('circle-stroke-width');
+    const strokeOpacity = layer.paint.get('circle-stroke-opacity');
+    const sortFeaturesByKey = !layer.layout.get('circle-sort-key').isConstant();
+
+    if (opacity.constantOr(1) === 0 && (strokeWidth.constantOr(1) === 0 || strokeOpacity.constantOr(1) === 0)) {
+        return;
+    }
+
+    const context = painter.context;
+    const gl = context.gl;
+
+    const depthMode = painter.depthModeForSublayer(0, DepthMode.ReadOnly);
+    // Turn off stencil testing to allow circles to be drawn across boundaries,
+    // so that large circles are not clipped to tiles
+    const stencilMode = StencilMode.disabled;
+    const colorMode = painter.colorModeForRenderPass();
+
+    const segmentsRenderStates: Array<SegmentsTileRenderState> = [];
+
+    for (let i = 0; i < coords.length; i++) {
+        const coord = coords[i];
+
+        const tile = sourceCache.getTile(coord);
+        const bucket: CircleBucket<any> = (tile.getBucket(layer) as any);
+        if (!bucket) continue;
+
+        const programConfiguration = bucket.programConfigurations.get(layer.id);
+        const program = painter.useProgram('circle', programConfiguration);
+        const layoutVertexBuffer = bucket.layoutVertexBuffer;
+        const indexBuffer = bucket.indexBuffer;
+        const terrainData = painter.style.map.terrain && painter.style.map.terrain.getTerrainData(coord);
+        const uniformValues = circleUniformValues(painter, coord, tile, layer);
+
+        const state: TileRenderState = {
+            programConfiguration,
+            program,
+            layoutVertexBuffer,
+            indexBuffer,
+            uniformValues,
+            terrainData
+        };
+
+        if (sortFeaturesByKey) {
+            const oldSegments = bucket.segments.get();
+            for (const segment of oldSegments) {
+                segmentsRenderStates.push({
+                    segments: new SegmentVector([segment]),
+                    sortKey: (segment.sortKey as any as number),
+                    state
+                });
+            }
+        } else {
+            segmentsRenderStates.push({
+                segments: bucket.segments,
+                sortKey: 0,
+                state
+            });
+        }
+
+    }
+
+    if (sortFeaturesByKey) {
+        segmentsRenderStates.sort((a, b) => a.sortKey - b.sortKey);
+    }
+
+    for (const segmentsState of segmentsRenderStates) {
+        const {programConfiguration, program, layoutVertexBuffer, indexBuffer, uniformValues, terrainData} = segmentsState.state;
+        const segments = segmentsState.segments;
+
+        program.draw(context, gl.TRIANGLES, depthMode, stencilMode, colorMode, CullFaceMode.disabled,
+            uniformValues, terrainData, layer.id,
+            layoutVertexBuffer, indexBuffer, segments,
+            layer.paint, painter.transform.zoom, programConfiguration);
+    }
+}