@combeenation/3d-viewer 12.4.1 → 13.0.0

package/src/api/util/resourceHelper.ts

@@ -1,201 +0,0 @@
-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 };

package/src/api/util/sceneLoaderHelper.ts

@@ -1,247 +0,0 @@
-import { Event, emitter } from '../classes/event';
-import { applyMaterial, getOrCreateMaterial, injectMetadata } from './babylonHelper';
-import { sleep } from './resourceHelper';
-import { ISceneLoaderPlugin } from '@babylonjs/core/Loading/sceneLoader';
-import { Material } from '@babylonjs/core/Materials/material';
-import { InstancedMesh } from '@babylonjs/core/Meshes/instancedMesh';
-import { Observer } from '@babylonjs/core/Misc/observable';
-import { Tags } from '@babylonjs/core/Misc/tags';
-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 { isArray, isString } from 'lodash-es';
-import has from 'lodash-es/has';
-
-// map for keeping track of active "node enable" observers
-const enableObserverMap: {
-  [concerningNodeId: string]: { currNodeId: string; observer: Nullable<Observer<boolean>> }[];
-} = {};
-
-export const missingMaterialMetadataName = 'missingMaterial';
-export const parsedMaterialIdMetadataName = 'parsedMaterialId';
-
-/**
- * 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()
- */
-export 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);
-      reconstructTagsForInstancedMeshes(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 concerningMesh Mesh to look for missing materials on, and create/apply to (when found).
- * @returns observer
- */
-export const getMaterialPostLoadObserver = function (concerningMesh: Mesh) {
-  return async () => {
-    const scene = concerningMesh.getScene();
-
-    // can't check `isEnabled` immediatly, since the enabled state of parents and childs is not synced yet
-    // postpone one cycle to ensure a correct parent-child enable relation
-    await sleep(0);
-
-    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];
-    // get material and apply it on the concerning mesh after all textures have been loaded
-    const material = await getOrCreateMaterial(concerningMesh.getScene(), missingMatId);
-    applyMaterial(material, concerningMesh).then(() =>
-      emitter.emit(Event.MESH_MATERIAL_APPLIED, concerningMesh, material)
-    );
-    // since the material is there now, we do not need the related metadata tag anymore
-    delete concerningMesh.metadata[missingMaterialMetadataName];
-
-    // remove all "enable" observers that were assigned to the concerning mesh
-    // the mesh got visible and therefore the observers are not needed anymore
-    enableObserverMap[concerningMesh.id]?.forEach(entry => {
-      const currNode = scene.getMeshById(entry.currNodeId);
-      currNode?.onEnabledStateChangedObservable.remove(entry.observer);
-    });
-    // also remove from the local observer map
-    delete enableObserverMap[concerningMesh.id];
-  };
-};
-
-type InstanceData = {
-  name: string;
-  tags?: string;
-};
-
-function _isMeshInstanceData(data: any): data is InstanceData {
-  const hasName = isString(data.name);
-  const hasValidTags = !data.tags || isString(data.tags);
-  return hasName && hasValidTags;
-}
-
-type MeshData = {
-  name: string;
-  materialId?: string;
-  instances?: unknown[];
-};
-
-function _isMeshData(data: any): data is MeshData {
-  const hasName = isString(data.name);
-  const hasValidMaterialId = !data.materialId || isString(data.materialId);
-
-  return hasName && hasValidMaterialId;
-}
-
-type DataWithMeshes = { meshes: unknown[] };
-
-function _isDataWithMeshes(data: any): data is DataWithMeshes {
-  return data && isArray(data.meshes);
-}
-
-/**
- * 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
- */
-export const addMissingMaterialMetadata = function (dataParsed: unknown, container: AssetContainer) {
-  if (!_isDataWithMeshes(dataParsed)) return;
-
-  const validatedMeshes = dataParsed.meshes.filter(_isMeshData);
-
-  container.meshes.forEach(importedMesh => {
-    const parsedMesh = validatedMeshes.find(mesh => mesh.name === importedMesh.name);
-
-    // save original material id of the imported babylon or GLB file
-    injectMetadata(importedMesh, { [parsedMaterialIdMetadataName]: parsedMesh?.materialId }, false);
-
-    const materialOnImportedMesh = importedMesh.material?.id;
-    const materialOnOriginalMesh = parsedMesh?.materialId;
-
-    if (materialOnOriginalMesh && materialOnImportedMesh !== materialOnOriginalMesh) {
-      window.Cbn?.Assets.assertMaterialExists(materialOnOriginalMesh);
-      injectMetadata(importedMesh, { [missingMaterialMetadataName]: materialOnOriginalMesh }, false);
-    }
-  });
-};
-
-/**
- * Help function for manipulating tags of instances meshes after parsing.
- * Per default babylon attaches the tags of the source mesh to the instance, **but only** if no tags are set for the
- * instanced mesh. If the instanced mesh has dedicated tags set, the ones from the source mesh are **not** copied over.
- * In this case it's not possible to have tags on the source mesh but not on the instance, which is a problem with our
- * tagging system in the viewer and the Combeenation asset editor as well.
- * This function rejects the default tag import algorithm and just copies the tags of the original parsed node without
- * any parent synchronization.
- *
- * @param dataParsed original data
- * @param container  loaded data
- */
-export const reconstructTagsForInstancedMeshes = function (dataParsed: unknown, container: AssetContainer) {
-  if (!_isDataWithMeshes(dataParsed)) return;
-
-  const validatedMeshes = dataParsed.meshes.filter(_isMeshData);
-
-  container.meshes.forEach(importedMesh => {
-    if (importedMesh instanceof InstancedMesh) {
-      // remove all tags from the imported mesh if there are some, since these tags are probably coming from the
-      // source mesh, if no tags are set there is no need for further operation though
-      const importedTags = Tags.GetTags(importedMesh);
-      if (importedTags) {
-        Tags.RemoveTagsFrom(importedMesh, importedTags);
-
-        // get tags of parsed instanced mesh and set them on the imported instanced mesh
-        const parsedSourceMesh = validatedMeshes.find(mesh => mesh.name === importedMesh.sourceMesh.name);
-        const validatedSourceMeshInstances = parsedSourceMesh?.instances?.filter(_isMeshInstanceData);
-        const parsedInstancedMesh = validatedSourceMeshInstances?.find(mesh => mesh.name === importedMesh.name);
-        const parsedTags = parsedInstancedMesh?.tags;
-        if (parsedTags) {
-          Tags.AddTagsTo(importedMesh, parsedTags);
-        }
-      }
-    }
-  });
-};
-
-/**
- * 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.
- */
-export 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) {
-    const callback = getMaterialPostLoadObserver(concerningNode);
-    const observer = currNode.onEnabledStateChangedObservable.add(callback);
-
-    // store the observer in a local map to keep track of the active "enable" observers
-    // observers will be removed when the concerning node gets enabled
-    if (!enableObserverMap[concerningNode.id]) {
-      enableObserverMap[concerningNode.id] = [];
-    }
-    enableObserverMap[concerningNode.id].push({ currNodeId: currNode.id, observer });
-
-    currNode = currNode.parent;
-  }
-};
-
-export const removeMissingMaterialObserver = 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);
-  let currNode: Nullable<BjsNode> = node;
-  while (currNode) {
-    enableObserverMap[concerningNode.id]?.forEach(entry => {
-      if (entry.currNodeId === currNode?.id) {
-        currNode.onEnabledStateChangedObservable.remove(entry.observer);
-      }
-    });
-    currNode = currNode.parent;
-  }
-  delete enableObserverMap[concerningNode.id];
-};
-
-/**
- * Look up the provided materials (see library import) and create and return one if found.
- *
- * @param materialId Babylon.js material-id. E.g. 'concrete".
- * @param scene Babylon.js scene
- * @returns PBRMaterial | null
- */
-export const createMaterialFromCbnAssets = async function (materialId: string, scene: Scene): Promise<Material | null> {
-  const materialDefinition = await 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;
-};

