@combeenation/3d-viewer 14.0.0 → 14.0.1-rc1

package/dist/lib-cjs/internal/paintable-helper.js

@@ -1,287 +1,287 @@
-"use strict";
-var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
-    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
-    return new (P || (P = Promise))(function (resolve, reject) {
-        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
-        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
-        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
-        step((generator = generator.apply(thisArg, _arguments || [])).next());
-    });
-};
-var __rest = (this && this.__rest) || function (s, e) {
-    var t = {};
-    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
-        t[p] = s[p];
-    if (s != null && typeof Object.getOwnPropertySymbols === "function")
-        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
-            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
-                t[p[i]] = s[p[i]];
-        }
-    return t;
-};
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.parsePaintable = exports.paintableParameterObserver = void 0;
-const index_1 = require("../index");
-const is_svg_1 = __importDefault(require("is-svg"));
-const lodash_es_1 = require("lodash-es");
-/**
- * Observer implementation for "paintable" parameter.
- * Basically creates a dynamic texture from the source image and assigns it as albedo (or diffuse) texture.
- */
-function paintableParameterObserver(newValue, materials, scene) {
-    return __awaiter(this, void 0, void 0, function* () {
-        const paintable = parsePaintable(newValue);
-        // check if value is svg or image source, do the conversion accordingly
-        const srcIsSvg = (0, is_svg_1.default)(paintable.src);
-        if (!srcIsSvg && paintable.src.includes('<svg') && paintable.src.includes('</svg>')) {
-            // seems like the user tried to use a SVG string, as <svg> tags are used
-            // inform the user that this is not a valid SVG string
-            throw new index_1.ViewerError({
-                id: index_1.ViewerErrorIds.InvalidParameterValue,
-                message: `Invalid value for parameter "paintable" given:\nsource string is no valid SVG string\nGiven value: ${paintable.src}`,
-            });
-        }
-        let imageSource;
-        try {
-            imageSource = srcIsSvg ? yield _createImageFromSvg(paintable.src) : yield _createImageFromImgSrc(paintable.src);
-        }
-        catch (_a) {
-            // SVG might be invalid, even if it passes `isSvg` check
-            // in this case the image can't be created and will throw an error, which should be handled by the viewer and
-            // Combeenation viewer control
-            throw new index_1.ViewerError({
-                id: index_1.ViewerErrorIds.InvalidParameterValue,
-                message: `Invalid value for parameter "paintable" given:\nimage can't be created from source string\nGiven value: ${paintable.src}`,
-            });
-        }
-        // apply image source on desired material(s)
-        for (const material of materials) {
-            _drawPaintableOnMaterial(material, imageSource, scene, paintable.options);
-        }
-    });
-}
-exports.paintableParameterObserver = paintableParameterObserver;
-/**
- * Parser for paintable value.
- * ATM this is only used internally, but it could theoretically be used to create ones own paintable implementation.
- *
- * @param value The value to parse. Examples:
- *              ```ts
- *              // Default definition as JSON object:
- *              '{ "src": "https://path.to/image.jpg", "uScale": 0.5 }'
- *
- *              // Short hand definition, only contains source string:
- *              'https://path.to/image.jpg'
- *
- *              // Full content, paintable texture is flipped in both directions
- *              '{ "src": "https://path.to/image.jpg", "uScale": -1, "vScale": -1, "uOffset": 0, "vOffset": 0 }'
- *
- *              // SVG content can be used directly:
- *              '<svg>...</svg>'
- *
- *              // SVG in src property works as well:
- *              '{ "src": "<svg>...</svg>", "uScale": 0.5 }'
- *              ```
- */
-function parsePaintable(value) {
-    if (!(0, lodash_es_1.isString)(value)) {
-        throw new index_1.ViewerError({
-            id: index_1.ViewerErrorIds.InvalidParameterValue,
-            message: `Unable to parse paintable value: not a string\nGiven value: ${value}`,
-        });
-    }
-    const paintableValue = { src: '' };
-    let valObj = null;
-    try {
-        valObj = JSON.parse(value);
-    }
-    catch (_a) {
-        // use string directly
-        paintableValue.src = value;
-        if (value.startsWith('{')) {
-            // seems like the user tried to use a JSON string, as the input starts with {
-            throw new index_1.ViewerError({
-                id: index_1.ViewerErrorIds.InvalidParameterValue,
-                message: `Unable to parse paintable value: not a valid JSON string\nGiven value: ${value}`,
-            });
-        }
-    }
-    if (valObj) {
-        // input string is JSON, src attribute is required
-        if (!valObj.src) {
-            throw new index_1.ViewerError({
-                id: index_1.ViewerErrorIds.InvalidParameterValue,
-                message: `Unable to parse paintable value: property "src" is missing\nGiven value: ${value}`,
-            });
-        }
-        if (!(0, lodash_es_1.isString)(valObj.src)) {
-            throw new index_1.ViewerError({
-                id: index_1.ViewerErrorIds.InvalidParameterValue,
-                message: `Unable to parse paintable value: property "src" is not a string\nGiven value: ${value}`,
-            });
-        }
-        // split src and options
-        const { src } = valObj, options = __rest(valObj, ["src"]);
-        paintableValue.src = src;
-        // only forward valid paintable options
-        const validOptionKeys = ['uScale', 'vScale', 'uOffset', 'vOffset'];
-        const { validOptions, invalidKeys } = Object.entries(options).reduce((accRes, [curKey, curValue]) => {
-            const isValidKey = validOptionKeys.includes(curKey);
-            if (isValidKey) {
-                accRes.validOptions[curKey] = curValue;
-            }
-            else {
-                accRes.invalidKeys.push(curKey);
-            }
-            return accRes;
-        }, { validOptions: {}, invalidKeys: [] });
-        if (invalidKeys.length) {
-            console.warn('Invalid paintable options provided: ' + invalidKeys.toString());
-        }
-        paintableValue.options = validOptions;
-    }
-    return paintableValue;
-}
-exports.parsePaintable = parsePaintable;
-function _drawPaintableOnMaterial(material, imageSource, scene, options) {
-    var _a, _b, _c, _d;
-    // always take width and height from image source, scaling is done with uvScale properties
-    const widthAndHeight = {
-        width: imageSource.width,
-        height: imageSource.height,
-    };
-    const texture = new index_1.DynamicTexture(`${material.id}.paintable_texture`, widthAndHeight, scene);
-    // draw image on texture
-    const ctx = texture.getContext();
-    ctx.drawImage(imageSource, 0, 0);
-    texture.update();
-    // apply settings from paintable options to tweak position and scaling of image on the texture
-    texture.uScale = (_a = options === null || options === void 0 ? void 0 : options.uScale) !== null && _a !== void 0 ? _a : texture.uScale;
-    texture.vScale = (_b = options === null || options === void 0 ? void 0 : options.vScale) !== null && _b !== void 0 ? _b : texture.vScale;
-    texture.uOffset = (_c = options === null || options === void 0 ? void 0 : options.uOffset) !== null && _c !== void 0 ? _c : texture.uOffset;
-    texture.vOffset = (_d = options === null || options === void 0 ? void 0 : options.vOffset) !== null && _d !== void 0 ? _d : texture.vOffset;
-    // wrap mode is preferred, as it will always show the texture, no matter which position offset is currently chosen
-    // clamp mode requires more knowledge (and patience) when adjusting the uv scale and offset values
-    texture.wrapU = index_1.Texture.WRAP_ADDRESSMODE;
-    texture.wrapV = index_1.Texture.WRAP_ADDRESSMODE;
-    // apply the paintable texture on the dedicated material type
-    const materialCls = material.getClassName();
-    switch (materialCls) {
-        case 'PBRMaterial':
-            material.albedoTexture = texture;
-            break;
-        case 'StandardMaterial':
-            material.diffuseTexture = texture;
-            break;
-        default:
-            throw new Error(`Setting paintable texture for material of instance "${materialCls}" not implemented (yet)`);
-    }
-}
-/**
- * Creates a HTML image element based on a SVG string, whereas all the embedded assets in the SVG (eg: fonts, images)
- * are already loaded and exchanged by their base64 representation.\
- * There the output image can exist as "standalone" image and may be used for example as a paintable.
- *
- * !!CAUTION!!: The used functions within this code section are very well evaluated since most alternatives
- * somehow don't work in Safari, as mentioned in the following BJS forum entries:
- * - https://forum.babylonjs.com/t/drawing-svg-content-text-into-dynamictexture-doesnt-work-in-safari-v15/25048
- * - https://forum.babylonjs.com/t/texture-createfrombase64string-doesnt-seem-to-work-for-ios-devices-initially/25502
- */
-function _createImageFromSvg(svgSrc) {
-    return __awaiter(this, void 0, void 0, function* () {
-        // replace assets with their base64 versions in svg source code
-        const svgWithAssetsEmbedded = yield _embedAssets(svgSrc);
-        // create data string which can be used as an image source
-        const svgEncoded = 'data:image/svg+xml,' + encodeURIComponent(svgWithAssetsEmbedded);
-        return _createImageFromImgSrc(svgEncoded);
-    });
-}
-/**
- * Creates an HTML image element from a dedicated image source.\
- * Also waits until the image has loaded.
- *
- * !!CAUTION!!: The `setTimeout` after loading is finished is required due to a Safari bug:
- * - https://bugs.webkit.org/show_bug.cgi?id=39059
- * - https://bugs.webkit.org/show_bug.cgi?id=219770
- *
- * It's not 100% ensured that the timeout solves the issue in every case, but there is no other way unfortunately.\
- * => Keep an eye on it in future projects
- *
- * @param imgSrc Theoretically every source is valid which is also supported by
- *               [HTMLImageElement.src](https://developer.mozilla.org/en-US/docs/Web/API/HTMLImageElement/src).\
- *               Known exceptions are SVGs with embedded assets that are provided as object URL. See comments in
- *               {@link createImageFromSvg} for further details.
- */
-function _createImageFromImgSrc(imgSrc) {
-    return __awaiter(this, void 0, void 0, function* () {
-        const img = new Image();
-        yield new Promise((resolve, reject) => {
-            img.onload = () => {
-                setTimeout(resolve, 0);
-            };
-            img.onerror = () => {
-                reject();
-            };
-            img.crossOrigin = 'anonymous';
-            img.src = imgSrc;
-        });
-        return img;
-    });
-}
-/**
- * Replaces all supported image & font URLs in the given SVG with their base64 representation.
- */
-function _embedAssets(svgSrc) {
-    return __awaiter(this, void 0, void 0, function* () {
-        const _imageExtensions = ['png', 'gif', 'jpg', 'jpeg', 'svg', 'bmp'];
-        const _fontExtensions = ['woff2', 'woff', 'ttf', 'otf'];
-        const _assetExtensions = [..._imageExtensions, ..._fontExtensions];
-        // Regex copied from https://stackoverflow.com/a/8943487/1273551, not "stress tested"...
-        const urlRegex = /(\bhttps?:\/\/[-A-Z0-9+&@#/%?=~_|!:,.;]*[-A-Z0-9+&@#/%=~_|])/gi;
-        const allUrls = svgSrc.match(urlRegex);
-        const assetUrls = allUrls.filter(url => {
-            const indexParam = url.indexOf('?');
-            // remove url parameter to recognize extension
-            if (indexParam > -1) {
-                url = url.substring(0, indexParam);
-            }
-            return _assetExtensions.some(extension => url.toLowerCase().endsWith(`.${extension}`));
-        });
-        const assetBase64Fetcher = assetUrls.map(_fetchBase64AssetUrl);
-        const assetFetcherResults = yield Promise.all(assetBase64Fetcher);
-        return assetFetcherResults.reduce((svgSrc, x) => svgSrc.replace(x.url, x.base64), svgSrc);
-    });
-}
-/**
- * Fetch asset (image or font) and convert it to base64 string representation.
- */
-function _fetchBase64AssetUrl(assetUrl) {
-    return __awaiter(this, void 0, void 0, function* () {
-        // TODO WTT: Cache known base64 representation and only fetch/convert when not already known.
-        //           Usually the fetch shouldn't hit the network but the browser cache since the SVG was already drawn..
-        const resp = yield fetch(assetUrl);
-        const blob = yield resp.blob();
-        return new Promise((resolve, reject) => {
-            const reader = new FileReader();
-            reader.onloadend = (event) => {
-                const target = event.target;
-                if (!target) {
-                    return reject(`Asset with URL "${assetUrl}" could not be loaded.`);
-                }
-                const result = target.result;
-                if (!result) {
-                    return reject(`Asset with URL "${assetUrl}" returned an empty result.`);
-                }
-                resolve({
-                    url: assetUrl,
-                    base64: result.toString(),
-                });
-            };
-            reader.readAsDataURL(blob);
-        });
-    });
-}
+"use strict";
+var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
+    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
+    return new (P || (P = Promise))(function (resolve, reject) {
+        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
+        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
+        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
+        step((generator = generator.apply(thisArg, _arguments || [])).next());
+    });
+};
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.parsePaintable = exports.paintableParameterObserver = void 0;
+const index_1 = require("../index");
+const is_svg_1 = __importDefault(require("is-svg"));
+const lodash_es_1 = require("lodash-es");
+/**
+ * Observer implementation for "paintable" parameter.
+ * Basically creates a dynamic texture from the source image and assigns it as albedo (or diffuse) texture.
+ */
+function paintableParameterObserver(newValue, materials, scene) {
+    return __awaiter(this, void 0, void 0, function* () {
+        const paintable = parsePaintable(newValue);
+        // check if value is svg or image source, do the conversion accordingly
+        const srcIsSvg = (0, is_svg_1.default)(paintable.src);
+        if (!srcIsSvg && paintable.src.includes('<svg') && paintable.src.includes('</svg>')) {
+            // seems like the user tried to use a SVG string, as <svg> tags are used
+            // inform the user that this is not a valid SVG string
+            throw new index_1.ViewerError({
+                id: index_1.ViewerErrorIds.InvalidParameterValue,
+                message: `Invalid value for parameter "paintable" given:\nsource string is no valid SVG string\nGiven value: ${paintable.src}`,
+            });
+        }
+        let imageSource;
+        try {
+            imageSource = srcIsSvg ? yield _createImageFromSvg(paintable.src) : yield _createImageFromImgSrc(paintable.src);
+        }
+        catch (_a) {
+            // SVG might be invalid, even if it passes `isSvg` check
+            // in this case the image can't be created and will throw an error, which should be handled by the viewer and
+            // Combeenation viewer control
+            throw new index_1.ViewerError({
+                id: index_1.ViewerErrorIds.InvalidParameterValue,
+                message: `Invalid value for parameter "paintable" given:\nimage can't be created from source string\nGiven value: ${paintable.src}`,
+            });
+        }
+        // apply image source on desired material(s)
+        for (const material of materials) {
+            _drawPaintableOnMaterial(material, imageSource, scene, paintable.options);
+        }
+    });
+}
+exports.paintableParameterObserver = paintableParameterObserver;
+/**
+ * Parser for paintable value.
+ * ATM this is only used internally, but it could theoretically be used to create ones own paintable implementation.
+ *
+ * @param value The value to parse. Examples:
+ *              ```ts
+ *              // Default definition as JSON object:
+ *              '{ "src": "https://path.to/image.jpg", "uScale": 0.5 }'
+ *
+ *              // Short hand definition, only contains source string:
+ *              'https://path.to/image.jpg'
+ *
+ *              // Full content, paintable texture is flipped in both directions
+ *              '{ "src": "https://path.to/image.jpg", "uScale": -1, "vScale": -1, "uOffset": 0, "vOffset": 0 }'
+ *
+ *              // SVG content can be used directly:
+ *              '<svg>...</svg>'
+ *
+ *              // SVG in src property works as well:
+ *              '{ "src": "<svg>...</svg>", "uScale": 0.5 }'
+ *              ```
+ */
+function parsePaintable(value) {
+    if (!(0, lodash_es_1.isString)(value)) {
+        throw new index_1.ViewerError({
+            id: index_1.ViewerErrorIds.InvalidParameterValue,
+            message: `Unable to parse paintable value: not a string\nGiven value: ${value}`,
+        });
+    }
+    const paintableValue = { src: '' };
+    let valObj = null;
+    try {
+        valObj = JSON.parse(value);
+    }
+    catch (_a) {
+        // use string directly
+        paintableValue.src = value;
+        if (value.startsWith('{')) {
+            // seems like the user tried to use a JSON string, as the input starts with {
+            throw new index_1.ViewerError({
+                id: index_1.ViewerErrorIds.InvalidParameterValue,
+                message: `Unable to parse paintable value: not a valid JSON string\nGiven value: ${value}`,
+            });
+        }
+    }
+    if (valObj) {
+        // input string is JSON, src attribute is required
+        if (!valObj.src) {
+            throw new index_1.ViewerError({
+                id: index_1.ViewerErrorIds.InvalidParameterValue,
+                message: `Unable to parse paintable value: property "src" is missing\nGiven value: ${value}`,
+            });
+        }
+        if (!(0, lodash_es_1.isString)(valObj.src)) {
+            throw new index_1.ViewerError({
+                id: index_1.ViewerErrorIds.InvalidParameterValue,
+                message: `Unable to parse paintable value: property "src" is not a string\nGiven value: ${value}`,
+            });
+        }
+        // split src and options
+        const { src } = valObj, options = __rest(valObj, ["src"]);
+        paintableValue.src = src;
+        // only forward valid paintable options
+        const validOptionKeys = ['uScale', 'vScale', 'uOffset', 'vOffset'];
+        const { validOptions, invalidKeys } = Object.entries(options).reduce((accRes, [curKey, curValue]) => {
+            const isValidKey = validOptionKeys.includes(curKey);
+            if (isValidKey) {
+                accRes.validOptions[curKey] = curValue;
+            }
+            else {
+                accRes.invalidKeys.push(curKey);
+            }
+            return accRes;
+        }, { validOptions: {}, invalidKeys: [] });
+        if (invalidKeys.length) {
+            console.warn('Invalid paintable options provided: ' + invalidKeys.toString());
+        }
+        paintableValue.options = validOptions;
+    }
+    return paintableValue;
+}
+exports.parsePaintable = parsePaintable;
+function _drawPaintableOnMaterial(material, imageSource, scene, options) {
+    var _a, _b, _c, _d;
+    // always take width and height from image source, scaling is done with uvScale properties
+    const widthAndHeight = {
+        width: imageSource.width,
+        height: imageSource.height,
+    };
+    const texture = new index_1.DynamicTexture(`${material.id}.paintable_texture`, widthAndHeight, scene);
+    // draw image on texture
+    const ctx = texture.getContext();
+    ctx.drawImage(imageSource, 0, 0);
+    texture.update();
+    // apply settings from paintable options to tweak position and scaling of image on the texture
+    texture.uScale = (_a = options === null || options === void 0 ? void 0 : options.uScale) !== null && _a !== void 0 ? _a : texture.uScale;
+    texture.vScale = (_b = options === null || options === void 0 ? void 0 : options.vScale) !== null && _b !== void 0 ? _b : texture.vScale;
+    texture.uOffset = (_c = options === null || options === void 0 ? void 0 : options.uOffset) !== null && _c !== void 0 ? _c : texture.uOffset;
+    texture.vOffset = (_d = options === null || options === void 0 ? void 0 : options.vOffset) !== null && _d !== void 0 ? _d : texture.vOffset;
+    // wrap mode is preferred, as it will always show the texture, no matter which position offset is currently chosen
+    // clamp mode requires more knowledge (and patience) when adjusting the uv scale and offset values
+    texture.wrapU = index_1.Texture.WRAP_ADDRESSMODE;
+    texture.wrapV = index_1.Texture.WRAP_ADDRESSMODE;
+    // apply the paintable texture on the dedicated material type
+    const materialCls = material.getClassName();
+    switch (materialCls) {
+        case 'PBRMaterial':
+            material.albedoTexture = texture;
+            break;
+        case 'StandardMaterial':
+            material.diffuseTexture = texture;
+            break;
+        default:
+            throw new Error(`Setting paintable texture for material of instance "${materialCls}" not implemented (yet)`);
+    }
+}
+/**
+ * Creates a HTML image element based on a SVG string, whereas all the embedded assets in the SVG (eg: fonts, images)
+ * are already loaded and exchanged by their base64 representation.\
+ * There the output image can exist as "standalone" image and may be used for example as a paintable.
+ *
+ * !!CAUTION!!: The used functions within this code section are very well evaluated since most alternatives
+ * somehow don't work in Safari, as mentioned in the following BJS forum entries:
+ * - https://forum.babylonjs.com/t/drawing-svg-content-text-into-dynamictexture-doesnt-work-in-safari-v15/25048
+ * - https://forum.babylonjs.com/t/texture-createfrombase64string-doesnt-seem-to-work-for-ios-devices-initially/25502
+ */
+function _createImageFromSvg(svgSrc) {
+    return __awaiter(this, void 0, void 0, function* () {
+        // replace assets with their base64 versions in svg source code
+        const svgWithAssetsEmbedded = yield _embedAssets(svgSrc);
+        // create data string which can be used as an image source
+        const svgEncoded = 'data:image/svg+xml,' + encodeURIComponent(svgWithAssetsEmbedded);
+        return _createImageFromImgSrc(svgEncoded);
+    });
+}
+/**
+ * Creates an HTML image element from a dedicated image source.\
+ * Also waits until the image has loaded.
+ *
+ * !!CAUTION!!: The `setTimeout` after loading is finished is required due to a Safari bug:
+ * - https://bugs.webkit.org/show_bug.cgi?id=39059
+ * - https://bugs.webkit.org/show_bug.cgi?id=219770
+ *
+ * It's not 100% ensured that the timeout solves the issue in every case, but there is no other way unfortunately.\
+ * => Keep an eye on it in future projects
+ *
+ * @param imgSrc Theoretically every source is valid which is also supported by
+ *               [HTMLImageElement.src](https://developer.mozilla.org/en-US/docs/Web/API/HTMLImageElement/src).\
+ *               Known exceptions are SVGs with embedded assets that are provided as object URL. See comments in
+ *               {@link createImageFromSvg} for further details.
+ */
+function _createImageFromImgSrc(imgSrc) {
+    return __awaiter(this, void 0, void 0, function* () {
+        const img = new Image();
+        yield new Promise((resolve, reject) => {
+            img.onload = () => {
+                setTimeout(resolve, 0);
+            };
+            img.onerror = () => {
+                reject();
+            };
+            img.crossOrigin = 'anonymous';
+            img.src = imgSrc;
+        });
+        return img;
+    });
+}
+/**
+ * Replaces all supported image & font URLs in the given SVG with their base64 representation.
+ */
+function _embedAssets(svgSrc) {
+    return __awaiter(this, void 0, void 0, function* () {
+        const _imageExtensions = ['png', 'gif', 'jpg', 'jpeg', 'svg', 'bmp'];
+        const _fontExtensions = ['woff2', 'woff', 'ttf', 'otf'];
+        const _assetExtensions = [..._imageExtensions, ..._fontExtensions];
+        // Regex copied from https://stackoverflow.com/a/8943487/1273551, not "stress tested"...
+        const urlRegex = /(\bhttps?:\/\/[-A-Z0-9+&@#/%?=~_|!:,.;]*[-A-Z0-9+&@#/%=~_|])/gi;
+        const allUrls = svgSrc.match(urlRegex);
+        const assetUrls = allUrls.filter(url => {
+            const indexParam = url.indexOf('?');
+            // remove url parameter to recognize extension
+            if (indexParam > -1) {
+                url = url.substring(0, indexParam);
+            }
+            return _assetExtensions.some(extension => url.toLowerCase().endsWith(`.${extension}`));
+        });
+        const assetBase64Fetcher = assetUrls.map(_fetchBase64AssetUrl);
+        const assetFetcherResults = yield Promise.all(assetBase64Fetcher);
+        return assetFetcherResults.reduce((svgSrc, x) => svgSrc.replace(x.url, x.base64), svgSrc);
+    });
+}
+/**
+ * Fetch asset (image or font) and convert it to base64 string representation.
+ */
+function _fetchBase64AssetUrl(assetUrl) {
+    return __awaiter(this, void 0, void 0, function* () {
+        // TODO WTT: Cache known base64 representation and only fetch/convert when not already known.
+        //           Usually the fetch shouldn't hit the network but the browser cache since the SVG was already drawn..
+        const resp = yield fetch(assetUrl);
+        const blob = yield resp.blob();
+        return new Promise((resolve, reject) => {
+            const reader = new FileReader();
+            reader.onloadend = (event) => {
+                const target = event.target;
+                if (!target) {
+                    return reject(`Asset with URL "${assetUrl}" could not be loaded.`);
+                }
+                const result = target.result;
+                if (!result) {
+                    return reject(`Asset with URL "${assetUrl}" returned an empty result.`);
+                }
+                resolve({
+                    url: assetUrl,
+                    base64: result.toString(),
+                });
+            };
+            reader.readAsDataURL(blob);
+        });
+    });
+}
 //# sourceMappingURL=paintable-helper.js.map

package/dist/lib-cjs/internal/tags-helper.d.ts

@@ -1,12 +1,12 @@
-import { Material, Node } from '../index';
-/**
- * This is a wrapper around Babylon.js Tags API, as the API is really clunky to use
- */
-declare type TagTarget = Node | Material;
-export declare function hasTag(object: TagTarget, tag: string): boolean;
-export declare function getTags(object: TagTarget): string[];
-export declare function setTags(object: TagTarget, tags: string[]): void;
-export declare function deleteAllTags(object: TagTarget): void;
-export declare function setTagsAsString(object: TagTarget, tagsString: string): void;
-export declare function cloneTags(sourceObject: TagTarget, destinationObject: TagTarget): void;
-export {};
+import { Material, Node } from '../index';
+/**
+ * This is a wrapper around Babylon.js Tags API, as the API is really clunky to use
+ */
+declare type TagTarget = Node | Material;
+export declare function hasTag(object: TagTarget, tag: string): boolean;
+export declare function getTags(object: TagTarget): string[];
+export declare function setTags(object: TagTarget, tags: string[]): void;
+export declare function deleteAllTags(object: TagTarget): void;
+export declare function setTagsAsString(object: TagTarget, tagsString: string): void;
+export declare function cloneTags(sourceObject: TagTarget, destinationObject: TagTarget): void;
+export {};