@combeenation/3d-viewer 4.0.0-alpha8 → 4.0.0-beta3

package/src/api/util/resourceHelper.ts

@@ -56,6 +56,16 @@ const debounce = function( func: Function, wait: number, immediate: boolean = fa
 	};
 };
 
+/**
+ * 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 )
+	);
+};
+
 /**
  * Merges multiple maps.
  */
@@ -70,39 +80,55 @@ const mergeMaps = function <TKey, TValue>( ...maps: Map<TKey, TValue>[] ): Map<T
 };
 
 /**
- * Creates an `ImageBitmap` from a SVG string using native `createImageBitmap` functionality.
+ * 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 createImageBitmapFromSvg = async function( svgSrc: string ): Promise<ImageBitmap> {
-	return new Promise( async resolve => {
-		const svgWithAssetsEmbedded = await _embedAssets( svgSrc );
-		const svgBlob = new Blob( [svgWithAssetsEmbedded], { type: 'image/svg+xml;charset=utf-8' } );
-		const svgBase64 = URL.createObjectURL( svgBlob );
-		let img = new Image();
-		img.onload = async () => {
-			const imgBitmap = await createImageBitmap( img );
-			resolve( imgBitmap );
-		};
-		img.src = svgBase64;
-	} );
-};
+const createImageFromSvg = async function( svgSrc: string ): Promise<HTMLImageElement> {
+	// replace assets with their base64 versions in svg source code 
+	const svgWithAssetsEmbedded = await _embedAssets( svgSrc );
 
-const createImageBitmapFromImgSrc = async function( imgSrc: string ): Promise<ImageBitmap> {
-	const img = new Image();
-	img.src = imgSrc;
-	return new Promise( resolve => {
-		img.onload = async () => {
-			const imgBitmap = await createImageBitmap( img );
-			resolve( imgBitmap );
-		};
-	} );
+	// 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 any case, but there is no other way unfortunately.\
+ * => Keep an eye on it in future projects
+ */
+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'];
+	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;
@@ -152,7 +178,8 @@ export {
 	loadJson,
 	loadText,
 	debounce,
+	uuidv4,
 	mergeMaps,
-	createImageBitmapFromSvg,
-	createImageBitmapFromImgSrc
+	createImageFromSvg,
+	createImageFromImgSrc
 };

package/src/dev.ts

@@ -1,13 +1,13 @@
 import '@babylonjs/core';
 import { Event } from 'api/classes/event';
-import { merge, set } from 'lodash-es';
+import { set } from 'lodash-es';
 
 import { Emitter, Viewer } from '.';
-import { createCombobox } from '../assets/ctrls-helper';
-
-import { createSpec, beforeBootstrap, afterBootstrap, createUIelements } from '../assets/streetscene/main';
-//import { createSpec, beforeBootstrap, afterBootstrap, createUIelements } from '../assets/KTM1290SA/ktm1290SA_2';
 
