itowns 2.44.3-next.12 → 2.44.3-next.14

package/lib/Controls/StateControl.js

@@ -257,7 +257,7 @@ class StateControl extends THREE.EventDispatcher {
   touchToState(finger) {
     for (const key of Object.keys(DEFAULT_STATES)) {
       const state = this[key];
-      if (state.enable && finger == state.finger) {
+      if (state.enable && finger === state.finger) {
         return state;
       }
     }
@@ -377,7 +377,7 @@ class StateControl extends THREE.EventDispatcher {
     event.preventDefault();
     if (this.enabled && this.ZOOM.enable) {
       viewCoords.copy(this._view.eventToViewCoords(event));
-      this.currentState = this.NONE;
+      this.currentState = this.ZOOM;
       this.dispatchEvent({
         type: this.ZOOM._event,
         delta: event.deltaY,

package/lib/Core/View.js

@@ -30,7 +30,8 @@ export const VIEW_EVENTS = {
   LAYER_ADDED: 'layer-added',
   INITIALIZED: 'initialized',
   COLOR_LAYERS_ORDER_CHANGED,
-  CAMERA_MOVED: 'camera-moved'
+  CAMERA_MOVED: 'camera-moved',
+  DISPOSED: 'disposed'
 };
 
 /**
@@ -109,9 +110,11 @@ const coordinates = new Coordinates('EPSG:4326');
 const viewers = [];
 // Size of the camera frustrum, in meters
 let screenMeters;
+let id = 0;
 
 /**
- * @property {HTMLElement} domElement - Thhe domElement holding the canvas where the view is displayed
+ * @property {number} id - The id of the view. It's incremented at each new view instance, starting at 0.
+ * @property {HTMLElement} domElement - The domElement holding the canvas where the view is displayed
  * @property {String} referenceCrs - The coordinate reference system of the view
  * @property {MainLoop} mainLoop - itowns mainloop scheduling the operations
  * @property {THREE.Scene} scene - threejs scene of the view
@@ -136,10 +139,10 @@ class View extends THREE.EventDispatcher {
    * var view = itowns.View('EPSG:4326', viewerDiv, { camera: { type: itowns.CAMERA_TYPE.ORTHOGRAPHIC } });
    * var customControls = itowns.THREE.OrbitControls(view.camera3D, viewerDiv);
    *
-   * @param {string} crs - The default CRS of Three.js coordinates. Should be a cartesian CRS.
+   * @param {String} crs - The default CRS of Three.js coordinates. Should be a cartesian CRS.
    * @param {HTMLElement} viewerDiv - Where to instanciate the Three.js scene in the DOM
    * @param {Object} [options] - Optional properties.
-   * @param {object} [options.camera] - Options for the camera associated to the view. See {@link Camera} options.
+   * @param {Object} [options.camera] - Options for the camera associated to the view. See {@link Camera} options.
    * @param {MainLoop} [options.mainLoop] - {@link MainLoop} instance to use, otherwise a default one will be constructed
    * @param {WebGLRenderer|Object} [options.renderer] - {@link WebGLRenderer} instance to use, otherwise
    * a default one will be constructed. In this case, if options.renderer is an object, it will be used to
@@ -159,6 +162,7 @@ class View extends THREE.EventDispatcher {
     }
     super();
     this.domElement = viewerDiv;
+    this.id = id++;
     this.referenceCrs = crs;
     let engine;
     // options.renderer can be 2 separate things:
@@ -272,8 +276,6 @@ class View extends THREE.EventDispatcher {
     }
     // remove alls frameRequester
     this.removeAllFrameRequesters();
-    // remove alls events
-    this.removeAllEvents();
     // remove all layers
     const layers = this.getLayers(l => !l.isTiledGeometryLayer && !l.isAtmosphere);
     for (const layer of layers) {
@@ -290,6 +292,11 @@ class View extends THREE.EventDispatcher {
     viewers.splice(id, 1);
     // Remove remaining objects in the scene (e.g. helpers, debug, etc.)
     this.scene.traverse(ObjectRemovalHelper.cleanup);
+    this.dispatchEvent({
+      type: VIEW_EVENTS.DISPOSED
+    });
+    // remove alls events
+    this.removeAllEvents();
   }
 
   /**

package/lib/Layer/OGC3DTilesLayer.js

@@ -6,19 +6,20 @@ import { DRACOLoader } from "../ThreeExtended/loaders/DRACOLoader.js";
 import { KTX2Loader } from "../ThreeExtended/loaders/KTX2Loader.js";
 import ReferLayerProperties from "./ReferencingLayerProperties.js";
 import PointsMaterial, { PNTS_MODE, PNTS_SHAPE, PNTS_SIZE_MODE, ClassificationScheme } from "../Renderer/PointsMaterial.js";
+import { VIEW_EVENTS } from "../Core/View.js";
 const _raycaster = new THREE.Raycaster();
 
+// Stores lruCache, downloadQueue and parseQueue for each id of view {@link View}
+// every time a tileset has been added
+// https://github.com/iTowns/itowns/issues/2426
+const viewers = {};
+
 // Internal instance of GLTFLoader, passed to 3d-tiles-renderer-js to support GLTF 1.0 and 2.0
 // Temporary exported to be used in deprecated B3dmParser
 export const itownsGLTFLoader = new iGLTFLoader();
 itownsGLTFLoader.register(() => new GLTFMeshFeaturesExtension());
 itownsGLTFLoader.register(() => new GLTFStructuralMetadataExtension());
 itownsGLTFLoader.register(() => new GLTFCesiumRTCExtension());
-
-// Instantiated by the first tileset. Used to share cache and download and parse queues between tilesets
-let lruCache = null;
-let downloadQueue = null;
-let parseQueue = null;
 export const OGC3DTILES_LAYER_EVENTS = {
   /**
    * Fired when a new root or child tile set is loaded
@@ -152,8 +153,6 @@ class OGC3DTilesLayer extends GeometryLayer {
     }
     this.tilesRenderer.registerPlugin(new ImplicitTilingPlugin());
     this.tilesRenderer.manager.addHandler(/\.gltf$/, itownsGLTFLoader);
-    this._setupCacheAndQueues();
-    this._setupEvents();
     this.object3d.add(this.tilesRenderer.group);
 
     // Add an initialization step that is resolved when the root tileset is loaded (see this._setup below), meaning
@@ -193,24 +192,26 @@ class OGC3DTilesLayer extends GeometryLayer {
   }
 
   /**
-   * Sets the lruCache and download and parse queues so they are shared amongst all tilesets.
+   * Sets the lruCache and download and parse queues so they are shared amongst
+   * all tilesets from a same {@link View} view.
+   * @param {View} view - view associated to this layer.
    * @private
    */
-  _setupCacheAndQueues() {
-    if (lruCache === null) {
-      lruCache = this.tilesRenderer.lruCache;
-    } else {
-      this.tilesRenderer.lruCache = lruCache;
-    }
-    if (downloadQueue === null) {
-      downloadQueue = this.tilesRenderer.downloadQueue;
+  _setupCacheAndQueues(view) {
+    const id = view.id;
+    if (viewers[id]) {
+      this.tilesRenderer.lruCache = viewers[id].lruCache;
+      this.tilesRenderer.downloadQueue = viewers[id].downloadQueue;
+      this.tilesRenderer.parseQueue = viewers[id].parseQueue;
     } else {
-      this.tilesRenderer.downloadQueue = downloadQueue;
-    }
-    if (parseQueue === null) {
-      parseQueue = this.tilesRenderer.parseQueue;
-    } else {
-      this.tilesRenderer.parseQueue = parseQueue;
+      viewers[id] = {
+        lruCache: this.tilesRenderer.lruCache,
+        downloadQueue: this.tilesRenderer.downloadQueue,
+        parseQueue: this.tilesRenderer.parseQueue
+      };
+      view.addEventListener(VIEW_EVENTS.DISPOSED, evt => {
+        delete viewers[evt.target.id];
+      });
     }
   }
 
@@ -254,6 +255,9 @@ class OGC3DTilesLayer extends GeometryLayer {
       });
       view.notifyChange(this);
     });
+    this._setupCacheAndQueues(view);
+    this._setupEvents();
+
     // Start loading tileset and tiles
     this.tilesRenderer.update();
   }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "itowns",
-  "version": "2.44.3-next.12",
+  "version": "2.44.3-next.14",
   "description": "A JS/WebGL framework for 3D geospatial data visualization",
   "type": "module",
   "main": "lib/Main.js",