@combeenation/3d-viewer 9.0.1 → 9.0.2-alpha1

package/src/api/util/resourceHelper.ts

@@ -1,198 +1,201 @@
-import { Event, emitter } from '../classes/event';
-
-/**
- * Sleeps for a certain amount of microseconds.
- */
-const sleep = (ms: number) => new Promise(resolve => window.setTimeout(resolve, ms));
-
-/**
- * Loads any kind of response from given path.
- * @emits {@link Event.LOADING_START}
- * @emits {@link Event.LOADING_END}
- */
-const load = async function (path: string): Promise<Response> {
-  emitter.emit(Event.LOADING_START, path);
-  const data = await fetch(path);
-  emitter.emit(Event.LOADING_END, path);
-  return data;
-};
-
-/**
- * Loads a JSON from a given path.
- * @emits {@link Event.LOADING_START}
- * @emits {@link Event.LOADING_END}
- */
-const loadJson = async function <T>(path: string): Promise<T> {
-  const response = await load(path);
-  return response.json();
-};
-
-/**
- * Loads a Text from a given path.
- * @emits {@link Event.LOADING_START}
- * @emits {@link Event.LOADING_END}
- */
-const loadText = async function (path: string): Promise<string> {
-  const response = await load(path);
-  return response.text();
-};
-
-/**
- * Loads a Javascript ressource.\
- * Usefull for including packages via CDN (eg: Babylon.js Inspector)
- */
-const loadJavascript = (url: string): Promise<void> =>
-  new Promise(resolve => {
-    const scriptEl = document.createElement('script');
-
-    scriptEl.setAttribute('src', url);
-    scriptEl.setAttribute('type', 'text/javascript');
-    scriptEl.setAttribute('crossorigin', 'anonymous');
-    scriptEl.onload = () => resolve();
-
-    document.head.appendChild(scriptEl);
-  });
-
-/**
- * Debounces: it limits the rate at which a function can fire.
- */
-const debounce = function (func: Function, wait: number, immediate: boolean = false) {
-  let timeout: any;
-  return function () {
-    // @ts-ignore this function is not very "ESLint friendly", also see ESLint disable comment 2 lines below
-    // => take some time to refactor this function when there is time
-    const context = this;
-    // eslint-disable-next-line prefer-rest-params
-    const args = arguments;
-    const later = function () {
-      timeout = null;
-      if (!immediate) {
-        func.apply(context, args);
-      }
-    };
-    const callNow = immediate && !timeout;
-    clearTimeout(timeout);
-    timeout = setTimeout(later, wait);
-    if (callNow) {
-      func.apply(context, args);
-    }
-  };
-};
-
-/**
- * Merges multiple maps.
- */
-const mergeMaps = function <TKey, TValue>(...maps: Map<TKey, TValue>[]): Map<TKey, TValue> {
-  const resultMap = new Map<TKey, TValue>();
-  maps.forEach(map => {
-    map.forEach((v, k) => {
-      resultMap.set(k, v);
-    });
-  });
-  return resultMap;
-};
-
-/**
- * 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
- */
-const createImageFromSvg = async function (svgSrc: string): Promise<HTMLImageElement> {
-  // replace assets with their base64 versions in svg source code
-  const svgWithAssetsEmbedded = await _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.
- */
-const createImageFromImgSrc = async function (imgSrc: string): Promise<HTMLImageElement> {
-  const img = new Image();
-
-  await new Promise(resolve => {
-    img.onload = () => {
-      setTimeout(resolve, 0);
-    };
-    img.crossOrigin = 'anonymous';
-    img.src = imgSrc;
-  });
-
-  return img;
-};
-
-/**
- * Replaces all supported image & font URLs in the given SVG with their base64 representation.
- */
-const _embedAssets = async function (svgSrc: string): Promise<string> {
-  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) as string[];
-
-  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 = await 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.
- */
-const _fetchBase64AssetUrl = async function (assetUrl: string): Promise<{ url: string; base64: string }> {
-  // TODO: 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.
-  //       See comments of "createImageBitmapFromSvg" for some considerations...
-  return new Promise(async (resolve, reject) => {
-    const resp = await fetch(assetUrl);
-    const blob = await resp.blob();
-    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() as string,
-      });
-    };
-    reader.readAsDataURL(blob);
-  });
-};
-
-export { sleep, loadJson, loadText, loadJavascript, debounce, mergeMaps, createImageFromSvg, createImageFromImgSrc };
+import { Event, emitter } from '../classes/event';
+
+/**
+ * Sleeps for a certain amount of microseconds.
+ */
+const sleep = (ms: number) => new Promise(resolve => window.setTimeout(resolve, ms));
+
+/**
+ * Loads any kind of response from given path.
+ * @emits {@link Event.LOADING_START}
+ * @emits {@link Event.LOADING_END}
+ */
+const load = async function (path: string): Promise<Response> {
+  emitter.emit(Event.LOADING_START, path);
+  const data = await fetch(path);
+  emitter.emit(Event.LOADING_END, path);
+  return data;
+};
+
+/**
+ * Loads a JSON from a given path.
+ * @emits {@link Event.LOADING_START}
+ * @emits {@link Event.LOADING_END}
+ */
+const loadJson = async function <T>(path: string): Promise<T> {
+  const response = await load(path);
+  return response.json();
+};
+
+/**
+ * Loads a Text from a given path.
+ * @emits {@link Event.LOADING_START}
+ * @emits {@link Event.LOADING_END}
+ */
+const loadText = async function (path: string): Promise<string> {
+  const response = await load(path);
+  return response.text();
+};
+
+/**
+ * Loads a Javascript ressource.\
+ * Usefull for including packages via CDN (eg: Babylon.js Inspector)
+ */
+const loadJavascript = (url: string): Promise<void> =>
+  new Promise(resolve => {
+    const scriptEl = document.createElement('script');
+
+    scriptEl.setAttribute('src', url);
+    scriptEl.setAttribute('type', 'text/javascript');
+    scriptEl.setAttribute('crossorigin', 'anonymous');
+    scriptEl.onload = () => resolve();
+
+    document.head.appendChild(scriptEl);
+  });
+
+/**
+ * Debounces: it limits the rate at which a function can fire.
+ */
+const debounce = function (func: Function, wait: number, immediate: boolean = false) {
+  let timeout: any;
+  return function () {
+    // @ts-ignore this function is not very "ESLint friendly", also see ESLint disable comment 2 lines below
+    // => take some time to refactor this function when there is time
+    const context = this;
+    // eslint-disable-next-line prefer-rest-params
+    const args = arguments;
+    const later = function () {
+      timeout = null;
+      if (!immediate) {
+        func.apply(context, args);
+      }
+    };
+    const callNow = immediate && !timeout;
+    clearTimeout(timeout);
+    timeout = setTimeout(later, wait);
+    if (callNow) {
+      func.apply(context, args);
+    }
+  };
+};
+
+/**
+ * Merges multiple maps.
+ */
+const mergeMaps = function <TKey, TValue>(...maps: Map<TKey, TValue>[]): Map<TKey, TValue> {
+  const resultMap = new Map<TKey, TValue>();
+  maps.forEach(map => {
+    map.forEach((v, k) => {
+      resultMap.set(k, v);
+    });
+  });
+  return resultMap;
+};
+
+/**
+ * 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
+ */
+const createImageFromSvg = async function (svgSrc: string): Promise<HTMLImageElement> {
+  // replace assets with their base64 versions in svg source code
+  const svgWithAssetsEmbedded = await _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.
+ */
+const createImageFromImgSrc = async function (imgSrc: string): Promise<HTMLImageElement> {
+  const img = new Image();
+
+  await 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.
+ */
+const _embedAssets = async function (svgSrc: string): Promise<string> {
+  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) as string[];
+
+  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 = await 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.
+ */
+const _fetchBase64AssetUrl = async function (assetUrl: string): Promise<{ url: string; base64: string }> {
+  // TODO: 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.
+  //       See comments of "createImageBitmapFromSvg" for some considerations...
+  return new Promise(async (resolve, reject) => {
+    const resp = await fetch(assetUrl);
+    const blob = await resp.blob();
+    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() as string,
+      });
+    };
+    reader.readAsDataURL(blob);
+  });
+};
+
+export { sleep, loadJson, loadText, loadJavascript, debounce, mergeMaps, createImageFromSvg, createImageFromImgSrc };