maplibre-gl 2.0.4 → 2.1.2

package/src/style-spec/validate/validate_source.ts

@@ -25,76 +25,76 @@ export default function validateSource(options) {
     let errors;
 
     switch (type) {
-    case 'vector':
-    case 'raster':
-    case 'raster-dem':
-        errors = validateObject({
-            key,
-            value,
-            valueSpec: styleSpec[`source_${type.replace('-', '_')}`],
-            style: options.style,
-            styleSpec,
-            objectElementValidators
-        });
-        return errors;
+        case 'vector':
+        case 'raster':
+        case 'raster-dem':
+            errors = validateObject({
+                key,
+                value,
+                valueSpec: styleSpec[`source_${type.replace('-', '_')}`],
+                style: options.style,
+                styleSpec,
+                objectElementValidators
+            });
+            return errors;
 
-    case 'geojson':
-        errors = validateObject({
-            key,
-            value,
-            valueSpec: styleSpec.source_geojson,
-            style,
-            styleSpec,
-            objectElementValidators
-        });
-        if (value.cluster) {
-            for (const prop in value.clusterProperties) {
-                const [operator, mapExpr] = value.clusterProperties[prop];
-                const reduceExpr = typeof operator === 'string' ? [operator, ['accumulated'], ['get', prop]] : operator;
+        case 'geojson':
+            errors = validateObject({
+                key,
+                value,
+                valueSpec: styleSpec.source_geojson,
+                style,
+                styleSpec,
+                objectElementValidators
+            });
+            if (value.cluster) {
+                for (const prop in value.clusterProperties) {
+                    const [operator, mapExpr] = value.clusterProperties[prop];
+                    const reduceExpr = typeof operator === 'string' ? [operator, ['accumulated'], ['get', prop]] : operator;
 
-                errors.push(...validateExpression({
-                    key: `${key}.${prop}.map`,
-                    value: mapExpr,
-                    expressionContext: 'cluster-map'
-                }));
-                errors.push(...validateExpression({
-                    key: `${key}.${prop}.reduce`,
-                    value: reduceExpr,
-                    expressionContext: 'cluster-reduce'
-                }));
+                    errors.push(...validateExpression({
+                        key: `${key}.${prop}.map`,
+                        value: mapExpr,
+                        expressionContext: 'cluster-map'
+                    }));
+                    errors.push(...validateExpression({
+                        key: `${key}.${prop}.reduce`,
+                        value: reduceExpr,
+                        expressionContext: 'cluster-reduce'
+                    }));
+                }
             }
-        }
-        return errors;
+            return errors;
 
-    case 'video':
-        return validateObject({
-            key,
-            value,
-            valueSpec: styleSpec.source_video,
-            style,
-            styleSpec
-        });
+        case 'video':
+            return validateObject({
+                key,
+                value,
+                valueSpec: styleSpec.source_video,
+                style,
+                styleSpec
+            });
 
-    case 'image':
-        return validateObject({
-            key,
-            value,
-            valueSpec: styleSpec.source_image,
-            style,
-            styleSpec
-        });
+        case 'image':
+            return validateObject({
+                key,
+                value,
+                valueSpec: styleSpec.source_image,
+                style,
+                styleSpec
+            });
 
-    case 'canvas':
-        return [new ValidationError(key, null, 'Please use runtime APIs to add canvas sources, rather than including them in stylesheets.', 'source.canvas')];
+        case 'canvas':
+            return [new ValidationError(key, null, 'Please use runtime APIs to add canvas sources, rather than including them in stylesheets.', 'source.canvas')];
 
-    default:
-        return validateEnum({
-            key: `${key}.type`,
-            value: value.type,
-            valueSpec: {values: ['vector', 'raster', 'raster-dem', 'geojson', 'video', 'image']},
-            style,
-            styleSpec
-        });
+        default:
+            return validateEnum({
+                key: `${key}.type`,
+                value: value.type,
+                valueSpec: {values: ['vector', 'raster', 'raster-dem', 'geojson', 'video', 'image']},
+                style,
+                styleSpec
+            });
     }
 }
 

package/src/style-spec/visit.ts

@@ -36,22 +36,22 @@ export function eachLayer(style: StyleSpecification, callback: (_: LayerSpecific
 }
 
 type PropertyCallback = (
-  a: {
-    path: [string, 'paint' | 'layout', string]; // [layerid, paint/layout, property key],
-    key: string;
-    value: PropertyValueSpecification<unknown> | DataDrivenPropertyValueSpecification<unknown>;
-    reference: StylePropertySpecification;
-    set: (
-      a: PropertyValueSpecification<unknown> | DataDrivenPropertyValueSpecification<unknown>
-    ) => void;
-  }
+    a: {
+        path: [string, 'paint' | 'layout', string]; // [layerid, paint/layout, property key],
+        key: string;
+        value: PropertyValueSpecification<unknown> | DataDrivenPropertyValueSpecification<unknown>;
+        reference: StylePropertySpecification;
+        set: (
+            a: PropertyValueSpecification<unknown> | DataDrivenPropertyValueSpecification<unknown>
+        ) => void;
+    }
 ) => void;
 
 export function eachProperty(
     style: StyleSpecification,
     options: {
-      paint?: boolean;
-      layout?: boolean;
+        paint?: boolean;
+        layout?: boolean;
     },
     callback: PropertyCallback
 ) {

package/src/symbol/collision_feature.test.ts

@@ -1,7 +1,7 @@
 import CollisionFeature from './collision_feature';
 import Anchor from './anchor';
 import Point from '@mapbox/point-geometry';
-import {CollisionBoxArray} from '../data/array_types';
+import {CollisionBoxArray} from '../data/array_types.g';
 
 describe('CollisionFeature', () => {
 

package/src/symbol/collision_feature.ts

@@ -1,4 +1,4 @@
-import type {CollisionBoxArray} from '../data/array_types';
+import type {CollisionBoxArray} from '../data/array_types.g';
 import Point from '@mapbox/point-geometry';
 import type Anchor from './anchor';
 
@@ -27,15 +27,15 @@ class CollisionFeature {
      * @private
      */
     constructor(collisionBoxArray: CollisionBoxArray,
-                anchor: Anchor,
-                featureIndex: number,
-                sourceLayerIndex: number,
-                bucketIndex: number,
-                shaped: any,
-                boxScale: number,
-                padding: number,
-                alignLine: boolean,
-                rotate: number) {
+        anchor: Anchor,
+        featureIndex: number,
+        sourceLayerIndex: number,
+        bucketIndex: number,
+        shaped: any,
+        boxScale: number,
+        padding: number,
+        alignLine: boolean,
+        rotate: number) {
 
         this.boxStartIndex = collisionBoxArray.length;
 

package/src/symbol/collision_index.ts

@@ -15,7 +15,8 @@ import type {SingleCollisionBox} from '../data/bucket/symbol_bucket';
 import type {
     GlyphOffsetArray,
     SymbolLineVertexArray
-} from '../data/array_types';
+} from '../data/array_types.g';
+import type {OverlapMode} from '../style/style_layer/symbol_style_layer';
 
 // When a symbol crosses the edge that causes it to be included in
 // collision detection, it will cause changes in the symbols around
@@ -29,6 +30,7 @@ export type FeatureKey = {
     bucketInstanceId: number;
     featureIndex: number;
     collisionGroupID: number;
+    overlapMode: OverlapMode;
 };
 
 /**
@@ -71,15 +73,15 @@ class CollisionIndex {
     }
 
     placeCollisionBox(
-      collisionBox: SingleCollisionBox,
-      allowOverlap: boolean,
-      textPixelRatio: number,
-      posMatrix: mat4,
-      collisionGroupPredicate?: (key: FeatureKey) => boolean
+        collisionBox: SingleCollisionBox,
+        overlapMode: OverlapMode,
+        textPixelRatio: number,
+        posMatrix: mat4,
+        collisionGroupPredicate?: (key: FeatureKey) => boolean
     ): {
-      box: Array<number>;
-      offscreen: boolean;
-    } {
+            box: Array<number>;
+            offscreen: boolean;
+        } {
         const projectedPoint = this.projectAndGetPerspectiveRatio(posMatrix, collisionBox.anchorPointX, collisionBox.anchorPointY);
         const tileToViewport = textPixelRatio * projectedPoint.perspectiveRatio;
         const tlX = collisionBox.x1 * tileToViewport + projectedPoint.point.x;
@@ -88,7 +90,7 @@ class CollisionIndex {
         const brY = collisionBox.y2 * tileToViewport + projectedPoint.point.y;
 
         if (!this.isInsideGrid(tlX, tlY, brX, brY) ||
-            (!allowOverlap && this.grid.hitTest(tlX, tlY, brX, brY, collisionGroupPredicate))) {
+            (overlapMode !== 'always' && this.grid.hitTest(tlX, tlY, brX, brY, overlapMode, collisionGroupPredicate))) {
             return {
                 box: [],
                 offscreen: false
@@ -102,24 +104,24 @@ class CollisionIndex {
     }
 
     placeCollisionCircles(
-      allowOverlap: boolean,
-      symbol: any,
-      lineVertexArray: SymbolLineVertexArray,
-      glyphOffsetArray: GlyphOffsetArray,
-      fontSize: number,
-      posMatrix: mat4,
-      labelPlaneMatrix: mat4,
-      labelToScreenMatrix: mat4,
-      showCollisionCircles: boolean,
-      pitchWithMap: boolean,
-      collisionGroupPredicate: (key: FeatureKey) => boolean,
-      circlePixelDiameter: number,
-      textPixelPadding: number
+        overlapMode: OverlapMode,
+        symbol: any,
+        lineVertexArray: SymbolLineVertexArray,
+        glyphOffsetArray: GlyphOffsetArray,
+        fontSize: number,
+        posMatrix: mat4,
+        labelPlaneMatrix: mat4,
+        labelToScreenMatrix: mat4,
+        showCollisionCircles: boolean,
+        pitchWithMap: boolean,
+        collisionGroupPredicate: (key: FeatureKey) => boolean,
+        circlePixelDiameter: number,
+        textPixelPadding: number
     ): {
-      circles: Array<number>;
-      offscreen: boolean;
-      collisionDetected: boolean;
-    } {
+            circles: Array<number>;
+            offscreen: boolean;
+            collisionDetected: boolean;
+        } {
         const placedCollisionCircles = [];
 
         const tileUnitAnchorPoint = new Point(symbol.anchorX, symbol.anchorY);
@@ -245,18 +247,16 @@ class CollisionIndex {
                     entirelyOffscreen = entirelyOffscreen && this.isOffscreen(x1, y1, x2, y2);
                     inGrid = inGrid || this.isInsideGrid(x1, y1, x2, y2);
 
-                    if (!allowOverlap) {
-                        if (this.grid.hitTestCircle(centerX, centerY, radius, collisionGroupPredicate)) {
-                            // Don't early exit if we're showing the debug circles because we still want to calculate
-                            // which circles are in use
-                            collisionDetected = true;
-                            if (!showCollisionCircles) {
-                                return {
-                                    circles: [],
-                                    offscreen: false,
-                                    collisionDetected
-                                };
-                            }
+                    if (overlapMode !== 'always' && this.grid.hitTestCircle(centerX, centerY, radius, overlapMode, collisionGroupPredicate)) {
+                        // Don't early exit if we're showing the debug circles because we still want to calculate
+                        // which circles are in use
+                        collisionDetected = true;
+                        if (!showCollisionCircles) {
+                            return {
+                                circles: [],
+                                offscreen: false,
+                                collisionDetected
+                            };
                         }
                     }
                 }
@@ -337,17 +337,17 @@ class CollisionIndex {
         return result;
     }
 
-    insertCollisionBox(collisionBox: Array<number>, ignorePlacement: boolean, bucketInstanceId: number, featureIndex: number, collisionGroupID: number) {
+    insertCollisionBox(collisionBox: Array<number>, overlapMode: OverlapMode, ignorePlacement: boolean, bucketInstanceId: number, featureIndex: number, collisionGroupID: number) {
         const grid = ignorePlacement ? this.ignoredGrid : this.grid;
 
-        const key = {bucketInstanceId, featureIndex, collisionGroupID};
+        const key = {bucketInstanceId, featureIndex, collisionGroupID, overlapMode};
         grid.insert(key, collisionBox[0], collisionBox[1], collisionBox[2], collisionBox[3]);
     }
 
-    insertCollisionCircles(collisionCircles: Array<number>, ignorePlacement: boolean, bucketInstanceId: number, featureIndex: number, collisionGroupID: number) {
+    insertCollisionCircles(collisionCircles: Array<number>, overlapMode: OverlapMode, ignorePlacement: boolean, bucketInstanceId: number, featureIndex: number, collisionGroupID: number) {
         const grid = ignorePlacement ? this.ignoredGrid : this.grid;
 
-        const key = {bucketInstanceId, featureIndex, collisionGroupID};
+        const key = {bucketInstanceId, featureIndex, collisionGroupID, overlapMode};
         for (let k = 0; k < collisionCircles.length; k += 4) {
             grid.insertCircle(key, collisionCircles[k], collisionCircles[k + 1], collisionCircles[k + 2]);
         }

package/src/symbol/cross_tile_symbol_index.ts

@@ -1,8 +1,8 @@
 import EXTENT from '../data/extent';
 
-import {SymbolInstanceArray} from '../data/array_types';
+import {SymbolInstanceArray} from '../data/array_types.g';
 
-import type {SymbolInstance} from '../data/array_types';
+import type {SymbolInstance} from '../data/array_types.g';
 import type {OverscaledTileID} from '../source/tile_id';
 import type SymbolBucket from '../data/bucket/symbol_bucket';
 import type StyleLayer from '../style/style_layer';
@@ -28,13 +28,13 @@ const roundingFactor = 512 / EXTENT / 2;
 class TileLayerIndex {
     tileID: OverscaledTileID;
     indexedSymbolInstances: {
-      [_: number]: Array<{
-        crossTileID: number;
-        coord: {
-          x: number;
-          y: number;
-        };
-      }>;
+        [_: number]: Array<{
+            crossTileID: number;
+            coord: {
+                x: number;
+                y: number;
+            };
+        }>;
     };
     bucketInstanceId: number;
 
@@ -74,7 +74,7 @@ class TileLayerIndex {
     }
 
     findMatches(symbolInstances: SymbolInstanceArray, newTileID: OverscaledTileID, zoomCrossTileIDs: {
-      [crossTileID: number]: boolean;
+        [crossTileID: number]: boolean;
     }) {
         const tolerance = this.tileID.canonical.z < newTileID.canonical.z ? 1 : Math.pow(2, this.tileID.canonical.z - newTileID.canonical.z);
 
@@ -123,14 +123,14 @@ class CrossTileIDs {
 
 class CrossTileSymbolLayerIndex {
     indexes: {
-      [zoom in string | number]: {
-        [tileId in string | number]: TileLayerIndex;
-      };
+        [zoom in string | number]: {
+            [tileId in string | number]: TileLayerIndex;
+        };
     };
     usedCrossTileIDs: {
-      [zoom in string | number]: {
-        [crossTileID: number]: boolean;
-      };
+        [zoom in string | number]: {
+            [crossTileID: number]: boolean;
+        };
     };
     lng: number;
 
@@ -234,7 +234,7 @@ class CrossTileSymbolLayerIndex {
     }
 
     removeStaleBuckets(currentIDs: {
-      [k in string | number]: boolean;
+        [k in string | number]: boolean;
     }) {
         let tilesChanged = false;
         for (const z in this.indexes) {

package/src/symbol/get_anchors.ts

@@ -17,9 +17,9 @@ function getLineLength(line: Array<Point>): number {
 }
 
 function getAngleWindowSize(
-  shapedText: Shaping,
-  glyphSize: number,
-  boxScale: number
+    shapedText: Shaping,
+    glyphSize: number,
+    boxScale: number
 ): number {
     return shapedText ?
         3 / 5 * glyphSize * boxScale :
@@ -33,11 +33,11 @@ function getShapedLabelLength(shapedText?: Shaping | null, shapedIcon?: Position
 }
 
 function getCenterAnchor(line: Array<Point>,
-                         maxAngle: number,
-                         shapedText: Shaping,
-                         shapedIcon: PositionedIcon,
-                         glyphSize: number,
-                         boxScale: number) {
+    maxAngle: number,
+    shapedText: Shaping,
+    shapedIcon: PositionedIcon,
+    glyphSize: number,
+    boxScale: number) {
     const angleWindowSize = getAngleWindowSize(shapedText, glyphSize, boxScale);
     const labelLength = getShapedLabelLength(shapedText, shapedIcon) * boxScale;
 
@@ -71,14 +71,14 @@ function getCenterAnchor(line: Array<Point>,
 }
 
 function getAnchors(line: Array<Point>,
-                    spacing: number,
-                    maxAngle: number,
-                    shapedText: Shaping,
-                    shapedIcon: PositionedIcon,
-                    glyphSize: number,
-                    boxScale: number,
-                    overscaling: number,
-                    tileExtent: number) {
+    spacing: number,
+    maxAngle: number,
+    shapedText: Shaping,
+    shapedIcon: PositionedIcon,
+    glyphSize: number,
+    boxScale: number,
+    overscaling: number,
+    tileExtent: number) {
 
     // Resample a line to get anchor points for labels and check that each
     // potential label passes text-max-angle check and has enough froom to fit

package/src/symbol/grid_index.test.ts

@@ -1,12 +1,13 @@
 import GridIndex from './grid_index';
+import type {GridKey} from './grid_index';
 
 describe('GridIndex', () => {
 
     test('indexes features', () => {
-        const grid = new GridIndex<number>(100, 100, 10);
-        grid.insert(0, 4, 10, 6, 30);
-        grid.insert(1, 4, 10, 30, 12);
-        grid.insert(2, -10, 30, 5, 35);
+        const grid = new GridIndex(100, 100, 10);
+        grid.insert(0 as GridKey, 4, 10, 6, 30);
+        grid.insert(1 as GridKey, 4, 10, 30, 12);
+        grid.insert(2 as GridKey, -10, 30, 5, 35);
 
         expect(grid.query(4, 10, 5, 11).map(x => x.key).sort()).toEqual([0, 1]);
         expect(grid.query(24, 10, 25, 11).map(x => x.key).sort()).toEqual([1]);
@@ -18,8 +19,8 @@ describe('GridIndex', () => {
     });
 
     test('returns multiple copies of a key if multiple boxes were inserted with the same key', () => {
-        const grid = new GridIndex<number>(100, 100, 10);
-        const key = 123;
+        const grid = new GridIndex(100, 100, 10);
+        const key = 123 as GridKey;
         grid.insert(key, 3, 3, 4, 4);
         grid.insert(key, 13, 13, 14, 14);
         grid.insert(key, 23, 23, 24, 24);
@@ -27,26 +28,48 @@ describe('GridIndex', () => {
     });
 
     test('circle-circle intersection', () => {
-        const grid = new GridIndex<number>(100, 100, 10);
-        grid.insertCircle(0, 50, 50, 10);
-        grid.insertCircle(1, 60, 60, 15);
-        grid.insertCircle(2, -10, 110, 20);
-
-        expect(grid.hitTestCircle(55, 55, 2)).toBeTruthy();
-        expect(grid.hitTestCircle(10, 10, 10)).toBeFalsy();
-        expect(grid.hitTestCircle(0, 100, 10)).toBeTruthy();
-        expect(grid.hitTestCircle(80, 60, 10)).toBeTruthy();
+        const grid = new GridIndex(100, 100, 10);
+        grid.insertCircle(0 as GridKey, 50, 50, 10);
+        grid.insertCircle(1 as GridKey, 60, 60, 15);
+        grid.insertCircle(2 as GridKey, -10, 110, 20);
+
+        expect(grid.hitTestCircle(55, 55, 2, 'never')).toBeTruthy();
+        expect(grid.hitTestCircle(10, 10, 10, 'never')).toBeFalsy();
+        expect(grid.hitTestCircle(0, 100, 10, 'never')).toBeTruthy();
+        expect(grid.hitTestCircle(80, 60, 10, 'never')).toBeTruthy();
     });
 
     test('circle-rectangle intersection', () => {
-        const grid = new GridIndex<number>(100, 100, 10);
-        grid.insertCircle(0, 50, 50, 10);
-        grid.insertCircle(1, 60, 60, 15);
-        grid.insertCircle(2, -10, 110, 20);
+        const grid = new GridIndex(100, 100, 10);
+        grid.insertCircle(0 as GridKey, 50, 50, 10);
+        grid.insertCircle(1 as GridKey, 60, 60, 15);
+        grid.insertCircle(2 as GridKey, -10, 110, 20);
 
         expect(grid.query(45, 45, 55, 55).map(x => x.key)).toEqual([0, 1]);
         expect(grid.query(0, 0, 30, 30).map(x => x.key)).toEqual([]);
         expect(grid.query(0, 80, 20, 100).map(x => x.key)).toEqual([2]);
     });
 
+    test('overlap mode', () => {
+        const grid = new GridIndex(100, 100, 10);
+        grid.insert({overlapMode: 'never'}, 10, 10, 20, 20);
+        grid.insert({overlapMode: 'always'}, 30, 10, 40, 20);
+        grid.insert({overlapMode: 'cooperative'}, 50, 10, 60, 20);
+
+        // 'never' can't overlap anything
+        expect(grid.hitTest(15, 15, 25, 25, 'never')).toBeTruthy();
+        expect(grid.hitTest(35, 15, 45, 25, 'never')).toBeTruthy();
+        expect(grid.hitTest(55, 15, 65, 25, 'never')).toBeTruthy();
+
+        // 'always' can overlap everything
+        expect(grid.hitTest(15, 15, 25, 25, 'always')).toBeFalsy();
+        expect(grid.hitTest(35, 15, 45, 25, 'always')).toBeFalsy();
+        expect(grid.hitTest(55, 15, 65, 25, 'always')).toBeFalsy();
+
+        // 'cooperative' can overlap 'always' and 'cooperative'
+        expect(grid.hitTest(15, 15, 25, 25, 'cooperative')).toBeTruthy();
+        expect(grid.hitTest(35, 15, 45, 25, 'cooperative')).toBeFalsy();
+        expect(grid.hitTest(55, 15, 65, 25, 'cooperative')).toBeFalsy();
+    });
+
 });