@combeenation/3d-viewer 4.2.0 → 4.3.0-alpha1

package/src/api/classes/parameterObservable.ts

@@ -3,97 +3,98 @@ import { uuidv4 } from '../util/stringHelper';
 import { EventBroadcaster } from './eventBroadcaster';
 
 export abstract class ParameterObservable extends EventBroadcaster {
+  public readonly uuid: string;
 
-	public readonly uuid: string;
+  public readonly parameters: ParameterBag = {};
 
-	public readonly parameters: ParameterBag = {};
+  protected readonly parameterDeclaration: ParameterDeclarations = {};
 
-	protected readonly parameterDeclaration: ParameterDeclarations = {};
+  protected parameterObservers: Map<string, ParameterObserver[]> = new Map();
 
-	protected parameterObservers: Map<string, ParameterObserver[]> = new Map();
+  protected constructor(parameterDeclaration: ParameterDeclarations = {}, parameters: ParameterBag = {}) {
+    super();
+    this.uuid = uuidv4();
+    this.parameterDeclaration = merge(this.parameterDeclaration, parameterDeclaration);
+    this.parameters = merge(this.parameters, parameters);
+  }
 
-	protected constructor( parameterDeclaration: ParameterDeclarations = {}, parameters: ParameterBag = {} ) {
-		super();
-		this.uuid = uuidv4();
-		this.parameterDeclaration = merge(this.parameterDeclaration, parameterDeclaration);
-		this.parameters = merge(this.parameters, parameters);
-	}
+  /**
+   * The uuid (if not overloaded).
+   */
+  get id(): string {
+    return this.uuid;
+  }
 
-	/**
-	 * The uuid (if not overloaded).
-	 */
-	get id(): string {
-		return this.uuid;
-	}
+  /**
+   * Adds an observer function for parameter changes.
+   * The {@link ParameterObserver} gets 3 parameters: the {@link ParameterObservable}, the old {@link ParameterValue}
+   * and the new {@link ParameterValue}.
+   *
+   * See {@page Parameters} for an example.
+   */
+  public addParameterObserver(parameter: string, observer: ParameterObserver): ParameterObservable {
+    if (this.parameterObservers.has(parameter)) {
+      this.parameterObservers.get(parameter)!.push(observer);
+      return this;
+    }
+    this.parameterObservers.set(parameter, [observer]);
+    return this;
+  }
 
-	/**
-	 * Adds an observer function for parameter changes.
-	 * The {@link ParameterObserver} gets 3 parameters: the {@link ParameterObservable}, the old {@link ParameterValue}
-	 * and the new {@link ParameterValue}.
-	 * 
-	 * See {@page Parameters} for an example.
-	 */
-	public addParameterObserver( parameter: string, observer: ParameterObserver ): ParameterObservable {
-		if( this.parameterObservers.has( parameter ) ) {
-			this.parameterObservers.get( parameter )!.push( observer );
-			return this;
-		}
-		this.parameterObservers.set( parameter, [observer] );
-		return this;
-	}
+  /**
+   * Removes all {@link ParameterObserver}s for given parameter.
+   */
+  public removeParameterObservers(parameter: string): ParameterObservable {
+    this.parameterObservers.delete(parameter);
+    return this;
+  }
 
-	/**
-	 * Removes all {@link ParameterObserver}s for given parameter.
-	 */
-	public removeParameterObservers( parameter: string ): ParameterObservable {
-		this.parameterObservers.delete( parameter );
-		return this;
-	}
+  /**
+   * Invoke parameter observers for given parameter.
+   */
+  public async commitParameter(parameter: string, value: ParameterValue): Promise<ParameterObservable> {
+    const parameters: ParameterBag = {};
+    parameters[parameter] = value;
+    return this.commitParameters(parameters);
+  }
 
-	/**
-	 * Invoke parameter observers for given parameter.
-	 */
-	public async commitParameter( parameter: string, value: ParameterValue ): Promise<ParameterObservable> {
-		const parameters: ParameterBag = {};
-		parameters[parameter] = value;
-		return this.commitParameters( parameters );
-	}
-
-	/**
-	 * Invoke parameter observers for given parameters.
-	 */
-	public abstract commitParameters( parameters?: ParameterBag ): Promise<ParameterObservable>;
-
-	/**
-	 * Asserts whether given parameter is declared and valid.
-	 */
-	public assertParameter( parameterDeclaration: ParameterDeclarations, parameter: string, value: ParameterValue ) {
-		if( !(parameter in parameterDeclaration) ) {
-			// This is a valid case since we are not able to check parameters that are not declared.
-			// We just ignore parameters that are not declared.
-			return;
-		}
-		const declaration = parameterDeclaration[parameter];
-		const genericError = `"${value}" is not a valid value for parameter "${parameter}" of type. ` +
-			`"${declaration.type}" for ${this.constructor.name} "${this.id}".`;
-		if( declaration.parser ) {
-			try {
-				declaration.parser( value );
-			} catch( e ) {
-				throw Error( genericError + e.message );
-			}
-		}
-		switch( declaration.type ) {
-			case 'select':
-				if( !declaration.options ) {
-					throw Error( `No options defined for parameter declaration "${parameter}"` +
-						`of type "${declaration.type}" for ${this.constructor.name} "${this.id}".` );
-				}
-				if( declaration.options.indexOf( value ) === -1 ) {
-					throw Error( genericError + ` Valid values are: "${declaration.options.join( '", "' )}".` );
-				}
-				break;
-		}
-	}
+  /**
+   * Invoke parameter observers for given parameters.
+   */
+  public abstract commitParameters(parameters?: ParameterBag): Promise<ParameterObservable>;
 
+  /**
+   * Asserts whether given parameter is declared and valid.
+   */
+  public assertParameter(parameterDeclaration: ParameterDeclarations, parameter: string, value: ParameterValue) {
+    if (!(parameter in parameterDeclaration)) {
+      // This is a valid case since we are not able to check parameters that are not declared.
+      // We just ignore parameters that are not declared.
+      return;
+    }
+    const declaration = parameterDeclaration[parameter];
+    const genericError =
+      `"${value}" is not a valid value for parameter "${parameter}" of type. ` +
+      `"${declaration.type}" for ${this.constructor.name} "${this.id}".`;
+    if (declaration.parser) {
+      try {
+        declaration.parser(value);
+      } catch (e) {
+        throw Error(genericError + e.message);
+      }
+    }
+    switch (declaration.type) {
+      case 'select':
+        if (!declaration.options) {
+          throw Error(
+            `No options defined for parameter declaration "${parameter}"` +
+              `of type "${declaration.type}" for ${this.constructor.name} "${this.id}".`
+          );
+        }
+        if (declaration.options.indexOf(value) === -1) {
+          throw Error(genericError + ` Valid values are: "${declaration.options.join('", "')}".`);
+        }
+        break;
+    }
+  }
 }

