@combeenation/3d-viewer 5.0.1 → 5.0.3-beta2

package/src/api/util/resourceHelper.ts

@@ -1,173 +1,189 @@
-import { emitter, Event } 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);
-  let 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();
-};
-
-/**
- * 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
-    const context = this;
-    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> {
-  let img = new Image();
-
-  await new Promise(resolve => {
-    img.onload = () => {
-      setTimeout(resolve, 0);
-    };
-    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 =>
-    _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, debounce, mergeMaps, createImageFromSvg, createImageFromImgSrc };
+import { emitter, Event } 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);
+  let 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: BabylonJS 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
+    const context = this;
+    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> {
+  let img = new Image();
+
+  await new Promise(resolve => {
+    img.onload = () => {
+      setTimeout(resolve, 0);
+    };
+    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 =>
+    _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 };

package/src/api/util/stringHelper.ts

@@ -1,23 +1,23 @@
-/**
- * Creates a random uuidv4.
- */
-const uuidv4 = function () {
-  // @ts-ignore
-  return ([1e7] + -1e3 + -4e3 + -8e3 + -1e11).replace(/[018]/g, c =>
-    (c ^ (crypto.getRandomValues(new Uint8Array(1))[0] & (15 >> (c / 4)))).toString(16)
-  );
-};
-
-/**
- * Converts a string from camel case to snake case.
- */
-const camelToSnakeCase = function (str: string): string {
-  return str
-    .replace(/([A-Z])/g, ' $1')
-    .trim()
-    .split(' ')
-    .join('_')
-    .toLowerCase();
-};
-
-export { uuidv4, camelToSnakeCase };
+/**
+ * Creates a random uuidv4.
+ */
+const uuidv4 = function () {
+  // @ts-ignore
+  return ([1e7] + -1e3 + -4e3 + -8e3 + -1e11).replace(/[018]/g, c =>
+    (c ^ (crypto.getRandomValues(new Uint8Array(1))[0] & (15 >> (c / 4)))).toString(16)
+  );
+};
+
+/**
+ * Converts a string from camel case to snake case.
+ */
+const camelToSnakeCase = function (str: string): string {
+  return str
+    .replace(/([A-Z])/g, ' $1')
+    .trim()
+    .split(' ')
+    .join('_')
+    .toLowerCase();
+};
+
+export { uuidv4, camelToSnakeCase };

package/src/api/util/structureHelper.ts

@@ -1,43 +1,49 @@
-import { Mesh } from '@babylonjs/core/Meshes/mesh';
-import { Variant } from '../classes/variant';
-import { VariantInstance } from '../classes/variantInstance';
-import { Element } from '../classes/element';
-
-/**
- * Find out if a mesh is part of a list of excluded geometry
- * @param mesh BJS mesh
- * @param list list of excluded geometry
- * @returns boolean based on whether mesh was found in list
- */
-const isMeshIncludedInExclusionList = function (mesh: Mesh, list: ExcludedGeometry): boolean {
-  const checkMesh = (inputMesh: Mesh, meshToCheck: Mesh) => {
-    return inputMesh.uniqueId === meshToCheck.uniqueId;
-  };
-  const checkElement = (inputEl: Element, meshToCheck: Mesh) => {
-    return inputEl.meshesFlat.some(m => checkMesh(m, meshToCheck));
-  };
-  const checkVariant = (inputVariant: Variant, meshToCheck: Mesh) => {
-    return inputVariant.elements.some(el => checkElement(el, meshToCheck));
-  };
-  const checkVariantInstance = (inputVarInst: VariantInstance, meshToCheck: Mesh) => {
-    return inputVarInst.variant.elements.some(el => checkElement(el, meshToCheck));
-  };
-  const isExcluded = list.some(geometryToExclude => {
-    if (geometryToExclude instanceof VariantInstance) {
-      return checkVariantInstance(geometryToExclude, mesh);
-    }
-    if (geometryToExclude instanceof Variant) {
-      return checkVariant(geometryToExclude, mesh);
-    }
-    if (geometryToExclude instanceof Element) {
-      return checkElement(geometryToExclude, mesh);
-    }
-    if (geometryToExclude instanceof Mesh) {
-      return checkMesh(geometryToExclude, mesh);
-    }
-    return false;
-  });
-  return isExcluded;
-};
-
-export { isMeshIncludedInExclusionList };
+import { Mesh } from '@babylonjs/core/Meshes/mesh';
+import { Variant } from '../classes/variant';
+import { VariantInstance } from '../classes/variantInstance';
+import { Element } from '../classes/element';
+
+/**
+ * Find out if a mesh is part of a list of excluded geometry
+ * @param mesh BJS mesh
+ * @param list list of excluded geometry
+ * @returns boolean based on whether mesh (or one of its parents) was found in list
+ */
+const isMeshIncludedInExclusionList = function (mesh: Mesh, list: ExcludedGeometryList): boolean {
+  const checkMesh = (inputMesh: Mesh, meshToCheck: Mesh) => {
+    return inputMesh.uniqueId === meshToCheck.uniqueId;
+  };
+  const checkElement = (inputEl: Element, meshToCheck: Mesh) => {
+    return inputEl.meshesFlat.some(m => checkMesh(m, meshToCheck));
+  };
+  const checkVariant = (inputVariant: Variant, meshToCheck: Mesh) => {
+    return inputVariant.elements.some(el => checkElement(el, meshToCheck));
+  };
+  const checkVariantInstance = (inputVarInst: VariantInstance, meshToCheck: Mesh) => {
+    return inputVarInst.variant.elements.some(el => checkElement(el, meshToCheck));
+  };
+  const check = (geometryToExclude: ExcludedGeometry, mesh: Mesh) => {
+    if (geometryToExclude instanceof VariantInstance) {
+      return checkVariantInstance(geometryToExclude, mesh);
+    }
+    if (geometryToExclude instanceof Variant) {
+      return checkVariant(geometryToExclude, mesh);
+    }
+    if (geometryToExclude instanceof Element) {
+      return checkElement(geometryToExclude, mesh);
+    }
+    if (geometryToExclude instanceof Mesh) {
+      return checkMesh(geometryToExclude, mesh);
+    }
+    return false;
+  };
+
+  let isExcluded = list.some(geometryToExclude => check(geometryToExclude, mesh));
+  if (!isExcluded && mesh.parent instanceof Mesh) {
+    isExcluded = isMeshIncludedInExclusionList(mesh.parent, list);
+  }
+
+  return isExcluded;
+};
+
+export { isMeshIncludedInExclusionList };