+/**
+ * (i) HERE YOU @TODO (1) ADJUST THE CURRENT DEMO YOU ARE WORKING ON.
+ */
+import { createSpec, beforeBootstrap, afterBootstrap, createUIelements } from '../assets/hulahoop/main';
 const loadingElement = document.getElementById( 'loading' ) as HTMLDivElement;
 
 Emitter.on( Event.BOOTSTRAP_START, () => {
@@ -41,5 +41,7 @@ async function bootstrapViewer() {
 	}
 	await afterBootstrap( viewer );
 	await createUIelements( viewer );
+	console.info( ' --- UI Initialized ---');
+
 	return viewer;
 }

package/src/index.ts

@@ -1,50 +1,48 @@
 /// <reference path="api/util/globalTypes.ts" />
 
-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 { Material } from '@babylonjs/core/Materials/material';
 import { PBRMaterial } from '@babylonjs/core/Materials/PBR/pbrMaterial';
 import { StandardMaterial } from '@babylonjs/core/Materials/standardMaterial';
-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 { 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';
 import { Node } from '@babylonjs/core/node';
-
-/**
- * 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 { Scene } from '@babylonjs/core/scene';
-import { Parameterizable } from './api/classes/parameterizable';
-import { VariantParameterizable } from './api/classes/variantParameterizable';
+import { VariantInstance } from './api/classes/variantInstance';
+import { Viewer } from './api/classes/viewer';
+import { Event, emitter } from './api/classes/event';
 import { EventEmitter } from 'eventemitter3';
-import { Element } from './api/classes/element';
-import { emitter, Event } from './api/classes/event';
-import { EventBroadcaster } from './api/classes/eventBroadcaster';
 import { Parameter } from './api/classes/parameter';
-import { ParameterObservable } from './api/classes/parameterObservable';
-import { PlacementAnimation } from './api/classes/placementAnimation';
+import { CubeTexture } from '@babylonjs/core/Materials/Textures/cubeTexture';
+import { Animation as BabylonAnimation } from '@babylonjs/core/Animations/animation';
+import { MeshBuilder } from '@babylonjs/core/Meshes/meshBuilder';
+import { Texture } from '@babylonjs/core/Materials/Textures/texture';
+import { DirectionalLight } from '@babylonjs/core/Lights/directionalLight';
+import { HemisphericLight } from '@babylonjs/core/Lights/hemisphericLight';
 import { Variant } from './api/classes/variant';
-import { VariantInstance } from './api/classes/variantInstance';
-import { Viewer } from './api/classes/viewer';
-import { ViewerLight } from './api/classes/viewerLight';
+import { ParameterObservable } from './api/classes/parameterObservable';
+import { ElementParameterizable } from './api/classes/elementParameterizable';
+import { Element } from './api/classes/element';
+import { VariantInstanceManager } from './api/manager/variantInstanceManager';
 import { AnimationManager } from './api/manager/animationManager';
+import { EventBroadcaster } from './api/classes/eventBroadcaster';
 import { SceneManager } from './api/manager/sceneManager';
-import { VariantInstanceManager } from './api/manager/variantInstanceManager';
+import { PlacementAnimation } from './api/classes/placementAnimation';
 import * as BabylonHelper from './api/util/babylonHelper';
 
+/**
+ * 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';
+
 /**
  * Expose some frequently used babylon modules by our consumers.
  */
@@ -54,9 +52,7 @@ export {
 	VariantInstanceManager,
 	Viewer,
 	ParameterObservable,
-	Parameterizable,
-	VariantParameterizable,
-	ViewerLight,
+	ElementParameterizable,
 	emitter as Emitter,
 	EventEmitter,
 	Event,

package/src/pagesconfig.json

@@ -32,21 +32,26 @@
       "pages": [
         {
           "title": "Specification",
-          "source": "./doc/Specification.md"
+          "source": "./doc/documentation/Specification.md"
         },
         {
           "title": "Parameters",
-          "source": "./doc/Parameters.md"
-        },
-        {
-          "title": "ViewerLights",
-          "source": "./doc/ViewerLights.md"
+          "source": "./doc/documentation/Parameters.md"
         },
         {
           "title": "Paintables",
-          "source": "./doc/Paintables.md"
+          "source": "./doc/documentation/Paintables.md"
+        }
+      ]
+    },
+    {
+      "title": "Best Practice",
+      "pages": [
+        {
+          "title": "How to change custom material properties",
+          "source": "./doc/best-practice/Custom-material-properties.md"
         }
       ]
     }
   ]
-}
+}

package/dist/lib-cjs/api/emitter.d.ts

@@ -1,35 +0,0 @@
-/** @internal **/
-export declare const emitter: import("eventemitter3")<string | symbol, any>;
-/**
- *
- * # ATTENTION
- *
- * This `Event` class only exists inside TypeScript and is used to consistently link to the Events. When using the module inside
- * JavaScript, **only** use the "alias" names e.g. bootstrapStart instead of Events.BOOTSTRAP_START
- */
-export declare const enum Events {
-    BOOTSTRAP_START = "bootstrapStart",
-    BOOTSTRAP_END = "bootstrapEnd",
-    LOADING_START = "loadingStart",
-    LOADING_END = "loadingEnd",
-    ASSET_LOADING_START = "assetLoadingStart",
-    ASSET_LOADING_END = "assetLoadingEnd",
-    SCENE_PROCESSING_START = "sceneProcessingStart",
-    SCENE_PROCESSING_END = "sceneProcessingEnd",
-    ANIMATION_END = "animationEnd",
-    VARIANT_CREATED = "variantCreated",
-    VARIANT_CREATED_LIVING = "variantCreatedLiving",
-    VARIANT_DESTROYED = "variantDestroyed",
-    VARIANT_PICKED = "variantPicked",
-    ELEMENT_PICKED = "elementPicked",
-    VARIANT_PARAMETER_COMMITTED = "variantParameterCommitted",
-    VARIANT_INSTANCE_CREATED = "variantInstanceCreated",
-    VARIANT_INSTANCE_REGISTERED = "variantInstanceRegistered",
-    VARIANT_INSTANCE_CLONED = "variantInstanceCloned",
-    VARIANT_INSTANCE_DESTROYED = "variantInstanceDestroyed",
-    ELEMENT_PARAMETER_COMMITTED = "elementParameterCommitted",
-    SCENE_PARAMETER_COMMITTED = "sceneParameterCommitted",
-    CAMERA_SWITCHED = "cameraSwitched",
-    MESH_PICKED = "meshPicked"
-}
-export declare const eventNames: string[];