package/src/api/classes/parameterizable.ts

@@ -2,88 +2,86 @@ import { Parameter } from './parameter';
 import { ParameterObservable } from './parameterObservable';
 
 export abstract class Parameterizable extends ParameterObservable {
+  protected parameterDeclaration: ParameterDeclarations = Parameter.declarations;
 
-	protected parameterDeclaration: ParameterDeclarations = Parameter.declarations;
+  get visible(): boolean | undefined {
+    if (!(Parameter.VISIBLE in this.parameters)) {
+      return undefined;
+    }
+    try {
+      return Parameter.parseBoolean(this.parameters[Parameter.VISIBLE]);
+    } catch (e) {
+      return undefined;
+    }
+  }
 
-	get visible(): boolean | undefined {
-		if( !(Parameter.VISIBLE in this.parameters) ) {
-			return undefined;
-		}
-		try {
-			return Parameter.parseBoolean( this.parameters[Parameter.VISIBLE] );
-		} catch( e ) {
-			return undefined;
-		}
-	}
+  get highlighted(): boolean | undefined {
+    if (!(Parameter.HIGHLIGHTED in this.parameters)) {
+      return undefined;
+    }
+    try {
+      return Parameter.parseBoolean(this.parameters[Parameter.HIGHLIGHTED]);
+    } catch (e) {
+      return undefined;
+    }
+  }
 
-	get highlighted(): boolean | undefined {
-		if( !(Parameter.HIGHLIGHTED in this.parameters) ) {
-			return undefined;
-		}
-		try {
-			return Parameter.parseBoolean( this.parameters[Parameter.HIGHLIGHTED] );
-		} catch( e ) {
-			return undefined;
-		}
-	}
+  get material(): string | undefined {
+    if (!(Parameter.MATERIAL in this.parameters)) {
+      return undefined;
+    }
+    return this.parameters[Parameter.MATERIAL].toString();
+  }
 
-	get material(): string | undefined {
-		if( !(Parameter.MATERIAL in this.parameters) ) {
-			return undefined;
-		}
-		return this.parameters[Parameter.MATERIAL].toString();
-	}
+  get scaling(): string | undefined {
+    if (!(Parameter.SCALING in this.parameters)) {
+      return undefined;
+    }
+    return this.parameters[Parameter.SCALING].toString();
+  }
 
-	get scaling(): string | undefined {
-		if( !(Parameter.SCALING in this.parameters) ) {
-			return undefined;
-		}
-		return this.parameters[Parameter.SCALING].toString();
-	}
+  get position(): string | undefined {
+    if (!(Parameter.POSITION in this.parameters)) {
+      return undefined;
+    }
+    return this.parameters[Parameter.POSITION].toString();
+  }
 
-	get position(): string | undefined {
-		if( !(Parameter.POSITION in this.parameters) ) {
-			return undefined;
-		}
-		return this.parameters[Parameter.POSITION].toString();
-	}
+  get rotation(): string | undefined {
+    if (!(Parameter.ROTATION in this.parameters)) {
+      return undefined;
+    }
+    return this.parameters[Parameter.ROTATION].toString();
+  }
 
-	get rotation(): string | undefined {
-		if( !(Parameter.ROTATION in this.parameters) ) {
-			return undefined;
-		}
-		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;
+    }
+  }
 
