@shapediver/viewer.shared.services 3.3.4 → 3.3.7

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@shapediver/viewer.shared.services",
-  "version": "3.3.4",
+  "version": "3.3.7",
   "description": "",
   "keywords": [],
   "author": "Michael Oppitz <michael@shapediver.com>",
@@ -10,11 +10,10 @@
     "test": "__tests__"
   },
   "files": [
-    "dist",
-    "src",
     "package.json",
+    "dist/",
     "README.md",
-    "tsconfig.json"
+    "LICENSE"
   ],
   "publishConfig": {
     "access": "public"
@@ -42,7 +41,7 @@
     "@ctrl/tinycolor": "^3.4.0",
     "@shapediver/sdk.geometry-api-sdk-v2": "1.11.0",
     "@shapediver/viewer.settings": "1.0.2",
-    "@shapediver/viewer.shared.build-data": "3.3.4",
+    "@shapediver/viewer.shared.build-data": "3.3.7",
     "@types/dompurify": "^2.3.1",
     "@types/ua-parser-js": "^0.7.36",
     "@types/uuid": "^9.0.0",
@@ -52,5 +51,5 @@
     "ua-parser-js": "^0.7.28",
     "uuid": "^9.0.0"
   },
-  "gitHead": "8193da527b4e3fc4d90181018bd60d6ac70be3e8"
+  "gitHead": "112787d5c5226cca5e89d08102d0b1a3dd4a1d71"
 }

package/src/converter/Converter.ts

