[ts][player] constructor now takes string in addition to HTMLElement, hover behaviour now similar to YouTube.

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

@@ -1831,6 +1831,7 @@ declare module spine {
 		error: (widget: SpinePlayer, msg: string) => void;
 	}
 	class SpinePlayer {
+		parent: HTMLElement | string;
 		private config;
 		static HOVER_COLOR_INNER: Color;
 		static HOVER_COLOR_OUTER: Color;
@@ -1859,7 +1860,7 @@ declare module spine {
 		private previousViewport;
 		private viewportTransitionStart;
 		private selectedBones;
-		constructor(parent: HTMLElement, config: SpinePlayerConfig);
+		constructor(parent: HTMLElement | string, config: SpinePlayerConfig);
 		validateConfig(config: SpinePlayerConfig): SpinePlayerConfig;
 		showError(error: string): void;
 		render(): HTMLElement;

spine-ts/build/spine-all.js

@@ -10225,6 +10225,7 @@ var spine;
 	}());
 	var SpinePlayer = (function () {
 		function SpinePlayer(parent, config) {
+			this.parent = parent;
 			this.config = config;
 			this.time = new spine.TimeKeeper();
 			this.paused = true;
@@ -10234,6 +10235,8 @@ var spine;
 			this.currentViewport = null;
 			this.previousViewport = null;
 			this.viewportTransitionStart = 0;
+			if (typeof parent === "string")
+				parent = document.getElementById(parent);
 			parent.appendChild(this.render());
 		}
 		SpinePlayer.prototype.validateConfig = function (config) {
@@ -10791,11 +10794,9 @@ var spine;
 							target = bone;
 						}
 					}
-					handleHover();
 				},
 				up: function (x, y) {
 					target = null;
-					handleHover();
 				},
 				dragged: function (x, y) {
 					if (target != null) {
@@ -10810,7 +10811,6 @@ var spine;
 							target.y = coords.y - skeleton.y;
 						}
 					}
-					handleHover();
 				},
 				moved: function (x, y) {
 					for (var i = 0; i < controlBones.length; i++) {
@@ -10825,34 +10825,41 @@ var spine;
 							selectedBones[i] = null;
 						}
 					}
-					handleHover();
-				}
-			});
-			var mouseOverChildren = true;
-			document.addEventListener("mousemove", function (ev) {
-				if (ev instanceof MouseEvent) {
-					var rect = _this.playerControls.getBoundingClientRect();
-					var x = ev.clientX - rect.left;
-					var y = ev.clientY - rect.top;
-					mouseOverChildren = x >= 0 && x <= _this.playerControls.clientWidth && y >= 0 && y <= _this.playerControls.clientHeight;
 				}
 			});
+			var mouseOverControls = true;
+			var mouseOverCanvas = false;
 			var cancelId = 0;
