@combeenation/3d-viewer 9.3.0 → 10.0.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@combeenation/3d-viewer",
-  "version": "9.3.0",
+  "version": "10.0.0",
   "description": "Combeenation 3D Viewer",
   "homepage": "https://github.com/Combeenation/3d-viewer#readme",
   "bugs": {
@@ -26,14 +26,14 @@
   "scripts": {
     "bundle-analyzer": "npm run generate-profile && webpack-bundle-analyzer dist/webpack-stats.json dist/lib-full",
     "clean-dist": "rimraf dist",
-    "dev": "cross-env NODE_ENV='dev' webpack serve --config build/webpack.conf.js --progress --hot",
+    "dev": "cross-env NODE_ENV='development' webpack serve --config build/webpack.debug.conf.js --progress --hot",
     "dist-cjs": "npm run clean-dist && npm run lint && tsc --project commonjs.tsconfig.json && npm run replace-version",
-    "dist-es6": "npm run clean-dist && npm run lint && tsc --project es6.tsconfig.json && npm run replace-version",
-    "dist-full": "npm run clean-dist && npm run lint && cross-env NODE_ENV='production' webpack --config build/webpack.conf.js --progress && npm run replace-version",
+    "dist-full-dev": "npm run clean-dist && npm run lint && cross-env NODE_ENV='development' webpack --config build/webpack.build.conf.js --progress && npm run replace-version",
+    "dist-full-prod": "npm run clean-dist && npm run lint && cross-env NODE_ENV='production' webpack --config build/webpack.build.conf.js --progress && npm run replace-version",
     "docs-local": "typedoc --tsconfig tsconfig.json --media doc/assets --out docs-local",
     "docs-publish": "typedoc --tsconfig tsconfig.json --media doc/assets --out docs",
     "format": "prettier --write ./src",
-    "generate-profile": "cross-env NODE_ENV='dev' webpack --config build/webpack.conf.js --profile --json > dist/webpack-stats.json",
+    "generate-profile": "cross-env NODE_ENV='development' webpack --config build/webpack.build.conf.js --profile --json > dist/webpack-stats.json",
     "lint": "eslint src/**",
     "pack": "npm run dist-cjs && npm pack",
     "pack-to-cjs": "npm run dist-cjs && npm pack --pack-destination=\"/mnt/c/Data/dev/custom-js/MichaelTest/TextureLoadEventsTest/\"",
@@ -47,8 +47,10 @@
   "prettier": "@combeenation/prettier-config",
   "dependencies": {
     "@babylonjs/core": "5.27.1",
+    "@babylonjs/inspector": "5.27.1",
     "@babylonjs/loaders": "5.27.1",
     "@babylonjs/materials": "5.27.1",
+    "@babylonjs/node-editor": "5.27.1",
     "@babylonjs/serializers": "5.27.1",
     "eventemitter3": "4.0.7",
     "gsap": "3.11.2",

package/src/api/classes/element.ts

@@ -57,7 +57,7 @@ export class Element extends VariantParameterizable {
    */
   protected constructor(public readonly variant: Variant, public readonly name: string) {
     super(variant, name);
-    if (process.env.NODE_ENV?.toLowerCase().includes('dev')) {
+    if (process.env.NODE_ENV === 'development') {
       this.assertPathDefinitions();
     }
     const nodes = this.variant.inheritedNodes.map(node => {

package/src/api/classes/viewer.ts

@@ -7,7 +7,7 @@ import { TagManager } from '../manager/tagManager';
 import { VariantInstanceManager } from '../manager/variantInstanceManager';
 import { SpecStorage } from '../store/specStorage';
 import { backgroundDomeName, envHelperMetadataName } from '../util/babylonHelper';
-import { debounce, loadJavascript, loadJson } from '../util/resourceHelper';
+import { debounce, loadJson } from '../util/resourceHelper';
 import { getCustomCbnBabylonLoaderPlugin } from '../util/sceneLoaderHelper';
 import { replaceDots } from '../util/stringHelper';
 import { isNodeIncludedInExclusionList } from '../util/structureHelper';
@@ -20,7 +20,6 @@ import { VariantInstance } from './variantInstance';
 import { ArcRotateCamera } from '@babylonjs/core/Cameras/arcRotateCamera';
 import { PickingInfo } from '@babylonjs/core/Collisions/pickingInfo';
 import { BoundingInfo } from '@babylonjs/core/Culling/boundingInfo';
-import { DebugLayer } from '@babylonjs/core/Debug/debugLayer';
 import { Engine } from '@babylonjs/core/Engines/engine';
 import { IPointerEvent } from '@babylonjs/core/Events/deviceInputEvents';
 import { EnvironmentHelper } from '@babylonjs/core/Helpers/environmentHelper';
@@ -66,8 +65,6 @@ export class Viewer extends EventBroadcaster {
 
   protected _isRenderLoopPaused: boolean = false;
 
-  protected _inspectorLoaded: boolean = false;
-
   protected _nodeNamingStrategyHandler: NodeNamingStrategyHandler | null = null;
 
   static version = buildInfo.version;
@@ -341,23 +338,42 @@ export class Viewer extends EventBroadcaster {
 
   /**
    * Enables the Babylon.js [Inspector](https://doc.babylonjs.com/toolsAndResources/tools/inspector).\
-   * Due to the additional size of the inspector, the CDN version is used instead of shipping the required code with
-   * the viewer.\
-   * This means that the code will be downloaded only when needed and calling `enableDebugLayer` can take a little while
-   * depending on your internet connection etc.
-   */
-  public async enableDebugLayer(options?: IInspectorOptions) {
-    if (!this._inspectorLoaded) {
-      // CDN version of inspector requires the Babylon.js core to be available as CDN module as well
-      await loadJavascript('https://cdn.jsdelivr.net/npm/babylonjs@5.6.0/babylon.min.js');
+   * Due to the additional size of the inspector, this function is only available in "development" builds!
+   *
+   * @returns Signalizes if inspector could be loaded
+   */
+  public async enableDebugLayer(options?: IInspectorOptions): Promise<boolean> {
+    if (process.env.NODE_ENV === 'development') {
+      const inspModule = await import(/* webpackChunkName: "inspector"*/ '@babylonjs/inspector');
+
+      if (!options && window.Cbn) {
+        // special case for usage in Combeenation configurator:
+        // if no options are set the inspector will be rendered into the parent element of the configurator
+        // in this way the configurator layout itself will not be affected by the inspector
+        const cfgrParentEl = window.Cbn.utils.Viewer3dHelper.getCfgrParentDomElementForInspector();
+        inspModule.Inspector.Show(this.scene, { globalRoot: cfgrParentEl });
+      } else {
+        inspModule.Inspector.Show(this.scene, options ?? {});
+      }
 
-      DebugLayer.InspectorURL =
-        'https://cdn.jsdelivr.net/npm/babylonjs-inspector@5.6.0/babylon.inspector.bundle.max.min.js';
+      // load additional packages for certain inspector features like "node material editor"
+      // this is done after showing the debug layer to save time
+      await import(/* webpackChunkName: "node-material-editor" */ '@babylonjs/node-editor');
 
-      this._inspectorLoaded = true;
-    }
+      return true;
+    } else {
+      // inspector not available, set according warning message in console
+      if (window.Cbn) {
+        console.warn(`Inspector not loaded. 
+The inspector can only be used in development builds (e.g. during development with watch mode, in the configurator preview, ...)
+but not in production (e.g. production build of Custom JS, published configurator, ...).`);
+      } else {
+        console.warn(`Inspector not loaded. 
+The inspector can only be used in development builds.`);
+      }
 
-    await this.scene.debugLayer.show(options);
+      return false;
+    }
   }
 
   /**

package/src/api/classes/viewerLight.ts

@@ -230,7 +230,6 @@ export class ViewerLight extends VariantParameterizable {
         if (!parameters['direction']) {
           throw new Error(`The ViewerLight "${lightId}" of type "${definition.type}" needs a "direction".`);
         }
-        // @ts-ignore es6 build doesn't allow dynamic imports
         const hemisphericLightModule = await import(
           /* webpackChunkName: "hemispheric-light" */ '@babylonjs/core/Lights/hemisphericLight'
         );
@@ -238,7 +237,6 @@ export class ViewerLight extends VariantParameterizable {
         break;
       }
       case 'point': {
-        // @ts-ignore es6 build doesn't allow dynamic imports
         const pointLightModule = await import(
           /* webpackChunkName: "point-light" */ '@babylonjs/core/Lights/pointLight'
         );
@@ -253,7 +251,6 @@ export class ViewerLight extends VariantParameterizable {
         if (!parameters['direction']) {
           throw new Error(`The ViewerLight "${lightId}" of type "${definition.type}" needs a "direction".`);
         }
-        // @ts-ignore es6 build doesn't allow dynamic imports
         const directionalLightModule = await import(
           /* webpackChunkName: "directional-light" */ '@babylonjs/core/Lights/directionalLight'
         );
@@ -270,7 +267,6 @@ export class ViewerLight extends VariantParameterizable {
         if (!parameters['exponent']) {
           throw new Error(`The ViewerLight "${lightId}" of type "${definition.type}" needs an "exponent".`);
         }
-        // @ts-ignore es6 build doesn't allow dynamic imports
         const spotLightModule = await import(/* webpackChunkName: "spot-light" */ '@babylonjs/core/Lights/spotLight');
         babylonLight = new spotLightModule.SpotLight(
           lightId,

package/src/api/internal/sceneSetup.ts

@@ -79,7 +79,6 @@ const processCamera = async function (scene: Scene, name: string, cameraSetup: C
   }
   switch (cameraSetup.type) {
     case 'arc': {
-      // @ts-ignore es6 build doesn't allow dynamic imports
       const arcCameraModule = await import(
         /* webpackChunkName: "arc-rotate-camera" */ '@babylonjs/core/Cameras/arcRotateCamera'
       );
@@ -168,7 +167,6 @@ const sceneSetup = async function (engine: Engine, sceneJson: SceneJson): Promis
       scene.imageProcessingConfiguration.exposure = sceneJson.scene.globals['camera-settings']!.exposure;
     }
     if (sceneJson.scene.globals['camera-settings']!.dof && sceneJson.scene.globals['camera-settings']!.dof.enabled) {
-      // @ts-ignore es6 build doesn't allow dynamic imports
       const module = await import(/* webpackChunkName: "lens-rendering" */ './lensRendering');
       new module.LensRenderingPipeline(
         'lens-rendering',

package/src/dev.ts

@@ -36,6 +36,14 @@ window.Cbn = {
     },
     reportDuplicateNodeName(nodeNameOrArrayOfNodeNames: string | string[]): void {},
   },
+  utils: {
+    Viewer3dHelper: {
+      getCfgrParentDomElementForInspector() {
+        // render in parent of viewer
+        return document.querySelector<HTMLElement>('display-container') ?? undefined;
+      },
+    },
+  },
 };
 
 async function main() {

package/src/types.d.ts

@@ -34,5 +34,16 @@ interface Window {
            */
           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 | undefined;
+          };
+        };
       };
 }