package/src/buildinfo.json

@@ -1,3 +1,3 @@
-{
-  "version": "@VERSION@"
-}
+{
+  "version": "@VERSION@"
+}

package/src/commonjs.tsconfig.json

@@ -1,10 +1,10 @@
-{
-  "extends": "./tsconfig",
-  "exclude": ["dev.ts", "assets"],
-  "compilerOptions": {
-    "module": "commonjs",
-    "moduleResolution": "node",
-    "outDir": "../dist/lib-cjs",
-    "declaration": true
-  }
-}
+{
+  "extends": "./tsconfig",
+  "exclude": ["dev.ts", "assets"],
+  "compilerOptions": {
+    "module": "commonjs",
+    "moduleResolution": "node",
+    "outDir": "../dist/lib-cjs",
+    "declaration": true
+  }
+}

package/src/declaration.tsconfig.json

@@ -1,8 +1,8 @@
-{
-  "extends": "./tsconfig",
-  "compilerOptions": {
-    "declaration": true,
-    "outDir": "../dist/types",
-    "emitDeclarationOnly": true
-  }
-}
+{
+  "extends": "./tsconfig",
+  "compilerOptions": {
+    "declaration": true,
+    "outDir": "../dist/types",
+    "emitDeclarationOnly": true
+  }
+}

package/src/dev.ts

@@ -1,42 +1,42 @@
-import { Event } from 'api/classes/event';
-import { set } from 'lodash-es';
-
-import { Emitter, Viewer } from '.';
-
-import { createSpec, beforeBootstrap, afterBootstrap, createUIelements } from '../assets/index';
-
-const loadingElement = document.getElementById('loading') as HTMLDivElement;
-
-Emitter.on(Event.BOOTSTRAP_START, () => {
-  Emitter.on(Event.LOADING_START, () => {
-    loadingElement!.style.display = 'block';
-  });
-  Emitter.on(Event.VARIANT_CREATED, () => {
-    loadingElement!.style.display = 'none';
-  });
-});
-
-document.addEventListener('DOMContentLoaded', main);
-
-async function main() {
-  const viewer = await bootstrapViewer();
-  // "Export" for console testing...
-  set(window, 'viewer', viewer);
-}
-
-async function bootstrapViewer() {
-  const canvas = document.getElementById('babylon-canvas') as HTMLCanvasElement;
-  if (!canvas) {
-    throw new Error('Missing "canvas" element');
-  }
-  const viewer = new Viewer(canvas, createSpec());
-  await beforeBootstrap(viewer);
-  try {
-    await viewer.bootstrap();
-  } catch (e) {
-    console.error(e);
-  }
-  await afterBootstrap(viewer);
-  await createUIelements(viewer);
-  return viewer;
-}
+import { Event } from 'api/classes/event';
+import { set } from 'lodash-es';
+
+import { Emitter, Viewer } from '.';
+
+import { createSpec, beforeBootstrap, afterBootstrap, createUIelements } from '../assets/index';
+
+const loadingElement = document.getElementById('loading') as HTMLDivElement;
+
+Emitter.on(Event.BOOTSTRAP_START, () => {
+  Emitter.on(Event.LOADING_START, () => {
+    loadingElement!.style.display = 'block';
+  });
+  Emitter.on(Event.VARIANT_CREATED, () => {
+    loadingElement!.style.display = 'none';
+  });
+});
+
+document.addEventListener('DOMContentLoaded', main);
+
+async function main() {
+  const viewer = await bootstrapViewer();
+  // "Export" for console testing...
+  set(window, 'viewer', viewer);
+}
+
+async function bootstrapViewer() {
+  const canvas = document.getElementById('babylon-canvas') as HTMLCanvasElement;
+  if (!canvas) {
+    throw new Error('Missing "canvas" element');
+  }
+  const viewer = new Viewer(canvas, createSpec());
+  await beforeBootstrap(viewer);
+  try {
+    await viewer.bootstrap();
+  } catch (e) {
+    console.error(e);
+  }
+  await afterBootstrap(viewer);
+  await createUIelements(viewer);
+  return viewer;
+}