HierarchicalLock: Add loading locking replacement (#1628)

* Update hierarchical lock

* Updates

Author: gkjohnson

src/three/plugins/mvt/HierarchicalLock.js

@@ -24,13 +24,13 @@ export class HierarchicalLock extends EventDispatcher {
 	// mark the tile as "active", meaning it should be visible
 	markActive( x, y, level ) {
 
-		this._incrLock( x, y, level, true );
+		this._incrActiveLock( x, y, level, true );
 
 	}
 
 	markInactive( x, y, level ) {
 
-		this._incrLock( x, y, level, false );
+		this._incrActiveLock( x, y, level, false );
 
 	}
 
@@ -40,132 +40,180 @@ export class HierarchicalLock extends EventDispatcher {
 
 		const { locks } = this;
 		const childKey = getKey( x, y, level );
-		let ax = x;
-		let ay = y;
-		let al = level;
+		this._ensureLock( childKey, x, y, level );
+
+		const childLock = locks[ childKey ];
+		childLock.loading ++;
 
-		// Create the lock for the child and mark it as loading
-		if ( ! ( childKey in locks ) ) {
+		if ( childLock.loading === 1 && childLock.active > 0 ) {
 
-			locks[ childKey ] = this._createLock( x, y, level );
+			this._lockAncestor( x, y, level );
 
 		}
 
+		this._tryFireEvent( childKey );
+
+	}
+
+	unmarkLoading( x, y, level ) {
+
+		const { locks } = this;
+		const childKey = getKey( x, y, level );
 		const childLock = locks[ childKey ];
-		childLock.loading ++;
-		this._checkToggle( childKey );
+		childLock.loading --;
+
+		if ( childLock.loading === 0 && childLock.active > 0 ) {
+
+			this._unlockAncestor( x, y, level );
+
+		}
+
+		this._tryFireEvent( childKey );
+		this._tryDeleteLock( childKey );
+
+	}
+
+	//
+
+	_lockAncestor( x, y, level ) {
+
+		const { locks } = this;
+		const childKey = getKey( x, y, level );
+		const childLock = locks[ childKey ];
+		this._ensureLock( childKey, x, y, level );
+		if ( childLock.lockedAncestor ) return;
+
+		let ax = x;
+		let ay = y;
+		let al = level;
 
 		// Only lock the ancestor on the first markLoading call — subsequent concurrent
 		// loads for the same tile share the same ancestor hold
-		if ( childLock.loading === 1 ) {
+		while ( al > 0 ) {
 
-			while ( al > 0 ) {
+			al --;
+			ax >>= 1;
+			ay >>= 1;
 
-				al --;
-				ax >>= 1;
-				ay >>= 1;
+			const ancestorKey = getKey( ax, ay, al );
+			this._ensureLock( ancestorKey, ax, ay, al );
+			locks[ ancestorKey ].loadingDescendants.add( childKey );
 
-				const ancestorKey = getKey( ax, ay, al );
-				if ( ancestorKey in locks && locks[ ancestorKey ].dispatched ) {
+			// save the reference so we can unlock it later when load is finished
+			if ( locks[ ancestorKey ].dispatched && ! childLock.lockedAncestor ) {
 
-					// save the reference so we can unlock it later when load is finished
-					this._incrLock( ax, ay, al, true );
-					childLock.lockedAncestor = { x: ax, y: ay, level: al };
-					break;
-
-				}
+				this._incrActiveLock( ax, ay, al, true );
+				childLock.lockedAncestor = { x: ax, y: ay, level: al };
 
 			}
 
 		}
 
 	}
 
-	unmarkLoading( x, y, level ) {
+	_unlockAncestor( x, y, level ) {
 
 		const { locks } = this;
 		const childKey = getKey( x, y, level );
 		const childLock = locks[ childKey ];
+		if ( ! childLock ) return;
 
-		if ( ! childLock ) {
+		// unmark the descendants list
+		let ax = x;
+		let ay = y;
+		let al = level;
+		while ( al > 0 ) {
 
-			throw new Error( 'HierarchicalLock: unmarkLoading called without a matching markLoading.' );
+			al --;
+			ax >>= 1;
+			ay >>= 1;
 
-		}
+			const ancestorKey = getKey( ax, ay, al );
+			locks[ ancestorKey ].loadingDescendants.delete( childKey );
+			this._tryDeleteLock( ancestorKey );
 
-		childLock.loading --;
-		this._checkToggle( childKey );
+		}
 
-		// Release the ancestor only when the last concurrent load finishes
-		if ( childLock.loading === 0 && childLock.lockedAncestor ) {
+		// remove the locked ancestor
+		if ( childLock.lockedAncestor ) {
 
-			const { x: ax, y: ay, level: al } = childLock.lockedAncestor;
-			this._incrLock( ax, ay, al, false );
+			// unlock the ancestor
+			const { x: lx, y: ly, level: ll } = childLock.lockedAncestor;
+			this._incrActiveLock( lx, ly, ll, false );
 			childLock.lockedAncestor = null;
 
 		}
 
-		this._tryDeleteLock( childKey );
-
 	}
 
-	//
-
+	// delete the lock if all the fields have been settled
 	_tryDeleteLock( key ) {
 
 		const lock = this.locks[ key ];
-		if ( lock && lock.active === 0 && lock.lockedAncestor === null && lock.loading === 0 ) {
+		if (
+			lock && lock.active === 0 &&
+			lock.lockedAncestor === null &&
+			lock.loading === 0 &&
+			lock.loadingDescendants.size === 0
+		) {
 
 			delete this.locks[ key ];
 
 		}
 
 	}
 
-	_createLock( x, y, level ) {
+	// ensure the lock exists
+	_ensureLock( key, x, y, level ) {
 
-		return {
-			x,
-			y,
-			level,
-			active: 0,
-			loading: 0,
-			dispatched: false,
-			lockedAncestor: null,
-		};
+		const { locks } = this;
+		if ( ! ( key in locks ) ) {
+
+			locks[ key ] = {
+				x,
+				y,
+				level,
+				active: 0,
+				loading: 0,
+				dispatched: false,
+				lockedAncestor: null,
+				loadingDescendants: new Set(),
+			};
+
+		}
+
+		return locks[ key ];
 
 	}
 
-	_checkToggle( key ) {
+	// checks whether an event should be fired
+	_tryFireEvent( key ) {
 
 		const { locks } = this;
 		const lock = locks[ key ];
-		if ( ! lock ) {
-
-			return;
-
-		}
 
 		const shouldShow = lock.loading === 0 && lock.active > 0;
 		if ( shouldShow !== lock.dispatched ) {
 
 			lock.dispatched = shouldShow;
-			this.dispatchEvent( { type: 'toggle', active: shouldShow, x: lock.x, y: lock.y, level: lock.level } );
+			this.dispatchEvent( {
+				type: 'toggle',
+				active: shouldShow,
+				x: lock.x,
+				y: lock.y,
+				level: lock.level,
+			} );
 
 		}
 
 	}
 
-	_incrLock( x, y, level, incr ) {
+	// increments the active lock for the tile
+	_incrActiveLock( x, y, level, incr ) {
 
 		const { locks } = this;
 		const key = getKey( x, y, level );
-
-		if ( ! ( key in locks ) ) {
-
-			locks[ key ] = this._createLock( x, y, level );
-
-		}
+		this._ensureLock( key, x, y, level );
 
 		const lock = locks[ key ];
 		lock.active += incr ? 1 : - 1;
@@ -175,7 +223,51 @@ export class HierarchicalLock extends EventDispatcher {
 
 		}
 
-		this._checkToggle( key );
+		// try to lock the ancestors if the lock became active and is loading
+		if ( lock && lock.loading > 0 ) {
+
+			if ( incr && lock.active === 1 ) {
+
+				this._lockAncestor( x, y, level );
+
+			} else if ( ! incr && lock.active === 0 ) {
+
+				this._unlockAncestor( x, y, level );
+
+			}
+
+		}
+
+		// replace all the existing locks up this chain
+		if ( incr && lock.active === 1 ) {
+
+			lock.loadingDescendants.forEach( key => {
+
+				const childLock = locks[ key ];
+				if ( childLock.lockedAncestor ) {
+
+					const { x: lx, y: ly, level: ll } = childLock.lockedAncestor;
+					this.markInactive( lx, ly, ll );
+					lock.active ++;
+
+					childLock.lockedAncestor.x = x;
+					childLock.lockedAncestor.y = y;
+					childLock.lockedAncestor.level = level;
+
+				} else if ( lock.loading === 0 && childLock.active > 0 && childLock.loading > 0 ) {
+
+					// No ancestor was dispatched when this descendant started loading;
+					// this tile is now visible so use it as the placeholder.
+					lock.active ++;
+					childLock.lockedAncestor = { x, y, level };
+
+				}
+
+			} );
+
+		}
+
+		this._tryFireEvent( key );
 		this._tryDeleteLock( key );
 
 	}