@shapediver/viewer.shared.services 2.10.1-rc.0 → 2.12.0

package/src/converter/Converter.ts

@@ -1,5 +1,5 @@
-import { vec3, vec4 } from 'gl-matrix'
-import { TinyColor } from '@ctrl/tinycolor'
+import { vec3 } from 'gl-matrix';
+import { ColorInput, TinyColor } from '@ctrl/tinycolor';
 import { HttpClient } from '../http-client/HttpClient';
 import { HttpResponse } from '../http-client/HttpResponse';
 
@@ -29,22 +29,22 @@ export class Converter {
             reader.onerror = reject;
             reader.readAsDataURL(blob);
         });
-        data = data.replace('data:image/svg+xml;base64,', '')
+        data = data.replace('data:image/svg+xml;base64,', '');
         data = atob(data);
 
-        let svgC = document.createElement('DIV');
+        const svgC = document.createElement('DIV');
         svgC.id = 'svgc';
         svgC.innerHTML = <string>data;
 
         // now we can access the svg element as a DOM object
-        let svgE = svgC.getElementsByTagName('svg');
-        let childImageURIs: string[] = [];
+        const svgE = svgC.getElementsByTagName('svg');
+        const childImageURIs: string[] = [];
         let styleURIs: string[] = [];
 
         // collect image urls
         for (let i = 0; i < svgE.length; ++i) {
             for (let j = 0; j < 2; ++j) {
-                let childImages = <HTMLCollectionOf<SVGImageElement>>svgE[i].getElementsByTagName(['image', 'img'][j]);
+                const childImages = <HTMLCollectionOf<SVGImageElement>>svgE[i].getElementsByTagName(['image', 'img'][j]);
                 for (let k = 0; k < childImages.length; ++k) {
                     if (childImages[k].href.baseVal.substring(0, 5) != 'data:') {
                         childImageURIs.push(childImages[k].href.baseVal);
@@ -54,9 +54,9 @@ export class Converter {
             // collect potential font definitions
             // we assume styles are imported using the following syntax:
             // @import url(CSS_URL);
-            let styleElements = <HTMLCollectionOf<HTMLStyleElement>>svgE[i].getElementsByTagName('style');
+            const styleElements = <HTMLCollectionOf<HTMLStyleElement>>svgE[i].getElementsByTagName('style');
             for (let j = 0; j < styleElements.length; ++j) {
-                let regex = /@import\x20url\(\s*(.*?)\s*\);/g;
+                const regex = /@import\x20url\(\s*(.*?)\s*\);/g;
                 let m;
                 while ((m = regex.exec(styleElements[j].innerHTML)) !== null) {
                     styleURIs.push(m[1]);
@@ -71,17 +71,18 @@ export class Converter {
         }
 
         // creating a promise for each image which needs to be converted to a data URI
-        let replacementPromises = [];
-        let createImagePromise = async (uri: string) => {
+        const replacementPromises = [];
+        const createImagePromise = async (uri: string) => {
             if (uri.length > 0) {
-                const response = await this._httpClient.loadTexture(uri);
-                let uInt8Array = new Uint8Array(response.data), i = uInt8Array.length;
-                let biStr = []; //new Array(i);
+                const response = await this._httpClient.get(uri, undefined, true) as HttpResponse<ArrayBuffer>;
+                const uInt8Array = new Uint8Array(response.data as ArrayBuffer);
+                let i = uInt8Array.length;
+                const biStr = []; //new Array(i);
                 while (i--)
                     biStr[i] = String.fromCharCode(uInt8Array[i]);
 
-                let base64Data = window.btoa(biStr.join(''));
-                let imgDataUrl = 'data:' + response.headers['content-type'] + ';base64,' + base64Data;
+                const base64Data = window.btoa(biStr.join(''));
+                const imgDataUrl = 'data:' + response.headers['content-type'] + ';base64,' + base64Data;
 
                 // replace url in SVG string
                 // CAUTION theoretically this could cause unwanted replacements
@@ -93,34 +94,35 @@ export class Converter {
             replacementPromises.push(createImagePromise(childImageURIs[i]));
 
         // now we create promises for the google fonts to be imported
-        let createStylePromise = async (styleUrl: string) => {
+        const createStylePromise = async (styleUrl: string) => {
             const response = await this._httpClient.get(
                 styleUrl,
                 { responseType: 'text' }
-            );
-            let cssString = response.data;
+            ) as HttpResponse<ArrayBuffer>;
+            let cssString = response.data as unknown as string;
             // we assume that fonts are imported using the following syntax:
             // url(FONT_URI);
-            let fontURLs = [];
-            let regex = /url\(\s*(.*?)\s*\)/g;
+            const fontURLs = [];
+            const regex = /url\(\s*(.*?)\s*\)/g;
             let m;
             while ((m = regex.exec(cssString)) !== null) {
                 fontURLs.push(m[1]);
             }
 
-            let fontPromises = [];
-            let createFontPromise = async (fUrl: string) => {
+            const fontPromises = [];
+            const createFontPromise = async (fUrl: string) => {
                 const response = await this._httpClient.get(
                     fUrl,
                     { responseType: 'arraybuffer' }
-                );
-                let uInt8Array = new Uint8Array(response.data), i = uInt8Array.length;
-                let biStr = []; //new Array(i);
+                ) as HttpResponse<ArrayBuffer>;
+                const uInt8Array = new Uint8Array(response.data as ArrayBuffer);
+                let i = uInt8Array.length;
+                const biStr = []; //new Array(i);
                 while (i--)
                     biStr[i] = String.fromCharCode(uInt8Array[i]);
 
-                let base64Data = window.btoa(biStr.join(''));
-                let fontDataUrl = 'data:' + response.headers['content-type'] + ';base64,' + base64Data;
+                const base64Data = window.btoa(biStr.join(''));
+                const fontDataUrl = 'data:' + response.headers['content-type'] + ';base64,' + base64Data;
                 if (fUrl.length > 0)
                     cssString = cssString.replace(fUrl, fontDataUrl);
             };
@@ -137,21 +139,22 @@ export class Converter {
 
         await Promise.all(replacementPromises);
 
-        let du = 'data:image/svg+xml,' + encodeURIComponent(data);
-        let img = new Image(); // same as document.createElement('img')
+        const du = 'data:image/svg+xml,' + encodeURIComponent(data);
+        const img = new Image(); // same as document.createElement('img')
         img.crossOrigin = 'Anonymous';
         const promise = new Promise<void>((resolve, reject) => {
             img.onload = () => resolve();
             img.onerror = reject;
-        })
+        });
         img.src = du;
         await promise;
         return img;
     }
 
-    public async responseToImage(response: HttpResponse<ArrayBuffer>): Promise<HTMLImageElement> {
-        const arrayBufferView = new Uint8Array( response.data );
-        const blob = new Blob([ arrayBufferView ], { type: response.headers['content-type'] } );
+    public async responseToImage(response: HttpResponse<ArrayBuffer | HTMLImageElement>, blob: Blob): Promise<HTMLImageElement> {
+        // if we already receive and image, this conversion already happened
+        if(response.data instanceof HTMLImageElement) return response.data;
+        
         if (response.headers['content-type'] === 'image/svg+xml') {
             const img = await this.processSVG(blob);
             return img;
@@ -160,8 +163,8 @@ export class Converter {
             const promise = new Promise<void>((resolve, reject) => {
                 img.onload = () => resolve();
                 img.onerror = reject;
-            })
-            img.crossOrigin = "anonymous";
+            });
+            img.crossOrigin = 'anonymous';
             img.src = URL.createObjectURL(blob);
             await promise;
             URL.revokeObjectURL(img.src);
@@ -169,17 +172,17 @@ export class Converter {
         }
     }
 
-    public toAlpha(color: any): number {
+    public toAlpha(color: unknown): number {
         const c = this.toHexColor(color);
         if (c.length <= 8) return 1;
         return parseInt(c.slice(c.length - 2, c.length), 16) / 255;
     }
 
-    public toColorArray(color: any): number[] {
-        if(typeof color !== 'string' || !color.startsWith("#"))
+    public toColorArray(color: unknown): number[] {
+        if(typeof color !== 'string' || !color.startsWith('#'))
             color = this.toHexColor(color);
-        const tColor = new TinyColor(color);
-        const rgb = tColor.toRgb()
+        const tColor = new TinyColor(color as ColorInput | undefined);
+        const rgb = tColor.toRgb();
         return [rgb.r / 255.0, rgb.g / 255.0, rgb.b / 255.0];
     }
 
@@ -187,7 +190,7 @@ export class Converter {
      * @param color 
      * @param defColor 
      */
-    public toHex8Color(color: any, defColorString: string = '#000'): string {
+    public toHex8Color(color: unknown, defColorString: string = '#000'): string {
         const c = this.toHexColor(color, defColorString);
         const tColor = new TinyColor(c);
         const cH8 = tColor.toHex8String();
@@ -201,13 +204,13 @@ export class Converter {
      * @param color 
      * @param defColor 
      */
-    public toHexColor(color: any, defColorString: string = '#000'): string {
+    public toHexColor(color: unknown, defColorString: string = '#000'): string {
         if (!color || color === 'default') return defColorString;
 
-        if (color.constructor === Float32Array)
-            color = Array.from(color);
+        if ((color as Float32Array).constructor === Float32Array)
+            color = Array.from(color as Float32Array);
 
-        const tColor = new TinyColor(color);
+        const tColor = new TinyColor(color as TinyColor | undefined);
 
         if (color instanceof TinyColor)
             return this.tinyColorToString(tColor);
@@ -215,17 +218,17 @@ export class Converter {
         // check if we got a number
         if (typeof color === 'number') {
             let cs = color.toString(16);
-            let cl = cs.length;
+            const cl = cs.length;
             if (cl < 3) cs = cs.padStart(3, '0');
             else if (cl < 6) cs = cs.padStart(6, '0');
             else if (cl < 8) cs = cs.padEnd(8, '0');
-            let tc = new TinyColor(cs);
+            const tc = new TinyColor(cs);
             return tc.isValid ? this.tinyColorToString(tc) : defColorString;
         }
 
         // check if the input is a THREE.Color
-        if (color.isColor && typeof color.getHexString == 'function') {
-            let tc = new TinyColor(color.getHexString());
+        if ((color as THREE.Color).isColor && typeof (color as THREE.Color).getHexString == 'function') {
+            const tc = new TinyColor((color as THREE.Color).getHexString());
             return tc.isValid ? this.tinyColorToString(tc) : defColorString;
         }
 
@@ -241,13 +244,13 @@ export class Converter {
             if (!isRGBArray)
                 return defColorString;
 
-            let tc = new TinyColor({
+            const tc = new TinyColor({
                 r: Math.max(0, Math.min(color[0], 255)),
                 g: Math.max(0, Math.min(color[1], 255)),
                 b: Math.max(0, Math.min(color[2], 255))
             });
             if (color.length == 4) {
-                let a = parseFloat(color[3]);
+                const a = parseFloat(color[3]);
                 if (!isNaN(a)) {
                     tc.setAlpha(Math.max(0, Math.min(a, 255)) / 255);
                 }
@@ -258,50 +261,52 @@ export class Converter {
         // if we got something other than a string, check if
         // tinycolor can work with it
         if (typeof color !== 'string') {
-            let tc = new TinyColor(color);
+            const tc = new TinyColor(color as string);
             return tc.isValid ? this.tinyColorToString(tc) : defColorString;
         }
 
         // tinycolor doesn't like 0x
-        let tmpColor = color.replace('0x', '#');
+        const tmpColor = color.replace('0x', '#');
 
         // if we got no alpha value, add full opacity
         if (tmpColor.match(/^#[a-f0-9]{6}$/i) !== null) {
-            let tc = new TinyColor(tmpColor + 'ff');
+            const tc = new TinyColor(tmpColor + 'ff');
             return tc.isValid ? this.tinyColorToString(tc) : defColorString;
         }
 
         // standard case
         if (tmpColor.match(/^#[a-f0-9]{8}$/i) !== null) {
-            let tc = new TinyColor(tmpColor);
+            const tc = new TinyColor(tmpColor);
             return tc.isValid ? this.tinyColorToString(tc) : defColorString;
         }
 
         // correct number which have the alpha value defined as a single hex digit
         if (tmpColor.match(/^#[a-f0-9]{7}$/i) !== null) {
-            let tc = new TinyColor(tmpColor.slice(0, 7) + '0' + tmpColor.slice(-1));
+            const tc = new TinyColor(tmpColor.slice(0, 7) + '0' + tmpColor.slice(-1));
             return tc.isValid ? this.tinyColorToString(tc) : defColorString;
         }
 
         // check if tinycolor understands the string
-        let tc = new TinyColor(tmpColor);
+        const tc = new TinyColor(tmpColor);
         return tc.isValid ? this.tinyColorToString(tc) : defColorString;
     }
 
-    public toThreeJsColorInput(color: any): string {
+    public toThreeJsColorInput(color: unknown): string {
         const c = this.toHexColor(color);
         return c.slice(0, c.length - 2);
     }
 
-    public toVec3(point: any): vec3 {
+    public toVec3(point: vec3 | { x: number, y: number, z: number} | { X: number, Y: number, Z: number}): vec3 {
         if (Array.isArray(point) && point.length >= 3 && typeof point[0] === 'number' && typeof point[1] === 'number' && typeof point[2] === 'number')
             return vec3.fromValues(point[0], point[1], point[2]);
 
-        if (((point.x || point.x === 0) && typeof point.x === 'number') && ((point.y || point.y === 0) && typeof point.y === 'number') && ((point.z || point.z === 0) && typeof point.z === 'number'))
-            return vec3.fromValues(point.x, point.y, point.z);
+        const pointCast1 = point as { x: number, y: number, z: number};
+        if (((pointCast1.x || pointCast1.x === 0) && typeof pointCast1.x === 'number') && ((pointCast1.y || pointCast1.y === 0) && typeof pointCast1.y === 'number') && ((pointCast1.z || pointCast1.z === 0) && typeof pointCast1.z === 'number'))
+            return vec3.fromValues(pointCast1.x, pointCast1.y, pointCast1.z);
 
-        if (((point.X || point.X === 0) && typeof point.X === 'number') && ((point.Y || point.Y === 0) && typeof point.Y === 'number') && ((point.Z || point.Z === 0) && typeof point.Z === 'number'))
-            return vec3.fromValues(point.X, point.Y, point.Z);
+        const pointCast2 = point as { X: number, Y: number, Z: number};
+        if (((pointCast2.X || pointCast2.X === 0) && typeof pointCast2.X === 'number') && ((pointCast2.Y || pointCast2.Y === 0) && typeof pointCast2.Y === 'number') && ((pointCast2.Z || pointCast2.Z === 0) && typeof pointCast2.Z === 'number'))
+            return vec3.fromValues(pointCast2.X, pointCast2.Y, pointCast2.Z);
 
         return vec3.create();
     }

package/src/event-engine/EventTypes.ts

@@ -9,7 +9,8 @@ export enum EVENTTYPE_RENDERING {
 }
 
 export enum EVENTTYPE_SCENE {
-    SCENE_BOUNDING_BOX_CHANGE = "scene.boundingBoxChange"
+    SCENE_BOUNDING_BOX_CHANGE = "scene.boundingBoxChange",
+    SCENE_BOUNDING_BOX_EMPTY = "scene.boundingBoxEmpty"
 }
 
 // VIEWPORT
@@ -39,6 +40,10 @@ export enum EVENTTYPE_SESSION {
     SESSION_INITIAL_OUTPUTS_LOADED = 'session.initialOutputsLoaded'
 }
 
+export enum EVENTTYPE_OUTPUT {
+    OUTPUT_UPDATED = "output.updated"
+}
+
 export enum EVENTTYPE_TASK {
     TASK_START = "task.start",
     TASK_PROCESS = "task.process",
@@ -58,6 +63,7 @@ export enum EVENTTYPE_INTERACTION {
 
 export const EVENTTYPE = { 
     CAMERA: EVENTTYPE_CAMERA, 
+    OUTPUT: EVENTTYPE_OUTPUT,
     RENDERING: EVENTTYPE_RENDERING, 
     SCENE: EVENTTYPE_SCENE, 
     SESSION: EVENTTYPE_SESSION,
@@ -66,4 +72,4 @@ export const EVENTTYPE = {
     TASK: EVENTTYPE_TASK
 };
 
-export type MainEventTypes = typeof EVENTTYPE_CAMERA | typeof EVENTTYPE_RENDERING | typeof EVENTTYPE_SCENE | typeof EVENTTYPE_SESSION | typeof EVENTTYPE_VIEWPORT | typeof EVENTTYPE_INTERACTION | typeof EVENTTYPE_TASK;
+export type MainEventTypes = typeof EVENTTYPE_CAMERA | typeof EVENTTYPE_OUTPUT | typeof EVENTTYPE_RENDERING | typeof EVENTTYPE_SCENE | typeof EVENTTYPE_SESSION | typeof EVENTTYPE_VIEWPORT | typeof EVENTTYPE_INTERACTION | typeof EVENTTYPE_TASK;

package/src/http-client/HttpClient.ts

@@ -1,13 +1,24 @@
-import axios, { AxiosRequestConfig } from 'axios'
-import { ShapeDiverError as ShapeDiverBackendError, isGBResponseError, isGBRequestError, isGBError } from '@shapediver/sdk.geometry-api-sdk-v2'
+import axios, { AxiosRequestConfig } from 'axios';
+import { ShapeDiverError as ShapeDiverBackendError, isGBResponseError, isGBRequestError, isGBError } from '@shapediver/sdk.geometry-api-sdk-v2';
 import { ShapeDiverGeometryBackendError, ShapeDiverGeometryBackendRequestError, ShapeDiverGeometryBackendResponseError } from '../logger/ShapeDiverBackendErrors';
 import { HttpResponse } from './HttpResponse';
+import { Converter } from '../converter/Converter';
 
 export class HttpClient {
-    // #region Properties (2)
-
+    // #region Properties (7)
     private static _instance: HttpClient;
 
+    private _dataCache: Map<
+        string,
+        {
+            value: Promise<HttpResponse<unknown>>,
+            timestamp: number,
+            resolved: boolean,
+            size?: number
+        }> = new Map();
+    private _enableCaching: boolean = true;
+    private _excludedQueryParameters: string[] = ['Expires', 'Signature', 'Key-Pair-Id'];
+    private _maxCacheSize: number = 1024 * 1024 * 32;
     private _sessionLoading: {
         [key: string]: {
             getAsset: (url: string) => Promise<[ArrayBuffer, string, string]>,
@@ -15,10 +26,11 @@ export class HttpClient {
         }
     } = {};
 
-    // #endregion Properties (2)
+    // #endregion Properties (7)
 
     // #region Constructors (1)
 
+    // eslint-disable-next-line @typescript-eslint/no-empty-function
     private constructor() { }
 
     // #endregion Constructors (1)
@@ -31,8 +43,44 @@ export class HttpClient {
 
     // #endregion Public Static Accessors (1)
 
+    // #region Public Accessors (6)
+
+    public get enableCaching(): boolean {
+        return this._enableCaching;
+    }
+
+    public set enableCaching(value: boolean) {
+        this._enableCaching = value;
+        if (this._enableCaching === false)
+            this._dataCache.clear();
+    }
+
+    public get excludedQueryParameters(): string[] {
+        return this._excludedQueryParameters;
+    }
+
+    public set excludedQueryParameters(value: string[]) {
+        this._excludedQueryParameters = value;
+    }
+
+    public get maxCacheSize(): number {
+        return this._maxCacheSize;
+    }
+
+    public set maxCacheSize(value: number) {
+        this._maxCacheSize = value;
+    }
+
+    // #endregion Public Accessors (6)
+
     // #region Public Methods (5)
 
+    /**
+     * Add the data loading options from a session.
+     * 
+     * @param sessionId 
+     * @param callbacks 
+     */
     public addDataLoading(sessionId: string, callbacks: {
         getAsset: (url: string) => Promise<[ArrayBuffer, string, string]>,
         downloadTexture: (sessionId: string, url: string) => Promise<[ArrayBuffer, string]>,
@@ -53,13 +101,30 @@ export class HttpClient {
         if (isGBResponseError(e)) {
             throw new ShapeDiverGeometryBackendResponseError(e.message, e.status, e.error, e.desc);
         } else if (isGBRequestError(e)) {
-            throw new ShapeDiverGeometryBackendRequestError(e.message, e.desc)
-        } else if(isGBError(e)) {
-            throw new ShapeDiverGeometryBackendError(e.message)
+            throw new ShapeDiverGeometryBackendRequestError(e.message, e.desc);
+        } else if (isGBError(e)) {
+            throw new ShapeDiverGeometryBackendError(e.message);
         }
     }
 
-    public async get(href: string, config: AxiosRequestConfig = { responseType: 'arraybuffer' }, textureLoading: boolean = false): Promise<HttpResponse<any>> {
+    /**
+     * Get the requested resource either as a download or from the cache.
+     * If available, the registered session loading is used for download.
+     * Textures are downloaded via a specific endpoint and can be converted in this step as well.
+     * Depending on the provided caching options, the requested resource might already be cached.
+     * 
+     * @param href 
+     * @param config 
+     * @param textureLoading 
+     * @param textureConversion 
+     * @returns 
+     */
+    public async get(href: string, config: AxiosRequestConfig = { responseType: 'arraybuffer' }, textureLoading: boolean = false): Promise<HttpResponse<unknown>> {        
+        const dataKey = this.hrefToDataKey(href);
+
+        // return element if it exists in cache
+        if (this._dataCache.has(dataKey)) return this.getFromCache(dataKey);
+
         // try to get sessionId from href
         let sessionId = this.getSessionId(href);
 
@@ -75,35 +140,40 @@ export class HttpClient {
         if (sessionId)
             sessionLoading = this._sessionLoading[sessionId];
 
+        let loadingPromise;
+
         // separation texture vs everything else
         if (textureLoading) {
             // if we have a sessionId and the sessionLoading functions and the image is not a blob or data, we load it via the sdk
             if (sessionLoading !== undefined && sessionId !== undefined && !href.startsWith('blob:') && !href.startsWith('data:')) {
                 // take first session to load a texture that is not session related
-                return new Promise<HttpResponse<any>>((resolve, reject) => {
-                    sessionLoading!.downloadTexture(sessionId!, href).then((result) => {
+                loadingPromise = new Promise<HttpResponse<ArrayBuffer>>((resolve, reject) => {
+                    sessionLoading!.downloadTexture(sessionId!, href).then(async (result) => {
                         resolve({
                             data: result[0],
                             headers: {
                                 'content-type': result[1]
                             }
-                        })
-                    }).catch(e => reject(e))
-                }).catch(e => { throw this.convertError(e) });
+                        });
+                    }).catch(e => reject(e));
+                }).catch(e => { throw this.convertError(e); });
             } else {
                 // we can load blobs and data urls directly
                 // or load it directly if we don't have a session
-                return axios(href, Object.assign({ method: 'get' }, config))
-                    .catch(e => { throw this.convertError(e) });
+                loadingPromise = axios(href, Object.assign({ method: 'get' }, config))
+                    .then(async (result) => {
+                        return result;
+                    })
+                    .catch(e => { throw this.convertError(e); });
             }
         } else {
             if (!sessionLoading) {
                 // if there is no session to load from, we use the fallback option
-                return axios(href, Object.assign({ method: 'get' }, config))
-                    .catch(e => { throw this.convertError(e) });
+                loadingPromise = axios(href, Object.assign({ method: 'get' }, config))
+                    .catch(e => { throw this.convertError(e); });
             } else {
                 // all data links where we could somehow find a session to load it with
-                return new Promise<HttpResponse<ArrayBuffer>>((resolve, reject) => {
+                loadingPromise = new Promise<HttpResponse<ArrayBuffer>>((resolve, reject) => {
                     sessionLoading!.getAsset(href)
                         .then((result) => {
                             resolve({
@@ -111,31 +181,115 @@ export class HttpClient {
                                 headers: {
                                     'content-type': result[1]
                                 }
-                            })
+                            });
                         })
                         .catch(() => {
                             // if this fails, we just load it directly
                             const axiosPromise = axios(href, Object.assign({ method: 'get' }, config));
-                            axiosPromise.catch(e => reject(e))
+                            axiosPromise.catch(e => reject(e));
                             resolve(axiosPromise);
                         });
-                }).catch(e => { throw this.convertError(e) });
+                }).catch(e => { throw this.convertError(e); });
             }
         }
+
+        if (this.enableCaching)
+            this.addToCache(dataKey, loadingPromise);
+
+        return loadingPromise;
     }
 
-    public async loadTexture(href: string): Promise<HttpResponse<ArrayBuffer>> {
-        return this.get(href, undefined, true);
+    /**
+     * Get the requested texture either as a download or from the cache.
+     * 
+     * @param href 
+     * @returns 
+     */
+    public async loadTexture(href: string): Promise<HttpResponse<{ image: HTMLImageElement, blob: Blob }>> {
+        const response = await (this.get(href, undefined, true) as Promise<HttpResponse<ArrayBuffer>>);
+        const arrayBufferView = new Uint8Array( response.data );
+        const blob = new Blob([ arrayBufferView ], { type: response.headers['content-type'] } );
+        const image = await Converter.instance.responseToImage(response, blob);
+        return {
+            data: {
+                image,
+                blob
+            },
+            size: response.data.byteLength,
+            headers: response.headers
+        };
     }
 
+    /**
+     * Add the data loading options from a session.
+     * 
+     * @param sessionId 
+     */
     public removeDataLoading(sessionId: string) {
         delete this._sessionLoading[sessionId];
     }
 
     // #endregion Public Methods (5)
 
-    // #region Private Methods (1)
+    // #region Private Methods (5)
+
+    /**
+     * Add 
+     * 
+     * @param key 
+     * @param value 
+     */
+    private addToCache(key: string, value: Promise<HttpResponse<unknown>>) {
+        // Remove items from the cache until the cache size is smaller than the maximum cache size.
+        // Only resolved promises are evaluated, as unresolved promises don't add any size.
+        while (this.calculateCacheSize() >= this._maxCacheSize) {
+            // Remove the oldest entry if the cache is full
+            const oldestKey = this._dataCache.keys().next().value;
+            this._dataCache.delete(oldestKey);
+        }
+
+        const timestamp = Date.now();
+        this._dataCache.set(key, { value, timestamp, resolved: false });
+
+        // once the promise resolves, set resolved and size properties
+        value.then((promiseResult) => {
+            const size = promiseResult.size ? promiseResult.size : (promiseResult.data as ArrayBuffer).byteLength;
+            this._dataCache.set(key, { value, timestamp, resolved: true, size });
+        }).catch(e => { throw this.convertError(e); });
+    }
+
+    /**
+     * Calculate the current cache size from all resolved promises.
+     * 
+     * @returns 
+     */
+    private calculateCacheSize() {
+        let size = 0;
+        this._dataCache.forEach(value => {
+            if (value.resolved === true)
+                size += value.size!;
+        });
+        return size;
+    }
+
+    /**
+     * Get the value of an object from the cache.
+     * 
+     * @param key 
+     * @returns 
+     */
+    private getFromCache(key: string): Promise<HttpResponse<unknown>> {
+        const cachedObject = this._dataCache.get(key)!;
+        this._dataCache.set(key, { value: cachedObject.value, timestamp: Date.now(), resolved: cachedObject.resolved, size: cachedObject.size });
+        return cachedObject.value;
+    }
 
+    /**
+     * Get the session id of the provided href.
+     * 
+     * @param href 
+     * @returns 
+     */
     private getSessionId(href: string): string | undefined {
         // searching for "/session/SESSION_ID/{'output' | 'export' | 'texture'}/ASSET_DATA"
         const parts = href.split('/');
@@ -151,5 +305,29 @@ export class HttpClient {
         return;
     }
 
-    // #endregion Private Methods (1)
+    /**
+     * Convert the provided href to a data cache key.
+     * In this conversion the excludedQueryParameters are removed from the href.
+     * 
+     * @param href 
+     * @returns 
+     */
+    private hrefToDataKey(href: string) {
+        const url = new URL(href);
+
+        // Create a URLSearchParams object from the existing query parameters
+        const params = new URLSearchParams(url.search);
+
+        for (let i = 0; i < this._excludedQueryParameters.length; i++)
+            // Remove specific query parameters
+            params.delete(this._excludedQueryParameters[i]);
+
+        // Reconstruct the URL with the modified query parameters
+        url.search = params.toString();
+
+        const hrefAsKey = url.toString();
+        return window.btoa(hrefAsKey);
+    }
+
+    // #endregion Private Methods (5)
 }