itowns 2.44.3-next.35 → 2.44.3-next.36

package/lib/Core/MainLoop.js

@@ -42,7 +42,6 @@ function updateElements(context, geometryLayer, elements) {
         for (const attachedLayer of geometryLayer.attachedLayers) {
           if (attachedLayer.ready) {
             attachedLayer.update(context, attachedLayer, sub.element, sub.parent);
-            attachedLayer.cache.flush();
           }
         }
       } else if (sub.elements) {
@@ -56,7 +55,6 @@ function updateElements(context, geometryLayer, elements) {
           for (const attachedLayer of geometryLayer.attachedLayers) {
             if (attachedLayer.ready) {
               attachedLayer.update(context, attachedLayer, sub.elements[i], sub.parent);
-              attachedLayer.cache.flush();
             }
           }
         }
@@ -140,7 +138,7 @@ class MainLoop extends EventDispatcher {
         }
 
         // Clear the cache of expired resources
-        geometryLayer.cache.flush();
+
         view.execFrameRequesters(MAIN_LOOP_EVENTS.AFTER_LAYER_UPDATE, dt, this.#updateLoopRestarted, geometryLayer);
       }
     }

package/lib/Core/Prefab/TileBuilder.js

@@ -1,10 +1,12 @@
 import * as THREE from 'three';
 import { TileGeometry } from "../TileGeometry.js";
-import Cache from "../Scheduler/Cache.js";
+import { LRUCache } from 'lru-cache';
 import { computeBuffers } from "./computeBufferTileGeometry.js";
 import OBB from "../../Renderer/OBB.js";
 const cacheBuffer = new Map();
