@combeenation/3d-viewer 4.0.0-beta1 → 4.0.0-beta2

package/src/api/classes/element.ts

@@ -1,40 +1,35 @@
 import { HighlightLayer } from '@babylonjs/core/Layers/highlightLayer';
-import { Light } from '@babylonjs/core/Lights/light';
-import { ShadowGenerator } from '@babylonjs/core/Lights/Shadows/shadowGenerator';
 import { Material } from '@babylonjs/core/Materials/material';
 import { StandardMaterial } from '@babylonjs/core/Materials/standardMaterial';
-import { DynamicTexture } from '@babylonjs/core/Materials/Textures/dynamicTexture';
+import { Axis, Space } from '@babylonjs/core/Maths/math.axis';
 import { Color3 } from '@babylonjs/core/Maths/math.color';
 import { AbstractMesh } from '@babylonjs/core/Meshes/abstractMesh';
 import { InstancedMesh } from '@babylonjs/core/Meshes/instancedMesh';
 import { Mesh } from '@babylonjs/core/Meshes/mesh';
 import { TransformNode } from '@babylonjs/core/Meshes/transformNode';
-import { has, isArray, isNumber, isPlainObject, merge, union } from 'lodash-es';
+import { Texture } from '@babylonjs/core/Materials/Textures/texture';
+import { cloneDeep, concat, get, isArray, merge, union } from 'lodash-es';
 import {
 	activateTransformNode as activate,
 	addToHighlightLayer,
-	addToShadowGenerator,
 	assertTransformNode,
 	cloneTransformNode,
 	cloneTransformNodeMaterial,
 	deactivateTransformNode as deactivate,
 	getClientRectFromMesh,
-	injectNodeMetadata,
+	injectTransformNodeMetadata,
 	mapToDottedNodes,
-	moveTransformNode,
 	removeFromHighlightLayer,
-	removeFromShadowGenerator,
-	rotateTransformNode,
 	setMaterial,
 	setMaterialColor,
 	setMaterialMetallness,
 	setMaterialRoughness,
-	setMaterialTexture,
-	setReceiveShadows
+	setMaterialTexture
 } from '../util/babylonHelper';
-import { createImageBitmapFromImgSrc, createImageBitmapFromSvg } from '../util/resourceHelper';
-import { VariantParameterizable } from './../classes/variantParameterizable';
+import { createImageUrlFromSvg, mergeMaps } from '../util/resourceHelper';
 import { DottedPath } from './dottedPath';
+import { ElementParameterizable } from './elementParameterizable';
+import { Event } from './event';
 import { Parameter } from './parameter';
 import { Variant } from './variant';
 
@@ -45,20 +40,24 @@ import { Variant } from './variant';
  * When used in typings, refer to via its alias {@link VariantElement} to prevent name clashes with the web APIs
  * [Element](https://developer.mozilla.org/en-US/docs/Web/API/Element) class
  */
-export class Element extends VariantParameterizable {
-
-	public readonly nodes: TransformNode[] = [];
+export class Element extends ElementParameterizable {
 
 	protected readonly _dottedNodes: Map<DottedPath, TransformNode> = new Map();
 
+	protected readonly _parameterObservers: Map<string, ParameterObserver[]> = new Map();
+
 	protected _highlightLayer?: HighlightLayer;
 
+	protected _paintableTextureId: number = 0;
+
+	public readonly nodes: TransformNode[] = [];
+
 	/**
 	 * Constructor.
 	 */
-	protected constructor( public readonly variant: Variant,
+	public constructor( public readonly variant: Variant,
 	                    public readonly name: string ) {
-		super( variant, name );
+		super();
 		if ( process.env.NODE_ENV?.toLowerCase().includes('dev')) {
 			this.assertPathDefinitions();
 		}
@@ -73,13 +72,6 @@ export class Element extends VariantParameterizable {
 		this.addParameterObservers();
 	}
 
-	/**
-	 * Creates an {@link Element} with given name.
-	 */
-	public static async create( variant: Variant, name: string ): Promise<Element> {
-		return new Element( variant, name );
-	}
-
 	/**
 	 * The {@link DottedPath} in the built tree of {@link Element}s.
 	 * E.g. "_.top-1.sub-2.sub-sub-3.el-1"
@@ -222,11 +214,41 @@ export class Element extends VariantParameterizable {
 	}
 
 	/**
-	 * @see {@link VariantParameterizable.commitParameters}
+	 * Places the given {@link ParameterBag} in the {@link Element}'s parameters, replaces all patterns in the
+	 * {@link StructureJson} and broadcasts all {@link ParameterObserver}s.
+	 *
 	 * @emit {@link Event.ELEMENT_PARAMETER_COMMITTED}
 	 */
-	public async commitParameters( parameters?: ParameterBag ): Promise<VariantParameterizable> {
-		return super.commitParameters( parameters );
+	public async commitParameters( parameters?: ParameterBag ): Promise<Element> {
+		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 );
+					return Promise.resolve( observerResult ).then( () => {
+						this.broadcastEvent( Event.ELEMENT_PARAMETER_COMMITTED,
+							this, parameter, oldParameterValue, newParameterValue );
+					} );
+				} ) );
+			}
+		}
+		await Promise.all( observerPromises );
+		return this;
 	}
 
 	/**
@@ -258,48 +280,45 @@ export class Element extends VariantParameterizable {
 	}
 
 	/**
-	 * Draws a `ImageBitmap` or `OffscreenCanvas` onto a `paintable` defined via {@link PaintableDefinition}.
+	 * Draws a image onto a `paintable` defined via {@link PaintableDefinition}.
 	 */
