Browse Source

[ts] Inline source maps, fix Downloader for raw data URIs.

badlogic 4 năm trước cách đây
mục cha
commit
a884dd4c0d

+ 2 - 1
spine-ts/package.json

@@ -17,7 +17,8 @@
     "build:player": "npx copyfiles -f spine-player/css/spine-player.css spine-player/dist/ && npx npx esbuild --bundle spine-player/src/index.ts --tsconfig=spine-player/tsconfig.json  --sourcemap --outfile=spine-player/dist/iife/spine-player.js --format=iife --global-name=spine",
     "build:threejs": "npx esbuild --bundle spine-threejs/src/index.ts --tsconfig=spine-threejs/tsconfig.json  --sourcemap --outfile=spine-threejs/dist/iife/spine-threejs.js --external:three --format=iife --global-name=spine",
     "minify": "npx esbuild --minify spine-core/dist/iife/spine-core.js --outfile=spine-core/dist/iife/spine-core.min.js && npx esbuild --minify spine-canvas/dist/iife/spine-canvas.js --outfile=spine-canvas/dist/iife/spine-canvas.min.js && npx esbuild --minify spine-player/dist/iife/spine-player.js --outfile=spine-player/dist/iife/spine-player.min.js && npx esbuild --minify spine-webgl/dist/iife/spine-webgl.js --outfile=spine-webgl/dist/iife/spine-webgl.min.js && npx esbuild --minify spine-threejs/dist/iife/spine-threejs.js --outfile=spine-threejs/dist/iife/spine-threejs.min.js",
-    "dev": "concurrently \"npx live-server --no-browser\" \"npm run dev:canvas\" \"npm run dev:webgl\" \"npm run dev:player\" \"npm run dev:threejs\"",
+    "dev": "concurrently \"npx live-server --no-browser\" \"npm run dev:modules\" \"npm run dev:canvas\" \"npm run dev:webgl\" \"npm run dev:player\" \"npm run dev:threejs\"",
+    "dev:modules": "npm run build:modules -- --watch",
     "dev:canvas": "npm run build:canvas -- --watch",
     "dev:webgl": "npm run build:webgl -- --watch",
     "dev:player": "npm run build:player -- --watch",

+ 53 - 2
spine-ts/spine-core/src/AssetManagerBase.ts

