@shapediver/viewer.shared.services 2.7.10 → 2.8.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@shapediver/viewer.shared.services",
-  "version": "2.7.10",
+  "version": "2.8.0",
   "description": "",
   "keywords": [],
   "author": "Michael Oppitz <michael@shapediver.com>",
@@ -40,20 +40,17 @@
   },
   "dependencies": {
     "@ctrl/tinycolor": "^3.4.0",
-    "@sentry/browser": "^6.7.2",
-    "@sentry/tracing": "^6.7.2",
     "@shapediver/sdk.geometry-api-sdk-v2": "1.3.0",
     "@shapediver/viewer.settings": "0.3.0",
-    "@shapediver/viewer.shared.build-data": "2.7.10",
+    "@shapediver/viewer.shared.build-data": "2.8.0",
     "@types/dompurify": "^2.3.1",
     "@types/ua-parser-js": "^0.7.36",
-    "@types/uuid": "^8.3.0",
+    "@types/uuid": "^9.0.0",
     "axios": "^1.2.6",
     "dompurify": "^2.3.3",
     "gl-matrix": "3.3.0",
-    "tsyringe": "^4.5.0",
     "ua-parser-js": "^0.7.28",
-    "uuid": "^8.3.2"
+    "uuid": "^9.0.0"
   },
-  "gitHead": "08d9680d3b199406d1c6bedc8fbeed3d1ad6a385"
+  "gitHead": "9caee20107c5d71e43de33edc14ee19d62ec268b"
 }

package/src/converter/Converter.ts

@@ -1,47 +1,26 @@
 import { vec3, vec4 } from 'gl-matrix'
 import { TinyColor } from '@ctrl/tinycolor'
-import { container, singleton } from 'tsyringe'
 import { HttpClient } from '../http-client/HttpClient';
 import { HttpResponse } from '../http-client/HttpResponse';
 