package/dist/lib-cjs/api/emitter.js

@@ -1,61 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-var eventemitter3_1 = require("eventemitter3");
-/** @internal **/
-exports.emitter = new eventemitter3_1.EventEmitter();
-//const allows inlining by tsc
-/**
- *
- * # ATTENTION
- *
- * This `Event` class only exists inside TypeScript and is used to consistently link to the Events. When using the module inside
- * JavaScript, **only** use the "alias" names e.g. bootstrapStart instead of Events.BOOTSTRAP_START
- */
-var Events;
-(function (Events) {
-    Events["BOOTSTRAP_START"] = "bootstrapStart";
-    Events["BOOTSTRAP_END"] = "bootstrapEnd";
-    Events["LOADING_START"] = "loadingStart";
-    Events["LOADING_END"] = "loadingEnd";
-    Events["ASSET_LOADING_START"] = "assetLoadingStart";
-    Events["ASSET_LOADING_END"] = "assetLoadingEnd";
-    Events["SCENE_PROCESSING_START"] = "sceneProcessingStart";
-    Events["SCENE_PROCESSING_END"] = "sceneProcessingEnd";
-    Events["ANIMATION_END"] = "animationEnd";
-    Events["VARIANT_CREATED"] = "variantCreated";
-    Events["VARIANT_CREATED_LIVING"] = "variantCreatedLiving";
-    Events["VARIANT_DESTROYED"] = "variantDestroyed";
-    Events["VARIANT_PICKED"] = "variantPicked";
-    Events["ELEMENT_PICKED"] = "elementPicked";
-    Events["VARIANT_PARAMETER_COMMITTED"] = "variantParameterCommitted";
-    Events["VARIANT_INSTANCE_CREATED"] = "variantInstanceCreated";
-    Events["VARIANT_INSTANCE_REGISTERED"] = "variantInstanceRegistered";
-    Events["VARIANT_INSTANCE_CLONED"] = "variantInstanceCloned";
-    Events["VARIANT_INSTANCE_DESTROYED"] = "variantInstanceDestroyed";
-    Events["ELEMENT_PARAMETER_COMMITTED"] = "elementParameterCommitted";
-    Events["SCENE_PARAMETER_COMMITTED"] = "sceneParameterCommitted";
-    Events["CAMERA_SWITCHED"] = "cameraSwitched";
-    Events["MESH_PICKED"] = "meshPicked";
-})(Events = exports.Events || (exports.Events = {}));
-exports.eventNames = [
-    'bootstrapStart',
-    'bootstrapEnd',
-    'loadingStart',
-    'loadingEnd',
-    'sceneProcessingStart',
-    'sceneProcessingEnd',
-    'animationEnd',
-    'variantCreated',
-    'variantCreatedLiving',
-    'variantDestroyed',
-    'variantPicked',
-    'variantParameterCommitted',
-    'variantInstanceCreated',
-    'variantInstanceRegistered',
-    'variantInstanceCloned',
-    'variantInstanceDestroyed',
-    'elementParameterCommitted',
-    'cameraSwitched',
-    'meshPicked',
-];
-//# sourceMappingURL=emitter.js.map

