itowns 2.44.3-next.1 → 2.44.3-next.3

package/lib/Controls/GlobeControls.js

@@ -170,6 +170,8 @@ let previous;
  * @property      {boolean} enableDamping Enable damping or not (simulates the lag that a real camera
  * operator introduces while operating a heavy physical camera). Default is true.
  * @property      {boolean} dampingMoveFactor the damping move factor. Default is 0.25.
+ * @property      {StateControl~State} stateControl redefining which controls state is triggered by the keyboard/mouse
+ * event (For example, rewrite the PAN movement to be triggered with the 'left' mouseButton instead of 'right').
  */
 class GlobeControls extends THREE.EventDispatcher {
   constructor(view, placement) {
@@ -180,7 +182,7 @@ class GlobeControls extends THREE.EventDispatcher {
     this.camera = view.camera3D;
 
     // State control
-    this.states = new StateControl(this.view);
+    this.states = new StateControl(this.view, options.stateControl);
 
     // this.enabled property has moved to StateControl
     Object.defineProperty(this, 'enabled', {

package/lib/Controls/StreetControls.js

@@ -290,7 +290,7 @@ class StreetControls extends FirstPersonControls {
     this.end.lookAt(position);
     this.tween = new TWEEN.Tween({
       t: 0
-    }, this.tweenGroup).to({
+    }).to({
       t: 1
     }, time).easing(TWEEN.Easing.Quadratic.Out).onComplete(() => {
       this.stopAnimations();
@@ -298,6 +298,7 @@ class StreetControls extends FirstPersonControls {
       // 'manually' slerp the Quaternion to avoid rotation issues
       this.camera.quaternion.slerpQuaternions(startQuaternion, this.end.quaternion, d.t);
     }).start();
+    this.tweenGroup.add(this.tween);
     this.animationFrameRequester = () => {
       this.tweenGroup.update();
       // call reset from super class FirsPersonControls to make mouse rotation managed by FirstPersonControl still aligned
@@ -325,12 +326,13 @@ class StreetControls extends FirstPersonControls {
       resolve = r;
     });
     this.stopAnimations();
-    this.tween = new TWEEN.Tween(this.camera.position, this.tweenGroup) // Create a new tween that modifies camera position
+    this.tween = new TWEEN.Tween(this.camera.position) // Create a new tween that modifies camera position
     .to(position.clone(), time).easing(TWEEN.Easing.Quadratic.Out) // Use an easing function to make the animation smooth.
     .onComplete(() => {
       this.stopAnimations();
       resolve();
     }).start();
+    this.tweenGroup.add(this.tween);
     this.animationFrameRequester = () => {
       this.tweenGroup.update();
       this.view.notifyChange(this.camera);
@@ -343,6 +345,7 @@ class StreetControls extends FirstPersonControls {
     if (this.tween) {
       this.tween.stop();
       this.tween = undefined;
+      this.tweenGroup.removeAll();
     }
     if (this.animationFrameRequester) {
       this.view.removeFrameRequester(MAIN_LOOP_EVENTS.BEFORE_RENDER, this.animationFrameRequester);

package/lib/Converter/Feature2Mesh.js

@@ -27,8 +27,8 @@ const crsWGS84 = 'EPSG:4326';
 class FeatureMesh extends THREE.Group {
   #currentCrs;
   #originalCrs;
-  #collection = new THREE.Group();
-  #place = new THREE.Group();
+  #collection = (() => new THREE.Group())();
+  #place = (() => new THREE.Group())();
   constructor(meshes, collection) {
     super();
     this.meshes = new THREE.Group().add(...meshes);

package/lib/Core/Feature.js

@@ -332,8 +332,8 @@ const alignYtoEast = new THREE.Quaternion();
  */
 
 export class FeatureCollection extends THREE.Object3D {
-  #transformToLocalSystem = transformToLocalSystem2D;
-  #setLocalSystem = doNothing;
+  #transformToLocalSystem = (() => transformToLocalSystem2D)();
+  #setLocalSystem = (() => doNothing)();
   /**
    * @param      {FeatureBuildingOptions|Layer}  options  The building options .
    */

package/lib/Core/Style.js

@@ -198,8 +198,8 @@ function defineStyleProperty(style, category, parameter, userValue, defaultValue
  * @property {FeatureGeometry}      geometry  @private The FeatureGeometry to compute the style.
  */
 export class StyleContext {
-  #worldCoord = new Coordinates('EPSG:4326', 0, 0, 0);
-  #localCoordinates = new Coordinates('EPSG:4326', 0, 0, 0);
+  #worldCoord = (() => new Coordinates('EPSG:4326', 0, 0, 0))();
+  #localCoordinates = (() => new Coordinates('EPSG:4326', 0, 0, 0))();
   #worldCoordsComputed = true;
   #feature = {};
   #geometry = {};

package/lib/Core/TileMesh.js

@@ -12,7 +12,7 @@ import { geoidLayerIsVisible } from "../Layer/GeoidLayer.js";
  * @param {?number} level - the tile level (default = 0)
  */
 class TileMesh extends THREE.Mesh {
-  #_tms = new Map();
+  #_tms = (() => new Map())();
   #visible = true;
   constructor(geometry, material, layer, extent) {
     let level = arguments.length > 4 && arguments[4] !== undefined ? arguments[4] : 0;

package/lib/Core/View.js

@@ -121,7 +121,7 @@ let screenMeters;
  */
 class View extends THREE.EventDispatcher {
   #layers = [];
-  #pixelDepthBuffer = new Uint8Array(4);
+  #pixelDepthBuffer = (() => new Uint8Array(4))();
   #fullSizeDepthBuffer;
   /**
    * Constructs an Itowns View instance

package/lib/Layer/CopcLayer.js

@@ -32,7 +32,7 @@ class CopcLayer extends PointCloudLayer {
     super(id, config);
     this.isCopcLayer = true;
     const resolve = () => this;
-    this.whenReady = this.source.whenReady.then(( /** @type {CopcSource} */source) => {
+    this.whenReady = this.source.whenReady.then((/** @type {CopcSource} */source) => {
       const {
         cube,
         rootHierarchyPage

package/lib/Layer/LabelLayer.js

@@ -139,7 +139,7 @@ class LabelsNode extends THREE.Group {
  * internally for optimisation.
  */
 class LabelLayer extends GeometryLayer {
-  #filterGrid = new ScreenGrid();
+  #filterGrid = (() => new ScreenGrid())();
   /**
    * @extends Layer
    *

package/lib/Layer/OGC3DTilesLayer.js

@@ -122,11 +122,13 @@ class OGC3DTilesLayer extends GeometryLayer {
     if (config.source.isOGC3DTilesIonSource) {
       this.tilesRenderer.registerPlugin(new CesiumIonAuthPlugin({
         apiToken: config.source.accessToken,
-        assetId: config.source.assetId
+        assetId: config.source.assetId,
+        autoRefreshToken: true
       }));
     } else if (config.source.isOGC3DTilesGoogleSource) {
       this.tilesRenderer.registerPlugin(new GoogleCloudAuthPlugin({
-        apiToken: config.source.key
+        apiToken: config.source.key,
+        autoRefreshToken: true
       }));
     }
     this.tilesRenderer.registerPlugin(new ImplicitTilingPlugin());
@@ -274,7 +276,7 @@ class OGC3DTilesLayer extends GeometryLayer {
 
     // Setup classification bufferAttribute
     if (model.isPoints) {
-      const classificationData = batchTable?.getData('Classification');
+      const classificationData = batchTable?.getPropertyArray('Classification');
       if (classificationData) {
         geometry.setAttribute('classification', new THREE.BufferAttribute(classificationData, 1));
       }

package/lib/Parser/LASParser.js

@@ -3,7 +3,7 @@ import { spawn, Thread, Transfer } from 'threads';
 let _lazPerf;
 let _thread;
 function workerInstance() {
-  return new Worker( /* webpackChunkName: "itowns_lasparser" */
+  return new Worker(/* webpackChunkName: "itowns_lasparser" */
   new URL('../Worker/LASLoaderWorker.js', import.meta.url), {
     type: 'module'
   });

package/lib/Parser/Potree2BinParser.js

@@ -2,7 +2,7 @@ import * as THREE from 'three';
 import { spawn, Thread, Transfer } from 'threads';
 let _thread;
 function workerInstance() {
-  return new Worker( /* webpackChunkName: "itowns_potree2worker" */
+  return new Worker(/* webpackChunkName: "itowns_potree2worker" */
   new URL('../Worker/Potree2Worker.js', import.meta.url), {
     type: 'module'
   });

package/lib/Renderer/Camera.js

@@ -77,7 +77,7 @@ function updatePreSse(camera, height, fov) {
  */
 class Camera {
   #_viewMatrixNeedsUpdate = true;
-  #_viewMatrix = new THREE.Matrix4();
+  #_viewMatrix = (() => new THREE.Matrix4())();
 
   /**
    * @param   {string}                crs                                     The camera's coordinate projection system.

package/lib/Renderer/LayeredMaterial.js

@@ -12,7 +12,7 @@ const defaultTex = new THREE.Texture();
 
 // from three.js packDepthToRGBA
 const UnpackDownscale = 255 / 256; // 0..1 -> fraction (excluding 1)
-const bitSh = new THREE.Vector4(UnpackDownscale / (256.0 * 256.0 * 256.0), UnpackDownscale / (256.0 * 256.0), UnpackDownscale / 256.0, UnpackDownscale);
+const bitSh = new THREE.Vector4(UnpackDownscale, UnpackDownscale / 256.0, UnpackDownscale / (256.0 * 256.0), UnpackDownscale / (256.0 * 256.0 * 256.0));
 export function unpack1K(color, factor) {
   return factor ? bitSh.dot(color) * factor : bitSh.dot(color);
 }

package/lib/Source/CopcSource.js

@@ -91,7 +91,7 @@ class CopcSource extends Source {
     this.parser = LASParser.parseChunk;
     this.fetcher = Fetcher.arrayBuffer;
     this.colorDepth = config.colorDepth ?? 16;
-    const get = ( /** @type {number} */begin, /** @type {number} */end) => this.fetcher(this.url, {
+    const get = (/** @type {number} */begin, /** @type {number} */end) => this.fetcher(this.url, {
       ...this.networkOptions,
       headers: {
         ...this.networkOptions.headers,

package/lib/ThreeExtended/capabilities/WebGL.js

@@ -1,12 +1,4 @@
 class WebGL {
-  static isWebGLAvailable() {
-    try {
-      const canvas = document.createElement('canvas');
-      return !!(window.WebGLRenderingContext && (canvas.getContext('webgl') || canvas.getContext('experimental-webgl')));
-    } catch (e) {
-      return false;
-    }
-  }
   static isWebGL2Available() {
     try {
       const canvas = document.createElement('canvas');
@@ -25,9 +17,6 @@ class WebGL {
       return false;
     }
   }
-  static getWebGLErrorMessage() {
-    return this.getErrorMessage(1);
-  }
   static getWebGL2ErrorMessage() {
     return this.getErrorMessage(2);
   }
@@ -60,5 +49,21 @@ class WebGL {
     element.innerHTML = message;
     return element;
   }
+
+  // @deprecated, r168
+
+  static isWebGLAvailable() {
+    console.warn('isWebGLAvailable() has been deprecated and will be removed in r178. Use isWebGL2Available() instead.');
+    try {
+      const canvas = document.createElement('canvas');
+      return !!(window.WebGLRenderingContext && (canvas.getContext('webgl') || canvas.getContext('experimental-webgl')));
+    } catch (e) {
+      return false;
+    }
+  }
+  static getWebGLErrorMessage() {
+    console.warn('getWebGLErrorMessage() has been deprecated and will be removed in r178. Use getWebGL2ErrorMessage() instead.');
+    return this.getErrorMessage(1);
+  }
 }
 export default WebGL;

package/lib/ThreeExtended/loaders/GLTFLoader.js

@@ -1564,14 +1564,18 @@ class GLTFParser {
     // expensive work of uploading a texture to the GPU off the main thread.
 
     let isSafari = false;
+    let safariVersion = -1;
     let isFirefox = false;
     let firefoxVersion = -1;
     if (typeof navigator !== 'undefined') {
-      isSafari = /^((?!chrome|android).)*safari/i.test(navigator.userAgent) === true;
-      isFirefox = navigator.userAgent.indexOf('Firefox') > -1;
-      firefoxVersion = isFirefox ? navigator.userAgent.match(/Firefox\/([0-9]+)\./)[1] : -1;
-    }
-    if (typeof createImageBitmap === 'undefined' || isSafari || isFirefox && firefoxVersion < 98) {
+      const userAgent = navigator.userAgent;
+      isSafari = /^((?!chrome|android).)*safari/i.test(userAgent) === true;
+      const safariMatch = userAgent.match(/Version\/(\d+)/);
+      safariVersion = isSafari && safariMatch ? parseInt(safariMatch[1], 10) : -1;
+      isFirefox = userAgent.indexOf('Firefox') > -1;
+      firefoxVersion = isFirefox ? userAgent.match(/Firefox\/([0-9]+)\./)[1] : -1;
+    }
+    if (typeof createImageBitmap === 'undefined' || isSafari && safariVersion < 17 || isFirefox && firefoxVersion < 98) {
       this.textureLoader = new TextureLoader(this.options.manager);
     } else {
       this.textureLoader = new ImageBitmapLoader(this.options.manager);
@@ -2135,7 +2139,7 @@ class GLTFParser {
     }
     mesh.material = material;
   }
-  getMaterialType( /* materialIndex */
+  getMaterialType(/* materialIndex */
   ) {
     return MeshStandardMaterial;
   }

package/lib/ThreeExtended/loaders/KTX2Loader.js

@@ -120,15 +120,22 @@ class KTX2Loader extends Loader {
     loader.setResponseType('arraybuffer');
     loader.setWithCredentials(this.withCredentials);
     loader.load(url, buffer => {
-      // Check for an existing task using this buffer. A transferred buffer cannot be transferred
-      // again from this thread.
-      if (_taskCache.has(buffer)) {
-        const cachedTask = _taskCache.get(buffer);
-        return cachedTask.promise.then(onLoad).catch(onError);
-      }
-      this._createTexture(buffer).then(texture => onLoad ? onLoad(texture) : null).catch(onError);
+      this.parse(buffer, onLoad, onError);
     }, onProgress, onError);
   }
+  parse(buffer, onLoad, onError) {
+    if (this.workerConfig === null) {
+      throw new Error('THREE.KTX2Loader: Missing initialization with `.detectSupport( renderer )`.');
+    }
+
+    // Check for an existing task using this buffer. A transferred buffer cannot be transferred
+    // again from this thread.
+    if (_taskCache.has(buffer)) {
+      const cachedTask = _taskCache.get(buffer);
+      return cachedTask.promise.then(onLoad).catch(onError);
+    }
+    this._createTexture(buffer).then(texture => onLoad ? onLoad(texture) : null).catch(onError);
+  }
   _createTextureFrom(transcodeResult, container) {
     const {
       faces,

package/lib/Utils/CameraUtils.js

@@ -231,7 +231,7 @@ class CameraRig extends THREE.Object3D {
     if (Math.abs(difference) > Math.PI) {
       this.end.target.rotation.z = this.start.target.rotation.z + difference - Math.sign(difference) * 2 * Math.PI;
     }
-    animations.push(new TWEEN.Tween(factor, tweenGroup).to({
+    animations.push(new TWEEN.Tween(factor).to({
       t: 1
     }, time).easing(params.easing).onUpdate(d => {
       // rotate to coord destination in geocentric projection
@@ -248,14 +248,15 @@ class CameraRig extends THREE.Object3D {
 
     // translate to coordinate destination in planar projection
     if (view.referenceCrs != 'EPSG:4978') {
-      animations.push(new TWEEN.Tween(this.position, tweenGroup).to(this.end.position, time).easing(params.easing));
+      animations.push(new TWEEN.Tween(this.position).to(this.end.position, time).easing(params.easing));
     }
 
     // translate to altitude zero
-    animations.push(new TWEEN.Tween(this.seaLevel.position, tweenGroup).to(this.end.seaLevel.position, time).easing(params.easing));
+    animations.push(new TWEEN.Tween(this.seaLevel.position).to(this.end.seaLevel.position, time).easing(params.easing));
 
     // translate camera position
-    animations.push(new TWEEN.Tween(this.camera.position, tweenGroup).to(this.end.camera.position, time).easing(params.easing));
+    animations.push(new TWEEN.Tween(this.camera.position).to(this.end.camera.position, time).easing(params.easing));
+    tweenGroup.add(...animations);
 
     // update animations, transformation and view
     this.animationFrameRequester = () => {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "itowns",
-  "version": "2.44.3-next.1",
+  "version": "2.44.3-next.3",
   "description": "A JS/WebGL framework for 3D geospatial data visualization",
   "type": "module",
   "main": "lib/Main.js",
@@ -60,30 +60,30 @@
     "@mapbox/mapbox-gl-style-spec": "^13.28.0",
     "@mapbox/vector-tile": "^2.0.3",
     "@tmcw/togeojson": "^5.8.1",
-    "@tweenjs/tween.js": "^23.1.2",
-    "3d-tiles-renderer": "^0.3.37",
+    "@tweenjs/tween.js": "^25.0.0",
+    "3d-tiles-renderer": "^0.3.38",
     "brotli-compress": "^1.3.3",
     "copc": "^0.0.6",
     "earcut": "^3.0.0",
     "js-priority-queue": "^0.1.5",
     "pbf": "^4.0.1",
-    "shpjs": "^6.0.1",
+    "shpjs": "^6.1.0",
     "threads": "^1.7.0"
   },
   "peerDependencies": {
-    "proj4": "^2.11.0",
-    "three": "^0.165.0"
+    "proj4": "^2.12.1",
+    "three": "^0.168.0"
   },
   "devDependencies": {
-    "@babel/cli": "^7.24.8",
-    "@babel/core": "^7.24.9",
-    "@babel/plugin-transform-runtime": "^7.24.7",
-    "@babel/preset-env": "^7.24.8",
+    "@babel/cli": "^7.25.6",
+    "@babel/core": "^7.25.2",
+    "@babel/plugin-transform-runtime": "^7.25.4",
+    "@babel/preset-env": "^7.25.4",
     "@babel/register": "^7.24.6",
-    "@types/three": "^0.165.0",
-    "@xmldom/xmldom": "^0.8.10",
+    "@types/three": "^0.168.0",
+    "@xmldom/xmldom": "^0.9.2",
     "babel-inline-import-loader": "^1.0.1",
-    "babel-loader": "^9.1.3",
+    "babel-loader": "^9.2.1",
     "babel-plugin-inline-import": "^3.0.0",
     "babel-plugin-minify-dead-code-elimination": "^0.5.2",
     "babel-plugin-minify-replace": "^0.5.0",
@@ -91,34 +91,33 @@
     "babel-plugin-module-resolver": "^5.0.2",
     "c8": "^10.1.2",
     "chalk": "^5.3.0",
-    "chart.js": "^4.4.3",
+    "chart.js": "^4.4.4",
     "compare-func": "^2.0.0",
     "conventional-changelog-cli": "^4.1.0",
     "copyfiles": "^2.4.1",
-    "core-js": "^3.37.1",
+    "core-js": "^3.38.1",
     "cross-env": "^7.0.3",
     "eslint": "^8.55.0",
     "eslint-config-airbnb-base": "^15.0.0",
     "eslint-import-resolver-babel-module": "^5.3.2",
-    "eslint-plugin-import": "^2.29.0",
-    "eslint-webpack-plugin": "^4.0.1",
+    "eslint-plugin-import": "^2.30.0",
+    "eslint-webpack-plugin": "^4.2.0",
     "github-url-from-git": "^1.5.0",
     "grunt": "^1.6.1",
     "grunt-bump": "^0.8.0",
     "https-proxy-agent": "^7.0.5",
     "jsdoc": "^4.0.3",
-    "mocha": "^10.2.0",
-    "node-fetch": "^2.7.0",
-    "proj4": "^2.11.0",
-    "puppeteer": "^22.13.1",
+    "mocha": "^10.7.3",
+    "proj4": "^2.12.1",
+    "puppeteer": "^23.3.1",
     "q": "^1.5.1",
-    "replace-in-file": "^7.2.0",
-    "sinon": "^18.0.0",
-    "three": "^0.165.0",
-    "typescript": "^5.5.2",
+    "replace-in-file": "^8.1.0",
+    "sinon": "^19.0.2",
+    "three": "^0.168.0",
+    "typescript": "^5.6.2",
     "webgl-mock": "^0.1.7",
-    "webpack": "^5.93.0",
+    "webpack": "^5.94.0",
     "webpack-cli": "^5.1.4",
-    "webpack-dev-server": "^5.0.4"
+    "webpack-dev-server": "^5.1.0"
   }
 }