-const cacheTile = new Cache();
+const cacheTile = new LRUCache({
+  max: 500
+});
 
 /**
  * Reference to a tile's extent with rigid transformations.
@@ -19,7 +21,8 @@ export function newTileGeometry(builder, params) {
   } = builder.computeShareableExtent(params.extent);
   const south = shareableExtent.south.toFixed(6);
   const bufferKey = `${builder.crs}_${params.disableSkirt ? 0 : 1}_${params.segments}`;
-  let promiseGeometry = cacheTile.get(south, params.level, bufferKey);
+  const key = `s${south}l${params.level}bK${bufferKey}`;
+  let promiseGeometry = cacheTile.get(key);
 
   // build geometry if doesn't exist
   if (!promiseGeometry) {
@@ -27,7 +30,7 @@ export function newTileGeometry(builder, params) {
     promiseGeometry = new Promise(r => {
       resolve = r;
     });
-    cacheTile.set(promiseGeometry, south, params.level, bufferKey);
+    cacheTile.set(key, promiseGeometry);
     params.extent = shareableExtent;
     params.center = builder.center(params.extent).clone();
     // Read previously cached values (index and uv.wgs84 only
@@ -63,7 +66,7 @@ export function newTileGeometry(builder, params) {
     };
     const geometry = new TileGeometry(builder, params, gpuBuffers);
     geometry.OBB = new OBB(geometry.boundingBox.min, geometry.boundingBox.max);
-    geometry.initRefCount(cacheTile, [south, params.level, bufferKey]);
+    geometry.initRefCount(cacheTile, key);
     resolve(geometry);
     return Promise.resolve({
       geometry,

package/lib/Core/Scheduler/Cache.js

@@ -1,5 +1,3 @@
-let entry;
-
 /**
  * Cache policies for flushing. Those policies can be used when something is
  * [set]{@link Cache.set} into the Cache, as the lifetime property.
@@ -16,241 +14,4 @@ export const CACHE_POLICIES = {
   INFINITE: Infinity,
   TEXTURE: 900000,
   GEOMETRY: 900000
-};
-
-/**
- * This is a copy of the Map object, except that it also store a value for last
- * time used. This value is used for cache expiration mechanism.
- *
- * @example
- * import Cache, { CACHE_POLICIES } from 'Core/Scheduler/Cache';
- *
- * const cache = new Cache(CACHE_POLICIES.TEXTURE)
- * cache.set({ bar: 1 }, 'foo');
- * cache.set({ bar: 32 }, 'foo', 'toto');
- *
- * cache.get('foo');
- *
- * cache.delete('foo');
- *
- * cache.clear();
- *
- * cache.flush();
- */
-class Cache {
-  /**
-   * @param      {number}  [lifetime=CACHE_POLICIES.INFINITE]  The cache expiration time for all values.
-   */
-  constructor() {
-    let lifetime = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : CACHE_POLICIES.INFINITE;
-    this.lifeTime = lifetime;
-    this.lastTimeFlush = Date.now();
-    this.data = new Map();
-  }
-
-  /**
-   * Returns the entry related to the specified key, content in array, from the cache.
-   * The array contents one to three key.
-   * The last time used property of the entry is updated to extend the longevity of the
-   * entry.
-   *
-   * @param {string[]|number[]} keyArray key array ([key0, key1, key3])
-   *
-   * @return {Object}
-   */
-
-  getByArray(keyArray) {
-    return this.get(keyArray[0], keyArray[1], keyArray[2]);
-  }
-
-  /**
-  * Adds or updates an entry with specified keys array ([key0, key1, key3]).
-  * Caution: it overrides any existing entry already set at this/those key/s.
-  *
-  * @param {Object} value to add in cache
-  * @param {string[]|number[]} keyArray key array ([key0, key1, key3])
-  *
-  * @return {Object} the added value
-  */
-  setByArray(value, keyArray) {
-    return this.set(value, keyArray[0], keyArray[1], keyArray[2]);
-  }
-
-  /**
-   * Returns the entry related to the specified key from the cache. The last
-   * time used property of the entry is updated to extend the longevity of the
-   * entry.
-   *
-   * @param {string|number} key1
-   * @param {string|number} [key2]
-   * @param {string|number} [key3]
-   *
-   * @return {Object}
-   */
-  get(key1, key2, key3) {
-    const entry_1 = this.data.get(key1);
-    if (entry_1 == undefined) {
-      return;
-    }
-    if (entry_1.lastTimeUsed != undefined) {
-      entry = entry_1;
-    } else {
-      const entry_2 = entry_1.get(key2);
-      if (entry_2 == undefined) {
-        return;
-      }
-      if (entry_2.lastTimeUsed != undefined) {
-        entry = entry_2;
-      } else {
-        const entry_3 = entry_2.get(key3);
-        if (entry_3 == undefined) {
-          return;
-        }
-        entry = entry_3;
-      }
-    }
-    if (entry.value) {
-      entry.lastTimeUsed = Date.now();
-      return entry.value;
-    }
-  }
-
-  /**
-   * Adds or updates an entry with specified keys (up to 3).
-   * Caution: it overrides any existing entry already set at this/those key/s.
-   *
-   *
-   * @param {Object} value to add in cache
-   * @param {string|number} key1
-   * @param {string|number} [key2]
-   * @param {string|number} [key3]
-   *
-   * @return {Object} the added value
-   */
-  set(value, key1, key2, key3) {
-    entry = {
-      value,
-      lastTimeUsed: Date.now()
-    };
-    if (key2 == undefined) {
-      this.data.set(key1, entry);
-      return value;
-    }
-    if (!this.data.get(key1)) {
-      this.data.set(key1, new Map());
-    }
-    const entry_map = this.data.get(key1);
-    if (key3 == undefined) {
-      entry_map.set(key2, entry);
-      return value;
-    }
-    if (!entry_map.get(key2)) {
-      entry_map.set(key2, new Map());
-    }
-    entry_map.get(key2).set(key3, entry);
-    return value;
-  }
-
-  /**
-   * Deletes the specified entry from the cache.
-   *
-   * @param {string|number} key1
-   * @param {string|number} [key2]
-   * @param {string|number} [key3]
-   */
-  delete(key1, key2, key3) {
-    const entry_1 = this.data.get(key1);
-    if (entry_1 === undefined) {
-      return;
-    }
-    if (entry_1.lastTimeUsed != undefined) {
-      delete this.data.get(key1);
-      this.data.delete(key1);
-    } else {
-      const entry_2 = entry_1.get(key2);
-      if (entry_2 === undefined) {
-        return;
-      }
-      if (entry_2.lastTimeUsed != undefined) {
-        delete entry_1.get(key2);
-        entry_1.delete(key2);
-        if (entry_1.size == 0) {
-          this.data.delete(key1);
-        }
-      } else {
-        const entry_3 = entry_2.get(key3);
-        if (entry_3 === undefined) {
-          return;
-        }
-        delete entry_2.get(key3);
-        entry_2.delete(key3);
-        if (entry_2.size == 0) {
-          entry_1.delete(key2);
-          if (entry_1.size == 0) {
-            this.data.delete(key1);
-          }
-        }
-      }
-    }
-  }
-
-  /**
-   * Removes all entries of the cache.
-   *
-   */
-  clear() {
-    this.data.clear();
-  }
-
-  /**
-   * Flush the cache: entries that have been present for too long since the
-   * last time they were used, are removed from the cache. By default, the
-   * time is the current time, but the interval can be reduced by doing
-   * something like `Cache.flush(Date.now() - reductionTime)`. If you want to
-   * clear the whole cache, use {@link Cache.clear} instead.
-   *
-   * @param {number} [time=Date.now()]
-   */
-  flush() {
-    let time = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : Date.now();
-    if (this.lifeTime == CACHE_POLICIES.INFINITE || this.lifeTime > time - this.lastTimeFlush || !this.data.size) {
-      return;
-    }
-    this.lastTimeFlush = Infinity;
-    this.data.forEach((v1, i) => {
-      if (this.lifeTime < time - v1.lastTimeUsed) {
-        delete this.data.get(i);
-        this.data.delete(i);
-      } else {
-        v1.forEach((v2, j) => {
-          if (this.lifeTime < time - v2.lastTimeUsed) {
-            delete v1.get(j);
-            v1.delete(j);
-          } else {
-            v2.forEach((v3, k) => {
-              if (this.lifeTime < time - v3.lastTimeUsed) {
-                delete v2.get(k);
-                v2.delete(k);
-              } else {
-                // Work for the moment because all flushed caches have 3 key!
-                this.lastTimeFlush = Math.min(this.lastTimeFlush, v3.lastTimeUsed);
-              }
-            });
-            if (!v2.size) {
-              delete v1.get(j);
-              v1.delete(j);
-            }
-          }
-        });
-        if (!v1.size) {
-          delete this.data.get(i);
-          this.data.delete(i);
-        }
-      }
-    });
-    if (this.data.size == 0) {
-      this.lastTimeFlush = Date.now();
-    }
-  }
-}
-export default Cache;
+};

