@combeenation/3d-viewer 5.1.2 → 5.2.0-alpha1

package/src/api/util/sceneLoaderHelper.ts

@@ -1,147 +1,148 @@
-import { Scene } from '@babylonjs/core/scene';
-import { ISceneLoaderPlugin } from '@babylonjs/core/Loading/sceneLoader';
-import { AssetContainer } from '@babylonjs/core/assetContainer';
-import { injectNodeMetadata } from './babylonHelper';
-import has from 'lodash-es/has';
-import { Material } from '@babylonjs/core/Materials/material';
-import { InstancedMesh } from '@babylonjs/core/Meshes/instancedMesh';
-import { Nullable } from '@babylonjs/core/types';
-import { Node as BjsNode } from '@babylonjs/core/node'; //! overload DOM API Node due to name-clash with BJS
-
-const missingMaterialMetadataName = 'missingMaterial';
-
-/**
- * Create and return a custom loader plugin to be registered with SceneLoader, that allows
- * us to run our own code against the input data before using the standard procedure to
- * import.
- * @param previousLoaderPlugin the actual loader that's executed after manipulating the input data
- * @returns Custom loader plugin to be registered with SceneLoader.RegisterPlugin()
- */
-const getCustomCbnBabylonLoaderPlugin = function (previousLoaderPlugin: ISceneLoaderPlugin): ISceneLoaderPlugin {
-  const customLoader: ISceneLoaderPlugin = {
-    name: 'cbnCustomBabylonLoader',
-    extensions: '.babylon',
-    importMesh: previousLoaderPlugin.importMesh,
-    load: previousLoaderPlugin.load,
-    loadAssetContainer: function (scene, data, rootUrl, onError) {
-      //* 1) --- manipulate ORIGINAL data
-      const dataParsed = JSON.parse(data);
-      //* 2) --- call default (non-custom) loading method
-      const importedContainer = previousLoaderPlugin.loadAssetContainer(scene, data, rootUrl);
-      //* 3) --- manipulate IMPORTED data
-      addMissingMaterialMetadata(dataParsed, importedContainer);
-      //* 4) --- return imported data
-      return importedContainer;
-    },
-  };
-  return customLoader;
-};
-
-/**
- * Return an observer to be applied to meshes in order to post-load missing materials
- * upon set enabled/visible.
- * @param targetMeshOrInstance AbstractMesh the observer will be applied to
- * @param concerningMesh Mesh to look for missing materials on, and create/apply to (when found).
- * @returns observer
- */
-const getMaterialPostLoadObserver = function (targetMeshOrInstance: AbstractMesh, concerningMesh: Mesh) {
-  return (_eventData: any, _eventState: any) => {
-    const hasBeenEnabled = concerningMesh.isEnabled(true);
-    const materialMissing = has(concerningMesh.metadata, missingMaterialMetadataName);
-    if (!hasBeenEnabled || !materialMissing) return;
-    // get id of missing material
-    const missingMatId = concerningMesh.metadata[missingMaterialMetadataName];
-    // try to find material on the scene
-    const existingMat = concerningMesh.getScene().getMaterialById(missingMatId);
-    // assign either existing material or freshly created one
-    concerningMesh.material = existingMat || getMaterialFromCbnAssets(missingMatId, concerningMesh.getScene());
-    // since the material is there now, we do not need the related metadata tag anymore
-    delete concerningMesh.metadata[missingMaterialMetadataName];
-  };
-};
-
-/**
- * Internal function that compares the original meshes on a .babylon file with what was loaded,
- * and tags missing materials with respective metadata on respective meshes.
- * @param dataParsed original data
- * @param container  loaded data
- */
-const addMissingMaterialMetadata = function (dataParsed: any, container: AssetContainer) {
-  container.meshes.forEach(currMeshImported => {
-    for (const currMeshOriginal of dataParsed.meshes) {
-      if (currMeshOriginal.name !== currMeshImported.name) continue;
-      // we're dealing with the original version of the current imported mesh now
-      const materialOnImportedMesh = currMeshImported.material?.id;
-      const materialOnOriginalMesh = currMeshOriginal.materialId;
-      if (!materialOnOriginalMesh || materialOnImportedMesh === materialOnOriginalMesh) continue;
-      // TODO: Just for easier debugging. Remove before publishment...
-      console.info(
-        `Adding "${missingMaterialMetadataName}" info on mesh "${currMeshOriginal.name}" with material "${currMeshOriginal.materialId}"`
-      );
-      // if we're here, the imported mesh has different material than original one
-      window.Cbn?.Assets.assertMaterialExists(materialOnOriginalMesh);
-      injectNodeMetadata(currMeshImported, { [missingMaterialMetadataName]: materialOnOriginalMesh }, false);
-      break;
-    }
-  });
-};
-
-/**
- * Adds an "onEnabledStateChanged" observer to the given mesh and all its parents:
- * The added observer (`getMaterialPostLoadObserver`) handles creation of missing materials once the given node is
- * enabled.
- */
-const addMissingMaterialObserver = function (node: BjsNode) {
-  // set the concerning node, i.e. the node the observer should check for missing material.
-  // for instanced meshes, we want the sourcemesh here.
-  const concerningNode = node instanceof InstancedMesh ? node.sourceMesh : (node as Mesh);
-
-  // observer is pointless if concerning node has no missing material
-  if (!has(concerningNode.metadata, missingMaterialMetadataName)) return;
-
-  // for each of our AbstractMeshes, set an observer on the AbstractMesh itself and all of its parents.
-  let currNode: Nullable<BjsNode> = node;
-  while (currNode) {
-    // Note HAR: Using `addOnce` could be wrong in certain situations.
-    // E.g.:
-    //   * 2 meshes `parentMesh` & `parentMesh.concerningMesh`
-    //   * `concerningMesh` is having the missing material flag
-    //   * Both `parentMesh` & `concerningMesh` are disabled
-    //   * `parentMesh` is enabled -> material should **not** be created as `concerningMesh` is still disabled
-    //   * `parentMesh` is disabled
-    //   * `concerningMesh` is enabled -> material should **not** be created as `concerningMesh` is still invisible
-    //     because its `parentMesh` is ATM disabled
-    //   * `parentMesh` & `concerningMesh` are both enable
-    //     -> material should be created as `concerningMesh` is now actually visible but it isn't, as all observers were
-    //        only fired once 🔥
-    //
-    // However: Using `add` instead of `addOnce` requires rather complicated manual clean up work...
-
-    // add observer. needed only once per node, hence addOnce()
-    node.onEnabledStateChangedObservable.addOnce(getMaterialPostLoadObserver(currNode as AbstractMesh, concerningNode));
-    // console.log('## observer set on: ' + meshOrInstance.name);
-    currNode = currNode.parent;
-  }
-};
-
-/**
- * Look up the provided materials (see library import) and create and return one if found.
- * @param materialId BabylonJs material-id. E.g. 'concrete".
- * @param scene BabylonJs scene
- * @returns PBRMaterial | null
- */
-export const getMaterialFromCbnAssets = function (materialId: string, scene: Scene): Material | null {
-  const materialDefinition = window.Cbn?.Assets.getMaterial(materialId);
-  // The generic `Material.Parse` actually returns a more specific material like `BABYLON.StandardMaterial`,
-  // `BABYLON.PBRMaterial` or stuff like `BABYLON.PBRMetallicRoughnessMaterial` etc. based on the given `customType`
-  // within the material JSON definition
-  const material = materialDefinition && Material.Parse(materialDefinition, scene, '');
-  return material || null;
-};
-
-export {
-  getCustomCbnBabylonLoaderPlugin,
-  getMaterialPostLoadObserver,
-  missingMaterialMetadataName,
-  addMissingMaterialObserver,
-};
+import { injectNodeMetadata } from './babylonHelper';
+import { ISceneLoaderPlugin } from '@babylonjs/core/Loading/sceneLoader';
+import { Material } from '@babylonjs/core/Materials/material';
+import { InstancedMesh } from '@babylonjs/core/Meshes/instancedMesh';
+import { AssetContainer } from '@babylonjs/core/assetContainer';
+//! overload DOM API Node due to name-clash with BJS
+import { Node as BjsNode } from '@babylonjs/core/node';
+import { Scene } from '@babylonjs/core/scene';
+import { Nullable } from '@babylonjs/core/types';
+import has from 'lodash-es/has';
+
+const missingMaterialMetadataName = 'missingMaterial';
+
+/**
+ * Create and return a custom loader plugin to be registered with SceneLoader, that allows
+ * us to run our own code against the input data before using the standard procedure to
+ * import.
+ * @param previousLoaderPlugin the actual loader that's executed after manipulating the input data
+ * @returns Custom loader plugin to be registered with SceneLoader.RegisterPlugin()
+ */
+const getCustomCbnBabylonLoaderPlugin = function (previousLoaderPlugin: ISceneLoaderPlugin): ISceneLoaderPlugin {
+  const customLoader: ISceneLoaderPlugin = {
+    name: 'cbnCustomBabylonLoader',
+    extensions: '.babylon',
+    importMesh: previousLoaderPlugin.importMesh,
+    load: previousLoaderPlugin.load,
+    loadAssetContainer: function (scene, data, rootUrl, onError) {
+      //* 1) --- manipulate ORIGINAL data
+      const dataParsed = JSON.parse(data);
+      //* 2) --- call default (non-custom) loading method
+      const importedContainer = previousLoaderPlugin.loadAssetContainer(scene, data, rootUrl);
+      //* 3) --- manipulate IMPORTED data
+      addMissingMaterialMetadata(dataParsed, importedContainer);
+      //* 4) --- return imported data
+      return importedContainer;
+    },
+  };
+  return customLoader;
+};
+
+/**
+ * Return an observer to be applied to meshes in order to post-load missing materials
+ * upon set enabled/visible.
+ * @param targetMeshOrInstance AbstractMesh the observer will be applied to
+ * @param concerningMesh Mesh to look for missing materials on, and create/apply to (when found).
+ * @returns observer
+ */
+const getMaterialPostLoadObserver = function (targetMeshOrInstance: AbstractMesh, concerningMesh: Mesh) {
+  return (_eventData: any, _eventState: any) => {
+    const hasBeenEnabled = concerningMesh.isEnabled(true);
+    const materialMissing = has(concerningMesh.metadata, missingMaterialMetadataName);
+    if (!hasBeenEnabled || !materialMissing) return;
+    // get id of missing material
+    const missingMatId = concerningMesh.metadata[missingMaterialMetadataName];
+    // try to find material on the scene
+    const existingMat = concerningMesh.getScene().getMaterialById(missingMatId);
+    // assign either existing material or freshly created one
+    concerningMesh.material = existingMat || getMaterialFromCbnAssets(missingMatId, concerningMesh.getScene());
+    // since the material is there now, we do not need the related metadata tag anymore
+    delete concerningMesh.metadata[missingMaterialMetadataName];
+  };
+};
+
+/**
+ * Internal function that compares the original meshes on a .babylon file with what was loaded,
+ * and tags missing materials with respective metadata on respective meshes.
+ * @param dataParsed original data
+ * @param container  loaded data
+ */
+const addMissingMaterialMetadata = function (dataParsed: any, container: AssetContainer) {
+  container.meshes.forEach(currMeshImported => {
+    for (const currMeshOriginal of dataParsed.meshes) {
+      if (currMeshOriginal.name !== currMeshImported.name) continue;
+      // we're dealing with the original version of the current imported mesh now
+      const materialOnImportedMesh = currMeshImported.material?.id;
+      const materialOnOriginalMesh = currMeshOriginal.materialId;
+      if (!materialOnOriginalMesh || materialOnImportedMesh === materialOnOriginalMesh) continue;
+      // TODO: Just for easier debugging. Remove before publishment...
+      console.info(
+        `Adding "${missingMaterialMetadataName}" info on mesh "${currMeshOriginal.name}" with material "${currMeshOriginal.materialId}"`
+      );
+      // if we're here, the imported mesh has different material than original one
+      window.Cbn?.Assets.assertMaterialExists(materialOnOriginalMesh);
+      injectNodeMetadata(currMeshImported, { [missingMaterialMetadataName]: materialOnOriginalMesh }, false);
+      break;
+    }
+  });
+};
+
+/**
+ * Adds an "onEnabledStateChanged" observer to the given mesh and all its parents:
+ * The added observer (`getMaterialPostLoadObserver`) handles creation of missing materials once the given node is
+ * enabled.
+ */
+const addMissingMaterialObserver = function (node: BjsNode) {
+  // set the concerning node, i.e. the node the observer should check for missing material.
+  // for instanced meshes, we want the sourcemesh here.
+  const concerningNode = node instanceof InstancedMesh ? node.sourceMesh : (node as Mesh);
+
+  // observer is pointless if concerning node has no missing material
+  if (!has(concerningNode.metadata, missingMaterialMetadataName)) return;
+
+  // for each of our AbstractMeshes, set an observer on the AbstractMesh itself and all of its parents.
+  let currNode: Nullable<BjsNode> = node;
+  while (currNode) {
+    // Note HAR: Using `addOnce` could be wrong in certain situations.
+    // E.g.:
+    //   * 2 meshes `parentMesh` & `parentMesh.concerningMesh`
+    //   * `concerningMesh` is having the missing material flag
+    //   * Both `parentMesh` & `concerningMesh` are disabled
+    //   * `parentMesh` is enabled -> material should **not** be created as `concerningMesh` is still disabled
+    //   * `parentMesh` is disabled
+    //   * `concerningMesh` is enabled -> material should **not** be created as `concerningMesh` is still invisible
+    //     because its `parentMesh` is ATM disabled
+    //   * `parentMesh` & `concerningMesh` are both enable
+    //     -> material should be created as `concerningMesh` is now actually visible but it isn't, as all observers were
+    //        only fired once 🔥
+    //
+    // However: Using `add` instead of `addOnce` requires rather complicated manual clean up work...
+
+    // add observer. needed only once per node, hence addOnce()
+    node.onEnabledStateChangedObservable.addOnce(getMaterialPostLoadObserver(currNode as AbstractMesh, concerningNode));
+    // console.log('## observer set on: ' + meshOrInstance.name);
+    currNode = currNode.parent;
+  }
+};
+
+/**
+ * Look up the provided materials (see library import) and create and return one if found.
+ * @param materialId BabylonJs material-id. E.g. 'concrete".
+ * @param scene BabylonJs scene
+ * @returns PBRMaterial | null
+ */
+export const getMaterialFromCbnAssets = function (materialId: string, scene: Scene): Material | null {
+  const materialDefinition = window.Cbn?.Assets.getMaterial(materialId);
+  // The generic `Material.Parse` actually returns a more specific material like `BABYLON.StandardMaterial`,
+  // `BABYLON.PBRMaterial` or stuff like `BABYLON.PBRMetallicRoughnessMaterial` etc. based on the given `customType`
+  // within the material JSON definition
+  const material = materialDefinition && Material.Parse(materialDefinition, scene, '');
+  return material || null;
+};
+
+export {
+  getCustomCbnBabylonLoaderPlugin,
+  getMaterialPostLoadObserver,
+  missingMaterialMetadataName,
+  addMissingMaterialObserver,
+};

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,49 +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 (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 };
+import { Element } from '../classes/element';
+import { Variant } from '../classes/variant';
+import { VariantInstance } from '../classes/variantInstance';
+import { Mesh } from '@babylonjs/core/Meshes/mesh';
+
+/**
+ * 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/dev.ts

@@ -1,64 +1,61 @@
-import { Event } from 'api/classes/event';
-import { set } from 'lodash-es';
-
-import { Emitter, Viewer } from '.';
-
-import {
-  createSpec,
-  beforeBootstrap,
-  afterBootstrap,
-  createUIelements,
-  getMaterial,
-  mockMaterials,
-} 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);
-
-window.Cbn = {
-  Assets: {
-    getMaterial(materialId: string) {
-      const material = getMaterial(materialId);
-      if (material) return material;
-
-      // Fallback to random mock material
-      return mockMaterials[Math.floor(Math.random() * mockMaterials.length)];
-    },
-    assertMaterialExists(materialId: string): boolean {
-      return true;
-    },
-  },
-};
-
-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 { Emitter, Event, Viewer } from '.';
+import {
+  afterBootstrap,
+  beforeBootstrap,
+  createSpec,
+  createUIelements,
+  getMaterial,
+  mockMaterials,
+} from '../assets/index';
+import { set } from 'lodash-es';
+
+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);
+
+window.Cbn = {
+  Assets: {
+    getMaterial(materialId: string) {
+      const material = getMaterial(materialId);
+      if (material) return material;
+
+      // Fallback to random mock material
+      return mockMaterials[Math.floor(Math.random() * mockMaterials.length)];
+    },
+    assertMaterialExists(materialId: string): boolean {
+      return true;
+    },
+  },
+};
+
+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;
+}