maplibre-gl 3.4.0 → 3.4.1

package/dist/maplibre-gl-dev.js

@@ -1,4 +1,4 @@
-/* MapLibre GL JS is licensed under the 3-Clause BSD License. Full text of license: https://github.com/maplibre/maplibre-gl-js/blob/v3.4.0/LICENSE.txt */
+/* MapLibre GL JS is licensed under the 3-Clause BSD License. Full text of license: https://github.com/maplibre/maplibre-gl-js/blob/v3.4.1/LICENSE.txt */
 (function (global, factory) {
 typeof exports === 'object' && typeof module !== 'undefined' ? module.exports = factory() :
 typeof define === 'function' && define.amd ? define(factory) :
@@ -465,6 +465,52 @@ UnitBezier.prototype = {
 
 var UnitBezier$1 = /*@__PURE__*/getDefaultExportFromCjs(unitbezier);
 
+let supportsOffscreenCanvas;
+function offscreenCanvasSupported() {
+    if (supportsOffscreenCanvas == null) {
+        supportsOffscreenCanvas = typeof OffscreenCanvas !== 'undefined' &&
+            new OffscreenCanvas(1, 1).getContext('2d') &&
+            typeof createImageBitmap === 'function';
+    }
+    return supportsOffscreenCanvas;
+}
+
+let offscreenCanvasDistorted;
+/**
+ * Some browsers don't return the exact pixels from a canvas to prevent user fingerprinting (see #3185).
+ * This function writes pixels to an OffscreenCanvas and reads them back using getImageData, returning false
+ * if they don't match.
+ *
+ * @returns true if the browser supports OffscreenCanvas but it distorts getImageData results, false otherwise.
+ */
+function isOffscreenCanvasDistorted() {
+    if (offscreenCanvasDistorted == null) {
+        offscreenCanvasDistorted = false;
+        if (offscreenCanvasSupported()) {
+            const size = 5;
+            const canvas = new OffscreenCanvas(size, size);
+            const context = canvas.getContext('2d', { willReadFrequently: true });
+            if (context) {
+                // fill each pixel with an RGB value that should make the byte at index i equal to i (except alpha channel):
+                // [0, 1, 2, 255, 4, 5, 6, 255, 8, 9, 10, 255, ...]
+                for (let i = 0; i < size * size; i++) {
+                    const base = i * 4;
+                    context.fillStyle = `rgb(${base},${base + 1},${base + 2})`;
+                    context.fillRect(i % size, Math.floor(i / size), 1, 1);
+                }
+                const data = context.getImageData(0, 0, size, size).data;
+                for (let i = 0; i < size * size * 4; i++) {
+                    if (i % 4 !== 3 && data[i] !== i) {
+                        offscreenCanvasDistorted = true;
+                        break;
+                    }
+                }
+            }
+        }
+    }
+    return offscreenCanvasDistorted || false;
+}
+
 /**
  * Given a value `t` that varies between 0 and 1, return
  * an interpolation function that eases between 0 and 1 in a pleasing
@@ -934,6 +980,139 @@ function arrayBufferToImage(data, callback) {
     const blob = new Blob([new Uint8Array(data)], { type: 'image/png' });
     img.src = data.byteLength ? URL.createObjectURL(blob) : transparentPngUrl;
 }
+/**
+ * Computes the webcodecs VideoFrame API options to select a rectangle out of
+ * an image and write it into the destination rectangle.
+ *
+ * Rect (x/y/width/height) select the overlapping rectangle from the source image
+ * and layout (offset/stride) write that overlapping rectangle to the correct place
+ * in the destination image.
+ *
+ * Offset is the byte offset in the dest image that the first pixel appears at
+ * and stride is the number of bytes to the start of the next row:
+ * ┌───────────┐
+ * │  dest     │
+ * │       ┌───┼───────┐
+ * │offset→│▓▓▓│ source│
+ * │       │▓▓▓│       │
+ * │       └───┼───────┘
+ * │stride ⇠╌╌╌│
+ * │╌╌╌╌╌╌→    │
+ * └───────────┘
+ *
+ * @param image - source image containing a width and height attribute
+ * @param x - top-left x coordinate to read from the image
+ * @param y - top-left y coordinate to read from the image
+ * @param width - width of the rectangle to read from the image
+ * @param height - height of the rectangle to read from the image
+ * @returns the layout and rect options to pass into VideoFrame API
+ */
+function computeVideoFrameParameters(image, x, y, width, height) {
+    const destRowOffset = Math.max(-x, 0) * 4;
+    const firstSourceRow = Math.max(0, y);
+    const firstDestRow = firstSourceRow - y;
+    const offset = firstDestRow * width * 4 + destRowOffset;
+    const stride = width * 4;
+    const sourceLeft = Math.max(0, x);
+    const sourceTop = Math.max(0, y);
+    const sourceRight = Math.min(image.width, x + width);
+    const sourceBottom = Math.min(image.height, y + height);
+    return {
+        rect: {
+            x: sourceLeft,
+            y: sourceTop,
+            width: sourceRight - sourceLeft,
+            height: sourceBottom - sourceTop
+        },
+        layout: [{ offset, stride }]
+    };
+}
+/**
+ * Reads pixels from an ImageBitmap/Image/canvas using webcodec VideoFrame API.
+ *
+ * @param data - image, imagebitmap, or canvas to parse
+ * @param x - top-left x coordinate to read from the image
+ * @param y - top-left y coordinate to read from the image
+ * @param width - width of the rectangle to read from the image
+ * @param height - height of the rectangle to read from the image
+ * @returns a promise containing the parsed RGBA pixel values of the image, or the error if an error occurred
+ */
+async function readImageUsingVideoFrame(image, x, y, width, height) {
+    if (typeof VideoFrame === 'undefined') {
+        throw new Error('VideoFrame not supported');
+    }
+    const frame = new VideoFrame(image, { timestamp: 0 });
+    try {
+        const format = frame === null || frame === void 0 ? void 0 : frame.format;
+        if (!format || !(format.startsWith('BGR') || format.startsWith('RGB'))) {
+            throw new Error(`Unrecognized format ${format}`);
+        }
+        const swapBR = format.startsWith('BGR');
+        const result = new Uint8ClampedArray(width * height * 4);
+        await frame.copyTo(result, computeVideoFrameParameters(image, x, y, width, height));
+        if (swapBR) {
+            for (let i = 0; i < result.length; i += 4) {
+                const tmp = result[i];
+                result[i] = result[i + 2];
+                result[i + 2] = tmp;
+            }
+        }
+        return result;
+    }
+    finally {
+        frame.close();
+    }
+}
+let offscreenCanvas;
+let offscreenCanvasContext;
+/**
+ * Reads pixels from an ImageBitmap/Image/canvas using OffscreenCanvas
+ *
+ * @param data - image, imagebitmap, or canvas to parse
+ * @param x - top-left x coordinate to read from the image
+ * @param y - top-left y coordinate to read from the image
+ * @param width - width of the rectangle to read from the image
+ * @param height - height of the rectangle to read from the image
+ * @returns a promise containing the parsed RGBA pixel values of the image, or the error if an error occurred
+ */
+function readImageDataUsingOffscreenCanvas(imgBitmap, x, y, width, height) {
+    const origWidth = imgBitmap.width;
+    const origHeight = imgBitmap.height;
+    // Lazily initialize OffscreenCanvas
+    if (!offscreenCanvas || !offscreenCanvasContext) {
+        // Dem tiles are typically 256x256
+        offscreenCanvas = new OffscreenCanvas(origWidth, origHeight);
+        offscreenCanvasContext = offscreenCanvas.getContext('2d', { willReadFrequently: true });
+    }
+    offscreenCanvas.width = origWidth;
+    offscreenCanvas.height = origHeight;
+    offscreenCanvasContext.drawImage(imgBitmap, 0, 0, origWidth, origHeight);
+    const imgData = offscreenCanvasContext.getImageData(x, y, width, height);
+    offscreenCanvasContext.clearRect(0, 0, origWidth, origHeight);
+    return imgData.data;
+}
+/**
+ * Reads RGBA pixels from an preferring OffscreenCanvas, but falling back to VideoFrame if supported and
+ * the browser is mangling OffscreenCanvas getImageData results.
+ *
+ * @param data - image, imagebitmap, or canvas to parse
+ * @param x - top-left x coordinate to read from the image
+ * @param y - top-left y coordinate to read from the image
+ * @param width - width of the rectangle to read from the image
+ * @param height - height of the rectangle to read from the image
+ * @returns a promise containing the parsed RGBA pixel values of the image
+ */
+async function getImageData(image, x, y, width, height) {
+    if (isOffscreenCanvasDistorted()) {
+        try {
+            return await readImageUsingVideoFrame(image, x, y, width, height);
+        }
+        catch (e) {
+            // fall back to OffscreenCanvas
+        }
+    }
+    return readImageDataUsingOffscreenCanvas(image, x, y, width, height);
+}
 
 const now = typeof performance !== 'undefined' && performance && performance.now ?
     performance.now.bind(performance) :
@@ -29998,10 +30177,11 @@ function getGlyphQuads(anchor, shaping, textOffset, layer, alongLine, feature, i
                 verticalizedLabelOffset = builtInOffset;
                 builtInOffset = [0, 0];
             }
+            const textureScale = positionedGlyph.metrics.isDoubleResolution ? 2 : 1;
             const x1 = (positionedGlyph.metrics.left - rectBuffer) * positionedGlyph.scale - halfAdvance + builtInOffset[0];
             const y1 = (-positionedGlyph.metrics.top - rectBuffer) * positionedGlyph.scale + builtInOffset[1];
-            const x2 = x1 + textureRect.w * positionedGlyph.scale / pixelRatio;
-            const y2 = y1 + textureRect.h * positionedGlyph.scale / pixelRatio;
+            const x2 = x1 + textureRect.w / textureScale * positionedGlyph.scale / pixelRatio;
+            const y2 = y1 + textureRect.h / textureScale * positionedGlyph.scale / pixelRatio;
             const tl = new Point$2(x1, y1);
             const tr = new Point$2(x2, y1);
             const bl = new Point$2(x1, y2);
@@ -31403,6 +31583,7 @@ exports.getAnchorAlignment = getAnchorAlignment;
 exports.getAnchorJustification = getAnchorJustification;
 exports.getArrayBuffer = getArrayBuffer;
 exports.getDefaultExportFromCjs = getDefaultExportFromCjs;
+exports.getImageData = getImageData;
 exports.getJSON = getJSON;
 exports.getOverlapMode = getOverlapMode;
 exports.getProtocolAction = getProtocolAction;
@@ -31414,6 +31595,7 @@ exports.identity = identity$2;
 exports.interpolate = interpolate;
 exports.invert = invert$2;
 exports.isImageBitmap = isImageBitmap;
+exports.isOffscreenCanvasDistorted = isOffscreenCanvasDistorted;
 exports.isSafari = isSafari;
 exports.isWorker = isWorker;
 exports.keysDifference = keysDifference;
@@ -31428,6 +31610,7 @@ exports.mul$1 = mul$3;
 exports.multiply = multiply$5;
 exports.nextPowerOfTwo = nextPowerOfTwo;
 exports.normalize = normalize$4;
+exports.offscreenCanvasSupported = offscreenCanvasSupported;
 exports.operations = operations;
 exports.ortho = ortho;
 exports.parseCacheControl = parseCacheControl;
@@ -31440,6 +31623,7 @@ exports.plugin = plugin;
 exports.pointGeometry = pointGeometry;
 exports.polygonIntersectsPolygon = polygonIntersectsPolygon;
 exports.potpack = potpack;
+exports.readImageUsingVideoFrame = readImageUsingVideoFrame;
 exports.register = register;
 exports.registerForPluginStateChange = registerForPluginStateChange;
 exports.renderColorRamp = renderColorRamp;
@@ -31922,30 +32106,18 @@ class RasterDEMTileWorkerSource {
     constructor() {
         this.loaded = {};
     }
-    loadTile(params, callback) {
+    async loadTile(params, callback) {
         const { uid, encoding, rawImageData, redFactor, greenFactor, blueFactor, baseShift } = params;
-        // Main thread will transfer ImageBitmap if offscreen decode with OffscreenCanvas is supported, else it will transfer an already decoded image.
-        const imagePixels = performance.isImageBitmap(rawImageData) ? this.getImageData(rawImageData) : rawImageData;
+        const width = rawImageData.width + 2;
+        const height = rawImageData.height + 2;
+        const imagePixels = performance.isImageBitmap(rawImageData) ?
+            new performance.RGBAImage({ width, height }, await performance.getImageData(rawImageData, -1, -1, width, height)) :
+            rawImageData;
         const dem = new performance.DEMData(uid, imagePixels, encoding, redFactor, greenFactor, blueFactor, baseShift);
         this.loaded = this.loaded || {};
         this.loaded[uid] = dem;
         callback(null, dem);
     }
-    getImageData(imgBitmap) {
-        // Lazily initialize OffscreenCanvas
-        if (!this.offscreenCanvas || !this.offscreenCanvasContext) {
-            // Dem tiles are typically 256x256
-            this.offscreenCanvas = new OffscreenCanvas(imgBitmap.width, imgBitmap.height);
-            this.offscreenCanvasContext = this.offscreenCanvas.getContext('2d', { willReadFrequently: true });
-        }
-        this.offscreenCanvas.width = imgBitmap.width;
-        this.offscreenCanvas.height = imgBitmap.height;
-        this.offscreenCanvasContext.drawImage(imgBitmap, 0, 0, imgBitmap.width, imgBitmap.height);
-        // Insert an additional 1px padding around the image to allow backfilling for neighboring data.
-        const imgData = this.offscreenCanvasContext.getImageData(-1, -1, imgBitmap.width + 2, imgBitmap.height + 2);
-        this.offscreenCanvasContext.clearRect(0, 0, this.offscreenCanvas.width, this.offscreenCanvas.height);
-        return new performance.RGBAImage({ width: imgData.width, height: imgData.height }, imgData.data);
-    }
     removeTile(params) {
         const loaded = this.loaded, uid = params.uid;
         if (loaded && loaded[uid]) {
@@ -34131,7 +34303,7 @@ define(['./shared'], (function (performance) { 'use strict';
 
 var name = "maplibre-gl";
 var description = "BSD licensed community fork of mapbox-gl, a WebGL interactive maps library";
-var version$2 = "3.4.0";
+var version$2 = "3.4.1";
 var main = "dist/maplibre-gl.js";
 var style = "dist/maplibre-gl.css";
 var license = "BSD-3-Clause";
@@ -34174,7 +34346,7 @@ var devDependencies = {
 	"@mapbox/mvt-fixtures": "^3.10.0",
 	"@rollup/plugin-commonjs": "^25.0.5",
 	"@rollup/plugin-json": "^6.0.1",
-	"@rollup/plugin-node-resolve": "^15.2.2",
+	"@rollup/plugin-node-resolve": "^15.2.3",
 	"@rollup/plugin-replace": "^5.0.3",
 	"@rollup/plugin-strip": "^3.0.3",
 	"@rollup/plugin-terser": "^0.4.4",
@@ -34192,12 +34364,12 @@ var devDependencies = {
 	"@types/minimist": "^1.2.3",
 	"@types/murmurhash-js": "^1.0.4",
 	"@types/nise": "^1.4.2",
-	"@types/node": "^20.8.2",
+	"@types/node": "^20.8.3",
 	"@types/offscreencanvas": "^2019.7.1",
 	"@types/pixelmatch": "^5.2.4",
 	"@types/pngjs": "^6.0.2",
 	"@types/react": "^18.2.25",
-	"@types/react-dom": "^18.2.10",
+	"@types/react-dom": "^18.2.11",
 	"@types/request": "^2.48.9",
 	"@types/shuffle-seed": "^1.1.0",
 	"@types/window-or-global": "^1.0.4",
@@ -34209,10 +34381,10 @@ var devDependencies = {
 	cssnano: "^6.0.1",
 	d3: "^7.8.5",
 	"d3-queue": "^3.0.7",
-	"devtools-protocol": "^0.0.1205644",
+	"devtools-protocol": "^0.0.1206220",
 	diff: "^5.1.0",
 	"dts-bundle-generator": "^8.0.1",
-	eslint: "^8.50.0",
+	eslint: "^8.51.0",
 	"eslint-config-mourner": "^3.0.0",
 	"eslint-plugin-html": "^7.1.0",
 	"eslint-plugin-import": "^2.28.1",
@@ -34241,10 +34413,10 @@ var devDependencies = {
 	"postcss-cli": "^10.1.0",
 	"postcss-inline-svg": "^6.0.0",
 	"pretty-bytes": "^6.1.1",
-	puppeteer: "^21.3.6",
+	puppeteer: "^21.3.8",
 	react: "^18.2.0",
 	"react-dom": "^18.2.0",
-	rollup: "^3.29.4",
+	rollup: "^4.0.2",
 	"rollup-plugin-sourcemaps": "^0.6.3",
 	rw: "^1.3.3",
 	semver: "^7.5.4",
@@ -34256,7 +34428,7 @@ var devDependencies = {
 	"ts-jest": "^29.1.1",
 	"ts-node": "^10.9.1",
 	tslib: "^2.6.2",
-	typedoc: "^0.25.1",
+	typedoc: "^0.25.2",
 	"typedoc-plugin-markdown": "^3.16.0",
 	"typedoc-plugin-missing-exports": "^2.1.0",
 	typescript: "^5.2.2"
@@ -35456,6 +35628,9 @@ class GlyphManager {
         if (!this._doesCharSupportLocalGlyph(id)) {
             return;
         }
+        // Client-generated glyphs are rendered at 2x texture scale,
+        // because CJK glyphs are more detailed than others.
+        const textureScale = 2;
         let tinySDF = entry.tinySDF;
         if (!tinySDF) {
             let fontWeight = '400';
@@ -35469,9 +35644,9 @@ class GlyphManager {
                 fontWeight = '200';
             }
             tinySDF = entry.tinySDF = new GlyphManager.TinySDF({
-                fontSize: 24,
-                buffer: 3,
-                radius: 8,
+                fontSize: 24 * textureScale,
+                buffer: 3 * textureScale,
+                radius: 8 * textureScale,
                 cutoff: 0.25,
                 fontFamily,
                 fontWeight
@@ -35491,16 +35666,18 @@ class GlyphManager {
          * To approximately align TinySDF glyphs with server-provided glyphs, we use this baseline adjustment
          * factor calibrated to be in between DIN Pro and Arial Unicode (but closer to Arial Unicode)
          */
-        const topAdjustment = 27;
+        const topAdjustment = 27.5;
+        const leftAdjustment = 0.5;
         return {
             id,
-            bitmap: new performance.AlphaImage({ width: char.width || 30, height: char.height || 30 }, char.data),
+            bitmap: new performance.AlphaImage({ width: char.width || 30 * textureScale, height: char.height || 30 * textureScale }, char.data),
             metrics: {
-                width: char.glyphWidth || 24,
-                height: char.glyphHeight || 24,
-                left: char.glyphLeft || 0,
-                top: char.glyphTop - topAdjustment || -8,
-                advance: char.glyphAdvance || 24
+                width: char.glyphWidth / textureScale || 24,
+                height: char.glyphHeight / textureScale || 24,
+                left: (char.glyphLeft / textureScale + leftAdjustment) || 0,
+                top: char.glyphTop / textureScale - topAdjustment || -8,
+                advance: char.glyphAdvance / textureScale || 24,
+                isDoubleResolution: true
             }
         };
     }
@@ -36457,16 +36634,6 @@ class RasterTileSource extends performance.Evented {
     }
 }
 
-let supportsOffscreenCanvas;
-function offscreenCanvasSupported() {
-    if (supportsOffscreenCanvas == null) {
-        supportsOffscreenCanvas = typeof OffscreenCanvas !== 'undefined' &&
-            new OffscreenCanvas(1, 1).getContext('2d') &&
-            typeof createImageBitmap === 'function';
-    }
-    return supportsOffscreenCanvas;
-}
-
 /**
  * A source containing raster DEM tiles (See the [Style Specification](https://maplibre.org/maplibre-style-spec/) for detailed documentation of options.)
  * This source can be used to show hillshading and 3D terrain
@@ -36497,9 +36664,9 @@ class RasterDEMTileSource extends RasterTileSource {
     }
     loadTile(tile, callback) {
         const url = tile.tileID.canonical.url(this.tiles, this.map.getPixelRatio(), this.scheme);
-        tile.request = ImageRequest.getImage(this.map._requestManager.transformRequest(url, ResourceType.Tile), imageLoaded.bind(this), this.map._refreshExpiredTiles);
+        const request = this.map._requestManager.transformRequest(url, ResourceType.Tile);
         tile.neighboringTiles = this._getNeighboringTiles(tile.tileID);
-        function imageLoaded(err, img) {
+        tile.request = ImageRequest.getImage(request, async (err, img, expiry) => {
             delete tile.request;
             if (tile.aborted) {
                 tile.state = 'unloaded';
@@ -36511,11 +36678,9 @@ class RasterDEMTileSource extends RasterTileSource {
             }
             else if (img) {
                 if (this.map._refreshExpiredTiles)
-                    tile.setExpiryData(img);
-                delete img.cacheControl;
-                delete img.expires;
-                const transfer = performance.isImageBitmap(img) && offscreenCanvasSupported();
-                const rawImageData = transfer ? img : performance.browser.getImageData(img, 1);
+                    tile.setExpiryData(expiry);
+                const transfer = performance.isImageBitmap(img) && performance.offscreenCanvasSupported();
+                const rawImageData = transfer ? img : await readImageNow(img);
                 const params = {
                     uid: tile.uid,
                     coord: tile.tileID,
@@ -36529,9 +36694,22 @@ class RasterDEMTileSource extends RasterTileSource {
                 };
                 if (!tile.actor || tile.state === 'expired') {
                     tile.actor = this.dispatcher.getActor();
-                    tile.actor.send('loadDEMTile', params, done.bind(this));
+                    tile.actor.send('loadDEMTile', params, done);
                 }
             }
+        }, this.map._refreshExpiredTiles);
+        async function readImageNow(img) {
+            if (typeof VideoFrame !== 'undefined' && performance.isOffscreenCanvasDistorted()) {
+                const width = img.width + 2;
+                const height = img.height + 2;
+                try {
+                    return new performance.RGBAImage({ width, height }, await performance.readImageUsingVideoFrame(img, -1, -1, width, height));
+                }
+                catch (e) {
+                    // fall-back to browser canvas decoding
+                }
+            }
+            return performance.browser.getImageData(img, 1);
         }
         function done(err, data) {
             if (err) {
@@ -42065,6 +42243,8 @@ class Style extends performance.Evented {
             this[op.command].apply(this, op.args);
         }
         this.stylesheet = nextState;
+        // reset serialization field, to be populated only when needed
+        this._serializedLayers = null;
         return true;
     }
     addImage(id, image) {