[ts] Formatting

This commit is contained in:
Mario Zechner 2021-09-07 15:49:37 +02:00
parent 9e4ee3d2af
commit babe296157
3 changed files with 99 additions and 99 deletions

View File

@ -40,36 +40,36 @@ export class AssetManagerBase implements Disposable {
private toLoad = 0; private toLoad = 0;
private loaded = 0; private loaded = 0;
constructor(textureLoader: (image: HTMLImageElement | ImageBitmap) => Texture, pathPrefix: string = "", downloader: Downloader = null) { constructor (textureLoader: (image: HTMLImageElement | ImageBitmap) => Texture, pathPrefix: string = "", downloader: Downloader = null) {
this.textureLoader = textureLoader; this.textureLoader = textureLoader;
this.pathPrefix = pathPrefix; this.pathPrefix = pathPrefix;
this.downloader = downloader || new Downloader(); this.downloader = downloader || new Downloader();
} }
private start(path: string): string { private start (path: string): string {
this.toLoad++; this.toLoad++;
return this.pathPrefix + path; return this.pathPrefix + path;
} }
private success(callback: (path: string, data: any) => void, path: string, asset: any) { private success (callback: (path: string, data: any) => void, path: string, asset: any) {
this.toLoad--; this.toLoad--;
this.loaded++; this.loaded++;
this.assets[path] = asset; this.assets[path] = asset;
if (callback) callback(path, asset); if (callback) callback(path, asset);
} }
private error(callback: (path: string, message: string) => void, path: string, message: string) { private error (callback: (path: string, message: string) => void, path: string, message: string) {
this.toLoad--; this.toLoad--;
this.loaded++; this.loaded++;
this.errors[path] = message; this.errors[path] = message;
if (callback) callback(path, message); if (callback) callback(path, message);
} }
setRawDataURI(path: string, data: string) { setRawDataURI (path: string, data: string) {
this.downloader.rawDataUris[this.pathPrefix + path] = data; this.downloader.rawDataUris[this.pathPrefix + path] = data;
} }
loadBinary(path: string, loadBinary (path: string,
success: (path: string, binary: Uint8Array) => void = null, success: (path: string, binary: Uint8Array) => void = null,
error: (path: string, message: string) => void = null) { error: (path: string, message: string) => void = null) {
path = this.start(path); path = this.start(path);
@ -81,7 +81,7 @@ export class AssetManagerBase implements Disposable {
}); });
} }
loadText(path: string, loadText (path: string,
success: (path: string, text: string) => void = null, success: (path: string, text: string) => void = null,
error: (path: string, message: string) => void = null) { error: (path: string, message: string) => void = null) {
path = this.start(path); path = this.start(path);
@ -93,7 +93,7 @@ export class AssetManagerBase implements Disposable {
}); });
} }
loadJson(path: string, loadJson (path: string,
success: (path: string, object: object) => void = null, success: (path: string, object: object) => void = null,
error: (path: string, message: string) => void = null) { error: (path: string, message: string) => void = null) {
path = this.start(path); path = this.start(path);
@ -105,7 +105,7 @@ export class AssetManagerBase implements Disposable {
}); });
} }
loadTexture(path: string, loadTexture (path: string,
success: (path: string, texture: Texture) => void = null, success: (path: string, texture: Texture) => void = null,
error: (path: string, message: string) => void = null) { error: (path: string, message: string) => void = null) {
path = this.start(path); path = this.start(path);
@ -136,7 +136,7 @@ export class AssetManagerBase implements Disposable {
} }
} }
loadTextureAtlas(path: string, loadTextureAtlas (path: string,
success: (path: string, atlas: TextureAtlas) => void = null, success: (path: string, atlas: TextureAtlas) => void = null,
error: (path: string, message: string) => void = null error: (path: string, message: string) => void = null
) { ) {
@ -170,11 +170,11 @@ export class AssetManagerBase implements Disposable {
}); });
} }
get(path: string) { get (path: string) {
return this.assets[this.pathPrefix + path]; return this.assets[this.pathPrefix + path];
} }
require(path: string) { require (path: string) {
path = this.pathPrefix + path; path = this.pathPrefix + path;
let asset = this.assets[path]; let asset = this.assets[path];
if (asset) return asset; if (asset) return asset;
@ -182,7 +182,7 @@ export class AssetManagerBase implements Disposable {
throw Error("Asset not found: " + path + (error ? "\n" + error : "")); throw Error("Asset not found: " + path + (error ? "\n" + error : ""));
} }
remove(path: string) { remove (path: string) {
path = this.pathPrefix + path; path = this.pathPrefix + path;
let asset = this.assets[path]; let asset = this.assets[path];
if ((<any>asset).dispose) (<any>asset).dispose(); if ((<any>asset).dispose) (<any>asset).dispose();
@ -190,7 +190,7 @@ export class AssetManagerBase implements Disposable {
return asset; return asset;
} }
removeAll() { removeAll () {
for (let key in this.assets) { for (let key in this.assets) {
let asset = this.assets[key]; let asset = this.assets[key];
if ((<any>asset).dispose) (<any>asset).dispose(); if ((<any>asset).dispose) (<any>asset).dispose();
@ -198,27 +198,27 @@ export class AssetManagerBase implements Disposable {
this.assets = {}; this.assets = {};
} }
isLoadingComplete(): boolean { isLoadingComplete (): boolean {
return this.toLoad == 0; return this.toLoad == 0;
} }
getToLoad(): number { getToLoad (): number {
return this.toLoad; return this.toLoad;
} }
getLoaded(): number { getLoaded (): number {
return this.loaded; return this.loaded;
} }
dispose() { dispose () {
this.removeAll(); this.removeAll();
} }
hasErrors() { hasErrors () {
return Object.keys(this.errors).length > 0; return Object.keys(this.errors).length > 0;
} }
getErrors() { getErrors () {
return this.errors; return this.errors;
} }
} }
@ -227,7 +227,7 @@ export class Downloader {
private callbacks: StringMap<Array<Function>> = {}; private callbacks: StringMap<Array<Function>> = {};
rawDataUris: StringMap<string> = {}; rawDataUris: StringMap<string> = {};
downloadText(url: string, success: (data: string) => void, error: (status: number, responseText: string) => void) { downloadText (url: string, success: (data: string) => void, error: (status: number, responseText: string) => void) {
if (this.rawDataUris[url]) url = this.rawDataUris[url]; if (this.rawDataUris[url]) url = this.rawDataUris[url];
if (this.start(url, success, error)) return; if (this.start(url, success, error)) return;
let request = new XMLHttpRequest(); let request = new XMLHttpRequest();
@ -241,13 +241,13 @@ export class Downloader {
request.send(); request.send();
} }
downloadJson(url: string, success: (data: object) => void, error: (status: number, responseText: string) => void) { downloadJson (url: string, success: (data: object) => void, error: (status: number, responseText: string) => void) {
this.downloadText(url, (data: string): void => { this.downloadText(url, (data: string): void => {
success(JSON.parse(data)); success(JSON.parse(data));
}, error); }, error);
} }
downloadBinary(url: string, success: (data: Uint8Array) => void, error: (status: number, responseText: string) => void) { downloadBinary (url: string, success: (data: Uint8Array) => void, error: (status: number, responseText: string) => void) {
if (this.rawDataUris[url]) url = this.rawDataUris[url]; if (this.rawDataUris[url]) url = this.rawDataUris[url];
if (this.start(url, success, error)) return; if (this.start(url, success, error)) return;
let request = new XMLHttpRequest(); let request = new XMLHttpRequest();
@ -266,7 +266,7 @@ export class Downloader {
request.send(); request.send();
} }
private start(url: string, success: any, error: any) { private start (url: string, success: any, error: any) {
let callbacks = this.callbacks[url]; let callbacks = this.callbacks[url];
try { try {
if (callbacks) return true; if (callbacks) return true;
@ -276,7 +276,7 @@ export class Downloader {
} }
} }
private finish(url: string, status: number, data: any) { private finish (url: string, status: number, data: any) {
let callbacks = this.callbacks[url]; let callbacks = this.callbacks[url];
delete this.callbacks[url]; delete this.callbacks[url];
let args = status == 200 ? [data] : [status, data]; let args = status == 200 ? [data] : [status, data];

View File

@ -40,87 +40,87 @@ import { TimeKeeper, AssetManager, ManagedWebGLRenderingContext, SceneRenderer,
* The `error()` method is called in case the assets could not be loaded. * The `error()` method is called in case the assets could not be loaded.
*/ */
export interface SpineCanvasApp { export interface SpineCanvasApp {
loadAssets?(canvas: SpineCanvas): void; loadAssets?(canvas: SpineCanvas): void;
initialize?(canvas: SpineCanvas): void; initialize?(canvas: SpineCanvas): void;
update?(canvas: SpineCanvas, delta: number): void; update?(canvas: SpineCanvas, delta: number): void;
render?(canvas: SpineCanvas): void; render?(canvas: SpineCanvas): void;
error?(canvas: SpineCanvas, errors: StringMap<string>): void; error?(canvas: SpineCanvas, errors: StringMap<string>): void;
} }
/** Configuration passed to the {@link SpineCanvas} constructor */ /** Configuration passed to the {@link SpineCanvas} constructor */
export interface SpineCanvasConfig { export interface SpineCanvasConfig {
/* The {@link SpineCanvasApp} to be run in the canvas. */ /* The {@link SpineCanvasApp} to be run in the canvas. */
app: SpineCanvasApp; app: SpineCanvasApp;
/* The path prefix to be used by the {@link AssetManager}. */ /* The path prefix to be used by the {@link AssetManager}. */
pathPrefix?: string; pathPrefix?: string;
/* The WebGL context configuration */ /* The WebGL context configuration */
webglConfig?: any; webglConfig?: any;
} }
/** Manages the life-cycle and WebGL context of a {@link SpineCanvasApp}. The app loads /** Manages the life-cycle and WebGL context of a {@link SpineCanvasApp}. The app loads
* assets and initializes itself, then updates and renders its state at the screen refresh rate. */ * assets and initializes itself, then updates and renders its state at the screen refresh rate. */
export class SpineCanvas { export class SpineCanvas {
readonly context: ManagedWebGLRenderingContext; readonly context: ManagedWebGLRenderingContext;
/** Tracks the current time, delta, and other time related statistics. */ /** Tracks the current time, delta, and other time related statistics. */
readonly time = new TimeKeeper(); readonly time = new TimeKeeper();
/** The HTML canvas to render to. */ /** The HTML canvas to render to. */
readonly htmlCanvas: HTMLCanvasElement; readonly htmlCanvas: HTMLCanvasElement;
/** The WebGL rendering context. */ /** The WebGL rendering context. */
readonly gl: WebGLRenderingContext; readonly gl: WebGLRenderingContext;
/** The scene renderer for easy drawing of skeletons, shapes, and images. */ /** The scene renderer for easy drawing of skeletons, shapes, and images. */
readonly renderer: SceneRenderer; readonly renderer: SceneRenderer;
/** The asset manager to load assets with. */ /** The asset manager to load assets with. */
readonly assetManager: AssetManager; readonly assetManager: AssetManager;
/** The input processor used to listen to mouse, touch, and keyboard events. */ /** The input processor used to listen to mouse, touch, and keyboard events. */
readonly input: Input; readonly input: Input;
/** Constructs a new spine canvas, rendering to the provided HTML canvas. */ /** Constructs a new spine canvas, rendering to the provided HTML canvas. */
constructor(canvas: HTMLCanvasElement, config: SpineCanvasConfig) { constructor (canvas: HTMLCanvasElement, config: SpineCanvasConfig) {
if (config.pathPrefix === undefined) config.pathPrefix = ""; if (config.pathPrefix === undefined) config.pathPrefix = "";
if (config.app === undefined) config.app = { if (config.app === undefined) config.app = {
loadAssets: () => { }, loadAssets: () => { },
initialize: () => { }, initialize: () => { },
update: () => { }, update: () => { },
render: () => { }, render: () => { },
error: () => { }, error: () => { },
} }
if (config.webglConfig === undefined) config.webglConfig = { alpha: true }; if (config.webglConfig === undefined) config.webglConfig = { alpha: true };
this.htmlCanvas = canvas; this.htmlCanvas = canvas;
this.context = new ManagedWebGLRenderingContext(canvas, config.webglConfig); this.context = new ManagedWebGLRenderingContext(canvas, config.webglConfig);
this.renderer = new SceneRenderer(canvas, this.context); this.renderer = new SceneRenderer(canvas, this.context);
this.gl = this.context.gl; this.gl = this.context.gl;
this.assetManager = new AssetManager(this.context, config.pathPrefix); this.assetManager = new AssetManager(this.context, config.pathPrefix);
this.input = new Input(canvas); this.input = new Input(canvas);
config.app.loadAssets?.(this); config.app.loadAssets?.(this);
let loop = () => { let loop = () => {
requestAnimationFrame(loop); requestAnimationFrame(loop);
this.time.update(); this.time.update();
config.app.update?.(this, this.time.delta); config.app.update?.(this, this.time.delta);
config.app.render?.(this); config.app.render?.(this);
} }
let waitForAssets = () => { let waitForAssets = () => {
if (this.assetManager.isLoadingComplete()) { if (this.assetManager.isLoadingComplete()) {
if (this.assetManager.hasErrors()) { if (this.assetManager.hasErrors()) {
config.app.error?.(this, this.assetManager.getErrors()); config.app.error?.(this, this.assetManager.getErrors());
} else { } else {
config.app.initialize?.(this); config.app.initialize?.(this);
loop(); loop();
} }
return; return;
} }
requestAnimationFrame(waitForAssets); requestAnimationFrame(waitForAssets);
} }
requestAnimationFrame(waitForAssets); requestAnimationFrame(waitForAssets);
} }
/** Clears the canvas with the given color. The color values are given in the range [0,1]. */ /** Clears the canvas with the given color. The color values are given in the range [0,1]. */
clear(r: number, g: number, b: number, a: number) { clear (r: number, g: number, b: number, a: number) {
this.gl.clearColor(r, g, b, a); this.gl.clearColor(r, g, b, a);
this.gl.clear(this.gl.COLOR_BUFFER_BIT); this.gl.clear(this.gl.COLOR_BUFFER_BIT);
} }
} }

View File

@ -34,7 +34,7 @@ export class ManagedWebGLRenderingContext {
public gl: WebGLRenderingContext; public gl: WebGLRenderingContext;
private restorables = new Array<Restorable>(); private restorables = new Array<Restorable>();
constructor(canvasOrContext: HTMLCanvasElement | WebGLRenderingContext | EventTarget, contextConfig: any = { alpha: "true" }) { constructor (canvasOrContext: HTMLCanvasElement | WebGLRenderingContext | EventTarget, contextConfig: any = { alpha: "true" }) {
if (!((canvasOrContext instanceof WebGLRenderingContext) || (typeof WebGL2RenderingContext !== 'undefined' && canvasOrContext instanceof WebGL2RenderingContext))) if (!((canvasOrContext instanceof WebGLRenderingContext) || (typeof WebGL2RenderingContext !== 'undefined' && canvasOrContext instanceof WebGL2RenderingContext)))
this.setupCanvas(canvasOrContext, contextConfig); this.setupCanvas(canvasOrContext, contextConfig);
else { else {
@ -43,7 +43,7 @@ export class ManagedWebGLRenderingContext {
} }
} }
private setupCanvas(canvas: any, contextConfig: any) { private setupCanvas (canvas: any, contextConfig: any) {
this.gl = <WebGLRenderingContext>(canvas.getContext("webgl2", contextConfig) || canvas.getContext("webgl", contextConfig)); this.gl = <WebGLRenderingContext>(canvas.getContext("webgl2", contextConfig) || canvas.getContext("webgl", contextConfig));
this.canvas = canvas; this.canvas = canvas;
canvas.addEventListener("webglcontextlost", (e: any) => { canvas.addEventListener("webglcontextlost", (e: any) => {
@ -57,11 +57,11 @@ export class ManagedWebGLRenderingContext {
}); });
} }
addRestorable(restorable: Restorable) { addRestorable (restorable: Restorable) {
this.restorables.push(restorable); this.restorables.push(restorable);
} }
removeRestorable(restorable: Restorable) { removeRestorable (restorable: Restorable) {
let index = this.restorables.indexOf(restorable); let index = this.restorables.indexOf(restorable);
if (index > -1) this.restorables.splice(index, 1); if (index > -1) this.restorables.splice(index, 1);
} }
@ -75,7 +75,7 @@ const ONE_MINUS_DST_ALPHA = 0x0305;
const DST_COLOR = 0x0306; const DST_COLOR = 0x0306;
export class WebGLBlendModeConverter { export class WebGLBlendModeConverter {
static getDestGLBlendMode(blendMode: BlendMode) { static getDestGLBlendMode (blendMode: BlendMode) {
switch (blendMode) { switch (blendMode) {
case BlendMode.Normal: return ONE_MINUS_SRC_ALPHA; case BlendMode.Normal: return ONE_MINUS_SRC_ALPHA;
case BlendMode.Additive: return ONE; case BlendMode.Additive: return ONE;
@ -85,7 +85,7 @@ export class WebGLBlendModeConverter {
} }
} }
static getSourceColorGLBlendMode(blendMode: BlendMode, premultipliedAlpha: boolean = false) { static getSourceColorGLBlendMode (blendMode: BlendMode, premultipliedAlpha: boolean = false) {
switch (blendMode) { switch (blendMode) {
case BlendMode.Normal: return premultipliedAlpha ? ONE : SRC_ALPHA; case BlendMode.Normal: return premultipliedAlpha ? ONE : SRC_ALPHA;
case BlendMode.Additive: return premultipliedAlpha ? ONE : SRC_ALPHA; case BlendMode.Additive: return premultipliedAlpha ? ONE : SRC_ALPHA;
@ -95,7 +95,7 @@ export class WebGLBlendModeConverter {
} }
} }
static getSourceAlphaGLBlendMode(blendMode: BlendMode) { static getSourceAlphaGLBlendMode (blendMode: BlendMode) {
switch (blendMode) { switch (blendMode) {
case BlendMode.Normal: return ONE; case BlendMode.Normal: return ONE;
case BlendMode.Additive: return ONE; case BlendMode.Additive: return ONE;