-	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;
+  }
 
-	public async show(): Promise<ParameterObservable> {
-		await this.commitParameter( Parameter.VISIBLE, true );
-		return this;
-	}
+  public async hide(): Promise<ParameterObservable> {
+    await this.commitParameter(Parameter.VISIBLE, false);
+    return this;
+  }
 
-	public async hide(): Promise<ParameterObservable> {
-		await this.commitParameter( Parameter.VISIBLE, false );
-		return this;
-	}
-
-	public async toggle(): Promise<ParameterObservable> {
-		await this.commitParameter( Parameter.VISIBLE, !this.visible );
-		return this;
-	}
-
-	public async toggleHighlight(): Promise<ParameterObservable> {
-		await this.commitParameter( Parameter.HIGHLIGHTED, !this.highlighted );
-		return this;
-	}
+  public async toggle(): Promise<ParameterObservable> {
+    await this.commitParameter(Parameter.VISIBLE, !this.visible);
+    return this;
+  }
 
+  public async toggleHighlight(): Promise<ParameterObservable> {
+    await this.commitParameter(Parameter.HIGHLIGHTED, !this.highlighted);
+    return this;
+  }
 }

package/src/api/classes/placementAnimation.ts

@@ -12,146 +12,146 @@ import { SpecStorage } from '../store/specStorage';
  * API of the {@link AnimationManager} to handle instances of this class in your consuming project.
  */
 export class PlacementAnimation implements AnimationInterface {
+  protected _placementDefinition: PlacementDefinition;
 
-	protected _placementDefinition: PlacementDefinition;
+  protected _animationDefinition: AnimationDefinition;
 
-	protected _animationDefinition: AnimationDefinition;
+  protected _timeline: GSAPTimeline;
 
-	protected _timeline: GSAPTimeline;
+  /**
+   * Constructor.
+   */
+  public constructor(
+    public readonly mutable: object,
+    protected _placement: PlacementDefinition | string,
+    protected _animation?: AnimationDefinition | string
+  ) {
+    if (isString(_placement)) {
+      const placementDefinitions = SpecStorage.get<PlacementDefinitions>('scene.placements');
+      if (!placementDefinitions) {
+        throw new Error(`No PlacementDefinitions defined in JSON structure.`);
+      }
+      const placementDefinition = placementDefinitions[_placement];
+      if (!placementDefinition) {
+        throw new Error(`PlacementDefinition "${_placement}" not defined in JSON structure.`);
+      }
+      this._placementDefinition = cloneDeep(placementDefinition);
+    } else {
+      this._placementDefinition = cloneDeep(_placement) as PlacementDefinition;
+    }
+    if (isString(_animation)) {
+      const animationDefinition = SpecStorage.get<AnimationDefinitions>('scene.animations')?.[_animation];
+      if (!animationDefinition) {
+        throw new Error(`AnimationDefinition "${_animation}" not defined in JSON structure.`);
+      }
+      this._animationDefinition = cloneDeep(animationDefinition);
+    } else {
+      this._animationDefinition = cloneDeep(_animation) as AnimationDefinition;
+    }
 
-	/**
-	 * Constructor.
-	 */
-	public constructor( public readonly mutable: object,
-	                    protected _placement: PlacementDefinition | string,
-	                    protected _animation?: AnimationDefinition | string ) {
-		if( isString( _placement ) ) {
-			const placementDefinitions = SpecStorage.get<PlacementDefinitions>( 'scene.placements' );
-			if( !placementDefinitions ) {
-				throw new Error( `No PlacementDefinitions defined in JSON structure.` );
-			}
-			const placementDefinition = placementDefinitions[_placement];
-			if( !placementDefinition ) {
-				throw new Error( `PlacementDefinition "${_placement}" not defined in JSON structure.` );
-			}
-			this._placementDefinition = cloneDeep( placementDefinition );
-		} else {
-			this._placementDefinition = cloneDeep( _placement ) as PlacementDefinition;
-		}
-		if( isString( _animation ) ) {
-			const animationDefinition = SpecStorage.get<AnimationDefinitions>( 'scene.animations' )?.[_animation];
-			if( !animationDefinition ) {
-				throw new Error( `AnimationDefinition "${_animation}" not defined in JSON structure.` );
-			}
-			this._animationDefinition = cloneDeep( animationDefinition );
-		} else {
-			this._animationDefinition = cloneDeep( _animation ) as AnimationDefinition;
-		}
-		
-		this.prepareAnimationDefinition();
-		this._timeline = gsap.timeline( {
-			defaults: this._animationDefinition,
-			paused: true
-		} );
+    this.prepareAnimationDefinition();
+    this._timeline = gsap.timeline({
+      defaults: this._animationDefinition,
+      paused: true,
+    });
 
-		this.preparePlacementDefinition();
-		this.createTweens();
-	}
+    this.preparePlacementDefinition();
+    this.createTweens();
+  }
 
-	/**
-	 * Plays all `Tweens` of this {@link PlacementAnimation}.
-	 */
-	public async play(): Promise<AnimationInterface> {
-		await this._timeline.play().then();
-		return this;
-	}
+  /**
+   * Plays all `Tweens` of this {@link PlacementAnimation}.
+   */
+  public async play(): Promise<AnimationInterface> {
+    await this._timeline.play().then();
+    return this;
+  }
 
-	/**
-	 * Pause all `Tweens` of this {@link PlacementAnimation}.
-	 */
-	public pause(): AnimationInterface {
-		this._timeline.pause();
-		return this;
-	}
+  /**
+   * Pause all `Tweens` of this {@link PlacementAnimation}.
+   */
+  public pause(): AnimationInterface {
+    this._timeline.pause();
+    return this;
+  }
 
-	/**
-	 * Kills all `Tweens` of this {@link PlacementAnimation}.
-	 */
-	public kill(): AnimationInterface {
-		this._timeline.kill();
-		return this;
-	}
+  /**
+   * Kills all `Tweens` of this {@link PlacementAnimation}.
+   */
+  public kill(): AnimationInterface {
+    this._timeline.kill();
+    return this;
+  }
 
-	/**
-	 * Creates a {@link AnimationDefinition} definition if not provided in the constructor and sets some defaults.
-	 * Only custom properties from {@link AnimationDefinition} are adjusted, all {@link GSAPTweenVars} remain untouched.
-	 */
-	protected prepareAnimationDefinition() {
-		// create an animation definition if not available yet
-		this._animationDefinition = this._animationDefinition || {};
+  /**
+   * Creates a {@link AnimationDefinition} definition if not provided in the constructor and sets some defaults.
+   * Only custom properties from {@link AnimationDefinition} are adjusted, all {@link GSAPTweenVars} remain untouched.
+   */
+  protected prepareAnimationDefinition() {
+    // create an animation definition if not available yet
+    this._animationDefinition = this._animationDefinition || {};
 
-		// parse shortest way flag or set to `true` if not configured
-		if( this._animationDefinition.shortestWay !== undefined ) {
-			this._animationDefinition.shortestWay = Parameter.parseBoolean( this._animationDefinition.shortestWay );
-		} else {
-			this._animationDefinition.shortestWay = true;
-		}
-	}
+    // parse shortest way flag or set to `true` if not configured
+    if (this._animationDefinition.shortestWay !== undefined) {
+      this._animationDefinition.shortestWay = Parameter.parseBoolean(this._animationDefinition.shortestWay);
+    } else {
+      this._animationDefinition.shortestWay = true;
+    }
+  }
 
-	/**
-	 * Prepares different types of {@link PlacementDefinition} and sets some defaults.
-	 */
-	protected preparePlacementDefinition() {
-		let position = this._placementDefinition.position;
-		if( isString( position ) ) {
-			position = Parameter.parseVector( position );
-			this._placementDefinition.position = position;
-		}
-		if( this.mutable instanceof ArcRotateCamera ) {
-			// parse the target
-			if( isString( this._placementDefinition.target ) ) {
-				this._placementDefinition.target = Parameter.parseVector( this._placementDefinition.target );
-			}
-			if( position ) {
-				// parse the position and calculate alpha, beta and radius with a "ghost camera"
-				// @see https://www.babylonjs-playground.com/#4IVMG#0
-				const ghostCam = (this.mutable as ArcRotateCamera).clone( 'ghost' ) as ArcRotateCamera;
-				ghostCam.setPosition( position );
-				merge( this._placementDefinition, {
-					alpha: ghostCam.alpha,
-					beta: ghostCam.beta,
-					radius: ghostCam.radius,
-				} );
-				delete this._placementDefinition.position;
-				ghostCam.dispose();
-			} else if( this._animationDefinition.shortestWay && this._placementDefinition.alpha !== undefined ) {
-				// transform the target's alpha value into the same turn as the current camera position to avoid movements > 360 degrees
-				const alphaGap = this.mutable.alpha - this._placementDefinition.alpha;
-				const cntTurns = Math.round(alphaGap / (2 * Math.PI));
-				this._placementDefinition.alpha += (2 * Math.PI * cntTurns);
-			}
-		}
-	}
-
-	/**
-	 * Creates `Tweens` for the {@link PlacementDefinition} configured for this {@link PlacementAnimation}.
-	 */
-	protected createTweens() {
-		for( const property in this._placementDefinition ) {
-			const propertyValue = get( this._placementDefinition, property );
-			const tweenVars: object = {};
-			let _mutable = this.mutable;
-			if( propertyValue instanceof Vector3 ) {
-				// GSAP does not support mutation of complex objects, so we are forced
-				// to use the properties on the object as mutable directly and mutate
-				// the coordinates separately.
-				_mutable = get( this.mutable, property );
-				merge( tweenVars, { x: propertyValue.x, y: propertyValue.y, z: propertyValue.z } );
-			} else {
-				set( tweenVars, property, propertyValue );
-			}
-			this._timeline.to( _mutable, tweenVars, 0 );  // Note: position 0 does the "parallel" stuff here
-		}
-	}
+  /**
+   * Prepares different types of {@link PlacementDefinition} and sets some defaults.
+   */
+  protected preparePlacementDefinition() {
+    let position = this._placementDefinition.position;
+    if (isString(position)) {
+      position = Parameter.parseVector(position);
+      this._placementDefinition.position = position;
+    }
+    if (this.mutable instanceof ArcRotateCamera) {
+      // parse the target
+      if (isString(this._placementDefinition.target)) {
+        this._placementDefinition.target = Parameter.parseVector(this._placementDefinition.target);
+      }
+      if (position) {
+        // parse the position and calculate alpha, beta and radius with a "ghost camera"
+        // @see https://www.babylonjs-playground.com/#4IVMG#0
+        const ghostCam = (this.mutable as ArcRotateCamera).clone('ghost') as ArcRotateCamera;
+        ghostCam.setPosition(position);
+        merge(this._placementDefinition, {
+          alpha: ghostCam.alpha,
+          beta: ghostCam.beta,
+          radius: ghostCam.radius,
+        });
+        delete this._placementDefinition.position;
+        ghostCam.dispose();
+      } else if (this._animationDefinition.shortestWay && this._placementDefinition.alpha !== undefined) {
+        // transform the target's alpha value into the same turn as the current camera position to avoid movements > 360 degrees
+        const alphaGap = this.mutable.alpha - this._placementDefinition.alpha;
+        const cntTurns = Math.round(alphaGap / (2 * Math.PI));
+        this._placementDefinition.alpha += 2 * Math.PI * cntTurns;
+      }
+    }
+  }
 
+  /**
+   * Creates `Tweens` for the {@link PlacementDefinition} configured for this {@link PlacementAnimation}.
+   */
+  protected createTweens() {
+    for (const property in this._placementDefinition) {
+      const propertyValue = get(this._placementDefinition, property);
+      const tweenVars: object = {};
+      let _mutable = this.mutable;
+      if (propertyValue instanceof Vector3) {
+        // GSAP does not support mutation of complex objects, so we are forced
+        // to use the properties on the object as mutable directly and mutate
+        // the coordinates separately.
+        _mutable = get(this.mutable, property);
+        merge(tweenVars, { x: propertyValue.x, y: propertyValue.y, z: propertyValue.z });
+      } else {
+        set(tweenVars, property, propertyValue);
+      }
+      this._timeline.to(_mutable, tweenVars, 0); // Note: position 0 does the "parallel" stuff here
+    }
+  }
 }