[player] Added Player.stopRendering() to interrupt the requestAnimationFrame loop.

spine-ts/build/spine-all.d.ts

@@ -1949,6 +1949,7 @@ declare module spine {
 		private viewportTransitionStart;
 		private selectedBones;
 		private parent;
+		private stopRequestAnimationFrame;
 		constructor(parent: HTMLElement | string, config: SpinePlayerConfig);
 		validateConfig(config: SpinePlayerConfig): SpinePlayerConfig;
 		showError(error: string): void;
@@ -1968,6 +1969,7 @@ declare module spine {
 		setAnimation(animation: string): void;
 		private percentageToWorldUnit;
 		private calculateAnimationViewport;
+		stopRendering(): void;
 	}
 }
 declare function CodeMirror(el: Element, config: any): void;

spine-ts/build/spine-all.js

@@ -11580,6 +11580,7 @@ var spine;
 			this.currentViewport = null;
 			this.previousViewport = null;
 			this.viewportTransitionStart = 0;
+			this.stopRequestAnimationFrame = false;
 			this.cancelId = 0;
 			if (typeof parent === "string")
 				this.parent = document.getElementById(parent);
@@ -11919,7 +11920,7 @@ var spine;
 		SpinePlayer.prototype.drawFrame = function (requestNextFrame) {
 			var _this = this;
 			if (requestNextFrame === void 0) { requestNextFrame = true; }
-			if (requestNextFrame)
+			if (requestNextFrame && !this.stopRequestAnimationFrame)
 				requestAnimationFrame(function () { return _this.drawFrame(); });
 			var ctx = this.context;
 			var gl = ctx.gl;
@@ -12379,6 +12380,9 @@ var spine;
 				height: size.y
 			};
 		};
+		SpinePlayer.prototype.stopRendering = function () {
+			this.stopRequestAnimationFrame = true;
+		};
 		SpinePlayer.HOVER_COLOR_INNER = new spine.Color(0.478, 0, 0, 0.25);
 		SpinePlayer.HOVER_COLOR_OUTER = new spine.Color(1, 1, 1, 1);
 		SpinePlayer.NON_HOVER_COLOR_INNER = new spine.Color(0.478, 0, 0, 0.5);

spine-ts/build/spine-player.d.ts

@@ -1857,6 +1857,7 @@ declare module spine {
 		private viewportTransitionStart;
 		private selectedBones;
 		private parent;
+		private stopRequestAnimationFrame;
 		constructor(parent: HTMLElement | string, config: SpinePlayerConfig);
 		validateConfig(config: SpinePlayerConfig): SpinePlayerConfig;
 		showError(error: string): void;
@@ -1876,6 +1877,7 @@ declare module spine {
 		setAnimation(animation: string): void;
 		private percentageToWorldUnit;
 		private calculateAnimationViewport;
+		stopRendering(): void;
 	}
 }
 declare function CodeMirror(el: Element, config: any): void;

spine-ts/build/spine-player.js

@@ -10895,6 +10895,7 @@ var spine;
 			this.currentViewport = null;
 			this.previousViewport = null;
 			this.viewportTransitionStart = 0;
+			this.stopRequestAnimationFrame = false;
 			this.cancelId = 0;
 			if (typeof parent === "string")
 				this.parent = document.getElementById(parent);
@@ -11234,7 +11235,7 @@ var spine;
 		SpinePlayer.prototype.drawFrame = function (requestNextFrame) {
 			var _this = this;
 			if (requestNextFrame === void 0) { requestNextFrame = true; }
-			if (requestNextFrame)
+			if (requestNextFrame && !this.stopRequestAnimationFrame)
 				requestAnimationFrame(function () { return _this.drawFrame(); });
 			var ctx = this.context;
 			var gl = ctx.gl;
@@ -11694,6 +11695,9 @@ var spine;
 				height: size.y
 			};
 		};
+		SpinePlayer.prototype.stopRendering = function () {
+			this.stopRequestAnimationFrame = true;
+		};
 		SpinePlayer.HOVER_COLOR_INNER = new spine.Color(0.478, 0, 0, 0.25);
 		SpinePlayer.HOVER_COLOR_OUTER = new spine.Color(1, 1, 1, 1);
 		SpinePlayer.NON_HOVER_COLOR_INNER = new spine.Color(0.478, 0, 0, 0.5);

spine-ts/player/example/generator/index.html

@@ -53,6 +53,8 @@ body {
 #config {
 	width: 100%;
 	height: 100%;
+	padding: 1em;
+	background: #f0f0f0;
 }
 
 </style>
@@ -68,6 +70,8 @@ body {
 	<script>
 		var UI;
 		var Loader;
+		var dropZone = document.getElementById("dropzone");
+		var editor = document.getElementById("editor")
 
 		function showError(errorMessage) {
 			alert(errorMessage);
@@ -89,7 +93,7 @@ body {
 					Loader.loadStyle(cssUrl, function () {
 						Loader.loadJavaScript(playerUrl, function () {
 							UI.hide(dropZone)
-							setupEditor(document.getElementById("editor"), data);
+							setupEditor(editor, data);
 						});
 					}, showError);
 				}, showError);
@@ -123,7 +127,23 @@ body {
 		}
 
 		function setupConfig(editor, player, data) {
-			var configElement = UI.createElement(editor, `<div id="config"></div>`);
+			var cfg = UI.createElement(editor, `<div id="config"></div>`);
+
+			var topBar = UI.createElement(cfg, /*html*/`
+				<div style="display: flex; flex-direction: row;">
+					<button type="button">New</button>
+					<button type="button">Download HTML</button>
+				</div>
+			`);
+
+			var newButton = topBar.children[0];
+			newButton.onclick = function() {
+				UI.show(dropZone);
+				UI.hide(editor);
+			}
+			var downloadButton = topBar.children[1];
+
+			UI.createElement(cfg, `<h3>General</h3>`);
 		}
 	</script>
 </body>

spine-ts/player/example/generator/ui.js

@@ -7,7 +7,7 @@ var spineGenerator;
 
 		UI.createElement = function (parent, html) {
 			parent.insertAdjacentHTML("beforeend", html);
-			return parent.lastChild;
+			return parent.lastElementChild;
 		}
 
 		UI.clear = function(element) {

spine-ts/player/src/Player.ts

@@ -320,6 +320,8 @@ module spine {
 		private selectedBones: Bone[];
 		private parent: HTMLElement;
 
+		private stopRequestAnimationFrame = false;
+
 		constructor(parent: HTMLElement | string, private config: SpinePlayerConfig) {
 			if (typeof parent === "string") this.parent = document.getElementById(parent);
 			else this.parent = parent;
@@ -717,7 +719,7 @@ module spine {
 		}
 
 		drawFrame (requestNextFrame = true) {
-			if (requestNextFrame) requestAnimationFrame(() => this.drawFrame());
+			if (requestNextFrame && !this.stopRequestAnimationFrame) requestAnimationFrame(() => this.drawFrame());
 			let ctx = this.context;
 			let gl = ctx.gl;
 
@@ -1232,6 +1234,10 @@ module spine {
 				height: size.y
 			};
 		}
+
+		public stopRendering() {
+			this.stopRequestAnimationFrame = true;
+		}
 	}
 
 	function isContained(dom: HTMLElement, needle: HTMLElement): boolean {