Add IndexedDB property file caching

[atefMck]

Description 📝

The viewer becomes data-intensive due to the repeated requests for property files, which are not cached and must be retrieved anew each time properties need to be accessed.

Suggested solution 💡

In the FragmentsGroup class, which contains the getProperties method that appears to be the primary function for retrieving properties, we could implement a caching system same as the one used for geometries.

Alternative ⛕

import Dexie from "dexie";

interface IStreamedFile {
  id: string;
  file: JSON;
}

export class StreamFileDatabase extends Dexie {
  // Declare implicit table properties.
  // (just to inform Typescript. Instantiated by Dexie in stores() method)
  files!: Dexie.Table<IStreamedFile, string>; // number = type of the primkey

  constructor() {
    super("MyAppDatabase");
    this.version(1).stores({
      files: "id, file",
    });
  }
}

export class FragmentsGroup extends THREE.Group {

private _fileCache = new StreamFileDatabase();

private async getPropertiesData(url: string) {
    const found = await this._fileCache.files.get(url);
    if (found) {
      return found.file;
    } else {
      const fetched = await fetch(url);
      const fileData = await fetched.json();
      this._fileCache.files.add({ id: url, file: fileData.data });
      return fileData && fileData.data ? fileData.data : null;
    }
  }

Additional context ☝️

No response

Validations ✅

• Read the docs.
• Check that there isn't already an issue that requests the same feature to avoid creating a duplicate.