@combeenation/3d-viewer 9.3.0 → 10.0.0-alpha3

package/src/dev.ts

@@ -1,62 +1,70 @@
-import { Emitter, Event, Viewer } from '.';
-import {
-  afterBootstrap,
-  beforeBootstrap,
-  createSpec,
-  createTagManagerParameterValues,
-  createUIelements,
-  getMaterial,
-  mockMaterials,
-} from '../assets/index';
-import { set } from 'lodash-es';
-
-const loadingElement = document.getElementById('loading') as HTMLDivElement;
-
-Emitter.on(Event.BOOTSTRAP_START, () => {
-  loadingElement!.style.display = 'block';
-});
-Emitter.on(Event.BOOTSTRAP_END, () => {
-  loadingElement!.style.display = 'none';
-});
-
-document.addEventListener('DOMContentLoaded', main);
-
-window.Cbn = {
-  Assets: {
-    async getMaterial(materialId: string) {
-      //! this creates a new function on the object that uses the imported function of the same name..
-      const material = await 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;
-    },
-    reportDuplicateNodeName(nodeNameOrArrayOfNodeNames: string | string[]): void {},
-  },
-};
-
-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(createTagManagerParameterValues(viewer));
-  } catch (e) {
-    console.error(e);
-  }
-  await afterBootstrap(viewer);
-  await createUIelements(viewer);
-  return viewer;
-}
+import { Emitter, Event, Viewer } from '.';
+import {
+  afterBootstrap,
+  beforeBootstrap,
+  createSpec,
+  createTagManagerParameterValues,
+  createUIelements,
+  getMaterial,
+  mockMaterials,
+} from '../assets/index';
+import { set } from 'lodash-es';
+
+const loadingElement = document.getElementById('loading') as HTMLDivElement;
+
+Emitter.on(Event.BOOTSTRAP_START, () => {
+  loadingElement!.style.display = 'block';
+});
+Emitter.on(Event.BOOTSTRAP_END, () => {
+  loadingElement!.style.display = 'none';
+});
+
+document.addEventListener('DOMContentLoaded', main);
+
+window.Cbn = {
+  Assets: {
+    async getMaterial(materialId: string) {
+      //! this creates a new function on the object that uses the imported function of the same name..
+      const material = await 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;
+    },
+    reportDuplicateNodeName(nodeNameOrArrayOfNodeNames: string | string[]): void {},
+  },
+  utils: {
+    Viewer3dHelper: {
+      getCfgrParentDomElementForInspector() {
+        // render in parent of viewer
+        return document.querySelector('display-container')!;
+      },
+    },
+  },
+};
+
+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(createTagManagerParameterValues(viewer));
+  } catch (e) {
+    console.error(e);
+  }
+  await afterBootstrap(viewer);
+  await createUIelements(viewer);
+  return viewer;
+}

package/src/index.ts