-@singleton()
 export class Converter {
-    private readonly _httpClient: HttpClient = <HttpClient>container.resolve(HttpClient);
+    // #region Properties (2)
 
-    private tinyColorToString(color: TinyColor): string {
-        return color.toHex8String();
-    }
+    private readonly _httpClient: HttpClient = HttpClient.instance;
 
-    /**
-     * @param color 
-     * @param defColor 
-     */
-    public toHex8Color(color: any, defColorString: string = '#199b9b'): string {
-        const c = this.toHexColor(color, defColorString);
-        const tColor = new TinyColor(c);
-        const cH8 = tColor.toHex8String();
-        return cH8.replace('#', '0x');
-    }
+    private static _instance: Converter;
 
-    public toColorArray(color: any): number[] {
-        if(typeof color !== 'string' || !color.startsWith("#"))
-            color = this.toHexColor(color);
-        const tColor = new TinyColor(color);
-        const rgb = tColor.toRgb()
-        return [rgb.r / 255.0, rgb.g / 255.0, rgb.b / 255.0];
-    }
+    // #endregion Properties (2)
 
-    public toAlpha(color: any): number {
-        const c = this.toHexColor(color);
-        if (c.length <= 8) return 1;
-        return parseInt(c.slice(c.length - 2, c.length), 16) / 255;
-    }
+    // #region Public Static Accessors (1)
 
-    public toThreeJsColorInput(color: any): string {
-        const c = this.toHexColor(color);
-        return c.slice(0, c.length - 2);
+    public static get instance() {
+        return this._instance || (this._instance = new this());
     }
 
+    // #endregion Public Static Accessors (1)
+
+    // #region Public Methods (8)
 
     public async processSVG(blob: Blob): Promise<HTMLImageElement> {
         let data = <string>await new Promise((resolve, _) => {
@@ -168,6 +147,50 @@ export class Converter {
         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'] } );
+        if (response.headers['content-type'] === 'image/svg+xml') {
+            const img = await this.processSVG(blob);
+            return img;
+        } else {
+            const img = new Image();
+            const promise = new Promise<void>(resolve => {
+                img.onload = () => resolve();
+            })
+            img.crossOrigin = "anonymous";
+            img.src = URL.createObjectURL(blob);
+            await promise;
+            URL.revokeObjectURL(img.src);
+            return img;
+        }
+    }
+
+    public toAlpha(color: any): 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("#"))
+            color = this.toHexColor(color);
+        const tColor = new TinyColor(color);
+        const rgb = tColor.toRgb()
+        return [rgb.r / 255.0, rgb.g / 255.0, rgb.b / 255.0];
+    }
+
+    /**
+     * @param color 
+     * @param defColor 
+     */
+    public toHex8Color(color: any, defColorString: string = '#199b9b'): string {
+        const c = this.toHexColor(color, defColorString);
+        const tColor = new TinyColor(c);
+        const cH8 = tColor.toHex8String();
+        return cH8.replace('#', '0x');
+    }
+
     /**
      * This color converter is mostly left 'as-is' from viewer v2.
      * I didn't want to break something that works.
@@ -262,6 +285,11 @@ export class Converter {
         return tc.isValid ? this.tinyColorToString(tc) : defColorString;
     }
 
+    public toThreeJsColorInput(color: any): string {
+        const c = this.toHexColor(color);
+        return c.slice(0, c.length - 2);
+    }
+
     public toVec3(point: any): 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]);
@@ -275,21 +303,13 @@ export class Converter {
         return vec3.create();
     }
 
-    public async responseToImage(response: HttpResponse<ArrayBuffer>): Promise<HTMLImageElement> {
-        const arrayBufferView = new Uint8Array( response.data );
-        const blob = new Blob([ arrayBufferView ], { type: response.headers['content-type'] } );
-        if (response.headers['content-type'] === 'image/svg+xml') {
-            const img = await this.processSVG(blob);
-            return img;
-        } else {
-            const img = new Image();
-            const promise = new Promise<void>(resolve => {
-                img.onload = () => resolve();
-            })
-            img.crossOrigin = "anonymous";
-            img.src = URL.createObjectURL(blob);
-            await promise;
-            return img;
-        }
+    // #endregion Public Methods (8)
+
+    // #region Private Methods (1)
+
+    private tinyColorToString(color: TinyColor): string {
+        return color.toHex8String();
     }
+
+    // #endregion Private Methods (1)
 }

package/src/dom-event-engine/DomEventEngine.ts

@@ -1,4 +1,3 @@
-import { container } from 'tsyringe'
 import { UuidGenerator } from '../uuid-generator/UuidGenerator';
 
 import { IDomEventListener } from './IDomEventListener'
@@ -9,7 +8,7 @@ export class DomEventEngine {
     private readonly _domEventListeners: {
         [key: string]: IDomEventListener
     } = {};
-    private readonly _uuidGenerator: UuidGenerator = <UuidGenerator>container.resolve(UuidGenerator);
+    private readonly _uuidGenerator: UuidGenerator = UuidGenerator.instance;
 
     private _allowListeners = {
         mousewheel: true,

package/src/event-engine/EventEngine.ts

@@ -1,27 +1,27 @@
-import { container, singleton } from 'tsyringe'
-
 import { EVENTTYPE, MainEventTypes } from './EventTypes'
 import { IListener } from './interfaces/IListener'
 import { ICallback } from './interfaces/ICallback'
 import { IEvent } from './interfaces/IEvent'
 import { UuidGenerator } from '../uuid-generator/UuidGenerator'
-import { Logger, LOGGING_TOPIC } from '../logger/Logger'
+import { Logger } from '../logger/Logger'
 
-@singleton()
 export class EventEngine {
-    // #region Properties (2)
+    // #region Properties (4)
+
+    private static _instance: EventEngine;
 
-    protected readonly _uuidGenerator: UuidGenerator = <UuidGenerator>container.resolve(UuidGenerator);
-    protected readonly _logger: Logger = <Logger>container.resolve(Logger);
     private _eventListeners: {
         [key: string]: IListener[]
     };
 
-    // #endregion Properties (2)
+    protected readonly _logger: Logger = Logger.instance;
+    protected readonly _uuidGenerator: UuidGenerator = UuidGenerator.instance;
+
+    // #endregion Properties (4)
 
     // #region Constructors (1)
 
-    constructor() {
+    private constructor() {
         this._eventListeners = {};
         for (const type in EVENTTYPE) {
             const subEventType = EVENTTYPE[type as keyof typeof EVENTTYPE];
@@ -34,22 +34,14 @@ export class EventEngine {
 
     // #endregion Constructors (1)
 
-    private convertTypeToString(type: string | MainEventTypes): string {
-        let typeString: string = '';
-        if(typeof type === 'string') typeString = type;
+    // #region Public Static Accessors (1)
 
-        for (const mainType in EVENTTYPE)
-            if(type === EVENTTYPE[mainType as keyof typeof EVENTTYPE])
-                typeString = mainType.toLowerCase();
-        
-        if(!typeString || !this._eventListeners[typeString]) {
-            this._logger.warn(LOGGING_TOPIC.GENERAL, 'EventEngine.convertTypeToString: No valid type provided.');
-            return '';
-        }
-        
-        return typeString;
+    public static get instance() {
+        return this._instance || (this._instance = new this());
     }
 
+    // #endregion Public Static Accessors (1)
+
     // #region Public Methods (3)
 
     /**
@@ -116,4 +108,24 @@ export class EventEngine {
     }
 
     // #endregion Public Methods (3)
+
+    // #region Private Methods (1)
+
+    private convertTypeToString(type: string | MainEventTypes): string {
+        let typeString: string = '';
+        if(typeof type === 'string') typeString = type;
+
+        for (const mainType in EVENTTYPE)
+            if(type === EVENTTYPE[mainType as keyof typeof EVENTTYPE])
+                typeString = mainType.toLowerCase();
+        
+        if(!typeString || !this._eventListeners[typeString]) {
+            this._logger.warn('EventEngine.convertTypeToString: No valid type provided.');
+            return '';
+        }
+        
+        return typeString;
+    }
+
+    // #endregion Private Methods (1)
 }

package/src/http-client/HttpClient.ts

@@ -1,5 +1,4 @@
 import axios, { AxiosRequestConfig, AxiosResponse } from 'axios'
-import { singleton } from 'tsyringe'
 import { ShapeDiverViewerConnectionError } from '../logger/ShapeDiverViewerErrors';
 import { HttpResponse } from './HttpResponse';
 
@@ -17,13 +16,10 @@ const errorHandler = (error: any) => {
     }
 }
 
-@singleton()
 export class HttpClient {
-    // #region Properties (2)
+    // #region Properties (3)
 
-    private _dataCache: {
-        [key: string]: Promise<HttpResponse<any>>
-    } = {};
+    private static _instance: HttpClient;
 
     private _sessionLoading: {
         [key: string]: {
@@ -32,11 +28,11 @@ export class HttpClient {
         }
     } = {};
 
-    // #endregion Properties (2)
+    // #endregion Properties (3)
 
     // #region Constructors (1)
 
-    constructor() {
+    private constructor() {
         axios.interceptors.response.use(
             response => {
                 return response;
@@ -55,23 +51,16 @@ export class HttpClient {
 
     // #endregion Constructors (1)
 
-    // #region Public Methods (7)
+    // #region Public Static Accessors (1)
 
-    private getSessionId(href: string): string | undefined {
-        // searching for "/session/SESSION_ID/{'output' | 'export' | 'texture'}/ASSET_DATA"
-        const parts = href.split('/');
-        const sessionPartIndex = parts.indexOf('session');
-
-        // There have to be at exactly 4 parts, including the session
-        if (sessionPartIndex !== -1 && parts.length === sessionPartIndex + 4) {
-            const sessionId = parts[sessionPartIndex + 1];
-            // no such session has been registered, should never happen
-            if (!this._sessionLoading[sessionId]) return;
-            return sessionId;
-        }
-        return;
+    public static get instance() {
+        return this._instance || (this._instance = new this());
     }
 
+    // #endregion Public Static Accessors (1)
+
+    // #region Public Methods (4)
+
     public addDataLoading(sessionId: string, callbacks: {
         getAsset: (url: string) => Promise<[ArrayBuffer, string, string]>,
         downloadTexture: (sessionId: string, url: string) => Promise<[ArrayBuffer, string]>,
@@ -80,9 +69,6 @@ export class HttpClient {
     }
 
     public async get(href: string, config: AxiosRequestConfig = { responseType: 'arraybuffer' }, textureLoading: boolean = false): Promise<HttpResponse<any>> {
-        const dataKey = btoa(href);
-        if (dataKey in this._dataCache) return await this._dataCache[dataKey];
-        
         // try to get sessionId from href
         let sessionId = this.getSessionId(href);
 
@@ -103,7 +89,7 @@ export class HttpClient {
             // 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
-                this._dataCache[dataKey] = new Promise<HttpResponse<any>>((resolve, reject) => {
+                return new Promise<HttpResponse<any>>((resolve, reject) => {
                     sessionLoading!.downloadTexture(sessionId!, href).then((result) => {
                         resolve({
                             data: result[0],
@@ -118,15 +104,15 @@ export class HttpClient {
             } else {
                 // we can load blobs and data urls directly
                 // or load it directly if we don't have a session
-                this._dataCache[dataKey] = axios(href, Object.assign({ method: 'get' }, config));
+                return axios(href, Object.assign({ method: 'get' }, config));
             }
         } else {
             if(!sessionLoading) {
                 // if there is no session to load from, we use the fallback option
-                this._dataCache[dataKey] = axios(href, Object.assign({ method: 'get' }, config));
+                return axios(href, Object.assign({ method: 'get' }, config));
             } else {
                 // all data links where we could somehow find a session to load it with
-                this._dataCache[dataKey] = new Promise<HttpResponse<ArrayBuffer>>((resolve, reject) => {
+                return new Promise<HttpResponse<ArrayBuffer>>((resolve, reject) => {
                     sessionLoading!.getAsset(href)
                         .then((result) => {
                             resolve({
@@ -143,8 +129,6 @@ export class HttpClient {
                 });
             }
         }
-        
-        return this._dataCache[dataKey];
     }
 
     public async loadTexture(href: string): Promise<HttpResponse<ArrayBuffer>> {
@@ -155,5 +139,24 @@ export class HttpClient {
         delete this._sessionLoading[sessionId];
     }
 
-    // #endregion Public Methods (7)
+    // #endregion Public Methods (4)
+
+    // #region Private Methods (1)
+
+    private getSessionId(href: string): string | undefined {
+        // searching for "/session/SESSION_ID/{'output' | 'export' | 'texture'}/ASSET_DATA"
+        const parts = href.split('/');
+        const sessionPartIndex = parts.indexOf('session');
+
+        // There have to be at exactly 4 parts, including the session
+        if (sessionPartIndex !== -1 && parts.length === sessionPartIndex + 4) {
+            const sessionId = parts[sessionPartIndex + 1];
+            // no such session has been registered, should never happen
+            if (!this._sessionLoading[sessionId]) return;
+            return sessionId;
+        }
+        return;
+    }
+
+    // #endregion Private Methods (1)
 }

package/src/index.ts

@@ -12,9 +12,9 @@ import { InputValidator } from './input-validator/InputValidator'
 import { TypeChecker } from './type-check/TypeChecker'
 import { UuidGenerator } from './uuid-generator/UuidGenerator'
 import { PerformanceEvaluator } from './performance-evaluator/PerformanceEvaluator'
-import { Logger, LOGGING_LEVEL, LOGGING_TOPIC } from './logger/Logger'
+import { Logger, LOGGING_LEVEL } from './logger/Logger'
 import { StatePromise } from './state-engine/StatePromise'
-import { ShapeDiverViewerArError, ShapeDiverViewerCameraError, ShapeDiverViewerDataProcessingError, ShapeDiverViewerEnvironmentMapError, ShapeDiverViewerLightError, ShapeDiverViewerSessionError, ShapeDiverViewerSettingsError, ShapeDiverViewerUnknownError, ShapeDiverViewerValidationError, ShapeDiverViewerGeneralError, ShapeDiverViewerWebGLError, ShapeDiverViewerInteractionError } from './logger/ShapeDiverViewerErrors'
+import { ShapeDiverViewerArError, ShapeDiverViewerCameraError, ShapeDiverViewerDataProcessingError, ShapeDiverViewerEnvironmentMapError, ShapeDiverViewerLightError, ShapeDiverViewerSessionError, ShapeDiverViewerSettingsError, ShapeDiverViewerUnknownError, ShapeDiverViewerValidationError, ShapeDiverViewerGeneralError, ShapeDiverViewerWebGLError, ShapeDiverViewerInteractionError, ShapeDiverViewerViewportError } from './logger/ShapeDiverViewerErrors'
 import { ShapeDiverError as ShapeDiverBackendError } from '@shapediver/sdk.geometry-api-sdk-v2'
 import { ShapeDiverViewerError } from './logger/ShapeDiverError'
 import { HttpResponse } from './http-client/HttpResponse'
@@ -61,13 +61,14 @@ export {
 }
 
 export {
-    Logger, LOGGING_LEVEL, LOGGING_TOPIC, 
+    Logger, LOGGING_LEVEL, 
     ShapeDiverViewerError, 
     ShapeDiverViewerDataProcessingError, 
     ShapeDiverViewerEnvironmentMapError,
     ShapeDiverViewerWebGLError,
     ShapeDiverViewerSettingsError,
     ShapeDiverViewerSessionError,
+    ShapeDiverViewerViewportError,
     ShapeDiverViewerGeneralError,
     ShapeDiverViewerUnknownError, 
     ShapeDiverViewerArError,

package/src/input-validator/InputValidator.ts

@@ -1,6 +1,5 @@
-import { container, singleton } from 'tsyringe'
 import DOMPurify from 'dompurify';
-import { Logger, LOGGING_TOPIC } from '../logger/Logger'
+import { Logger } from '../logger/Logger'
 import { ShapeDiverViewerValidationError } from '../logger/ShapeDiverViewerErrors';
 import { TypeChecker } from '../type-check/TypeChecker'
 
@@ -9,20 +8,41 @@ export type Types = 'string' | 'boolean' | 'function' |
                     'number' | 'factor' | 'positive' |
                     'vec3' | 'mat4' | 'cubeMap' | 'array' | 'stringArray' | 'object' | 'file' | 'color';
 
-@singleton()
 export class InputValidator {
+    // #region Properties (3)
 
-    private readonly _logger: Logger = <Logger>container.resolve(Logger);
-    private readonly _typeChecker: TypeChecker = <TypeChecker>container.resolve(TypeChecker);
+    private readonly _logger: Logger = Logger.instance;
+    private readonly _typeChecker: TypeChecker = TypeChecker.instance;
 
-    public validateAndError(topic: LOGGING_TOPIC, scope: string, value: any, type: Types, defined: boolean = true, enumValues: string[] = []) {
+    private static _instance: InputValidator;
+
+    // #endregion Properties (3)
+
+    // #region Public Static Accessors (1)
+
+    public static get instance() {
+        return this._instance || (this._instance = new this());
+    }
+
+    // #endregion Public Static Accessors (1)
+
+    // #region Public Methods (2)
+
+    public sanitize(input: string): string {
+        return DOMPurify.sanitize(input);
+    }
+
+    public validateAndError(scope: string, value: any, type: Types, defined: boolean = true, enumValues: string[] = []) {
         const res = this.validate(value, type, defined, enumValues);
         if(res) return;
 
-        const error = new ShapeDiverViewerValidationError(`${scope}: Input could not be validated. ${value} is not of type ${type}.${defined === false ? ' (Can also be undefined)' : ''}`, value, type);
-        throw this._logger.handleError(LOGGING_TOPIC.GENERAL, 'InputValidator.validateAndError', error, false);
+        throw new ShapeDiverViewerValidationError(`${scope}: Input could not be validated. ${value} is not of type ${type}.${defined === false ? ' (Can also be undefined)' : ''}`, value, type);
     }
 
+    // #endregion Public Methods (2)
+
+    // #region Private Methods (1)
+
     private validate(value: any, stringLiteral: Types, defined: boolean = true, enumValues: string[] = []): boolean {
         if (defined === false && typeof value === 'undefined') return true;
 
@@ -94,7 +114,5 @@ export class InputValidator {
         return false;
     }
 
-    public sanitize(input: string): string {
-        return DOMPurify.sanitize(input);
-    }
+    // #endregion Private Methods (1)
 }