package/src/api/util/stringHelper.ts

@@ -1,30 +0,0 @@
-/**
- * Creates a random uuidv4.
- */
-const uuidv4 = function () {
-  return ([1e7].toString() + -1e3 + -4e3 + -8e3 + -1e11).replace(/[018]/g, c => {
-    const cNum = parseInt(c);
-    return (cNum ^ (crypto.getRandomValues(new Uint8Array(1))[0] & (15 >> (cNum / 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();
-};
-
-/**
- * Replaces all dots from the input string with a desired character ('/' by default)
- */
-const replaceDots = function (str: string, replaceChar = '/'): string {
-  return str.split('.').join(replaceChar);
-};
-
-export { uuidv4, camelToSnakeCase, replaceDots };

package/src/api/util/structureHelper.ts

@@ -1,62 +0,0 @@
-import { Element } from '../classes/element';
-import { Variant } from '../classes/variant';
-import { VariantInstance } from '../classes/variantInstance';
-import { TransformNode } from '@babylonjs/core/Meshes/transformNode';
-import { Tags } from '@babylonjs/core/Misc/tags';
-
-/**
- * Find out if a node is part of a list of excluded geometry
- * @param node BJS node
- * @param list list of excluded geometry
- * @returns boolean based on whether node (or one of its parents) was found in list
- */
-const isNodeIncludedInExclusionList = function (
-  node: TransformNode,
-  list: ExcludedGeometryList,
-  skipParentCheck?: boolean
-): boolean {
-  const checkNode = (inputNode: TransformNode, nodeToCheck: TransformNode) => {
-    return inputNode.name === nodeToCheck.name;
-  };
-  const checkElement = (inputEl: Element, nodeToCheck: TransformNode) => {
-    return inputEl.nodesFlat.some(m => checkNode(m, nodeToCheck));
-  };
-  const checkVariant = (inputVariant: Variant, nodeToCheck: TransformNode) => {
-    return inputVariant.elements.some(el => checkElement(el, nodeToCheck));
-  };
-  const checkVariantInstance = (inputVarInst: VariantInstance, nodeToCheck: TransformNode) => {
-    return inputVarInst.variant.elements.some(el => checkElement(el, nodeToCheck));
-  };
-  const checkTagManagerSubject = (inputSubject: TagManagerSubject, nodeToCheck: TransformNode) => {
-    const nameMatches = inputSubject.nodeName && inputSubject.nodeName === nodeToCheck.name;
-    const tagMatches = inputSubject.tagName && Tags.MatchesQuery(nodeToCheck, inputSubject.tagName);
-    return nameMatches || tagMatches;
-  };
-  const check = (geometryToExclude: ExcludedGeometry, node: TransformNode) => {
-    if (geometryToExclude instanceof VariantInstance) {
-      return checkVariantInstance(geometryToExclude, node);
-    }
-    if (geometryToExclude instanceof Variant) {
-      return checkVariant(geometryToExclude, node);
-    }
-    if (geometryToExclude instanceof Element) {
-      return checkElement(geometryToExclude, node);
-    }
-    if (geometryToExclude instanceof TransformNode) {
-      return checkNode(geometryToExclude, node);
-    }
-    if ((geometryToExclude as TagManagerSubject).tagName || (geometryToExclude as TagManagerSubject).nodeName) {
-      return checkTagManagerSubject(geometryToExclude as TagManagerSubject, node);
-    }
-    return false;
-  };
-
-  let isExcluded = list.some(geometryToExclude => check(geometryToExclude, node));
-  if (!isExcluded && !skipParentCheck && node.parent instanceof TransformNode) {
-    isExcluded = isNodeIncludedInExclusionList(node.parent, list);
-  }
-
-  return isExcluded;
-};
-
-export { isNodeIncludedInExclusionList };