Merge branch 'mapbox:main' into patch-2

.eslintrc

@@ -60,7 +60,7 @@
     "no-eq-null": "off",
     "no-lonely-if": "off",
     "no-new": "off",
-    "no-unused-vars": ["error", {"argsIgnorePattern": "^_$"}],
+    "no-unused-vars": ["error", {"argsIgnorePattern": "^_"}],
     "no-warning-comments": "error",
     "no-mixed-operators": ["error", {"groups": [["&", "|", "^", "~", "<<", ">>", ">>>"], ["&&", "||"]]}],
     "object-curly-spacing": ["error", "never"],
@@ -129,7 +129,8 @@
         "jsdoc/require-property-description": "off",
         "jsdoc/require-property-name": "off",
         "jsdoc/require-property-type": "off",
-        "jsdoc/require-returns-type": "off",
+        "jsdoc/require-returns-type": "off"
+
       }
     },
     {
@@ -143,7 +144,6 @@
         "src/ui/control/**",
         "src/ui/handler/**",
         "src/geo/lng_lat.js",
-        "src/geo/lng_lat_bounds.js",
         "src/geo/mercator_coordinate.js",
         "src/source/**",
       ],
@@ -161,7 +161,7 @@
             "matchingFileName": "src/fake_filename_for_jsdoc_examples",
             "rejectExampleCodeRegex": "<script>"
         }],
-        "jsdoc/check-line-alignment": ["error", "any", {"wrapIndent": "    "}],
+        "jsdoc/check-line-alignment": ["error"],
         "jsdoc/check-property-names": "error",
         "jsdoc/check-types": "error",
         "jsdoc/tag-lines": ["error", "any", {"startLines": 1}],
@@ -202,16 +202,20 @@
           {
             "selector": "ClassProperty[value]",
             "message": "ClassProperty values are not allowed."
+          },
+          {
+            "selector": "LogicalExpression[operator='??']",
+            "message": "Nullish coalescing is not allowed."
+          },
+          {
+            "selector": "ChainExpression",
+            "message": "Optional chaining is now allowed."
           }
         ]
       }
     }
   ],
-  "globals": {
-    "performance": true
-  },
   "env": {
-    "es6": true,
-    "browser": false
+    "es6": true
   }
 }

.flowconfig

@@ -9,7 +9,6 @@
 .*/node_modules/@mapbox/geojson-types/fixtures/.*
 .*/node_modules/browserify/.*
 .*/node_modules/nyc/.*
-.*/node_modules/jsdom/.*
 .*/node_modules/eslint.*/.*
 .*/node_modules/highlight.*/.*
 .*/node_modules/@?babel.*/.*

.gitignore

@@ -6,7 +6,7 @@
 *.js.map
 *.cjs.map
 node_modules
-package-lock.json
+yarn.lock
 .vscode/
 *.sublime-*
 coverage
@@ -31,3 +31,5 @@ yarn-error.log
 yarn-debug.log
 npm-debug.log
 .idea
+# https://github.com/vitejs/vite/issues/9470
+vitest.config.js.*

.nvmrc

@@ -1 +1 @@
-18.16.0
+18.20.2

.stylelintrc