package/dist/lib-cjs/api/emitter.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"emitter.js","sourceRoot":"","sources":["../../../src/api/emitter.ts"],"names":[],"mappings":";;AAAA,+CAA6C;AAE7C,iBAAiB;AACJ,QAAA,OAAO,GAAG,IAAI,4BAAY,EAAE,CAAC;AAG1C,8BAA8B;AAC9B;;;;;;GAMG;AACH,IAAkB,MAoCjB;AApCD,WAAkB,MAAM;IACvB,4CAAkC,CAAA;IAClC,wCAA8B,CAAA;IAE9B,wCAA8B,CAAA;IAC9B,oCAA0B,CAAA;IAE1B,mDAAyC,CAAA;IACzC,+CAAqC,CAAA;IAErC,yDAA+C,CAAA;IAC/C,qDAA2C,CAAA;IAE3C,wCAA8B,CAAA;IAE9B,4CAAkC,CAAA;IAClC,yDAA+C,CAAA;IAC/C,gDAAsC,CAAA;IAEtC,0CAAgC,CAAA;IAChC,0CAAgC,CAAA;IAEhC,mEAAyD,CAAA;IAEzD,6DAAmD,CAAA;IACnD,mEAAyD,CAAA;IACzD,2DAAiD,CAAA;IACjD,iEAAuD,CAAA;IAEvD,mEAAyD,CAAA;IAEzD,+DAAqD,CAAA;IAErD,4CAAkC,CAAA;IAElC,oCAA0B,CAAA;AAC3B,CAAC,EApCiB,MAAM,GAAN,cAAM,KAAN,cAAM,QAoCvB;AAEY,QAAA,UAAU,GAAG;IACzB,gBAAgB;IAChB,cAAc;IAEd,cAAc;IACd,YAAY;IAEZ,sBAAsB;IACtB,oBAAoB;IAEpB,cAAc;IAEd,gBAAgB;IAChB,sBAAsB;IACtB,kBAAkB;IAElB,eAAe;IAEf,2BAA2B;IAE3B,wBAAwB;IACxB,2BAA2B;IAC3B,uBAAuB;IACvB,0BAA0B;IAE1B,2BAA2B;IAE3B,gBAAgB;IAEhB,YAAY;CACZ,CAAC"}

package/src/api/classes/variantParameterizable.ts

@@ -1,73 +0,0 @@
-import { DottedPath } from './../classes/dottedPath';
-import { Event } from './../classes/event';
-import { Parameterizable } from './../classes/parameterizable';
-import { Variant } from './../classes/variant';
-import { mergeMaps } from './../util/resourceHelper';
-import { camelToSnakeCase } from './../util/stringHelper';
-import { cloneDeep, concat, get, merge } from 'lodash-es';
-
-export abstract class VariantParameterizable extends Parameterizable {
-
-	protected readonly _parameterObservers: Map<string, ParameterObserver[]> = new Map();
-
-	protected constructor( public readonly variant: Variant,
-	                       public readonly name: string ) {
-		super();
-	}
-
-	/**
-	 * Gets the inherited parameters from the {@link Variant} with cleaned {@link Parameterizable} prefix.
-	 */
-	get inheritedParameters(): ParameterBag {
-		const parameterBag: ParameterBag = {};
-		for( const parameter in this.variant.inheritedParameters ) {
-			const dpp = DottedPath.create( parameter );
-			if( dpp.firstPart !== this.name ) {
-				continue;
-			}
-			dpp.shiftPart();
-			parameterBag[dpp.path] = this.variant.inheritedParameters[parameter];
-		}
-		return parameterBag;
-	}
-
-	/**
-	 * Places the given {@link ParameterBag} in the {@link VariantParameterizable}'s parameters, replaces all patterns in the
-	 * {@link StructureJson} and broadcasts all {@link ParameterObserver}s.
-	 */
-	public async commitParameters( parameters?: ParameterBag ): Promise<VariantParameterizable> {
-		if( !parameters ) {
-			parameters = {};
-		}
-		const oldParameters = cloneDeep( this.parameters );
-		merge( this.parameters, parameters );
-		// handle parameter observers
-		let observerPromises: Promise<void | ParameterObserver>[] = [];
-		for( const parameter in this.parameters ) {
-			const oldParameterValue = oldParameters[parameter];
-			const newParameterValue = this.parameters[parameter];
-			this.variant.assertParameter( this.variant.inheritedParameterDeclaration, parameter, newParameterValue );
-			if( oldParameterValue === newParameterValue ) {
-				continue;
-			}
-			// parameter changed
-			const parameterObservers = mergeMaps( this._parameterObservers, this.parameterObservers );
-			if( parameterObservers.has( parameter ) ) {
-				const observers = parameterObservers.get( parameter )!;
-				observerPromises = concat( observerPromises, observers.map( observer => {
-					const observerResult = observer( this, oldParameterValue, newParameterValue );
-					const observerPromise = Promise.resolve( observerResult );
-					observerPromise.then( () => {
-						const clsName = camelToSnakeCase( this.constructor.name ).toUpperCase();
-						this.broadcastEvent( get( Event, clsName + '_PARAMETER_COMMITTED' ),
-							this, parameter, oldParameterValue, newParameterValue );
-					} );
-					return observerPromise;
-				} ) );
-			}
-		}
-		await Promise.all( observerPromises );
-		return this;
-	}
-
-}