@@ -1,407 +0,0 @@
-import { ColorInput, TinyColor } from '@ctrl/tinycolor';
-import { HttpClient } from '../http-client/HttpClient';
-import { HttpResponse } from '../http-client/HttpResponse';
-import { vec3 } from 'gl-matrix';
-import { atobCustom, btoaCustom } from '../utilities/base64';
-
-export class Converter {
-    // #region Properties (2)
-
-    private readonly _httpClient: HttpClient = HttpClient.instance;
-
-    private static _instance: Converter;
-
-    // #endregion Properties (2)
-
-    // #region Public Static Getters And Setters (1)
-
-    public static get instance() {
-        return this._instance || (this._instance = new this());
-    }
-
-    /**
-     * Converts a data URL to a Blob object.
-     * 
-     * @param dataURL 
-     * @returns 
-     */
-    public dataURLtoBlob(dataURL: string) {
-        // Split the data URL to get the base64 data
-        const arr = dataURL.split(",");
-        const mime = arr[0].match(/:(.*?);/)![1];
-        const bstr = window.atob(arr[1]);
-
-        let n = bstr.length;
-        const u8arr = new Uint8Array(n);
-
-        // Convert the binary string to a Uint8Array
-        while (n--) u8arr[n] = bstr.charCodeAt(n);
-
-        // Create a Blob object from the Uint8Array
-        return {
-            blob: new Blob([u8arr], { type: mime }),
-            arrayBuffer: u8arr.buffer
-        };
-    }
-
-    /**
-     * Convert the given image to an ArrayBuffer and return the image data.
-     * 
-     * @param image The image to convert.
-     * @param arrayBuffer Optional: The ArrayBuffer of the image, if it was already converted.
-     * @returns 
-     */
-    public async constructImageData(image: Blob | File, arrayBuffer?: ArrayBuffer): Promise<{
-        imageData: {
-            filename?: string,
-            format: string,
-            size: number
-        },
-        arrayBuffer: ArrayBuffer
-    }> {
-        if(image instanceof File) {
-            return {
-                imageData: {
-                    filename: image.name,
-                    format: image.type,
-                    size: image.size
-                },
-                arrayBuffer: arrayBuffer || await image.arrayBuffer()
-            };
-        } else {
-            return {
-                imageData: {
-                    format: image.type,
-                    size: image.size
-                },
-                arrayBuffer: arrayBuffer || await image.arrayBuffer()
-            };
-        } 
-    }
-    
-    /**
-     * Convert the given input to an ArrayBuffer.
-     * 
-     * @param input 
-     * @returns 
-     */
-    public async convertToArrayBuffer(input: (() => Promise<ArrayBuffer>) | ArrayBuffer | (() => Promise<Blob>) | Blob | File): Promise<ArrayBuffer> {
-        if (input instanceof File) {
-            return await input.arrayBuffer();
-        } else if (input instanceof Blob) {
-            return await input.arrayBuffer();
-        } else if (input instanceof ArrayBuffer) {
-            return input;
-        } else {
-            const result = await input();
-            if (result instanceof Blob) {
-                return await result.arrayBuffer();
-            } else {
-                return result;
-            }
-        }
-    }
-
-    // #endregion Public Static Getters And Setters (1)
-
-    // #region Public Methods (8)
-
-    public async processSVG(blob: Blob): Promise<HTMLImageElement> {
-        let data = <string>await new Promise((resolve, reject) => {
-            const reader = new FileReader();
-            reader.onloadend = () => resolve(<string>reader.result);
-            reader.onerror = reject;
-            reader.readAsDataURL(blob);
-        });
-        data = data.replace('data:image/svg+xml;base64,', '');
-        data = atobCustom(data);
-
-        const svgC = document.createElement('DIV');
-        svgC.id = 'svgc';
-        svgC.innerHTML = <string>data;
-
-        // now we can access the svg element as a DOM object
-        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) {
-                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);
-                    }
-                }
-            }
-            // collect potential font definitions
-            // we assume styles are imported using the following syntax:
-            // @import url(CSS_URL);
-            const styleElements = <HTMLCollectionOf<HTMLStyleElement>>svgE[i].getElementsByTagName('style');
-            for (let j = 0; j < styleElements.length; ++j) {
-                const regex = /@import\x20url\(\s*(.*?)\s*\);/g;
-                let m;
-                while ((m = regex.exec(styleElements[j].innerHTML)) !== null) {
-                    styleURIs.push(m[1]);
-                }
-                // make unique
-                styleURIs = styleURIs.filter(
-                    function (value, index, self) {
-                        return self.indexOf(value) === index;
-                    }
-                );
-            }
-        }
-
-        // creating a promise for each image which needs to be converted to a data URI
-        const replacementPromises = [];
-        const createImagePromise = async (uri: string) => {
-            if (uri.length > 0) {
-                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]);
-
-                const base64Data = btoaCustom(biStr.join(''));
-                const imgDataUrl = 'data:' + response.headers['content-type'] + ';base64,' + base64Data;
-
-                // replace url in SVG string
-                // CAUTION theoretically this could cause unwanted replacements
-                data = data.replace(uri, imgDataUrl);
-            }
-        };
-
-        for (let i = 0; i < childImageURIs.length; ++i)
-            replacementPromises.push(createImagePromise(childImageURIs[i]));
-
-        // now we create promises for the google fonts to be imported
-        const createStylePromise = async (styleUrl: string) => {
-            const response = await this._httpClient.get(
-                styleUrl,
-                { responseType: 'text' }
-            ) as HttpResponse<ArrayBuffer>;
-            let cssString = response.data as unknown as string;
-            // we assume that fonts are imported using the following syntax:
-            // url(FONT_URI);
-            const fontURLs = [];
-            const regex = /url\(\s*(.*?)\s*\)/g;
-            let m;
-            while ((m = regex.exec(cssString)) !== null) {
-                fontURLs.push(m[1]);
-            }
-
-            const fontPromises = [];
-            const createFontPromise = async (fUrl: string) => {
-                const response = await this._httpClient.get(
-                    fUrl,
-                    { responseType: 'arraybuffer' }
-                ) 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]);
-
-                const base64Data = btoaCustom(biStr.join(''));
-                const fontDataUrl = 'data:' + response.headers['content-type'] + ';base64,' + base64Data;
-                if (fUrl.length > 0)
-                    cssString = cssString.replace(fUrl, fontDataUrl);
-            };
-
-            for (let j = 0; j < fontURLs.length; ++j)
-                fontPromises.push(createFontPromise(fontURLs[j]));
-
-            await Promise.all(fontPromises);
-            data = data.replace('@import url(' + styleUrl + ');', cssString);
-        };
-
-        for (let i = 0; i < styleURIs.length; ++i)
-            replacementPromises.push(createStylePromise(styleURIs[i]));
-
-        await Promise.all(replacementPromises);
-
-        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<{ buffer: ArrayBuffer, 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(response.data.blob);
-            return img;
-        } else {
-            const img = new Image();
-            const promise = new Promise<void>((resolve, reject) => {
-                img.onload = () => resolve();
-                img.onerror = reject;
-            });
-            img.crossOrigin = 'anonymous';
-            img.src = URL.createObjectURL(response.data.blob);
-            await promise;
-            URL.revokeObjectURL(img.src);
-            return img;
-        }
-    }
-
-    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: unknown): number[] {
-        if (typeof color !== 'string' || !color.startsWith('#'))
-            color = this.toHexColor(color);
-        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];
-    }
-
-    /**
-     * @param color 
-     * @param defColor 
-     */
-    public toHex8Color(color: unknown, defColorString: string = '#000'): 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.
-     * 
-     * @param color 
-     * @param defColor 
-     */
-    public toHexColor(color: unknown, defColorString: string = '#000'): string {
-        if (!color || color === 'default') return defColorString;
-
-        if ((color as Float32Array).constructor === Float32Array)
-            color = Array.from(color as Float32Array);
-
-        const tColor = new TinyColor(color as TinyColor | undefined);
-
-        if (color instanceof TinyColor)
-            return this.tinyColorToString(tColor);
-
-        // check if we got a number
-        if (typeof color === 'number') {
-            let cs = color.toString(16);
-            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');
-            const tc = new TinyColor(cs);
-            return tc.isValid ? this.tinyColorToString(tc) : defColorString;
-        }
-
-        // check if the input is a THREE.Color
-        if (typeof color === 'object' && 'isColor' in (color as object) && 'getHexString' in (color as object) && typeof (color as { getHexString: unknown }).getHexString === 'function'){
-            const tc = new TinyColor((color as { getHexString: () => string }).getHexString());
-            return tc.isValid ? this.tinyColorToString(tc) : defColorString;
-        }
-
-        // check for array of numbers
-        if (Array.isArray(color) && (color.length == 3 || color.length == 4)) {
-            let isRGBArray = true;
-            for (let i = 0; i < 3; ++i) {
-                color[i] = parseFloat(color[i]);
-                if (isNaN(color[i])) {
-                    isRGBArray = false;
-                }
-            }
-            if (!isRGBArray)
-                return defColorString;
-
-            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) {
-                const a = parseFloat(color[3]);
-                if (!isNaN(a)) {
-                    tc.setAlpha(Math.max(0, Math.min(a, 255)) / 255);
-                }
-            }
-            return tc.isValid ? this.tinyColorToString(tc) : defColorString;
-        }
-
-        // if we got something other than a string, check if
-        // tinycolor can work with it
-        if (typeof color !== 'string') {
-            const tc = new TinyColor(color as string);
-            return tc.isValid ? this.tinyColorToString(tc) : defColorString;
-        }
-
-        // tinycolor doesn't like 0x
-        const tmpColor = color.replace('0x', '#');
-
-        // if we got no alpha value, add full opacity
-        if (tmpColor.match(/^#[a-f0-9]{6}$/i) !== null) {
-            const tc = new TinyColor(tmpColor + 'ff');
-            return tc.isValid ? this.tinyColorToString(tc) : defColorString;
-        }
-
-        // standard case
-        if (tmpColor.match(/^#[a-f0-9]{8}$/i) !== null) {
-            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) {
-            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
-        const tc = new TinyColor(tmpColor);
-        return tc.isValid ? this.tinyColorToString(tc) : defColorString;
-    }
-
-    public toThreeJsColorInput(color: unknown): string {
-        const c = this.toHexColor(color);
-        return c.slice(0, c.length - 2);
-    }
-
-    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]);
-
-        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);
-
-        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();
-    }
-
-    // #endregion Public Methods (8)
-
-    // #region Private Methods (1)
-
-    private tinyColorToString(color: TinyColor): string {
-        return color.toHex8String();
-    }
-
-    // #endregion Private Methods (1)
-}