package/lib/Core/Style.js

@@ -1,11 +1,13 @@
-import Cache from "./Scheduler/Cache.js";
+import { LRUCache } from 'lru-cache';
 import Fetcher from "../Provider/Fetcher.js";
 import { Color } from 'three';
 import { deltaE } from "../Renderer/Color.js";
 import Coordinates from "./Geographic/Coordinates.js";
 /* babel-plugin-inline-import './StyleChunk/itowns_stroke_single_before.css' */
 const itowns_stroke_single_before = ".itowns-stroke-single:before {\n    display: var(--text_stroke_display);\n    content: attr(data-before);\n    opacity: 1;\n    position: absolute;\n    -webkit-text-stroke-width: var(--text_stroke_width);\n    -webkit-text-stroke-color: var(--text_stroke_color);\n    left: 0;\n    right: 0;\n    bottom: 0;\n    top: 0;\n    z-index: -1;\n    white-space: inherit;\n    overflow-wrap: inherit;\n    letter-spacing: inherit;\n    text-align: inherit;\n    padding: inherit;\n    font-family: inherit;\n    text-transform: inherit;\n    max-width: inherit;\n    font-size: inherit;\n}\n";
-const cacheStyle = new Cache();
+const cachedImg = new LRUCache({
+  max: 500
+});
 const matrix = document.createElementNS('http://www.w3.org/2000/svg', 'svg').createSVGMatrix();
 const canvas = document.createElement('canvas');
 function baseAltitudeDefault(properties, ctx) {
@@ -37,13 +39,14 @@ export function readExpression(property, ctx) {
   }
   return property;
 }