@@ -227,9 +227,52 @@ export class Downloader {
 	private callbacks: StringMap<Array<Function>> = {};
 	rawDataUris: StringMap<string> = {};
 
+	dataUriToString (dataUri: string) {
+		if (!dataUri.startsWith("data:")) {
+			throw new Error("Not a data URI.");
+		}
+
+		let base64Idx = dataUri.indexOf("base64,");
+		if (base64Idx != -1) {
+			base64Idx += "base64,".length;
+			return atob(dataUri.substr(base64Idx));
+		} else {
+			return dataUri.substr(dataUri.indexOf(",") + 1);
+		}
+	}
+
+	base64ToArrayBuffer (base64: string) {
+		var binary_string = window.atob(base64);
+		var len = binary_string.length;
+		var bytes = new Uint8Array(len);
+		for (var i = 0; i < len; i++) {
+			bytes[i] = binary_string.charCodeAt(i);
+		}
+		return bytes.buffer;
+	}
+
+	dataUriToUint8Array (dataUri: string) {
+		if (!dataUri.startsWith("data:")) {
+			throw new Error("Not a data URI.");
+		}
+
+		let base64Idx = dataUri.indexOf("base64,");
+		if (base64Idx == -1) throw new Error("Not a binary data URI.");
+		base64Idx += "base64,".length;
+		return this.base64ToArrayBuffer(dataUri.substr(base64Idx));
+	}
+
 	downloadText (url: string, success: (data: string) => void, error: (status: number, responseText: string) => void) {
-		if (this.rawDataUris[url]) url = this.rawDataUris[url];
 		if (this.start(url, success, error)) return;
+		if (this.rawDataUris[url]) {
+			try {
+				let dataUri = this.rawDataUris[url];
+				this.finish(url, 200, this.dataUriToString(dataUri));
+			} catch (e) {
+				this.finish(url, 400, JSON.stringify(e));
+			}
+			return;
+		}
 		let request = new XMLHttpRequest();
 		request.overrideMimeType("text/html");
 		request.open("GET", url, true);
@@ -248,8 +291,16 @@ export class Downloader {
 	}
 
 	downloadBinary (url: string, success: (data: Uint8Array) => void, error: (status: number, responseText: string) => void) {
-		if (this.rawDataUris[url]) url = this.rawDataUris[url];
 		if (this.start(url, success, error)) return;
+		if (this.rawDataUris[url]) {
+			try {
+				let dataUri = this.rawDataUris[url];
+				this.finish(url, 200, this.dataUriToUint8Array(dataUri));
+			} catch (e) {
+				this.finish(url, 400, JSON.stringify(e));
+			}
+			return;
+		}
 		let request = new XMLHttpRequest();
 		request.open("GET", url, true);
 		request.responseType = "arraybuffer";

+ 8 - 8
spine-ts/spine-core/src/SkeletonJson.ts

@@ -61,7 +61,7 @@ export class SkeletonJson {
 		this.attachmentLoader = attachmentLoader;
 	}
 
-	readSkeletonData(json: string | any): SkeletonData {
+	readSkeletonData (json: string | any): SkeletonData {
 		let scale = this.scale;
 		let skeletonData = new SkeletonData();
 		let root = typeof (json) === "string" ? JSON.parse(json) : json;
@@ -291,7 +291,7 @@ export class SkeletonJson {
 		return skeletonData;
 	}
 
-	readAttachment(map: any, skin: Skin, slotIndex: number, name: string, skeletonData: SkeletonData): Attachment {
+	readAttachment (map: any, skin: Skin, slotIndex: number, name: string, skeletonData: SkeletonData): Attachment {
 		let scale = this.scale;
 		name = getValue(map, "name", name);
 
@@ -399,7 +399,7 @@ export class SkeletonJson {
 		return null;
 	}
 
-	readVertices(map: any, attachment: VertexAttachment, verticesLength: number) {
+	readVertices (map: any, attachment: VertexAttachment, verticesLength: number) {
 		let scale = this.scale;
 		attachment.worldVerticesLength = verticesLength;
 		let vertices: Array<number> = map.vertices;
@@ -428,7 +428,7 @@ export class SkeletonJson {
 		attachment.vertices = Utils.toFloatArray(weights);
 	}
 
-	readAnimation(map: any, name: string, skeletonData: SkeletonData) {
+	readAnimation (map: any, name: string, skeletonData: SkeletonData) {
 		let scale = this.scale;
 		let timelines = new Array<Timeline>();
 
@@ -911,7 +911,7 @@ class LinkedMesh {
 	}
 }
 
-function readTimeline1(keys: any[], timeline: CurveTimeline1, defaultValue: number, scale: number) {
+function readTimeline1 (keys: any[], timeline: CurveTimeline1, defaultValue: number, scale: number) {
 	let keyMap = keys[0];
 	let time = getValue(keyMap, "time", 0);
 	let value = getValue(keyMap, "value", defaultValue) * scale;
@@ -932,7 +932,7 @@ function readTimeline1(keys: any[], timeline: CurveTimeline1, defaultValue: numb
 	}
 }
 
-function readTimeline2(keys: any[], timeline: CurveTimeline2, name1: string, name2: string, defaultValue: number, scale: number) {
+function readTimeline2 (keys: any[], timeline: CurveTimeline2, name1: string, name2: string, defaultValue: number, scale: number) {
 	let keyMap = keys[0];
 	let time = getValue(keyMap, "time", 0);
 	let value1 = getValue(keyMap, name1, defaultValue) * scale;
@@ -960,7 +960,7 @@ function readTimeline2(keys: any[], timeline: CurveTimeline2, name1: string, nam
 	}
 }
 
-function readCurve(curve: any, timeline: CurveTimeline, bezier: number, frame: number, value: number, time1: number, time2: number,
+function readCurve (curve: any, timeline: CurveTimeline, bezier: number, frame: number, value: number, time1: number, time2: number,
 	value1: number, value2: number, scale: number) {
 	if (curve == "stepped") {
 		timeline.setStepped(frame);
@@ -975,6 +975,6 @@ function readCurve(curve: any, timeline: CurveTimeline, bezier: number, frame: n
 	return bezier + 1;
 }
 
-function getValue(map: any, property: string, defaultValue: any) {
+function getValue (map: any, property: string, defaultValue: any) {
 	return map[property] !== undefined ? map[property] : defaultValue;
 }

+ 2 - 2
spine-ts/tsconfig.base.json

@@ -1,10 +1,10 @@
 {
 	"compilerOptions": {
 		"module": "es2015",
+		"target": "ES6",
 		"noImplicitAny": true,
 		"preserveConstEnums": true,
-		"sourceMap": true,
-		"inlineSources": true,
+		"inlineSourceMap": true,
 		"esModuleInterop": true,
 		"lib": [
 			"DOM",