-	public drawPaintable( paintable: string, imageSource: CanvasImageSource ): Element {
-		const paintableDefinition = this.getPaintableDefinition( paintable );
+	public async drawPaintable( paintable: string, imageSource: string ): Promise<Element> {
 		const node = this.getPaintableNode( paintable );
 		if( !(node instanceof AbstractMesh) ) {
 			throw new Error( `The path must be an instance of "AbstractMesh" for paintable "${paintable}" ` +
 				`in element "${this.id}".` );
 		}
-		if( node.material && !has( node.metadata, 'dirty.material' ) ) {
+		if( node.material && !get( node.metadata, 'dirty.material' ) ) {
 			cloneTransformNodeMaterial( node );
 		}
 		if( !node.material ) {
 			node.material = new StandardMaterial( `${this.id}.${paintable}.material`, this.variant.viewer.scene );
 		}
 		node.material.transparencyMode = Material.MATERIAL_ALPHATESTANDBLEND;
-		if( !has( node.metadata, 'dirty.material.texture' ) ) {
+		if( !get( node.metadata, 'dirty.material.texture' ) ) {
 			// inject initial value and mark as dirty
-			injectNodeMetadata( node, { dirty: { material: { texture: true	} } } );
-		}
-		const widthAndHeight = {
-			width: imageSource.width,
-			height: imageSource.height
-		};
-		if( isNumber( paintableDefinition.textureOptions ) ) {
-			widthAndHeight.width = paintableDefinition.textureOptions;
-			widthAndHeight.height = paintableDefinition.textureOptions;
-		} else if( isPlainObject( paintableDefinition.textureOptions ) ) {
-			widthAndHeight.width = paintableDefinition.textureOptions.width;
-			widthAndHeight.height = paintableDefinition.textureOptions.height;
+			injectTransformNodeMetadata( node, { dirty: { material: { texture: true	} } }, false );
 		}
-		const texture = new DynamicTexture(
-			`${this.id}.${paintable}.texture`,
-			widthAndHeight,
-			this.variant.viewer.scene,
-			false
-		);
-		setMaterialTexture( node, texture, false );
-		const ctx = texture.getContext();
-		// flip texture context horizontal with translate and scale
-		ctx.drawImage( imageSource, 0, 0);
-		texture.update( false );
+
+		await new Promise<void>(resolve => {
+			const paintableTexture = Texture.CreateFromBase64String(
+				imageSource,
+				`${this.id}.${paintable}.texture.${this._paintableTextureId}`,
+				this.variant.viewer.scene,
+				undefined,
+				false,
+				undefined,
+				() => {
+					setMaterialTexture( node, paintableTexture, false );
+					resolve();
+				}
+			);
+
+			// NOTE: Paintable texture need an individual id, otherwise the already existing texture on this id does not get overwritten
+			// Maybe think of a disposal logic here in the future
+			this._paintableTextureId++;
+		});
+		
 		return this;
 	}
 
@@ -307,16 +326,15 @@ export class Element extends VariantParameterizable {
 	 * Draws a SVG string onto a `paintable` defined via {@link PaintableDefinition}.
 	 */
 	public async drawPaintableFromSvg( paintable: string, svgSource: string ): Promise<Element> {
-		const source = await createImageBitmapFromSvg( svgSource );
-		return this.drawPaintable( paintable, source );
+		const imageUrl = await createImageUrlFromSvg( svgSource );
+		return this.drawPaintable( paintable, imageUrl );
 	}
 
 	/**
 	 * Draws an Image from source (URL/URI) onto a `paintable` defined via {@link PaintableDefinition}.
 	 */
 	public async drawPaintableFromImgSrc( paintable: string, imgSource: string ): Promise<Element> {
-		const source = await createImageBitmapFromImgSrc( imgSource );
-		return this.drawPaintable( paintable, source );
+		return this.drawPaintable( paintable, imgSource );
 	}
 
 	/**
@@ -333,12 +351,12 @@ export class Element extends VariantParameterizable {
 				}
 				if( visible === true ) {
 					element.nodes.forEach( node => {
-						injectNodeMetadata( node, { visibility: node.isEnabled() } );
+						injectTransformNodeMetadata( node, { visibility: node.isEnabled() } );
 						activate( node );
 					} );
 				} else if( visible === false ) {
 					element.nodes.forEach( node => {
-						injectNodeMetadata( node, { visibility: node.isEnabled() } );
+						injectTransformNodeMetadata( node, { visibility: node.isEnabled() } );
 						deactivate( node );
 					} );
 				}
@@ -354,7 +372,7 @@ export class Element extends VariantParameterizable {
 			async ( element: Element, oldValue: ParameterValue, newValue: ParameterValue ) => {
 				const material = element.variant.getMaterial( newValue.toString() );
 				element.nodes.forEach( node => {
-					assertTransformNode(node, (node: AbstractMesh) => {
+					assertTransformNode(node, (node: TransformNode) => {
 						if( node instanceof InstancedMesh ) {
 							throw new Error( `Changing parameter "${Parameter.MATERIAL}" ` +
 								`of an InstancedMesh is not supported. ` +
@@ -369,19 +387,19 @@ export class Element extends VariantParameterizable {
 			async ( element: Element, oldValue: ParameterValue, newValue: ParameterValue ) => {
 				const color = Parameter.parseColor( newValue );
 				element.nodes.forEach( node => {
-					assertTransformNode(node, (node: AbstractMesh) => {
+					assertTransformNode(node, (node: TransformNode) => {
 						if( node instanceof InstancedMesh ) {
 							throw new Error( `Changing parameter "${Parameter.MATERIAL_COLOR}" ` +
 								`of an InstancedMesh is not supported. ` +
 								`Tried to change node "${node.id}" on element "${element.id}".` );
 						}
 					});
-					if( !has( node.metadata, 'dirty.material' ) ) {
+					if( !get( node.metadata, 'dirty.material' ) ) {
 						cloneTransformNodeMaterial( node );
 					}
-					if( !has( node.metadata, 'dirty.material.color' ) ) {
+					if( !get( node.metadata, 'dirty.material.color' ) ) {
 						// inject initial value and mark as dirty
-						injectNodeMetadata( node, { dirty: { material: { color: oldValue } } } );
+						injectTransformNodeMetadata( node, { dirty: { material: { color: oldValue } } } );
 					}
 					setMaterialColor( node, color );
 				} );
@@ -391,19 +409,19 @@ export class Element extends VariantParameterizable {
 			async ( element: Element, oldValue: ParameterValue, newValue: ParameterValue ) => {
 				const metallness = Parameter.parseNumber( newValue );
 				element.nodes.forEach( node => {
-					assertTransformNode(node, (node: AbstractMesh) => {
+					assertTransformNode(node, (node: TransformNode) => {
 						if( node instanceof InstancedMesh ) {
 							throw new Error( `Changing parameter "${Parameter.MATERIAL_METALLNESS}" ` +
 								`of an InstancedMesh is not supported. ` +
 								`Tried to change node "${node.id}" on element "${element.id}".` );
 						}
 					});
-					if( !has( node.metadata, 'dirty.material' ) ) {
+					if( !get( node.metadata, 'dirty.material' ) ) {
 						cloneTransformNodeMaterial( node );
 					}
-					if( !has( node.metadata, 'dirty.material.metallness' ) ) {
+					if( !get( node.metadata, 'dirty.material.metallness' ) ) {
 						// inject initial value and mark as dirty
-						injectNodeMetadata( node, { dirty: { material: { metallness: oldValue } } } );
+						injectTransformNodeMetadata( node, { dirty: { material: { metallness: oldValue } } } );
 					}
 					setMaterialMetallness( node, metallness );
 				} );
@@ -413,19 +431,19 @@ export class Element extends VariantParameterizable {
 			async ( element: Element, oldValue: ParameterValue, newValue: ParameterValue ) => {
 				const roughness = Parameter.parseNumber( newValue );
 				element.nodes.forEach( node => {
-					assertTransformNode(node, (node: AbstractMesh) => {
+					assertTransformNode(node, (node: TransformNode) => {
 						if( node instanceof InstancedMesh ) {
 							throw new Error( `Changing parameter "${Parameter.MATERIAL_ROUGHNESS}" ` +
 								`of an InstancedMesh is not supported. ` +
 								`Tried to change node "${node.id}" on element "${element.id}".` );
 						}
 					});
-					if( !has( node.metadata, 'dirty.material' ) ) {
+					if( !get( node.metadata, 'dirty.material' ) ) {
 						cloneTransformNodeMaterial( node );
 					}
-					if( !has( node.metadata, 'dirty.material.roughness' ) ) {
+					if( !get( node.metadata, 'dirty.material.roughness' ) ) {
 						// inject initial value and mark as dirty
-						injectNodeMetadata( node, { dirty: { material: { roughness: oldValue } } } );
+						injectTransformNodeMetadata( node, { dirty: { material: { roughness: oldValue } } } );
 					}
 					setMaterialRoughness( node, roughness );
 				} );
@@ -481,7 +499,7 @@ export class Element extends VariantParameterizable {
 				// Add/Remove meshes to previously created highlight layers.
 				if( highlighted === true ) {
 					element.nodes.forEach( node => {
-						assertTransformNode(node, (node: AbstractMesh) => {
+						assertTransformNode(node, (node: TransformNode) => {
 							if( node instanceof InstancedMesh ) {
 								throw new Error( `Changing parameter "${Parameter.HIGHLIGHTED}" ` +
 									`of an InstancedMesh is not supported. ` +
@@ -508,61 +526,35 @@ export class Element extends VariantParameterizable {
 		this._parameterObservers.set( Parameter.POSITION, [
 			async ( element: Element, oldValue: ParameterValue, newValue: ParameterValue ) => {
 				// we have to deal just with root nodes here due to relative impacts in a node tree
-				element.nodes.forEach( node => moveTransformNode( node, Parameter.parseVector( newValue ) ) );
+				element.nodes.forEach( node => {
+					// remember absolute position and reset it before translating
+					if( !get( node.metadata, 'position' ) ) {
+						node.metadata.position = node.absolutePosition.clone();
+					}
+					node.setAbsolutePosition( node.metadata.position );
+					// move
+					const distance = Parameter.parseVector( newValue );
+					node.translate( Axis.X, distance.x, Space.WORLD );
+					node.translate( Axis.Y, distance.y, Space.WORLD );
+					node.translate( Axis.Z, distance.z, Space.WORLD );
+				} );
 			}
 		] );
 		this._parameterObservers.set( Parameter.ROTATION, [
 			async ( element: Element, oldValue: ParameterValue, newValue: ParameterValue ) => {
-				// The current implementation (rotating around coordinates 0,0,0) implicitly mutates the position of a node.
-				// Since a user expects the rotation after the positioning, we have to manually fire the position observers.
-				// Without calling these observers, the pivot and the position of a node is initially the same before rotating,
-				// so there is no rotation happening at all.
-				if( Parameter.POSITION in element.inheritedParameters ) {
-					await element.commitParameter( Parameter.POSITION, element.inheritedParameters[Parameter.POSITION] );
-				}
 				// we have to deal just with root nodes here due to relative impacts in a node tree
-				element.nodes.forEach( node => rotateTransformNode( node, Parameter.parseRotation( newValue ) ) );
-			}
-		] );
-		this._parameterObservers.set( Parameter.CAST_SHADOW, [
-			async ( element: Element, oldValue: ParameterValue, newValue: ParameterValue ) => {
-				let castShadow;
-				try {
-					castShadow = Parameter.parseBoolean( newValue );
-				} catch( e ) {
-					return;
-				}
-				let lightCsl = element.inheritedParameters[Parameter.CAST_SHADOW_FROM_LIGHTS];
-				if( ! lightCsl ) {
-					lightCsl = element.variant.inheritedViewerLights.map( l => l.name ).join( ',' );
-				}
-				if( castShadow === true ) {
-					await this.castShadowValueHandler( lightCsl, addToShadowGenerator );
-				}
-				if( castShadow === false ) {
-					await this.castShadowValueHandler( lightCsl, removeFromShadowGenerator );
-				}
-			}
-		] );
-		this._parameterObservers.set( Parameter.CAST_SHADOW_FROM_LIGHTS, [
-			async ( element: Element, oldValue: ParameterValue, newValue: ParameterValue ) => {
-				// TODO: Possible performance issue in combination with CAST_SHADOW, since both observers are initially called
-				//       when CAST_SHADOW and CAST_SHADOW_FROM_LIGHTS are defined in the spec.
-				const lightCsl = element.variant.inheritedViewerLights.map( l => l.name ).join( ',' );
-				// cleanup all shadow generators
-				await this.castShadowValueHandler( lightCsl, removeFromShadowGenerator );
-				if( element.castShadow === true ) {
-					// if newValue is undefined or '' then set newValue to lightCsl (use all lights)
-					if( !newValue ) {
-						newValue = lightCsl;
+				element.nodes.forEach( node => {
+					// remember absolute rotation and reset it before translating
+					if(!get( node.metadata, 'rotation' ) ) {
+						node.metadata.rotation = node.rotation.clone();
 					}
-					await this.castShadowValueHandler( newValue, addToShadowGenerator );
-				}
-			}
-		] );
-		this._parameterObservers.set( Parameter.RECEIVE_SHADOWS, [
-			async ( element: Element, oldValue: ParameterValue, newValue: ParameterValue ) => {
-				element.nodes.forEach( node => setReceiveShadows( node, Parameter.parseBoolean( newValue ) ) );
+					node.rotation = node.metadata.rotation;
+					// rotate
+					const rotation = Parameter.parseRotation( newValue );
+					node.rotate( Axis.X, rotation.x, Space.WORLD );
+					node.rotate( Axis.Y, rotation.y, Space.WORLD );
+					node.rotate( Axis.Z, rotation.z, Space.WORLD );
+				} );
 			}
 		] );
 		return this;
@@ -611,25 +603,4 @@ export class Element extends VariantParameterizable {
 		} );
 	}
 
-	/**
-	 * Handles callback for given light parameter.
-	 */
-	private async castShadowValueHandler( lightCsl: ParameterValue, mutator: CallableFunction ) {
-		let lights: Light[] = [];
-		for( const lightName of Parameter.parseCommaSeparatedList( lightCsl ) ) {
-			const viewerLight = await this.variant.getViewerLight( lightName );
-			if( viewerLight ) {
-				lights.push( viewerLight.light );
-			}
-		}
-		const shadowGenerators = lights
-			.map( light => light?.getShadowGenerator() as ShadowGenerator )
-			.filter( Boolean );
-		shadowGenerators.forEach( generator => {
-			this.nodes.forEach( node => {
-				mutator( generator, node );
-			} );
-		} );
-	}
-
 }

package/src/api/classes/{parameterizable.ts → elementParameterizable.ts}

@@ -1,7 +1,7 @@
 import { Parameter } from './parameter';
 import { ParameterObservable } from './parameterObservable';
 
-export abstract class Parameterizable extends ParameterObservable {
+export abstract class ElementParameterizable extends ParameterObservable {
 
 	protected parameterDeclaration: ParameterDeclarations = Parameter.declarations;
 
@@ -55,17 +55,6 @@ export abstract class Parameterizable extends ParameterObservable {
 		return this.parameters[Parameter.ROTATION].toString();
 	}
 
-	get castShadow(): boolean | undefined {
-		if( !(Parameter.CAST_SHADOW in this.parameters) ) {
-			return undefined;
-		}
-		try {
-			return Parameter.parseBoolean( this.parameters[Parameter.CAST_SHADOW] );
-		} catch( e ) {
-			return undefined;
-		}
-	}
-
 	public async show(): Promise<ParameterObservable> {
 		await this.commitParameter( Parameter.VISIBLE, true );
 		return this;

package/src/api/classes/event.ts

@@ -262,28 +262,13 @@ export class Event {
 	 * * {@link Element}
 	 *
 	 * Payload:
-	 * * element: {@link Element}
+	 * * variant: {@link Element}
 	 * * parameter: string
 	 * * oldValue: string
 	 * * newValue: string
 	 */
 	public static readonly ELEMENT_PARAMETER_COMMITTED = 'elementParameterCommitted';
 
-	/**
-	 * Fired after a parameter on an {@link ViewerLight} has been committed.
-	 *
-	 * Scopes:
-	 * * Global
-	 * * {@link ViewerLight}
-	 *
-	 * Payload:
-	 * * light: {@link ViewerLight}
-	 * * parameter: string
-	 * * oldValue: string
-	 * * newValue: string
-	 */
-	public static readonly VIEWER_LIGHT_PARAMETER_COMMITTED = 'viewerLightParameterCommitted';
-
 	/**
 	 * Fired after a parameter on an {@link SceneManager} has been committed.
 	 *