-			var handleHover = function () {
-				if (!_this.config.showControls)
-					return;
-				clearTimeout(cancelId);
-				_this.playerControls.classList.remove("spine-player-controls-hidden");
-				var remove = function () {
+			parent.addEventListener("mousemove", function (ev) {
+				if (ev instanceof MouseEvent) {
+					if (!_this.config.showControls)
+						return;
 					var popup = findWithClass(_this.dom, "spine-player-popup");
-					if (popup.length == 0 && !mouseOverChildren && !_this.paused) {
+					mouseOverControls = overlap(ev, _this.playerControls.getBoundingClientRect());
+					mouseOverCanvas = overlap(ev, _this.canvas.getBoundingClientRect());
+					clearTimeout(cancelId);
+					var hide = popup.length == 0 && !mouseOverControls && !mouseOverCanvas && !_this.paused;
+					if (hide) {
+						console.log("hidding");
 						_this.playerControls.classList.add("spine-player-controls-hidden");
 					}
 					else {
-						cancelId = setTimeout(remove, 100);
+						console.log("showing");
+						_this.playerControls.classList.remove("spine-player-controls-hidden");
 					}
-				};
-				cancelId = setTimeout(remove, 100);
+					if (!mouseOverControls && popup.length == 0 && !_this.paused) {
+						var remove = function () {
+							console.log("hidding timeout");
+							_this.playerControls.classList.add("spine-player-controls-hidden");
+						};
+						cancelId = setTimeout(remove, 500);
+					}
+				}
+			});
+			var overlap = function (ev, rect) {
+				var x = ev.clientX - rect.left;
+				var y = ev.clientY - rect.top;
+				return x >= 0 && x <= rect.width && y >= 0 && y <= rect.height;
 			};
 		};
 		SpinePlayer.prototype.play = function () {

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

@@ -1741,6 +1741,7 @@ declare module spine {
 		error: (widget: SpinePlayer, msg: string) => void;
 	}
 	class SpinePlayer {
+		parent: HTMLElement | string;
 		private config;
 		static HOVER_COLOR_INNER: Color;
 		static HOVER_COLOR_OUTER: Color;
@@ -1769,7 +1770,7 @@ declare module spine {
 		private previousViewport;
 		private viewportTransitionStart;
 		private selectedBones;
-		constructor(parent: HTMLElement, config: SpinePlayerConfig);
+		constructor(parent: HTMLElement | string, config: SpinePlayerConfig);
 		validateConfig(config: SpinePlayerConfig): SpinePlayerConfig;
 		showError(error: string): void;
 		render(): HTMLElement;

spine-ts/build/spine-player.js

@@ -9562,6 +9562,7 @@ var spine;
 	}());
 	var SpinePlayer = (function () {
 		function SpinePlayer(parent, config) {
+			this.parent = parent;
 			this.config = config;
 			this.time = new spine.TimeKeeper();
 			this.paused = true;
@@ -9571,6 +9572,8 @@ var spine;
 			this.currentViewport = null;
 			this.previousViewport = null;
 			this.viewportTransitionStart = 0;
+			if (typeof parent === "string")
+				parent = document.getElementById(parent);
 			parent.appendChild(this.render());
 		}
 		SpinePlayer.prototype.validateConfig = function (config) {
@@ -10128,11 +10131,9 @@ var spine;
 							target = bone;
 						}
 					}
-					handleHover();
 				},
 				up: function (x, y) {
 					target = null;
-					handleHover();
 				},
 				dragged: function (x, y) {
 					if (target != null) {
@@ -10147,7 +10148,6 @@ var spine;
 							target.y = coords.y - skeleton.y;
 						}
 					}
-					handleHover();
 				},
 				moved: function (x, y) {
 					for (var i = 0; i < controlBones.length; i++) {
@@ -10162,34 +10162,41 @@ var spine;
 							selectedBones[i] = null;
 						}
 					}
-					handleHover();
-				}
-			});
-			var mouseOverChildren = true;
-			document.addEventListener("mousemove", function (ev) {
-				if (ev instanceof MouseEvent) {
-					var rect = _this.playerControls.getBoundingClientRect();
-					var x = ev.clientX - rect.left;
-					var y = ev.clientY - rect.top;
-					mouseOverChildren = x >= 0 && x <= _this.playerControls.clientWidth && y >= 0 && y <= _this.playerControls.clientHeight;
 				}
 			});
+			var mouseOverControls = true;
+			var mouseOverCanvas = false;
 			var cancelId = 0;