@@ -1,9 +1,6 @@
 {
   "extends": "stylelint-config-standard",
   "rules": {
-    "indentation": 4,
-    "declaration-block-semicolon-newline-after": "always-multi-line",
-    "block-opening-brace-space-before": "always-multi-line",
     "declaration-block-single-line-max-declarations": 3,
     "selector-class-pattern": "mapboxgl-[a-z-]+",
     "at-rule-no-unknown": [true, {

3d-style/data/bucket/model_bucket.js

@@ -4,10 +4,19 @@ import EXTENT from '../../../src/style-spec/data/extent.js';
 import {register} from '../../../src/util/web_worker_transfer.js';
 import loadGeometry from '../../../src/data/load_geometry.js';
 import toEvaluationFeature from '../../../src/data/evaluation_feature.js';
-import type {EvaluationFeature} from '../../../src/data/evaluation_feature.js';
 import EvaluationParameters from '../../../src/style/evaluation_parameters.js';
 import Point from '@mapbox/point-geometry';
 import {vec3} from 'gl-matrix';
+import {InstanceVertexArray} from '../../../src/data/array_types.js';
+import assert from 'assert';
+import {warnOnce} from '../../../src/util/util.js';
+import {rotationScaleYZFlipMatrix} from '../../util/model_util.js';
+import {tileToMeter} from '../../../src/geo/mercator_coordinate.js';
+import {instanceAttributes} from '../model_attributes.js';
+
+import type ModelStyleLayer from '../../style/style_layer/model_style_layer.js';
+import {isValidUrl} from '../../../src/style-spec/validate/validate_model.js';
+import type {EvaluationFeature} from '../../../src/data/evaluation_feature.js';
 import type {Mat4} from 'gl-matrix';
 import type {CanonicalTileID, OverscaledTileID} from '../../../src/source/tile_id.js';
 import type {
@@ -25,13 +34,6 @@ import type {SpritePositions} from '../../../src/util/image.js';
 import type {ProjectionSpecification} from '../../../src/style-spec/types.js';
 import type {TileTransform} from '../../../src/geo/projection/tile_transform.js';
 import type {IVectorTileLayer} from '@mapbox/vector-tile';
-import {InstanceVertexArray} from '../../../src/data/array_types.js';
-import assert from 'assert';
-import {warnOnce} from '../../../src/util/util.js';
-import ModelStyleLayer from '../../style/style_layer/model_style_layer.js';
-import {rotationScaleYZFlipMatrix} from '../../util/model_util.js';
-import {tileToMeter} from '../../../src/geo/mercator_coordinate.js';
-import {instanceAttributes} from '../model_attributes.js';
 
 class ModelFeature {
     feature: EvaluationFeature;
@@ -101,8 +103,9 @@ class ModelBucket implements Bucket {
     terrainElevationMax: number;
 
     hasZoomDependentProperties: boolean;
+    modelUris: Array<string>;
+    modelsRequested: boolean;
 
-    /* $FlowIgnore[incompatible-type-arg] Doesn't need to know about all the implementations */
     constructor(options: BucketParameters<ModelStyleLayer>) {
         this.zoom = options.zoom;
         this.canonical = options.canonical;
@@ -128,6 +131,9 @@ class ModelBucket implements Bucket {
         this.terrainElevationMin = 0;
         this.terrainElevationMax = 0;
         this.validForDEMTile = {id: null, timestamp: 0};
+        this.modelUris = [];
+        this.modelsRequested = false;
+
     }
 
     populate(features: Array<IndexedFeature>, options: PopulateParameters, canonical: CanonicalTileID, tileTransform: TileTransform) {
@@ -136,13 +142,16 @@ class ModelBucket implements Bucket {
         this.lookup = new Uint8Array(this.lookupDim * this.lookupDim);
 
         for (const {feature, id, index, sourceLayerIndex} of features) {
+            // use non numeric id, if in properties, too.
+            const featureId = (id != null) ? id :
+                (feature.properties && feature.properties.hasOwnProperty("id")) ? feature.properties["id"] : undefined;
             const evaluationFeature = toEvaluationFeature(feature, needGeometry);
 
             // $FlowFixMe[method-unbinding]
             if (!this.layers[0]._featureFilter.filter(new EvaluationParameters(this.zoom), evaluationFeature, canonical)) continue;
 
             const bucketFeature: BucketFeature = {
-                id,
+                id: featureId,
                 sourceLayerIndex,
                 index,
                 geometry: needGeometry ? evaluationFeature.geometry : loadGeometry(feature, canonical, tileTransform),
@@ -154,7 +163,11 @@ class ModelBucket implements Bucket {
             const modelId = this.addFeature(bucketFeature, bucketFeature.geometry, evaluationFeature);
 
             if (modelId) {
-                options.featureIndex.insert(feature, bucketFeature.geometry, index, sourceLayerIndex, this.index, this.instancesPerModel[modelId].instancedDataArray.length);
+                // Since 3D model geometry extends over footprint or point geometry, it is important
+                // to add some padding to envelope calculated for grid index lookup, in order to
+                // prevent false negatives in FeatureIndex's coarse check.
+                // Envelope padding is a half of featureIndex.grid cell size.
+                options.featureIndex.insert(feature, bucketFeature.geometry, index, sourceLayerIndex, this.index, this.instancesPerModel[modelId].instancedDataArray.length, EXTENT / 32);
             }
         }
         this.lookup = null;
@@ -169,6 +182,7 @@ class ModelBucket implements Bucket {
                 if (instances.idToFeaturesIndex.hasOwnProperty(id)) {
                     const feature = instances.features[instances.idToFeaturesIndex[id]];
                     this.evaluate(feature, states[id], instances, true);
+                    this.uploaded = false;
                 }
             }
         }
@@ -244,20 +258,36 @@ class ModelBucket implements Bucket {
                 perModelAttributes.instancedDataBuffer.destroy();
             }
         }
+        const modelManager = this.layers[0].modelManager;
+        if (modelManager && this.modelUris) {
+            for (const modelUri of this.modelUris) {
+                modelManager.removeModel(modelUri, "");
+            }
+        }
     }
 
     addFeature(feature: BucketFeature, geometry: Array<Array<Point>>, evaluationFeature: EvaluationFeature): string {
         const layer = this.layers[0];
         const modelIdProperty = layer.layout.get('model-id');
         assert(modelIdProperty);
         const modelId = modelIdProperty.evaluate(evaluationFeature, {}, this.canonical);
+
         if (!modelId) {
             warnOnce(`modelId is not evaluated for layer ${layer.id} and it is not going to get rendered.`);
             return modelId;
         }
+        // check if it's a valid model (absolute) URL
+        // otherwise is considered as an style defined model, and hence we don't need to
+        // load it here.
+        if (isValidUrl(modelId, false)) {
+            if (!this.modelUris.includes(modelId)) {
+                this.modelUris.push(modelId);
+            }
+        }
         if (!this.instancesPerModel[modelId]) {
             this.instancesPerModel[modelId] = new PerModelAttributes();
         }
+
         const perModelVertexArray = this.instancesPerModel[modelId];
         const instancedDataArray = perModelVertexArray.instancedDataArray;
 
@@ -295,6 +325,10 @@ class ModelBucket implements Bucket {
         return modelId;
     }
 
+    getModelUris(): Array<string> {
+        return this.modelUris;
+    }
+
     evaluate(feature: ModelFeature, featureState: FeatureStates, perModelVertexArray: PerModelAttributes, update: boolean) {
         const layer = this.layers[0];
         const evaluationFeature = feature.feature;