@@ -1,103 +1,103 @@
-/// <reference path="api/util/globalTypes.ts" />
-/// <reference path="types.d.ts" />
-/// <reference types="gsap" />
-import { AnimationInterface } from './api/classes/animationInterface';
-import { Element } from './api/classes/element';
-import { Event, emitter } from './api/classes/event';
-import { EventBroadcaster } from './api/classes/eventBroadcaster';
-import { Parameter } from './api/classes/parameter';
-import { ParameterObservable } from './api/classes/parameterObservable';
-import { Parameterizable } from './api/classes/parameterizable';
-import { PlacementAnimation } from './api/classes/placementAnimation';
-import { Variant } from './api/classes/variant';
-import { VariantInstance } from './api/classes/variantInstance';
-import { VariantParameterizable } from './api/classes/variantParameterizable';
-import { Viewer } from './api/classes/viewer';
-import { ViewerError, ViewerErrorIds } from './api/classes/viewerError';
-import { ViewerLight } from './api/classes/viewerLight';
-import { AnimationManager } from './api/manager/animationManager';
-import { GltfExportManager } from './api/manager/gltfExportManager';
-import { SceneManager } from './api/manager/sceneManager';
-import { TagManager } from './api/manager/tagManager';
-import { VariantInstanceManager } from './api/manager/variantInstanceManager';
-import { SpecStorage } from './api/store/specStorage';
-import * as BabylonHelper from './api/util/babylonHelper';
-import { Animation as BabylonAnimation } from '@babylonjs/core/Animations/animation';
-import { ArcRotateCamera } from '@babylonjs/core/Cameras/arcRotateCamera';
-import { Engine } from '@babylonjs/core/Engines/engine';
-import { DirectionalLight } from '@babylonjs/core/Lights/directionalLight';
-import { HemisphericLight } from '@babylonjs/core/Lights/hemisphericLight';
-import { PBRMaterial } from '@babylonjs/core/Materials/PBR/pbrMaterial';
-import { CubeTexture } from '@babylonjs/core/Materials/Textures/cubeTexture';
-import { DynamicTexture } from '@babylonjs/core/Materials/Textures/dynamicTexture';
-import { Texture } from '@babylonjs/core/Materials/Textures/texture';
-import { Material } from '@babylonjs/core/Materials/material';
-import { StandardMaterial } from '@babylonjs/core/Materials/standardMaterial';
-import { Color3, Color4 } from '@babylonjs/core/Maths/math.color';
-import { Vector3 } from '@babylonjs/core/Maths/math.vector';
-import { AbstractMesh } from '@babylonjs/core/Meshes/abstractMesh';
-import { InstancedMesh } from '@babylonjs/core/Meshes/instancedMesh';
-import { Mesh } from '@babylonjs/core/Meshes/mesh';
-import { MeshBuilder } from '@babylonjs/core/Meshes/meshBuilder';
-import { TransformNode } from '@babylonjs/core/Meshes/transformNode';
-
-/**
- * Without explicitly importing the "BoundingBoxRenderer", we're getting "scene.getBoundingBoxRenderer is undefined"
- * errors when creating HighlightLayer instances. Not sure why but those errors only happen when using the built
- * version of the viewer (e.g. when pulling it from NPM etc.)...
- */
-import '@babylonjs/core/Rendering/boundingBoxRenderer';
-import { Node } from '@babylonjs/core/node';
-import { Scene } from '@babylonjs/core/scene';
-import { EventEmitter } from 'eventemitter3';
-
-/**
- * Expose some frequently used babylon modules by our consumers.
- */
-export {
-  AnimationManager,
-  AnimationInterface,
-  Variant,
-  VariantInstanceManager,
-  Viewer,
-  ParameterObservable,
-  Parameterizable,
-  VariantParameterizable,
-  ViewerLight,
-  emitter as Emitter,
-  EventEmitter,
-  Event,
-  Parameter,
-  VariantInstance,
-  Color3,
-  Color4,
-  Vector3,
-  AbstractMesh,
-  InstancedMesh,
-  Mesh,
-  TransformNode,
-  Node,
-  Material,
-  PBRMaterial,
-  StandardMaterial,
-  Scene,
-  Engine,
-  ArcRotateCamera,
-  DynamicTexture,
-  CubeTexture,
-  MeshBuilder,
-  Texture,
-  BabylonAnimation,
-  HemisphericLight,
-  DirectionalLight,
-  Element,
-  EventBroadcaster,
-  SceneManager,
-  PlacementAnimation,
-  BabylonHelper,
-  GltfExportManager,
-  SpecStorage,
-  TagManager,
-  ViewerError,
-  ViewerErrorIds,
-};
+/// <reference path="api/util/globalTypes.ts" />
+/// <reference path="types.d.ts" />
+/// <reference types="gsap" />
+import { AnimationInterface } from './api/classes/animationInterface';
+import { Element } from './api/classes/element';
+import { Event, emitter } from './api/classes/event';
+import { EventBroadcaster } from './api/classes/eventBroadcaster';
+import { Parameter } from './api/classes/parameter';
+import { ParameterObservable } from './api/classes/parameterObservable';
+import { Parameterizable } from './api/classes/parameterizable';
+import { PlacementAnimation } from './api/classes/placementAnimation';
+import { Variant } from './api/classes/variant';
+import { VariantInstance } from './api/classes/variantInstance';
+import { VariantParameterizable } from './api/classes/variantParameterizable';
+import { Viewer } from './api/classes/viewer';
+import { ViewerError, ViewerErrorIds } from './api/classes/viewerError';
+import { ViewerLight } from './api/classes/viewerLight';
+import { AnimationManager } from './api/manager/animationManager';
+import { GltfExportManager } from './api/manager/gltfExportManager';
+import { SceneManager } from './api/manager/sceneManager';
+import { TagManager } from './api/manager/tagManager';
+import { VariantInstanceManager } from './api/manager/variantInstanceManager';
+import { SpecStorage } from './api/store/specStorage';
+import * as BabylonHelper from './api/util/babylonHelper';
+import { Animation as BabylonAnimation } from '@babylonjs/core/Animations/animation';
+import { ArcRotateCamera } from '@babylonjs/core/Cameras/arcRotateCamera';
+import { Engine } from '@babylonjs/core/Engines/engine';
+import { DirectionalLight } from '@babylonjs/core/Lights/directionalLight';
+import { HemisphericLight } from '@babylonjs/core/Lights/hemisphericLight';
+import { PBRMaterial } from '@babylonjs/core/Materials/PBR/pbrMaterial';
+import { CubeTexture } from '@babylonjs/core/Materials/Textures/cubeTexture';
+import { DynamicTexture } from '@babylonjs/core/Materials/Textures/dynamicTexture';
+import { Texture } from '@babylonjs/core/Materials/Textures/texture';
+import { Material } from '@babylonjs/core/Materials/material';
+import { StandardMaterial } from '@babylonjs/core/Materials/standardMaterial';
+import { Color3, Color4 } from '@babylonjs/core/Maths/math.color';
+import { Vector3 } from '@babylonjs/core/Maths/math.vector';
+import { AbstractMesh } from '@babylonjs/core/Meshes/abstractMesh';
+import { InstancedMesh } from '@babylonjs/core/Meshes/instancedMesh';
+import { Mesh } from '@babylonjs/core/Meshes/mesh';
+import { MeshBuilder } from '@babylonjs/core/Meshes/meshBuilder';
+import { TransformNode } from '@babylonjs/core/Meshes/transformNode';
+
+/**
+ * Without explicitly importing the "BoundingBoxRenderer", we're getting "scene.getBoundingBoxRenderer is undefined"
+ * errors when creating HighlightLayer instances. Not sure why but those errors only happen when using the built
+ * version of the viewer (e.g. when pulling it from NPM etc.)...
+ */
+import '@babylonjs/core/Rendering/boundingBoxRenderer';
+import { Node } from '@babylonjs/core/node';
+import { Scene } from '@babylonjs/core/scene';
+import { EventEmitter } from 'eventemitter3';
+
+/**
+ * Expose some frequently used babylon modules by our consumers.
+ */
+export {
+  AnimationManager,
+  AnimationInterface,
+  Variant,
+  VariantInstanceManager,
+  Viewer,
+  ParameterObservable,
+  Parameterizable,
+  VariantParameterizable,
+  ViewerLight,
+  emitter as Emitter,
+  EventEmitter,
+  Event,
+  Parameter,
+  VariantInstance,
+  Color3,
+  Color4,
+  Vector3,
+  AbstractMesh,
+  InstancedMesh,
+  Mesh,
+  TransformNode,
+  Node,
+  Material,
+  PBRMaterial,
+  StandardMaterial,
+  Scene,
+  Engine,
+  ArcRotateCamera,
+  DynamicTexture,
+  CubeTexture,
+  MeshBuilder,
+  Texture,
+  BabylonAnimation,
+  HemisphericLight,
+  DirectionalLight,
+  Element,
+  EventBroadcaster,
+  SceneManager,
+  PlacementAnimation,
+  BabylonHelper,
+  GltfExportManager,
+  SpecStorage,
+  TagManager,
+  ViewerError,
+  ViewerErrorIds,
+};

