[ts] Removed SharedAssetManager. Added webworker support to AssetManager. AssetManager clean up.

Related: #1762

spine-ts/core/src/AssetManager.ts

@@ -30,14 +30,14 @@
 module spine {
 	export class AssetManager implements Disposable {
 		private pathPrefix: string;
-		private textureLoader: (image: HTMLImageElement) => any;
+		private textureLoader: (image: HTMLImageElement | ImageBitmap) => any;
 		private downloader: Downloader;
 		private assets: Map<any> = {};
 		private errors: Map<string> = {};
 		private toLoad = 0;
 		private loaded = 0;
 
-		constructor (textureLoader: (image: HTMLImageElement) => any, pathPrefix: string = "", downloader: Downloader = null) {
+		constructor (textureLoader: (image: HTMLImageElement | ImageBitmap) => any, pathPrefix: string = "", downloader: Downloader = null) {
 			this.textureLoader = textureLoader;
 			this.pathPrefix = pathPrefix;
 			this.downloader = downloader || new Downloader();
@@ -48,14 +48,14 @@ module spine {
 			return this.pathPrefix + path;
 		}
 
-		private success (path: string, callback: (path: string, data: any) => void, asset: any) {
+		private success (callback: (path: string, data: any) => void, path: string, asset: any) {
 			this.toLoad--;
 			this.loaded++;
 			this.assets[path] = asset;
 			if (callback) callback(path, asset);
 		}
 
-		private error (path: string, callback: (path: string, error: string) => void, message: string) {
+		private error (callback: (path: string, message: string) => void, path: string, message: string) {
 			this.toLoad--;
 			this.loaded++;
 			this.errors[path] = message;
@@ -68,66 +68,80 @@ module spine {
 
 		loadBinary(path: string,
 			success: (path: string, binary: Uint8Array) => void = null,
-			error: (path: string, error: string) => void = null) {
+			error: (path: string, message: string) => void = null) {
 			path = this.start(path);
 
 			this.downloader.downloadBinary(path, (data: Uint8Array): void => {
-				this.success(path, success, data);
+				this.success(success, path, data);
 			}, (status: number, responseText: string): void => {
-				this.error(path, error, `Couldn't load binary ${path}: status ${status}, ${responseText}`);
+				this.error(error, path, `Couldn't load binary ${path}: status ${status}, ${responseText}`);
 			});
 		}
 
 		loadText(path: string,
 			success: (path: string, text: string) => void = null,
-			error: (path: string, error: string) => void = null) {
+			error: (path: string, message: string) => void = null) {
 			path = this.start(path);
 
 			this.downloader.downloadText(path, (data: string): void => {
-				this.success(path, success, data);
+				this.success(success, path, data);
 			}, (status: number, responseText: string): void => {
-				this.error(path, error, `Couldn't load text ${path}: status ${status}, ${responseText}`);
+				this.error(error, path, `Couldn't load text ${path}: status ${status}, ${responseText}`);
 			});
 		}
 
 		loadJson(path: string,
 			success: (path: string, object: object) => void = null,
-			error: (path: string, error: string) => void = null) {
+			error: (path: string, message: string) => void = null) {
 			path = this.start(path);
 
 			this.downloader.downloadJson(path, (data: object): void => {
-				this.success(path, success, data);
+				this.success(success, path, data);
 			}, (status: number, responseText: string): void => {
-				this.error(path, error, `Couldn't load JSON ${path}: status ${status}, ${responseText}`);
+				this.error(error, path, `Couldn't load JSON ${path}: status ${status}, ${responseText}`);
 			});
 		}
 
 		loadTexture (path: string,
-			success: (path: string, image: HTMLImageElement) => void = null,
+			success: (path: string, image: HTMLImageElement | ImageBitmap) => void = null,
-			error: (path: string, error: string) => void = null) {
+			error: (path: string, message: string) => void = null) {
 			path = this.start(path);
 
-			let img = new Image();
+			let isBrowser = !!(typeof window !== 'undefined' && typeof navigator !== 'undefined' && window.document);
-			img.crossOrigin = "anonymous";
+			let isWebWorker = !isBrowser && typeof importScripts !== 'undefined';
-			img.onload = (ev) => {
+			if (isWebWorker) {
-				this.success(path, success, this.textureLoader(img));
+				fetch(path, {mode: <RequestMode>"cors"}).then( (response) => {
+					if (response.ok) return response.blob();
+					this.error(error, path, `Couldn't load image: ${path}`);
+					return null;
+				}).then( (blob) => {
+					return blob ? createImageBitmap(blob, { premultiplyAlpha: "none", colorSpaceConversion: "none" }) : null;
+				}).then( (bitmap) => {
+					if (bitmap) this.success(success, path, this.textureLoader(bitmap));
+				});
+			} else {
+				let image = new Image();
+				image.crossOrigin = "anonymous";
+				image.onload = () => {
+					this.success(success, path, this.textureLoader(image));
+				};
+				image.onerror = () => {
+					this.error(error, path, `Couldn't load image: ${path}`);
+				};
+				if (this.downloader.rawDataUris[path]) path = this.downloader.rawDataUris[path];
+				image.src = path;
 			}
-			img.onerror = (ev) => {
-				this.error(path, error, `Couldn't load image ${path}`);
-			}
-			if (this.downloader.rawDataUris[path]) path = this.downloader.rawDataUris[path];
-			img.src = path;
 		}
 
 		loadTextureAtlas (path: string,
 			success: (path: string, atlas: TextureAtlas) => void = null,
-			error: (path: string, error: string) => void = null
+			error: (path: string, message: string) => void = null
 		) {
-			path = this.start(path);
 			let parent = path.lastIndexOf("/") >= 0 ? path.substring(0, path.lastIndexOf("/")) : "";
+			path = this.start(path);
 
 			this.downloader.downloadText(path, (atlasData: string): void => {
-				let pagesLoaded: any = { count: 0 };
+				let pagesLoaded = 0;
 				let atlasPages = new Array<string>();
 				try {
 					let atlas = new TextureAtlas(atlasData, (path: string) => {
@@ -137,38 +151,34 @@ module spine {
 						image.height = 16;
 						return new FakeTexture(image);
 					});
+					for (let atlasPage of atlasPages) {
+						let pageLoadError = false;
+						this.loadTexture(atlasPage, (imagePath: string, image: HTMLImageElement | ImageBitmap) => {
+							pagesLoaded++;
+							if (pagesLoaded == atlasPages.length) {
+								if (!pageLoadError) {
+									try {
+										this.success(success, path, new TextureAtlas(atlasData, (path: string) => {
+											return this.get(parent == "" ? path : parent + "/" + path);
+										}));
+									} catch (e) {
+										this.error(error, path, `Couldn't load texture atlas ${path}: ${e.message}`);
+									}
+								} else
+									this.error(error, path, `Couldn't load texture atlas ${path} page: ${imagePath}`);
+							}
+						}, (imagePath: string, errorMessage: string) => {
+							pageLoadError = true;
+							pagesLoaded++;
+							if (pagesLoaded == atlasPages.length)
+								this.error(error, path, `Couldn't load texture atlas ${path} page: ${imagePath}`);
+						});
+					}
 				} catch (e) {
-					this.error(path, error, `Couldn't load texture atlas ${path}: ${e.message}`);
+					this.error(error, path, `Couldn't load texture atlas ${path}: ${e.message}`);
-					return;
-				}
-
-				for (let atlasPage of atlasPages) {
-					let pageLoadError = false;
-					this.loadTexture(atlasPage, (imagePath: string, image: HTMLImageElement) => {
-						pagesLoaded.count++;
-
-						if (pagesLoaded.count == atlasPages.length) {
-							if (!pageLoadError) {
-								try {
-									this.success(path, success, new TextureAtlas(atlasData, (path: string) => {
-										return this.get(parent == "" ? path : parent + "/" + path);
-									}));
-								} catch (e) {
-									this.error(path, error, `Couldn't load texture atlas ${path}: ${e.message}`);
-								}
-							} else
-								this.error(path, error, `Couldn't load texture atlas page ${imagePath}} of atlas ${path}`);
-						}
-					}, (imagePath: string, errorMessage: string) => {
-						pageLoadError = true;
-						pagesLoaded.count++;
-
-						if (pagesLoaded.count == atlasPages.length)
-							this.error(path, error, `Couldn't load texture atlas page ${imagePath}} of atlas ${path}`);
-					});
 				}
 			}, (status: number, responseText: string): void => {
-				this.error(path, error, `Couldn't load texture atlas ${path}: status ${status}, ${responseText}`);
+				this.error(error, path, `Couldn't load texture atlas ${path}: status ${status}, ${responseText}`);
 			});
 		}
 

spine-ts/core/src/SharedAssetManager.ts

@@ -1,219 +0,0 @@
-/******************************************************************************
- * Spine Runtimes License Agreement
- * Last updated January 1, 2020. Replaces all prior versions.
- *
- * Copyright (c) 2013-2020, Esoteric Software LLC
- *
- * Integration of the Spine Runtimes into software or otherwise creating
- * derivative works of the Spine Runtimes is permitted under the terms and
- * conditions of Section 2 of the Spine Editor License Agreement:
- * http://esotericsoftware.com/spine-editor-license
- *
- * Otherwise, it is permitted to integrate the Spine Runtimes into software
- * or otherwise create derivative works of the Spine Runtimes (collectively,
- * "Products"), provided that each user of the Products must obtain their own
- * Spine Editor license and redistribution of the Products in any form must
- * include this license and copyright notice.
- *
- * THE SPINE RUNTIMES ARE PROVIDED BY ESOTERIC SOFTWARE LLC "AS IS" AND ANY
- * EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO, THE IMPLIED
- * WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR PURPOSE ARE
- * DISCLAIMED. IN NO EVENT SHALL ESOTERIC SOFTWARE LLC BE LIABLE FOR ANY
- * DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES
- * (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES,
- * BUSINESS INTERRUPTION, OR LOSS OF USE, DATA, OR PROFITS) HOWEVER CAUSED AND
- * ON ANY THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT
- * (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE OF
- * THE SPINE RUNTIMES, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
- *****************************************************************************/
-
-module spine {
-	class Assets {
-		clientId: string;
-		toLoad = new Array<string>();
-		assets: Map<any> = {};
-		textureLoader: (image: HTMLImageElement | ImageBitmap) => any;
-
-		constructor(clientId: string) {
-			this.clientId = clientId;
-		}
-
-		loaded() {
-			let i = 0;
-			for (let v in this.assets) i++;
-			return i;
-		}
-	}
-
-	export class SharedAssetManager implements Disposable {
-		private pathPrefix: string;
-		private clientAssets: Map<Assets> = {};
-		private queuedAssets: Map<string> = {};
-		private rawAssets: Map<any> = {}
-		private errors: Map<string> = {};
-
-		constructor (pathPrefix: string = "") {
-			this.pathPrefix = pathPrefix;
-		}
-
-		private queueAsset(clientId: string, textureLoader: (image: HTMLImageElement | ImageBitmap) => any, path: string): boolean {
-			let clientAssets = this.clientAssets[clientId];
-			if (!clientAssets) {
-				clientAssets = new Assets(clientId);
-				this.clientAssets[clientId] = clientAssets;
-			}
-			if (textureLoader) clientAssets.textureLoader = textureLoader;
-			clientAssets.toLoad.push(path);
-
-			// check if already queued, in which case we can skip actual
-			// loading
-			if (this.queuedAssets[path] === path) {
-				return false;
-			} else {
-				this.queuedAssets[path] = path;
-				return true;
-			}
-		}
-
-		loadText(clientId: string, path: string) {
-			path = this.pathPrefix + path;
-			if (!this.queueAsset(clientId, null, path)) return;
-			let request = new XMLHttpRequest();
-			request.overrideMimeType("text/html");
-			request.onreadystatechange = () => {
-				if (request.readyState == XMLHttpRequest.DONE) {
-					if (request.status >= 200 && request.status < 300) {
-						this.rawAssets[path] = request.responseText;
-					} else {
-						this.errors[path] = `Couldn't load text ${path}: status ${request.status}, ${request.responseText}`;
-					}
-				}
-			};
-			request.open("GET", path, true);
-			request.send();
-		}
-
-		loadJson(clientId: string, path: string) {
-			path = this.pathPrefix + path;
-			if (!this.queueAsset(clientId, null, path)) return;
-			let request = new XMLHttpRequest();
-			request.overrideMimeType("text/html");
-			request.onreadystatechange = () => {
-				if (request.readyState == XMLHttpRequest.DONE) {
-					if (request.status >= 200 && request.status < 300) {
-						this.rawAssets[path] = JSON.parse(request.responseText);
-					} else {
-						this.errors[path] = `Couldn't load text ${path}: status ${request.status}, ${request.responseText}`;
-					}
-				}
-			};
-			request.open("GET", path, true);
-			request.send();
-		}
-
-		loadTexture (clientId: string, textureLoader: (image: HTMLImageElement | ImageBitmap) => any, path: string) {
-			path = this.pathPrefix + path;
-			if (!this.queueAsset(clientId, textureLoader, path)) return;
-
-			let isBrowser = !!(typeof window !== 'undefined' && typeof navigator !== 'undefined' && window.document);
-			let isWebWorker = !isBrowser && typeof importScripts !== 'undefined';
-
-			if (isWebWorker) {
-				// For webworker use fetch instead of Image()
-				const options = {mode: <RequestMode>"cors"};
-				fetch(path, options).then( (response) => {
-						if (!response.ok) {
-							this.errors[path] = "Couldn't load image " + path;
-						}
-						return response.blob();
-					}).then( (blob) => {
-						return createImageBitmap(blob, {
-						premultiplyAlpha: 'none',
-						colorSpaceConversion: 'none',
-						});
-					}).then( (bitmap) => {
-						this.rawAssets[path] = bitmap;
-					});
-			} else {
-				let img = new Image();
-				img.crossOrigin = "anonymous";
-				img.onload = (ev) => {
-					this.rawAssets[path] = img;
-				}
-				img.onerror = (ev) => {
-					this.errors[path] = `Couldn't load image ${path}`;
-				}
-				img.src = path;
-			}
-		}
-
-		get (clientId: string, path: string) {
-			path = this.pathPrefix + path;
-			let clientAssets = this.clientAssets[clientId];
-			if (!clientAssets) return true;
-			return clientAssets.assets[path];
-		}
-
-		private updateClientAssets(clientAssets: Assets): void {
-			let isBrowser = !!(typeof window !== 'undefined' && typeof navigator !== 'undefined' && window.document);
-			let isWebWorker = !isBrowser && typeof importScripts !== 'undefined';
-
-			for (let i = 0; i < clientAssets.toLoad.length; i++) {
-				let path = clientAssets.toLoad[i];
-				let asset = clientAssets.assets[path];
-				if (!asset) {
-					let rawAsset = this.rawAssets[path];
-					if (!rawAsset) continue;
-
-					if (isWebWorker) {
-						if (rawAsset instanceof ImageBitmap) {
-							clientAssets.assets[path] = clientAssets.textureLoader(<ImageBitmap>rawAsset);
-						} else {
-							clientAssets.assets[path] = rawAsset;
-						}
-					} else {
-						if (rawAsset instanceof HTMLImageElement) {
-							clientAssets.assets[path] = clientAssets.textureLoader(<HTMLImageElement>rawAsset);
-						} else {
-							clientAssets.assets[path] = rawAsset;
-						}						
-					}
-				}
-			}
-		}
-
-		isLoadingComplete (clientId: string): boolean {
-			let clientAssets = this.clientAssets[clientId];
-			if (!clientAssets) return true;
-			this.updateClientAssets(clientAssets);
-			return clientAssets.toLoad.length == clientAssets.loaded();
-		}
-
-		/*remove (clientId: string, path: string) {
-			path = this.pathPrefix + path;
-			let asset = this.assets[path];
-			if ((<any>asset).dispose) (<any>asset).dispose();
-			this.assets[path] = null;
-		}
-
-		removeAll () {
-			for (let key in this.assets) {
-				let asset = this.assets[key];
-				if ((<any>asset).dispose) (<any>asset).dispose();
-			}
-			this.assets = {};
-		}*/
-
-		dispose () {
-			// this.removeAll();
-		}
-
-		hasErrors() {
-			return Object.keys(this.errors).length > 0;
-		}
-
-		getErrors() {
-			return this.errors;
-		}
-	}
-}