-async function loadImage(source) {
-  let promise = cacheStyle.get(source, 'null');
+async function loadImage(url) {
+  const imgUrl = url.split('?')[0];
+  let promise = cachedImg.get(imgUrl);
   if (!promise) {
-    promise = Fetcher.texture(source, {
+    promise = Fetcher.texture(url, {
       crossOrigin: 'anonymous'
     });
-    cacheStyle.set(promise, source, 'null');
+    cachedImg.set(imgUrl, promise);
   }
   return (await promise).image;
 }
@@ -64,7 +67,7 @@ function replaceWhitePxl(imgd, color, id) {
   if (!color) {
     return imgd;
   }
-  const imgdColored = cacheStyle.get(id, color);
+  const imgdColored = cachedImg.get(`${id}_${color}`);
   if (!imgdColored) {
     const pix = imgd.data;
     const newColor = new Color(color);
@@ -75,7 +78,7 @@ function replaceWhitePxl(imgd, color, id) {
       pix[i + 1] = pix[i + 1] * d + newColor.g * 255 * (1 - d);
       pix[i + 2] = pix[i + 2] * d + newColor.b * 255 * (1 - d);
     }
-    cacheStyle.set(imgd, id, color);
+    cachedImg.set(`${id}_${color}`, imgd);
     return imgd;
   }
   return imgdColored;

package/lib/Core/TileGeometry.js

@@ -71,7 +71,7 @@ export class TileGeometry extends THREE.BufferGeometry {
    * @param cacheTile - The [Cache] used to store this geometry.
    * @param keys - The [south, level, epsg] key of this geometry.
    */
-  initRefCount(cacheTile, keys) {
+  initRefCount(cacheTile, key) {
     if (this._refCount !== null) {
       return;
     }
@@ -87,7 +87,7 @@ export class TileGeometry extends THREE.BufferGeometry {
           //  (in THREE.WebGLBindingStates code).
           this.index = null;
           delete this.attributes.uv;
-          cacheTile.delete(...keys);
+          cacheTile.delete(key);
           super.dispose();
           // THREE.BufferGeometry.prototype.dispose.call(this);
         }

package/lib/Layer/Layer.js

@@ -2,7 +2,7 @@ import * as THREE from 'three';
 import { STRATEGY_MIN_NETWORK_TRAFFIC } from "./LayerUpdateStrategy.js";
 import InfoLayer from "./InfoLayer.js";
 import Source from "../Source/Source.js";
-import Cache from "../Core/Scheduler/Cache.js";
+import { LRUCache } from 'lru-cache';
 import Style from "../Core/Style.js";
 
 /**
@@ -195,7 +195,12 @@ class Layer extends THREE.EventDispatcher {
     /**
      * @type {Cache}
      */
-    this.cache = new Cache(cacheLifeTime);
+    this.cache = new LRUCache({
+      max: 500,
+      ...(cacheLifeTime !== Infinity && {
+        ttl: cacheLifeTime
+      })
+    });
     this.mergeFeatures = mergeFeatures;
   }
   addInitializationStep() {
@@ -267,13 +272,13 @@ class Layer extends THREE.EventDispatcher {
     return data;
   }
   getData(from, to) {
-    const key = this.source.requestToKey(this.source.isVectorSource ? to : from);
-    let data = this.cache.getByArray(key);
+    const key = this.source.getDataKey(this.source.isVectorSource ? to : from);
+    let data = this.cache.get(key);
     if (!data) {
       data = this.source.loadData(from, this).then(feat => this.convert(feat, to), err => {
         throw err;
       });
-      this.cache.setByArray(data, key);
+      this.cache.set(key, data);
     }
     return data;
   }

package/lib/Source/FileSource.js

@@ -1,5 +1,5 @@
 import Source from "./Source.js";
-import Cache from "../Core/Scheduler/Cache.js";
+import { LRUCache } from 'lru-cache';
 
 /**
  * An object defining the source of a single resource to get from a direct
@@ -133,8 +133,10 @@ class FileSource extends Source {
         this.fetchedData = f;
       });
     } else if (source.features) {
-      this._featuresCaches[source.features.crs] = new Cache();
-      this._featuresCaches[source.features.crs].setByArray(Promise.resolve(source.features), [0]);
+      this._featuresCaches[source.features.crs] = new LRUCache({
+        max: 500
+      });
+      this._featuresCaches[source.features.crs].set(0, Promise.resolve(source.features));
     }
     this.whenReady.then(() => this.fetchedData);
     this.zoom = {
@@ -148,14 +150,14 @@ class FileSource extends Source {
   onLayerAdded(options) {
     options.in = this;
     super.onLayerAdded(options);
-    let features = this._featuresCaches[options.out.crs].getByArray([0]);
+    let features = this._featuresCaches[options.out.crs].get(0);
     if (!features) {
       options.out.buildExtent = this.crs != 'EPSG:4978';
       if (options.out.buildExtent) {
         options.out.forcedExtentCrs = options.out.crs != 'EPSG:4978' ? options.out.crs : this.crs;
       }
       features = this.parser(this.fetchedData, options);
-      this._featuresCaches[options.out.crs].setByArray(features, [0]);
+      this._featuresCaches[options.out.crs].set(0, features);
     }
     features.then(data => {
       if (data.extent) {
@@ -177,7 +179,7 @@ class FileSource extends Source {
    * @return     {FeatureCollection|Texture}  The parsed data.
    */
   loadData(extent, out) {
-    return this._featuresCaches[out.crs].getByArray([0]);
+    return this._featuresCaches[out.crs].get(0);
   }
   extentInsideLimit(extent) {
     return this.extent.intersectsExtent(extent);

package/lib/Source/OrientedImageSource.js

@@ -41,8 +41,8 @@ class OrientedImageSource extends Source {
   urlFromExtent(imageInfo) {
     return this.imageUrl(imageInfo.cameraId, imageInfo.panoId);
   }
-  requestToKey(image) {
-    return [image.cameraId, image.panoId];
+  getDataKey(image) {
+    return `c${image.cameraId}p${image.panoId}`;
   }
 
   /**

package/lib/Source/Source.js

@@ -8,38 +8,17 @@ import GTXParser from "../Parser/GTXParser.js";
 import ISGParser from "../Parser/ISGParser.js";
 import VectorTileParser from "../Parser/VectorTileParser.js";
 import Fetcher from "../Provider/Fetcher.js";
-import Cache from "../Core/Scheduler/Cache.js";
+// import Cache from 'Core/Scheduler/Cache';
+import { LRUCache } from 'lru-cache';
 
 /** @private */
 export const supportedParsers = new Map([['application/geo+json', GeoJsonParser.parse], ['application/json', GeoJsonParser.parse], ['application/kml', KMLParser.parse], ['application/gpx', GpxParser.parse], ['application/x-protobuf;type=mapbox-vector', VectorTileParser.parse], ['application/gtx', GTXParser.parse], ['application/isg', ISGParser.parse], ['application/gdf', GDFParser.parse]]);
 const noCache = {
-  getByArray: () => {},
-  setByArray: a => a,
+  get: () => {},
+  set: a => a,
   clear: () => {}
 };
 
-/**
- * @property {string} crs - data crs projection.
- * @property {boolean} isInverted - This option is to be set to the
- * correct value, true or false (default being false), if the computation of
- * the coordinates needs to be inverted to same scheme as OSM, Google Maps
- * or other system. See [this link](
- * https://alastaira.wordpress.com/2011/07/06/converting-tms-tile-coordinates-to-googlebingosm-tile-coordinates)
- * for more informations.
- *
- */
-class InformationsData {
-  constructor(options) {
-    if (options.projection) {
-      console.warn('Source projection parameter is deprecated, use crs instead.');
-      options.crs = options.crs || options.projection;
-    }
-    if (options.crs) {
-      CRS.isValid(options.crs);
-    }
-    this.crs = options.crs;
-  }
-}
 /**
  * This interface describes parsing options.
  * @typedef {Object} ParsingOptions
@@ -93,13 +72,20 @@ let uid = 0;
  *  depending on the current fetched tile for example</li>
  * </ul>
  */
-class Source extends InformationsData {
+class Source {
   /**
    * @param {Object} source - An object that can contain all properties of a
    * Source. Only the `url` property is mandatory.
    */
   constructor(source) {
-    super(source);
+    if (source.projection) {
+      console.warn('Source projection parameter is deprecated, use crs instead.');
+      source.crs = source.crs || source.projection;
+    }
+    if (source.crs) {
+      CRS.isValid(source.crs);
+    }
+    this.crs = source.crs;
     this.isSource = true;
     if (!source.url) {
       throw new Error('New Source: url is required');
@@ -141,8 +127,8 @@ class Source extends InformationsData {
   urlFromExtent() {
     throw new Error('In extended Source, you have to implement the method urlFromExtent!');
   }
-  requestToKey(extent) {
-    return [extent.zoom, extent.row, extent.col];
+  getDataKey(extent) {
+    return `z${extent.zoom}r${extent.row}c${extent.col}`;
   }
 
   /**
@@ -155,23 +141,18 @@ class Source extends InformationsData {
    */
   loadData(extent, out) {
     const cache = this._featuresCaches[out.crs];
-    const key = this.requestToKey(extent);
+    const key = this.getDataKey(extent);
+    // console.log('Source.loadData', key);
     // try to get parsed data from cache
-    let features = cache.getByArray(key);
+    let features = cache.get(key);
     if (!features) {
       // otherwise fetch/parse the data
-      features = cache.setByArray(this.fetcher(this.urlFromExtent(extent), this.networkOptions).then(file => this.parser(file, {
+      features = this.fetcher(this.urlFromExtent(extent), this.networkOptions).then(file => this.parser(file, {
         out,
         in: this,
         extent
-      })).catch(err => this.handlingError(err)), key);
-      if (this.onParsedFile) {
-        features.then(feat => {
-          this.onParsedFile(feat);
-          console.warn('Source.onParsedFile was deprecated');
-          return feat;
-        });
-      }
+      })).catch(err => this.handlingError(err));
+      cache.set(key, features);
     }
     return features;
   }
@@ -187,7 +168,9 @@ class Source extends InformationsData {
       // Cache feature only if it's vector data, the feature are cached in source.
       // It's not necessary to cache raster in Source,
       // because it's already cached on layer.
-      this._featuresCaches[options.out.crs] = this.isVectorSource ? new Cache() : noCache;
+      this._featuresCaches[options.out.crs] = this.isVectorSource ? new LRUCache({
+        max: 500
+      }) : noCache;
     }
   }
 

package/lib/Source/VectorTilesSource.js

@@ -164,23 +164,17 @@ class VectorTilesSource extends TMSSource {
   }
   loadData(extent, out) {
     const cache = this._featuresCaches[out.crs];
-    const key = this.requestToKey(extent);
+    const key = this.getDataKey(extent);
     // try to get parsed data from cache
-    let features = cache.getByArray(key);
+    let features = cache.get(key);
     if (!features) {
       // otherwise fetch/parse the data
-      features = cache.setByArray(Promise.all(this.urls.map(url => this.fetcher(this.urlFromExtent(extent, url), this.networkOptions).then(file => this.parser(file, {
+      features = Promise.all(this.urls.map(url => this.fetcher(this.urlFromExtent(extent, url), this.networkOptions).then(file => this.parser(file, {
         out,
         in: this,
         extent
-      })))).then(collections => mergeCollections(collections)).catch(err => this.handlingError(err)), key);
-      if (this.onParsedFile) {
-        features.then(feat => {
-          this.onParsedFile(feat);
-          console.warn('Source.onParsedFile was deprecated');
-          return feat;
-        });
-      }
+      })))).then(collections => mergeCollections(collections)).catch(err => this.handlingError(err));
+      cache.set(key, features);
     }
     return features;
   }

package/lib/Source/WFSSource.js

@@ -152,11 +152,11 @@ class WFSSource extends Source {
     }
     return super.handlingError(err);
   }
-  requestToKey(extent) {
+  getDataKey(extent) {
     if (extent.isTile) {
-      return super.requestToKey(extent);
+      return super.getDataKey(extent);
     } else {
-      return [extent.zoom, extent.south, extent.west];
+      return `z${extent.zoom}s${extent.south}w${extent.west}`;
     }
   }
   urlFromExtent(extentOrTile) {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "itowns",
-  "version": "2.44.3-next.35",
+  "version": "2.44.3-next.36",
   "description": "A JS/WebGL framework for 3D geospatial data visualization",
   "type": "module",
   "main": "lib/Main.js",
@@ -66,6 +66,7 @@
     "copc": "^0.0.6",
     "earcut": "^3.0.0",
     "js-priority-queue": "^0.1.5",
+    "lru-cache": "^11.0.1",
     "pbf": "^4.0.1",
     "shpjs": "^6.1.0",
     "threads": "^1.7.0"