package/src/types.d.ts

@@ -1,38 +1,49 @@
-/** @ignore **/
-declare let IS_PRODUCTION: boolean;
-declare let VERSION_INFORMATION: string;
-
-interface Window {
-  Cbn:
-    | undefined /* window.Cbn is only available when viewer runs inside Combeenation configurator */
-    | {
-        Assets: {
-          /**
-           * Retrieve material definition from configurator\
-           * Implementation depends on the Combeenation environment the viewer is used in
-           * - Configurator: Access pre-fetched material JSON objects from Cbn client => synchronous
-           * - Asset Editor: Load content from material asset on demand => asynchronous!
-           *
-           * @param materialId
-           *
-           * @return Undefined if no definition for the given material name exists, otherwise an "JSON object" which can
-           *         be passed to `BABYLON.Material.Parse` to create a runtime material object.
-           */
-          getMaterial(materialId: string): Promise<object | undefined>;
-
-          /**
-           * Checks if a definition for a given material name exists in the configurator and issues a warning if not.
-           *
-           * @param materialId
-           */
-          assertMaterialExists(materialId: string): boolean;
-
-          /**
-           * Warns user about duplicate nodeNames on scene.
-           *
-           * @param nodeNameOrArrayOfNodeNames
-           */
-          reportDuplicateNodeName(nodeNameOrArrayOfNodeNames: string | string[]): void;
-        };
-      };
-}
+/** @ignore **/
+declare let IS_PRODUCTION: boolean;
+declare let VERSION_INFORMATION: string;
+
+interface Window {
+  Cbn:
+    | undefined /* window.Cbn is only available when viewer runs inside Combeenation configurator */
+    | {
+        Assets: {
+          /**
+           * Retrieve material definition from configurator\
+           * Implementation depends on the Combeenation environment the viewer is used in
+           * - Configurator: Access pre-fetched material JSON objects from Cbn client => synchronous
+           * - Asset Editor: Load content from material asset on demand => asynchronous!
+           *
+           * @param materialId
+           *
+           * @return Undefined if no definition for the given material name exists, otherwise an "JSON object" which can
+           *         be passed to `BABYLON.Material.Parse` to create a runtime material object.
+           */
+          getMaterial(materialId: string): Promise<object | undefined>;
+
+          /**
+           * Checks if a definition for a given material name exists in the configurator and issues a warning if not.
+           *
+           * @param materialId
+           */
+          assertMaterialExists(materialId: string): boolean;
+
+          /**
+           * Warns user about duplicate nodeNames on scene.
+           *
+           * @param nodeNameOrArrayOfNodeNames
+           */
+          reportDuplicateNodeName(nodeNameOrArrayOfNodeNames: string | string[]): void;
+        };
+        utils: {
+          Viewer3dHelper: {
+            /**
+             * Returns parent DOM element of a Combeenation configurator, which can be used as root for the inspector.
+             * Also adjusts styling of some configurator parent sub elements to fix the inspector layout.
+             *
+             * @return
+             */
+            getCfgrParentDomElementForInspector(): HTMLElement;
+          };
+        };
+      };
+}