Update fade manager

example/src/FadeManager.js

@@ -6,10 +6,14 @@ export class FadeManager {
 	constructor() {
 
 		this.duration = 250;
+		this.fadeCount = 0;
 		this._lastTick = - 1;
 		this._fadeState = new Map();
 		this._fadeParams = new WeakMap();
-		this.onFadeFinish = () => {};
+		this.onFadeComplete = null;
+		this.onFadeStart = null;
+		this.onFadeSetComplete = null;
+		this.onFadeSetStart = null;
 
 	}
 
@@ -195,7 +199,20 @@ export class FadeManager {
 
 		} );
 
-		this.onFadeFinish( object );
+		// fire events
+		this.fadeCount --;
+
+		if ( this.onFadeComplete ) {
+
+			this.onFadeComplete( object );
+
+		}
+
+		if ( this.fadeCount === 0 && this.onFadeSetComplete ) {
+
+			this.onFadeSetComplete();
+
+		}
 
 	}
 
@@ -212,13 +229,30 @@ export class FadeManager {
 	// Fade the object in
 	fadeIn( object ) {
 
-		this.guaranteeState( object );
-
+		const noState = this.guaranteeState( object );
 		const state = this._fadeState.get( object );
 		state.fadeInTarget = 1;
 		state.fadeOutTarget = 0;
 		state.fadeOut = 0;
 
+		// Fire events
+		if ( noState ) {
+
+			this.fadeCount ++;
+			if ( this.fadeCount === 1 && this.onFadeSetStart ) {
+
+				this.onFadeSetStart();
+
+			}
+
+			if ( this.onFadeStart ) {
+
+				this.onFadeStart( object );
+
+			}
+
+		}
+
 	}
 
 	// Fade the object out
@@ -227,11 +261,26 @@ export class FadeManager {
 		const noState = this.guaranteeState( object );
 		const state = this._fadeState.get( object );
 		state.fadeOutTarget = 1;
+
+		// Fire events and initialize state
 		if ( noState ) {
 
 			state.fadeInTarget = 1;
 			state.fadeIn = 1;
 
+			this.fadeCount ++;
+			if ( this.fadeCount === 1 && this.onFadeSetStart ) {
+
+				this.onFadeSetStart();
+
+			}
+
+			if ( this.onFadeStart ) {
+
+				this.onFadeStart( object );
+
+			}
+
 		}
 
 	}

example/src/FadeTilesRenderer.js

@@ -46,7 +46,7 @@ function onLoadModel( scene ) {
 
 }
 
-function onFadeFinish( object ) {
+function onFadeComplete( object ) {
 
 	// when the fade finishes ensure we dispose the tile and remove it from the fade group
 	if ( object.parent === this._fadeGroup ) {
@@ -113,14 +113,17 @@ export const FadeTilesRendererMixin = base => class extends base {
 
 		const fadeGroup = new Group();
 		const fadeManager = new FadeManager();
+		fadeManager.onFadeSetStart = () => this.dispatchEvent( { type: 'fade-start' } );
+		fadeManager.onFadeSetComplete = () => this.dispatchEvent( { type: 'fade-end' } );
+
 		this.group.add( fadeGroup );
-		fadeManager.onFadeFinish = onFadeFinish.bind( this );
+		fadeManager.onFadeComplete = onFadeComplete.bind( this );
 
 		this._fadeManager = fadeManager;
 		this._fadeGroup = fadeGroup;
 
-		this.onLoadModel = onLoadModel.bind( this );
-		this.onTileVisibilityChange = onTileVisibilityChange.bind( this );
+		this.addEventListener( 'load-model', e => onLoadModel.call( this, e.scene ) );
+		this.addEventListener( 'tile-visibility-change', e => onTileVisibilityChange.call( this, e.scene, e.tile, e.visible ) );
 
 		this.initialLayerRendered = false;
 		this.prevCameraTransforms = new Map();
@@ -138,9 +141,18 @@ export const FadeTilesRendererMixin = base => class extends base {
 		this.displayActiveTiles = true;
 
 		// update the tiles
+		const fadingBefore = this._fadeManager.fadeCount;
+
 		super.update( ...args );
 		this._fadeManager.update();
 
+		const fadingAfter = this._fadeManager.fadeCount;
+		if ( fadingBefore !== 0 && fadingAfter !== 0 ) {
+
+			this.dispatchEvent( { type: 'fade-change' } );
+
+		}
+
 		this.displayActiveTiles = displayActiveTiles;
 		this.fadeDuration = fadeDuration;
 
@@ -241,7 +253,7 @@ export const FadeTilesRendererMixin = base => class extends base {
 
 		this.disposeSet.forEach( object => {
 
-			onFadeFinish.call( this, object );
+			onFadeComplete.call( this, object );
 
 		} );