chore: add support ecma 2022

add nullish coalescing operator support.

.babelrc

@@ -10,6 +10,7 @@
                 ".css"
             ]
         }],
+        ["@babel/plugin-proposal-nullish-coalescing-operator"],
         ["@babel/plugin-transform-runtime"],
         ["minify-replace", {
             "replacements": [{

.eslintrc.js

@@ -5,7 +5,7 @@ module.exports = {
         'eslint-config-airbnb-base/rules/strict',
     ],
     parserOptions: {
-        ecmaVersion: 8,
+        ecmaVersion: 13,
         sourceType: 'module',
         ecmaFeatures: {
             impliedStrict: true,

package.json

@@ -65,6 +65,7 @@
   },
   "devDependencies": {
     "@babel/cli": "^7.17.0",
+    "@babel/plugin-proposal-nullish-coalescing-operator": "^7.16.7",
     "@babel/plugin-transform-runtime": "^7.17.0",
     "@babel/preset-env": "^7.16.11",
     "@babel/register": "^7.17.0",

src/Core/TileMesh.js

@@ -12,6 +12,7 @@ import CRS from 'Core/Geographic/Crs';
  * @param {?number} level - the tile level (default = 0)
  */
 class TileMesh extends THREE.Mesh {
+    #_tms = new Map();
     constructor(geometry, material, layer, extent, level = 0) {
         super(geometry, material);
 
@@ -29,10 +30,9 @@ class TileMesh extends THREE.Mesh {
         this.obb = this.geometry.OBB.clone();
         this.boundingSphere = new THREE.Sphere();
         this.obb.box3D.getBoundingSphere(this.boundingSphere);
-        this._tms = new Map();
 
         for (const tms of layer.tileMatrixSets) {
-            this._tms.set(tms, this.extent.tiledCovering(tms));
+            this.#_tms.set(tms, this.extent.tiledCovering(tms));
         }
 
         this.frustumCulled = false;
@@ -65,7 +65,7 @@ class TileMesh extends THREE.Mesh {
     }
 
     getExtentsByProjection(crs) {
-        return this._tms.get(CRS.formatToTms(crs));
+        return this.#_tms.get(CRS.formatToTms(crs));
     }
 
     /**

src/Layer/GeometryLayer.js

@@ -80,7 +80,7 @@ class GeometryLayer extends Layer {
      * view.addLayer(geometry);
      */
     constructor(id, object3d, config = {}) {
-        config.cacheLifeTime = config.cacheLifeTime == undefined ? CACHE_POLICIES.GEOMETRY : config.cacheLifeTime;
+        config.cacheLifeTime = config.cacheLifeTime ?? CACHE_POLICIES.GEOMETRY;
         super(id, config);
 
         this.isGeometryLayer = true;

src/Layer/RasterLayer.js

@@ -5,7 +5,7 @@ import { CACHE_POLICIES } from 'Core/Scheduler/Cache';
 
 class RasterLayer extends Layer {
     constructor(id, config) {
-        config.cacheLifeTime = config.cacheLifeTime == undefined ? CACHE_POLICIES.TEXTURE : config.cacheLifeTime;
+        config.cacheLifeTime = config.cacheLifeTime ?? CACHE_POLICIES.TEXTURE;
         super(id, config);
     }
 

src/Process/LayeredMaterialNodeProcessing.js

@@ -84,7 +84,7 @@ export function updateLayeredMaterialNodeImagery(context, layer, node, parent) {
             nodeLayer = layer.setupRasterNode(node);
 
             // Init the node by parent
-            const parentLayer = parent.material && parent.material.getLayer(layer.id);
+            const parentLayer = parent.material?.getLayer(layer.id);
             nodeLayer.initFromParent(parentLayer, extentsDestination);
         }
 
@@ -182,7 +182,7 @@ export function updateLayeredMaterialNodeElevation(context, layer, node, parent)
     if (node.layerUpdateState[layer.id] === undefined) {
         node.layerUpdateState[layer.id] = new LayerUpdateState();
 
-        const parentLayer = parent.material && parent.material.getLayer(layer.id);
+        const parentLayer = parent.material?.getLayer(layer.id);
         nodeLayer.initFromParent(parentLayer, extentsDestination);
 
         if (nodeLayer.level >= layer.source.zoom.min) {
@@ -237,7 +237,7 @@ export function updateLayeredMaterialNodeElevation(context, layer, node, parent)
 
 export function removeLayeredMaterialNodeLayer(layerId) {
     return function removeLayeredMaterialNodeLayer(node) {
-        if (node.material && node.material.removeLayer) {
+        if (node.material?.removeLayer) {
             node.material.removeLayer(layerId);
             if (node.material.elevationLayerIds[0] == layerId) {
                 node.setBBoxZ({ min: 0, max: 0 });

src/Provider/TileProvider.js

@@ -12,8 +12,8 @@ export default {
             return Promise.reject(new CancelledCommandException(command));
         }
 
-        for (let i = 0, size = extentsSource.length; i < size; i++) {
-            promises.push(layer.convert(requester, extentsSource[i]));
+        for (const extent of extentsSource) {
+            promises.push(layer.convert(requester, extent));
         }
 
         return Promise.all(promises);

src/Renderer/Camera.js

@@ -82,6 +82,9 @@ function updatePreSse(camera, height, fov) {
  * @property    {number}    _preSSE         The precomputed constant part of the screen space error.
  */
 class Camera {
+    #_viewMatrixNeedsUpdate = true;
+    #_viewMatrix = new THREE.Matrix4();
+
     /**
      * @param   {string}                crs                                     The camera's coordinate projection system.
      * @param   {number}                width                                   The width (in pixels) of the view the
@@ -115,12 +118,10 @@ class Camera {
                     break;
             }
         }
-        this.camera3D.aspect = this.camera3D.aspect !== undefined ? this.camera3D.aspect : 1;
+        this.camera3D.aspect = this.camera3D.aspect ?? 1;
 
-        this._viewMatrix = new THREE.Matrix4();
         this.width = width;
         this.height = height;
-        this._viewMatrixNeedsUpdate = true;
         this.resize(width, height);
 
         this._preSSE = Infinity;
@@ -165,14 +166,14 @@ class Camera {
 
         if (this.camera3D.updateProjectionMatrix) {
             this.camera3D.updateProjectionMatrix();
-            this._viewMatrixNeedsUpdate = true;
+            this.#_viewMatrixNeedsUpdate = true;
         }
     }
 
     update() {
         // update matrix
         this.camera3D.updateMatrixWorld();
-        this._viewMatrixNeedsUpdate = true;
+        this.#_viewMatrixNeedsUpdate = true;
     }
 
     /**
@@ -201,16 +202,16 @@ class Camera {
     }
 
     isSphereVisible(sphere, matrixWorld) {
-        if (this._viewMatrixNeedsUpdate) {
+        if (this.#_viewMatrixNeedsUpdate) {
             // update visibility testing matrix
-            this._viewMatrix.multiplyMatrices(this.camera3D.projectionMatrix, this.camera3D.matrixWorldInverse);
-            this._viewMatrixNeedsUpdate = false;
+            this.#_viewMatrix.multiplyMatrices(this.camera3D.projectionMatrix, this.camera3D.matrixWorldInverse);
+            this.#_viewMatrixNeedsUpdate = false;
         }
         if (matrixWorld) {
-            tmp.matrix.multiplyMatrices(this._viewMatrix, matrixWorld);
+            tmp.matrix.multiplyMatrices(this.#_viewMatrix, matrixWorld);
             tmp.frustum.setFromProjectionMatrix(tmp.matrix);
         } else {
-            tmp.frustum.setFromProjectionMatrix(this._viewMatrix);
+            tmp.frustum.setFromProjectionMatrix(this.#_viewMatrix);
         }
         return tmp.frustum.intersectsSphere(sphere);
     }

src/Renderer/ColorLayersOrdering.js

@@ -3,7 +3,7 @@ import { ImageryLayers } from 'Layer/Layer';
 function updateLayersOrdering(geometryLayer, imageryLayers) {
     var sequence = ImageryLayers.getColorLayersIdOrderedBySequence(imageryLayers);
     var cO = function cO(object) {
-        if (object.material && object.material.setSequence) {
+        if (object.material?.setSequence) {
             object.material.setSequence(sequence);
         }
     };

src/Renderer/LayeredMaterial.js

@@ -95,6 +95,7 @@ export const ELEVATION_MODES = {
 let nbSamplers;
 const fragmentShader = [];
 class LayeredMaterial extends THREE.RawShaderMaterial {
+    #_visible = true;
     constructor(options = {}, crsCount) {
         super(options);
 
@@ -167,13 +168,21 @@ class LayeredMaterial extends THREE.RawShaderMaterial {
         this.uniforms.colorOffsetScales = new THREE.Uniform(new Array(nbSamplers[1]).fill(identityOffsetScale));
         this.uniforms.colorTextureCount = new THREE.Uniform(0);
 
-        let _visible = this.visible;
         // can't do an ES6 setter/getter here
         Object.defineProperty(this, 'visible', {
-            get() { return _visible; },
+            // Knowing the visibility of a `LayeredMaterial` is useful. For example in a
+            // `GlobeView`, if you zoom in, "parent" tiles seems hidden; in fact, there
+            // are not, it is only their material (so `LayeredMaterial`) that is set to
+            // not visible.
+
+            // Adding an event when changing this property can be useful to hide others
+            // things, like in `TileDebug`, or in later PR to come (#1303 for example).
+            //
+            // TODO : verify if there is a better mechanism to avoid this event
+            get() { return this.#_visible; },
             set(v) {
-                if (_visible != v) {
-                    _visible = v;
+                if (this.#_visible != v) {
+                    this.#_visible = v;
                     this.dispatchEvent({ type: v ? 'shown' : 'hidden' });
                 }
             },

src/Renderer/OBB.js

@@ -69,8 +69,8 @@ class OBB extends THREE.Object3D {
      * @param {number}  [elevation.scale]           The scale of oriented bounding box Z axis
      */
     updateZ(elevation = {}) {
-        this.z.min = elevation.min !== undefined && elevation.min !== null ? elevation.min : this.z.min;
-        this.z.max = elevation.max !== undefined && elevation.max !== null ? elevation.max : this.z.max;
+        this.z.min = elevation.min ?? this.z.min;
+        this.z.max = elevation.max ?? this.z.max;
 
         this.z.scale = elevation.scale > 0 ? elevation.scale : this.z.scale;
         this.z.delta = Math.abs(this.z.max - this.z.min) * this.z.scale;

src/Renderer/OrientedImageMaterial.js

@@ -53,9 +53,9 @@ class OrientedImageMaterial extends THREE.RawShaderMaterial {
      * @param {Number} [options.debugAlphaBorder=0] - Set this option to 1 to see influence of alphaBorder option.
      */
     constructor(cameras, options = {}) {
-        options.side = options.side !== undefined ? options.side : THREE.DoubleSide;
-        options.transparent = options.transparent !== undefined ? options.transparent : true;
-        options.opacity = options.opacity !== undefined ? options.opacity : 1;
+        options.side = options.side ?? THREE.DoubleSide;
+        options.transparent = options.transparent ?? true;
+        options.opacity = options.opacity ?? 1;
 
         // Filter the rawShaderMaterial options
         const rawShaderMaterialOptions = {};
@@ -69,7 +69,7 @@ class OrientedImageMaterial extends THREE.RawShaderMaterial {
         }
         super(rawShaderMaterialOptions);
 
-        this.defines.ORIENTED_IMAGES_COUNT = options.OrientedImagesCount !== undefined ? options.OrientedImagesCount : cameras.length;
+        this.defines.ORIENTED_IMAGES_COUNT = options.OrientedImagesCount ?? cameras.length;
 
         // verify that number of textures doesn't exceed GPU capabilities
         const maxTexturesUnits = Capabilities.getMaxTextureUnitsCount();

src/Renderer/RenderMode.js

@@ -5,7 +5,7 @@ const MODES = {
 };
 
 function push(object3d, mode) {
-    const _mode = object3d.mode !== undefined ? object3d.mode : MODES.FINAL;
+    const _mode = object3d.mode ?? MODES.FINAL;
     if (_mode == mode) {
         return () => { };
     }

src/Utils/DEMUtils.js

@@ -321,7 +321,7 @@ function _readZ(layer, method, coord, nodes, cache) {
 
     let tileWithValidElevationTexture = null;
     // first check in cache
-    if (cache && cache.tile && cache.tile.material) {
+    if (cache?.tile?.material) {
         tileWithValidElevationTexture = tileAt(pt, cache.tile);
     }
     for (let i = 0; !tileWithValidElevationTexture && i < nodes.length; i++) {

test/functional/misc_clamp_ground.js

@@ -30,7 +30,11 @@ describe('misc_clamp_ground', function _() {
             // compute the on screen cone position
             const coneCenter = new itowns.THREE.Vector3(0, 0, 0)
                 .applyMatrix4(view.mesh.matrixWorld);
-            coneCenter.applyMatrix4(view.camera._viewMatrix);
+
+            const camera3D = view.camera.camera3D;
+            const viewMatrix = new itowns.THREE.Matrix4().multiplyMatrices(camera3D.projectionMatrix, camera3D.matrixWorldInverse);
+
+            coneCenter.applyMatrix4(viewMatrix);
             const mouse = view.normalizedToViewCoords(coneCenter);
 
             // So read the depth buffer at cone's position