-			var handleHover = function () {
-				if (!_this.config.showControls)
-					return;
-				clearTimeout(cancelId);
-				_this.playerControls.classList.remove("spine-player-controls-hidden");
-				var remove = function () {
+			parent.addEventListener("mousemove", function (ev) {
+				if (ev instanceof MouseEvent) {
+					if (!_this.config.showControls)
+						return;
 					var popup = findWithClass(_this.dom, "spine-player-popup");
-					if (popup.length == 0 && !mouseOverChildren && !_this.paused) {
+					mouseOverControls = overlap(ev, _this.playerControls.getBoundingClientRect());
+					mouseOverCanvas = overlap(ev, _this.canvas.getBoundingClientRect());
+					clearTimeout(cancelId);
+					var hide = popup.length == 0 && !mouseOverControls && !mouseOverCanvas && !_this.paused;
+					if (hide) {
+						console.log("hidding");
 						_this.playerControls.classList.add("spine-player-controls-hidden");
 					}
 					else {
-						cancelId = setTimeout(remove, 100);
+						console.log("showing");
+						_this.playerControls.classList.remove("spine-player-controls-hidden");
 					}
-				};
-				cancelId = setTimeout(remove, 100);
+					if (!mouseOverControls && popup.length == 0 && !_this.paused) {
+						var remove = function () {
+							console.log("hidding timeout");
+							_this.playerControls.classList.add("spine-player-controls-hidden");
+						};
+						cancelId = setTimeout(remove, 500);
+					}
+				}
+			});
+			var overlap = function (ev, rect) {
+				var x = ev.clientX - rect.left;
+				var y = ev.clientY - rect.top;
+				return x >= 0 && x <= rect.width && y >= 0 && y <= rect.height;
 			};
 		};
 		SpinePlayer.prototype.play = function () {

spine-ts/player/example/index.html

@@ -21,7 +21,7 @@ body {
 <script>
 	// Creates a new spine player. The debugRender option enables
 	// rendering of viewports and padding for debugging purposes.
-	new spine.SpinePlayer(document.getElementById("container"), {
+	new spine.SpinePlayer("container", {
 		jsonUrl: "assets/spineboy-pro.json",
 		atlasUrl: "assets/spineboy-pma.atlas",
 		animation: "run",
@@ -32,9 +32,9 @@ body {
 		}
 	});
 
-	// Creates a new spine player with a transparent background,
+	/*// Creates a new spine player with a transparent background,
 	// so content from the website shines through. Hides the controls.
-	new spine.SpinePlayer(document.getElementById("container-raptor"), {
+	new spine.SpinePlayer("container-raptor", {
 		jsonUrl: "assets/raptor-pro.json",
 		atlasUrl: "assets/raptor-pma.atlas",
 		animation: "walk",
@@ -42,7 +42,7 @@ body {
 		premultipliedAlpha: true,
 		backgroundColor: "#00000000",
 		alpha: true
-	});
+	});*/
 </script>
 </body>
 </html>

spine-ts/player/src/Player.ts

@@ -311,7 +311,8 @@
 
 		private selectedBones: Bone[];
 
-		constructor(parent: HTMLElement, private config: SpinePlayerConfig) {
+		constructor(public parent: HTMLElement | string, private config: SpinePlayerConfig) {
+			if (typeof parent === "string") parent = document.getElementById(parent);
 			parent.appendChild(this.render());
 		}
 
@@ -972,11 +973,9 @@
 							target = bone;
 						}
 					}
-					handleHover();
 				},
 				up: (x, y) => {
 					target = null;
-					handleHover();
 				},
 				dragged: (x, y) => {
 					if (target != null) {
@@ -990,7 +989,6 @@
 							target.y = coords.y - skeleton.y;
 						}
 					}
-					handleHover();
 				},
 				moved: (x, y) => {
 					for (var i = 0; i < controlBones.length; i++) {
@@ -1003,7 +1001,6 @@
 							selectedBones[i] = null;
 						}
 					}
-					handleHover();
 				}
 			});
 
@@ -1013,30 +1010,39 @@
 			// For this we need to register a mouse handler on
 			// the document and see if we are within the canvas
 			// area :/
-			var mouseOverChildren = true;
-			document.addEventListener("mousemove", (ev: UIEvent) => {
+			var mouseOverControls = true;
+			var mouseOverCanvas = false;
+			let cancelId = 0;
+			parent.addEventListener("mousemove", (ev: UIEvent) => {
 				if (ev instanceof MouseEvent) {
-					let rect = this.playerControls.getBoundingClientRect();
-					let x = ev.clientX - rect.left;
-					let y = ev.clientY - rect.top;
-					mouseOverChildren = x >= 0 && x <= this.playerControls.clientWidth && y >= 0 && y <= this.playerControls.clientHeight;
-				}
-			});
+					if (!this.config.showControls) return;
 
-			let cancelId = 0;
-			let handleHover = () => {
-				if (!this.config.showControls) return;
-				clearTimeout(cancelId);
-				this.playerControls.classList.remove("spine-player-controls-hidden");
-				let remove = () => {
 					let popup = findWithClass(this.dom, "spine-player-popup");
-					if (popup.length == 0 && !mouseOverChildren && !this.paused) {
+					mouseOverControls = overlap(ev, this.playerControls.getBoundingClientRect());
+					mouseOverCanvas = overlap(ev, this.canvas.getBoundingClientRect());
+					clearTimeout(cancelId);
+					let hide = popup.length == 0 && !mouseOverControls && !mouseOverCanvas && !this.paused;
+					if (hide) {
+						console.log("hidding");
 						this.playerControls.classList.add("spine-player-controls-hidden");
 					} else {
-						cancelId = setTimeout(remove, 100);
+						console.log("showing");
+						this.playerControls.classList.remove("spine-player-controls-hidden");
 					}
-				};
-				cancelId = setTimeout(remove, 100);
+					if (!mouseOverControls && popup.length == 0 && !this.paused) {
+						let remove = () => {
+							console.log("hidding timeout");
+							this.playerControls.classList.add("spine-player-controls-hidden");
+						};
+						cancelId = setTimeout(remove, 500);
+					}
+				}
+			});
+
+			let overlap = (ev: MouseEvent, rect: DOMRect | ClientRect): boolean => {
+					let x = ev.clientX - rect.left;
+					let y = ev.clientY - rect.top;
+					return x >= 0 && x <= rect.width && y >= 0 && y <= rect.height;
 			}
 		}