[ts] Fixed input handling for player control bones and demos.

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

@@ -1289,7 +1289,6 @@ declare module spine.canvas {
 declare module spine.webgl {
 	class AssetManager extends spine.AssetManager {
 		constructor(context: ManagedWebGLRenderingContext | WebGLRenderingContext, pathPrefix?: string, downloader?: Downloader);
-		protected createTexture(context: ManagedWebGLRenderingContext | WebGLRenderingContext, image: HTMLImageElement | ImageBitmap): Texture;
 	}
 }
 declare module spine.webgl {

spine-ts/build/spine-all.js

@@ -2881,10 +2881,9 @@ var spine;
 									_this.success(success, path, atlas_1);
 							}
 						}, function (imagePath, message) {
-							if (!abort_1) {
+							if (!abort_1)
-								abort_1 = true;
 								_this.error(error, path, "Couldn't load texture atlas " + path + " page " + imagePath + ": " + message);
-							}
+							abort_1 = true;
 						});
 					};
 					for (var _i = 0, _a = atlas_1.pages; _i < _a.length; _i++) {
@@ -9241,12 +9240,10 @@ var spine;
 			function AssetManager(context, pathPrefix, downloader) {
 				if (pathPrefix === void 0) { pathPrefix = ""; }
 				if (downloader === void 0) { downloader = null; }
-				var _this = _super.call(this, function (image) { return _this.createTexture(context, image); }, pathPrefix, downloader) || this;
+				return _super.call(this, function (image) {
-				return _this;
+					return new spine.webgl.GLTexture(context, image);
+				}, pathPrefix, downloader) || this;
 			}
-			AssetManager.prototype.createTexture = function (context, image) {
-				return new spine.webgl.GLTexture(context, image);
-			};
 			return AssetManager;
 		}(spine.AssetManager));
 		webgl.AssetManager = AssetManager;
@@ -11905,7 +11902,6 @@ var spine;
 				geo.setAttribute("uv", new THREE.InterleavedBufferAttribute(vertexBuffer, 2, 7, false));
 				geo.setIndex(new THREE.BufferAttribute(indices, 1));
 				geo.getIndex().usage = WebGLRenderingContext.DYNAMIC_DRAW;
-				;
 				geo.drawRange.start = 0;
 				geo.drawRange.count = 0;
 				_this.geometry = geo;
@@ -12333,6 +12329,8 @@ var spine;
 				config.backgroundImage = null;
 			if (config.premultipliedAlpha === undefined)
 				config.premultipliedAlpha = true;
+			if (config.mipmaps === undefined)
+				config.mipmaps = true;
 			if (!config.debug)
 				config.debug = {};
 			if (config.animations && config.animation && config.animations.indexOf(config.animation) < 0)
@@ -12375,51 +12373,7 @@ var spine;
 			catch (e) {
 				this.showError("Sorry, your browser does not support WebGL.\nPlease use the latest version of Firefox, Chrome, Edge, or Safari.", e);
 			}
-			this.assetManager = new (function (_super) {
+			this.assetManager = new spine.webgl.AssetManager(this.context, "", config.downloader);
-				__extends(class_1, _super);
-				function class_1() {
-					return _super !== null && _super.apply(this, arguments) || this;
-				}
-				class_1.prototype.createTexture = function (context, image) {
-					return new (function (_super) {
-						__extends(class_2, _super);
-						function class_2() {
-							return _super !== null && _super.apply(this, arguments) || this;
-						}
-						class_2.prototype.setFilters = function (minFilter, magFilter) {
-							if (config.mipmaps) {
-								minFilter = spine.TextureFilter.MipMapLinearLinear;
-								magFilter = spine.TextureFilter.Linear;
-							}
-							var mipmaps = false;
-							switch (minFilter) {
-								case spine.TextureFilter.MipMap:
-								case spine.TextureFilter.MipMapLinearLinear:
-								case spine.TextureFilter.MipMapLinearNearest:
-								case spine.TextureFilter.MipMapNearestLinear:
-								case spine.TextureFilter.MipMapNearestNearest:
-									if (config.mipmaps) {
-										var gl = this.context.gl;
-										var ext = gl.getExtension("EXT_texture_filter_anisotropic");
-										if (ext) {
-											gl.texParameterf(gl.TEXTURE_2D, ext.TEXTURE_MAX_ANISOTROPY_EXT, 8);
-											mipmaps = true;
-										}
-										else
-											minFilter = spine.TextureFilter.Linear;
-									}
-									else
-										mipmaps = true;
-							}
-							_super.prototype.setFilters.call(this, minFilter, magFilter);
-							if (mipmaps)
-								this.update(true);
-						};
-						return class_2;
-					}(spine.webgl.GLTexture))(context, image);
-				};
-				return class_1;
-			}(spine.webgl.AssetManager))(this.context, "", config.downloader);
 			if (config.rawDataURIs) {
 				for (var path in config.rawDataURIs)
 					this.assetManager.setRawDataURI(path, config.rawDataURIs[path]);
@@ -12516,6 +12470,22 @@ var spine;
 				this.showError("Error: Assets could not be loaded.\n" + toString(this.assetManager.getErrors()));
 			var config = this.config;
 			var atlas = this.assetManager.get(config.atlasUrl);
+			var gl = this.context.gl, anisotropic = gl.getExtension("EXT_texture_filter_anisotropic");
+			for (var _i = 0, _a = atlas.pages; _i < _a.length; _i++) {
+				var page = _a[_i];
+				var minFilter = page.minFilter;
+				if (config.mipmaps) {
+					if (anisotropic) {
+						gl.texParameterf(gl.TEXTURE_2D, anisotropic.TEXTURE_MAX_ANISOTROPY_EXT, 8);
+						minFilter = spine.TextureFilter.MipMapLinearLinear;
+					}
+					else
+						minFilter = spine.TextureFilter.Linear;
+					page.texture.setFilters(minFilter, spine.TextureFilter.Nearest);
+				}
+				if (minFilter != spine.TextureFilter.Nearest && minFilter != spine.TextureFilter.Linear)
+					page.texture.update(true);
+			}
 			var skeletonData;
 			if (config.jsonUrl) {
 				try {
@@ -12618,25 +12588,22 @@ var spine;
 			var input = new spine.webgl.Input(canvas);
 			var target = null;
 			var coords = new spine.webgl.Vector3();
-			var temp3 = new spine.webgl.Vector3();
+			var mouse = new spine.webgl.Vector3();
-			var temp2 = new spine.Vector2();
+			var position = new spine.Vector2();
 			var skeleton = this.skeleton;
 			var renderer = this.sceneRenderer;
 			var closest = function (x, y) {
-				y = canvas.height - y;
+				mouse.set(x, canvas.clientHeight - y, 0);
 				var bestDistance = 24, index = 0;
 				var best;
 				for (var i = 0; i < controlBones.length; i++) {
 					selectedBones[i] = null;
 					var bone = skeleton.findBone(controlBones[i]);
-					if (bone) {
+					var distance = renderer.camera.worldToScreen(coords.set(bone.worldX, bone.worldY, 0), canvas.clientWidth, canvas.clientHeight).distance(mouse);
-						renderer.camera.worldToScreen(coords.set(bone.worldX, bone.worldY, 0), canvas.width, canvas.height);
+					if (distance < bestDistance) {
-						var distance = temp3.set(x, y, 0).distance(coords);
+						bestDistance = distance;
-						if (distance < bestDistance) {
+						best = bone;
-							bestDistance = distance;
+						index = i;
-							best = bone;
-							index = i;
-						}
 					}
 				}
 				if (best)
@@ -12653,13 +12620,13 @@ var spine;
 				},
 				dragged: function (x, y) {
 					if (target) {
-						x = spine.MathUtils.clamp(x, 0, canvas.width);
+						x = spine.MathUtils.clamp(x, 0, canvas.clientWidth);
-						y = spine.MathUtils.clamp(y, 0, canvas.height);
+						y = spine.MathUtils.clamp(y, 0, canvas.clientHeight);
-						renderer.camera.screenToWorld(coords.set(x, y, 0), canvas.width, canvas.height);
+						renderer.camera.screenToWorld(coords.set(x, y, 0), canvas.clientWidth, canvas.clientHeight);
 						if (target.parent) {
-							target.parent.worldToLocal(temp2.set(coords.x - skeleton.x, coords.y - skeleton.y));
+							target.parent.worldToLocal(position.set(coords.x - skeleton.x, coords.y - skeleton.y));
-							target.x = temp2.x;
+							target.x = position.x;
-							target.y = temp2.y;
+							target.y = position.y;
 						}
 						else {
 							target.x = coords.x - skeleton.x;
@@ -12867,19 +12834,17 @@ var spine;
 						height: this.currentViewport.height + this.currentViewport.padBottom + this.currentViewport.padTop
 					};
 					if (this.previousViewport) {
-						var transitionAlpha = ((performance.now() - this.viewportTransitionStart) / 1000) / config.viewport.transitionTime;
+						var transitionAlpha = (performance.now() - this.viewportTransitionStart) / 1000 / config.viewport.transitionTime;
 						if (transitionAlpha < 1) {
-							var oldViewport = {
+							var x = this.previousViewport.x - this.previousViewport.padLeft;
-								x: this.previousViewport.x - this.previousViewport.padLeft,
+							var y = this.previousViewport.y - this.previousViewport.padBottom;
-								y: this.previousViewport.y - this.previousViewport.padBottom,
+							var width = this.previousViewport.width + this.previousViewport.padLeft + this.previousViewport.padRight;
-								width: this.previousViewport.width + this.previousViewport.padLeft + this.previousViewport.padRight,
+							var height = this.previousViewport.height + this.previousViewport.padBottom + this.previousViewport.padTop;
-								height: this.previousViewport.height + this.previousViewport.padBottom + this.previousViewport.padTop
-							};
 							viewport = {
-								x: oldViewport.x + (viewport.x - oldViewport.x) * transitionAlpha,
+								x: x + (viewport.x - x) * transitionAlpha,
-								y: oldViewport.y + (viewport.y - oldViewport.y) * transitionAlpha,
+								y: y + (viewport.y - y) * transitionAlpha,
-								width: oldViewport.width + (viewport.width - oldViewport.width) * transitionAlpha,
+								width: width + (viewport.width - width) * transitionAlpha,
-								height: oldViewport.height + (viewport.height - oldViewport.height) * transitionAlpha
+								height: height + (viewport.height - height) * transitionAlpha
 							};
 						}
 					}
@@ -12923,9 +12888,9 @@ var spine;
 							renderer.circle(true, skeleton.x + bone.worldX, skeleton.y + bone.worldY, 20, colorInner);
 							renderer.circle(false, skeleton.x + bone.worldX, skeleton.y + bone.worldY, 20, colorOuter);
 						}
-						gl.lineWidth(1);
 					}
 					if (config.viewport.debugRender) {
+						gl.lineWidth(1);
 						renderer.rect(false, this.currentViewport.x, this.currentViewport.y, this.currentViewport.width, this.currentViewport.height, spine.Color.GREEN);
 						renderer.rect(false, viewport.x, viewport.y, viewport.width, viewport.height, spine.Color.RED);
 					}

spine-ts/build/spine-canvas.js

@@ -2881,10 +2881,9 @@ var spine;
 									_this.success(success, path, atlas_1);
 							}
 						}, function (imagePath, message) {
-							if (!abort_1) {
+							if (!abort_1)
-								abort_1 = true;
 								_this.error(error, path, "Couldn't load texture atlas " + path + " page " + imagePath + ": " + message);
-							}
+							abort_1 = true;
 						});
 					};
 					for (var _i = 0, _a = atlas_1.pages; _i < _a.length; _i++) {

spine-ts/build/spine-core.js

@@ -2881,10 +2881,9 @@ var spine;
 									_this.success(success, path, atlas_1);
 							}
 						}, function (imagePath, message) {
-							if (!abort_1) {
+							if (!abort_1)
-								abort_1 = true;
 								_this.error(error, path, "Couldn't load texture atlas " + path + " page " + imagePath + ": " + message);
-							}
+							abort_1 = true;
 						});
 					};
 					for (var _i = 0, _a = atlas_1.pages; _i < _a.length; _i++) {

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

@@ -1258,7 +1258,6 @@ declare module spine {
 declare module spine.webgl {
 	class AssetManager extends spine.AssetManager {
 		constructor(context: ManagedWebGLRenderingContext | WebGLRenderingContext, pathPrefix?: string, downloader?: Downloader);
-		protected createTexture(context: ManagedWebGLRenderingContext | WebGLRenderingContext, image: HTMLImageElement | ImageBitmap): Texture;
 	}
 }
 declare module spine.webgl {

spine-ts/build/spine-player.js

@@ -2881,10 +2881,9 @@ var spine;
 									_this.success(success, path, atlas_1);
 							}
 						}, function (imagePath, message) {
-							if (!abort_1) {
+							if (!abort_1)
-								abort_1 = true;
 								_this.error(error, path, "Couldn't load texture atlas " + path + " page " + imagePath + ": " + message);
-							}
+							abort_1 = true;
 						});
 					};
 					for (var _i = 0, _a = atlas_1.pages; _i < _a.length; _i++) {
@@ -8991,12 +8990,10 @@ var spine;
 			function AssetManager(context, pathPrefix, downloader) {
 				if (pathPrefix === void 0) { pathPrefix = ""; }
 				if (downloader === void 0) { downloader = null; }
-				var _this = _super.call(this, function (image) { return _this.createTexture(context, image); }, pathPrefix, downloader) || this;
+				return _super.call(this, function (image) {
-				return _this;
+					return new spine.webgl.GLTexture(context, image);
+				}, pathPrefix, downloader) || this;
 			}
-			AssetManager.prototype.createTexture = function (context, image) {
-				return new spine.webgl.GLTexture(context, image);
-			};
 			return AssetManager;
 		}(spine.AssetManager));
 		webgl.AssetManager = AssetManager;
@@ -11656,6 +11653,8 @@ var spine;
 				config.backgroundImage = null;
 			if (config.premultipliedAlpha === undefined)
 				config.premultipliedAlpha = true;
+			if (config.mipmaps === undefined)
+				config.mipmaps = true;
 			if (!config.debug)
 				config.debug = {};
 			if (config.animations && config.animation && config.animations.indexOf(config.animation) < 0)
@@ -11698,51 +11697,7 @@ var spine;
 			catch (e) {
 				this.showError("Sorry, your browser does not support WebGL.\nPlease use the latest version of Firefox, Chrome, Edge, or Safari.", e);
 			}
-			this.assetManager = new (function (_super) {
+			this.assetManager = new spine.webgl.AssetManager(this.context, "", config.downloader);
-				__extends(class_1, _super);
-				function class_1() {
-					return _super !== null && _super.apply(this, arguments) || this;
-				}
-				class_1.prototype.createTexture = function (context, image) {
-					return new (function (_super) {
-						__extends(class_2, _super);
-						function class_2() {
-							return _super !== null && _super.apply(this, arguments) || this;
-						}
-						class_2.prototype.setFilters = function (minFilter, magFilter) {
-							if (config.mipmaps) {
-								minFilter = spine.TextureFilter.MipMapLinearLinear;
-								magFilter = spine.TextureFilter.Linear;
-							}
-							var mipmaps = false;
-							switch (minFilter) {
-								case spine.TextureFilter.MipMap:
-								case spine.TextureFilter.MipMapLinearLinear:
-								case spine.TextureFilter.MipMapLinearNearest:
-								case spine.TextureFilter.MipMapNearestLinear:
-								case spine.TextureFilter.MipMapNearestNearest:
-									if (config.mipmaps) {
-										var gl = this.context.gl;
-										var ext = gl.getExtension("EXT_texture_filter_anisotropic");
-										if (ext) {
-											gl.texParameterf(gl.TEXTURE_2D, ext.TEXTURE_MAX_ANISOTROPY_EXT, 8);
-											mipmaps = true;
-										}
-										else
-											minFilter = spine.TextureFilter.Linear;
-									}
-									else
-										mipmaps = true;
-							}
-							_super.prototype.setFilters.call(this, minFilter, magFilter);
-							if (mipmaps)
-								this.update(true);
-						};
-						return class_2;
-					}(spine.webgl.GLTexture))(context, image);
-				};
-				return class_1;
-			}(spine.webgl.AssetManager))(this.context, "", config.downloader);
 			if (config.rawDataURIs) {
 				for (var path in config.rawDataURIs)
 					this.assetManager.setRawDataURI(path, config.rawDataURIs[path]);
@@ -11839,6 +11794,22 @@ var spine;
 				this.showError("Error: Assets could not be loaded.\n" + toString(this.assetManager.getErrors()));
 			var config = this.config;
 			var atlas = this.assetManager.get(config.atlasUrl);
+			var gl = this.context.gl, anisotropic = gl.getExtension("EXT_texture_filter_anisotropic");
+			for (var _i = 0, _a = atlas.pages; _i < _a.length; _i++) {
+				var page = _a[_i];
+				var minFilter = page.minFilter;
+				if (config.mipmaps) {
+					if (anisotropic) {
+						gl.texParameterf(gl.TEXTURE_2D, anisotropic.TEXTURE_MAX_ANISOTROPY_EXT, 8);
+						minFilter = spine.TextureFilter.MipMapLinearLinear;
+					}
+					else
+						minFilter = spine.TextureFilter.Linear;
+					page.texture.setFilters(minFilter, spine.TextureFilter.Nearest);
+				}
+				if (minFilter != spine.TextureFilter.Nearest && minFilter != spine.TextureFilter.Linear)
+					page.texture.update(true);
+			}
 			var skeletonData;
 			if (config.jsonUrl) {
 				try {
@@ -11941,25 +11912,22 @@ var spine;
 			var input = new spine.webgl.Input(canvas);
 			var target = null;
 			var coords = new spine.webgl.Vector3();
-			var temp3 = new spine.webgl.Vector3();
+			var mouse = new spine.webgl.Vector3();
-			var temp2 = new spine.Vector2();
+			var position = new spine.Vector2();
 			var skeleton = this.skeleton;
 			var renderer = this.sceneRenderer;
 			var closest = function (x, y) {
-				y = canvas.height - y;
+				mouse.set(x, canvas.clientHeight - y, 0);
 				var bestDistance = 24, index = 0;
 				var best;
 				for (var i = 0; i < controlBones.length; i++) {
 					selectedBones[i] = null;
 					var bone = skeleton.findBone(controlBones[i]);
-					if (bone) {
+					var distance = renderer.camera.worldToScreen(coords.set(bone.worldX, bone.worldY, 0), canvas.clientWidth, canvas.clientHeight).distance(mouse);
-						renderer.camera.worldToScreen(coords.set(bone.worldX, bone.worldY, 0), canvas.width, canvas.height);
+					if (distance < bestDistance) {
-						var distance = temp3.set(x, y, 0).distance(coords);
+						bestDistance = distance;
-						if (distance < bestDistance) {
+						best = bone;
-							bestDistance = distance;
+						index = i;
-							best = bone;
-							index = i;
-						}
 					}
 				}
 				if (best)
@@ -11976,13 +11944,13 @@ var spine;
 				},
 				dragged: function (x, y) {
 					if (target) {
-						x = spine.MathUtils.clamp(x, 0, canvas.width);
+						x = spine.MathUtils.clamp(x, 0, canvas.clientWidth);
-						y = spine.MathUtils.clamp(y, 0, canvas.height);
+						y = spine.MathUtils.clamp(y, 0, canvas.clientHeight);
-						renderer.camera.screenToWorld(coords.set(x, y, 0), canvas.width, canvas.height);
+						renderer.camera.screenToWorld(coords.set(x, y, 0), canvas.clientWidth, canvas.clientHeight);
 						if (target.parent) {
-							target.parent.worldToLocal(temp2.set(coords.x - skeleton.x, coords.y - skeleton.y));
+							target.parent.worldToLocal(position.set(coords.x - skeleton.x, coords.y - skeleton.y));
-							target.x = temp2.x;
+							target.x = position.x;
-							target.y = temp2.y;
+							target.y = position.y;
 						}
 						else {
 							target.x = coords.x - skeleton.x;
@@ -12190,19 +12158,17 @@ var spine;
 						height: this.currentViewport.height + this.currentViewport.padBottom + this.currentViewport.padTop
 					};
 					if (this.previousViewport) {
-						var transitionAlpha = ((performance.now() - this.viewportTransitionStart) / 1000) / config.viewport.transitionTime;
+						var transitionAlpha = (performance.now() - this.viewportTransitionStart) / 1000 / config.viewport.transitionTime;
 						if (transitionAlpha < 1) {
-							var oldViewport = {
+							var x = this.previousViewport.x - this.previousViewport.padLeft;
-								x: this.previousViewport.x - this.previousViewport.padLeft,
+							var y = this.previousViewport.y - this.previousViewport.padBottom;
-								y: this.previousViewport.y - this.previousViewport.padBottom,
+							var width = this.previousViewport.width + this.previousViewport.padLeft + this.previousViewport.padRight;
-								width: this.previousViewport.width + this.previousViewport.padLeft + this.previousViewport.padRight,
+							var height = this.previousViewport.height + this.previousViewport.padBottom + this.previousViewport.padTop;
-								height: this.previousViewport.height + this.previousViewport.padBottom + this.previousViewport.padTop
-							};
 							viewport = {
-								x: oldViewport.x + (viewport.x - oldViewport.x) * transitionAlpha,
+								x: x + (viewport.x - x) * transitionAlpha,
-								y: oldViewport.y + (viewport.y - oldViewport.y) * transitionAlpha,
+								y: y + (viewport.y - y) * transitionAlpha,
-								width: oldViewport.width + (viewport.width - oldViewport.width) * transitionAlpha,
+								width: width + (viewport.width - width) * transitionAlpha,
-								height: oldViewport.height + (viewport.height - oldViewport.height) * transitionAlpha
+								height: height + (viewport.height - height) * transitionAlpha
 							};
 						}
 					}
@@ -12246,9 +12212,9 @@ var spine;
 							renderer.circle(true, skeleton.x + bone.worldX, skeleton.y + bone.worldY, 20, colorInner);
 							renderer.circle(false, skeleton.x + bone.worldX, skeleton.y + bone.worldY, 20, colorOuter);
 						}
-						gl.lineWidth(1);
 					}
 					if (config.viewport.debugRender) {
+						gl.lineWidth(1);
 						renderer.rect(false, this.currentViewport.x, this.currentViewport.y, this.currentViewport.width, this.currentViewport.height, spine.Color.GREEN);
 						renderer.rect(false, viewport.x, viewport.y, viewport.width, viewport.height, spine.Color.RED);
 					}

spine-ts/build/spine-threejs.js

@@ -2881,10 +2881,9 @@ var spine;
 									_this.success(success, path, atlas_1);
 							}
 						}, function (imagePath, message) {
-							if (!abort_1) {
+							if (!abort_1)
-								abort_1 = true;
 								_this.error(error, path, "Couldn't load texture atlas " + path + " page " + imagePath + ": " + message);
-							}
+							abort_1 = true;
 						});
 					};
 					for (var _i = 0, _a = atlas_1.pages; _i < _a.length; _i++) {
@@ -9024,7 +9023,6 @@ var spine;
 				geo.setAttribute("uv", new THREE.InterleavedBufferAttribute(vertexBuffer, 2, 7, false));
 				geo.setIndex(new THREE.BufferAttribute(indices, 1));
 				geo.getIndex().usage = WebGLRenderingContext.DYNAMIC_DRAW;
-				;
 				geo.drawRange.start = 0;
 				geo.drawRange.count = 0;
 				_this.geometry = geo;

spine-ts/build/spine-webgl.d.ts

@@ -1258,7 +1258,6 @@ declare module spine {
 declare module spine.webgl {
 	class AssetManager extends spine.AssetManager {
 		constructor(context: ManagedWebGLRenderingContext | WebGLRenderingContext, pathPrefix?: string, downloader?: Downloader);
-		protected createTexture(context: ManagedWebGLRenderingContext | WebGLRenderingContext, image: HTMLImageElement | ImageBitmap): Texture;
 	}
 }
 declare module spine.webgl {

spine-ts/build/spine-webgl.js

@@ -2881,10 +2881,9 @@ var spine;
 									_this.success(success, path, atlas_1);
 							}
 						}, function (imagePath, message) {
-							if (!abort_1) {
+							if (!abort_1)
-								abort_1 = true;
 								_this.error(error, path, "Couldn't load texture atlas " + path + " page " + imagePath + ": " + message);
-							}
+							abort_1 = true;
 						});
 					};
 					for (var _i = 0, _a = atlas_1.pages; _i < _a.length; _i++) {
@@ -8991,12 +8990,10 @@ var spine;
 			function AssetManager(context, pathPrefix, downloader) {
 				if (pathPrefix === void 0) { pathPrefix = ""; }
 				if (downloader === void 0) { downloader = null; }
-				var _this = _super.call(this, function (image) { return _this.createTexture(context, image); }, pathPrefix, downloader) || this;
+				return _super.call(this, function (image) {
-				return _this;
+					return new spine.webgl.GLTexture(context, image);
+				}, pathPrefix, downloader) || this;
 			}
-			AssetManager.prototype.createTexture = function (context, image) {
-				return new spine.webgl.GLTexture(context, image);
-			};
 			return AssetManager;
 		}(spine.AssetManager));
 		webgl.AssetManager = AssetManager;

spine-ts/player/src/Player.ts

@@ -393,7 +393,7 @@ module spine {
 			let atlas = this.assetManager.get(config.atlasUrl);
 			let gl = this.context.gl, anisotropic = gl.getExtension("EXT_texture_filter_anisotropic");
 			for (let page of atlas.pages) {
-				var minFilter = page.minFilter;
+				let minFilter = page.minFilter;
 				if (config.mipmaps) {
 					if (anisotropic) {
 						gl.texParameterf(gl.TEXTURE_2D, anisotropic.TEXTURE_MAX_ANISOTROPY_EXT, 8);
@@ -509,26 +509,25 @@ module spine {
 			let input = new spine.webgl.Input(canvas);
 			let target:Bone = null;
 			let coords = new spine.webgl.Vector3();
-			let temp3 = new spine.webgl.Vector3();
+			let mouse = new spine.webgl.Vector3();
-			let temp2 = new spine.Vector2();
+			let position = new spine.Vector2();
 			let skeleton = this.skeleton;
 			let renderer = this.sceneRenderer;
 
 			let closest = function (x: number, y: number): Bone {
-				y = canvas.height - y;
+ 				mouse.set(x, canvas.clientHeight - y, 0)
 				let bestDistance = 24, index = 0;
 				let best:Bone;
 				for (let i = 0; i < controlBones.length; i++) {
 					selectedBones[i] = null;
 					let bone = skeleton.findBone(controlBones[i]);
-					if (bone) {
+					let distance = renderer.camera.worldToScreen(
-						renderer.camera.worldToScreen(coords.set(bone.worldX, bone.worldY, 0), canvas.width, canvas.height);
+						coords.set(bone.worldX, bone.worldY, 0),
-						let distance = temp3.set(x, y, 0).distance(coords);
+						canvas.clientWidth, canvas.clientHeight).distance(mouse);
-						if (distance < bestDistance) {
+					if (distance < bestDistance) {
-							bestDistance = distance;
+						bestDistance = distance;
-							best = bone;
+						best = bone;
-							index = i;
+						index = i;
-						}
 					}
 				}
 				if (best) selectedBones[index] = best;
@@ -545,13 +544,13 @@ module spine {
 				},
 				dragged: (x, y) => {
 					if (target) {
-						x = MathUtils.clamp(x, 0, canvas.width)
+						x = MathUtils.clamp(x, 0, canvas.clientWidth)
-						y = MathUtils.clamp(y, 0, canvas.height);
+						y = MathUtils.clamp(y, 0, canvas.clientHeight);
-						renderer.camera.screenToWorld(coords.set(x, y, 0), canvas.width, canvas.height);
+						renderer.camera.screenToWorld(coords.set(x, y, 0), canvas.clientWidth, canvas.clientHeight);
 						if (target.parent) {
-							target.parent.worldToLocal(temp2.set(coords.x - skeleton.x, coords.y - skeleton.y));
+							target.parent.worldToLocal(position.set(coords.x - skeleton.x, coords.y - skeleton.y));
-							target.x = temp2.x;
+							target.x = position.x;
-							target.y = temp2.y;
+							target.y = position.y;
 						} else {
 							target.x = coords.x - skeleton.x;
 							target.y = coords.y - skeleton.y;
@@ -753,7 +752,7 @@ module spine {
 
 						if (config.showControls) {
 							this.playTime += delta;
-							var entry = this.animationState.getCurrent(0);
+							let entry = this.animationState.getCurrent(0);
 							if (entry) {
 								let duration = entry.animation.duration;
 								while (this.playTime >= duration && duration != 0)
@@ -778,19 +777,17 @@ module spine {
 					};
 
 					if (this.previousViewport) {
-						let transitionAlpha = ((performance.now() - this.viewportTransitionStart) / 1000) / config.viewport.transitionTime;
+						let transitionAlpha = (performance.now() - this.viewportTransitionStart) / 1000 / config.viewport.transitionTime;
 						if (transitionAlpha < 1) {
-							let oldViewport = {
+							let x = this.previousViewport.x - (this.previousViewport.padLeft as number);
-								x: this.previousViewport.x - (this.previousViewport.padLeft as number),
+							let y = this.previousViewport.y - (this.previousViewport.padBottom as number);
-								y: this.previousViewport.y - (this.previousViewport.padBottom as number),
+							let width = this.previousViewport.width + (this.previousViewport.padLeft as number) + (this.previousViewport.padRight as number);
-								width: this.previousViewport.width + (this.previousViewport.padLeft as number) + (this.previousViewport.padRight as number),
+							let height = this.previousViewport.height + (this.previousViewport.padBottom as number) + (this.previousViewport.padTop as number);
-								height: this.previousViewport.height + (this.previousViewport.padBottom as number) + (this.previousViewport.padTop as number)
-							};
 							viewport = {
-								x: oldViewport.x + (viewport.x - oldViewport.x) * transitionAlpha,
+								x: x + (viewport.x - x) * transitionAlpha,
-								y: oldViewport.y + (viewport.y - oldViewport.y) * transitionAlpha,
+								y: y + (viewport.y - y) * transitionAlpha,
-								width: oldViewport.width + (viewport.width - oldViewport.width) * transitionAlpha,
+								width: width + (viewport.width - width) * transitionAlpha,
-								height: oldViewport.height + (viewport.height - oldViewport.height) * transitionAlpha
+								height: height + (viewport.height - height) * transitionAlpha
 							};
 						}
 					}
@@ -844,11 +841,11 @@ module spine {
 							renderer.circle(true, skeleton.x + bone.worldX, skeleton.y + bone.worldY, 20, colorInner);
 							renderer.circle(false, skeleton.x + bone.worldX, skeleton.y + bone.worldY, 20, colorOuter);
 						}
-						gl.lineWidth(1);
 					}
 
 					// Draw the viewport bounds.
 					if (config.viewport.debugRender) {
+						gl.lineWidth(1);
 						renderer.rect(false, this.currentViewport.x, this.currentViewport.y, this.currentViewport.width, this.currentViewport.height, Color.GREEN);
 						renderer.rect(false, viewport.x, viewport.y, viewport.width, viewport.height, Color.RED);
 					}

spine-ts/webgl/demos/additiveblending.js

@@ -26,9 +26,7 @@ var additiveBlendingDemo = function(canvas, bgColor) {
 	};
 
 	function init () {
-		canvas.width = canvas.clientWidth; canvas.height = canvas.clientHeight;
 		gl = canvas.context.gl;
-
 		renderer = new spine.webgl.SceneRenderer(canvas, gl);
 		assetManager = new spine.webgl.AssetManager(gl, spineDemos.path, spineDemos.downloader);
 		assetManager.loadTextureAtlas("atlas2.atlas");
@@ -96,7 +94,7 @@ var additiveBlendingDemo = function(canvas, bgColor) {
 			var input = new spine.webgl.Input(canvas);
 			input.addListener({
 				down: function(x, y) {
-					renderer.camera.screenToWorld(coords.set(x, y, 0), canvas.width, canvas.height);
+					renderer.camera.screenToWorld(coords.set(x, y, 0), canvas.clientWidth, canvas.clientHeight);
 					if (temp.set(handle.x, handle.y, 0).distance(coords) < canvas.width * HANDLE_SIZE) {
 						dragging = true;
 					}
@@ -106,7 +104,7 @@ var additiveBlendingDemo = function(canvas, bgColor) {
 				},
 				dragged: function(x, y) {
 					if (dragging && x > 0 && x < canvas.width && y > 0 && y < canvas.height) {
-						renderer.camera.screenToWorld(coords.set(x, y, 0), canvas.width, canvas.height);
+						renderer.camera.screenToWorld(coords.set(x, y, 0), canvas.clientWidth, canvas.clientHeight);
 						handle.x = coords.x;
 						handle.y = coords.y;
 						calculateBlend(x, y, false);

spine-ts/webgl/demos/clipping.js

@@ -7,9 +7,7 @@ var clippingDemo = function(canvas, bgColor) {
 	if (!bgColor) bgColor = new spine.Color(235 / 255, 239 / 255, 244 / 255, 1);
 
 	function init () {
-		canvas.width = canvas.clientWidth; canvas.height = canvas.clientHeight;
 		gl = canvas.context.gl;
-
 		renderer = new spine.webgl.SceneRenderer(canvas, gl);
 		assetManager = new spine.webgl.AssetManager(gl, spineDemos.path, spineDemos.downloader);
 		assetManager.loadTextureAtlas("atlas1.atlas");

spine-ts/webgl/demos/hoverboard.js

@@ -16,7 +16,6 @@ var hoverboardDemo = function(canvas, bgColor) {
 	if (!bgColor) bgColor = new spine.Color(235 / 255, 239 / 255, 244 / 255, 1);
 
 	function init () {
-		canvas.width = canvas.clientWidth; canvas.height = canvas.clientHeight;
 		gl = canvas.context.gl;
 
 		renderer = new spine.webgl.SceneRenderer(canvas, gl);
@@ -97,41 +96,17 @@ var hoverboardDemo = function(canvas, bgColor) {
 		input.addListener({
 			down: function(x, y) {
 				isPlaying = false;
-				for (var i = 0; i < controlBones.length; i++) {
+				target = spineDemos.closest(canvas, renderer, skeleton, controlBones, hoverTargets, x, y);
-					var bone = skeleton.findBone(controlBones[i]);
-					renderer.camera.screenToWorld(coords.set(x, y, 0), canvas.width, canvas.height);
-					if (temp.set(bone.worldX, bone.worldY, 0).distance(coords) < 30) {
-						target = bone;
-					}
-				}
 			},
 			up: function(x, y) {
 				if (target && target.data.name == "crosshair") $("#hoverboard-shoot").click();
 				target = null;
 			},
 			dragged: function(x, y) {
-				if (target != null && x > 0 && x < canvas.width && y > 0 && y < canvas.height) {
+				spineDemos.dragged(canvas, renderer, target, x, y);
-					renderer.camera.screenToWorld(coords.set(x, y, 0), canvas.width, canvas.height);
-					if (target.parent !== null) {
-						target.parent.worldToLocal(temp2.set(coords.x, coords.y));
-						target.x = temp2.x;
-						target.y = temp2.y;
-					} else {
-						target.x = coords.x;
-						target.y = coords.y;
-					}
-				}
 			},
 			moved: function (x, y) {
-				for (var i = 0; i < controlBones.length; i++) {
+				spineDemos.closest(canvas, renderer, skeleton, controlBones, hoverTargets, x, y);
-					var bone = skeleton.findBone(controlBones[i]);
-					renderer.camera.screenToWorld(coords.set(x, y, 0), canvas.width, canvas.height);
-					if (temp.set(bone.worldX, bone.worldY, 0).distance(coords) < 30) {
-						hoverTargets[i] = bone;
-					} else {
-						hoverTargets[i] = null;
-					}
-				}
 			}
 		});
 	}

spine-ts/webgl/demos/imagechanges.js

@@ -11,9 +11,7 @@ var imageChangesDemo = function(canvas, bgColor) {
 	if (!bgColor) bgColor = new spine.Color(235 / 255, 239 / 255, 244 / 255, 1);
 
 	function init () {
-		canvas.width = canvas.clientWidth; canvas.height = canvas.clientHeight;
 		gl = canvas.context.gl;
-
 		renderer = new spine.webgl.SceneRenderer(canvas, gl);
 		assetManager = new spine.webgl.AssetManager(gl, spineDemos.path, spineDemos.downloader);
 		assetManager.loadTextureAtlas("atlas1.atlas");

spine-ts/webgl/demos/meshes.js

@@ -9,7 +9,6 @@ var meshesDemo = function(canvas, bgColor) {
 	if (!bgColor) bgColor = new spine.Color(235 / 255, 239 / 255, 244 / 255, 1);
 
 	function init () {
-		canvas.width = canvas.clientWidth; canvas.height = canvas.clientHeight;
 		gl = canvas.context.gl;
 		renderer = new spine.webgl.SceneRenderer(canvas, gl);
 		renderer.skeletonDebugRenderer.drawRegionAttachments = false;

spine-ts/webgl/demos/skins.js

@@ -8,9 +8,7 @@ var skinsDemo = function(canvas, bgColor) {
 	if (!bgColor) bgColor = new spine.Color(235 / 255, 239 / 255, 244 / 255, 1);
 
 	function init () {
-		canvas.width = canvas.clientWidth; canvas.height = canvas.clientHeight;
 		gl = canvas.context.gl;
-
 		renderer = new spine.webgl.SceneRenderer(canvas, gl);
 		assetManager = new spine.webgl.AssetManager(gl, spineDemos.path, spineDemos.downloader);
 		assetManager.loadTextureAtlas("heroes.atlas");

spine-ts/webgl/demos/spritesheets.js

@@ -14,9 +14,7 @@ var spritesheetsDemo = function(canvas, bgColor) {
 	if (!bgColor) bgColor = new spine.Color(235 / 255, 239 / 255, 244 / 255, 1);
 
 	function init () {
-		canvas.width = canvas.clientWidth; canvas.height = canvas.clientHeight;
 		gl = canvas.context.gl;
-
 		renderer = new spine.webgl.SceneRenderer(canvas, gl);
 		assetManager = new spine.webgl.AssetManager(gl, spineDemos.path, spineDemos.downloader);
 		assetManager.loadTextureAtlas("atlas1.atlas");

spine-ts/webgl/demos/stretchyman.js

@@ -24,9 +24,7 @@ var stretchymanDemo = function(canvas, bgColor) {
 	if (!bgColor) bgColor = new spine.Color(235 / 255, 239 / 255, 244 / 255, 1);
 
 	function init () {
-		canvas.width = canvas.clientWidth; canvas.height = canvas.clientHeight;
 		gl = canvas.context.gl;
-
 		renderer = new spine.webgl.SceneRenderer(canvas, gl);
 		assetManager = new spine.webgl.AssetManager(gl, spineDemos.path, spineDemos.downloader);
 		assetManager.loadTextureAtlas("atlas2.atlas");
@@ -72,43 +70,21 @@ var stretchymanDemo = function(canvas, bgColor) {
 	function setupInput (){
 		input.addListener({
 			down: function(x, y) {
-				for (var i = 0; i < controlBones.length; i++) {
+				target = spineDemos.closest(canvas, renderer, skeleton, controlBones, hoverTargets, x, y);
-					var bone = skeleton.findBone(controlBones[i]);
-					renderer.camera.screenToWorld(coords.set(x, y, 0), canvas.width, canvas.height);
-					if (temp.set(skeleton.x + bone.worldX, skeleton.y + bone.worldY, 0).distance(coords) < 30) {
-						target = bone;
-					}
-				}
 			},
 			up: function(x, y) {
 				target = null;
 			},
 			dragged: function(x, y) {
-				if (target != null && x > 0 && x < canvas.width && y > 0 && y < canvas.height) {
+				spineDemos.dragged(canvas, renderer, target, x, y);
-					renderer.camera.screenToWorld(coords.set(x, y, 0), canvas.width, canvas.height);
+				if (target && target.data.name === "head controller") {
-					if (target.parent !== null)
+					var hipControl = skeleton.findBone("hip controller");
-						target.parent.worldToLocal(temp2.set(coords.x - skeleton.x, coords.y - skeleton.y));
+					target.x = spine.MathUtils.clamp(target.x, -65, 65);
-					else
+					target.y = Math.max(260, target.y);
-						temp2.set(coords.x - skeleton.x, coords.y - skeleton.y);
-					target.x = temp2.x;
-					target.y = temp2.y;
-					if (target.data.name === "head controller") {
-						var hipControl = skeleton.findBone("hip controller");
-						target.x = spine.MathUtils.clamp(target.x, -65, 65);
-						target.y = Math.max(260, target.y);
-					}
 				}
 			},
 			moved: function (x, y) {
-				for (var i = 0; i < controlBones.length; i++) {
+				spineDemos.closest(canvas, renderer, skeleton, controlBones, hoverTargets, x, y);
-					var bone = skeleton.findBone(controlBones[i]);
-					renderer.camera.screenToWorld(coords.set(x, y, 0), canvas.width, canvas.height);
-					if (temp.set(skeleton.x + bone.worldX, skeleton.y + bone.worldY, 0).distance(coords) < 30) {
-						hoverTargets[i] = bone;
-					} else {
-						hoverTargets[i] = null;
-					}
-				}
 			}
 		});
 	}

spine-ts/webgl/demos/tank.js

@@ -7,9 +7,7 @@ var tankDemo = function(canvas, bgColor) {
 	if (!bgColor) bgColor = new spine.Color(235 / 255, 239 / 255, 244 / 255, 1);
 
 	function init () {
-		canvas.width = canvas.clientWidth; canvas.height = canvas.clientHeight;
 		gl = canvas.context.gl;
-
 		renderer = new spine.webgl.SceneRenderer(canvas, gl);
 		assetManager = new spine.webgl.AssetManager(gl, spineDemos.path, spineDemos.downloader);
 		assetManager.loadTextureAtlas("atlas2.atlas");

spine-ts/webgl/demos/transforms.js

@@ -18,9 +18,7 @@ var transformsDemo = function(canvas, bgColor) {
 	if (!bgColor) bgColor = new spine.Color(235 / 255, 239 / 255, 244 / 255, 1);
 
 	function init () {
-		canvas.width = canvas.clientWidth; canvas.height = canvas.clientHeight;
 		gl = canvas.context.gl;
-
 		renderer = new spine.webgl.SceneRenderer(canvas, gl);
 		assetManager = new spine.webgl.AssetManager(gl, spineDemos.path, spineDemos.downloader);
 		assetManager.loadTextureAtlas("atlas2.atlas");
@@ -83,7 +81,7 @@ var transformsDemo = function(canvas, bgColor) {
 
 	function setupInput() {
 		var getRotation = function(x, y) {
-			renderer.camera.screenToWorld(coords.set(x, y, 0), canvas.width, canvas.height);
+			renderer.camera.screenToWorld(coords.set(x, y, 0), canvas.clientWidth, canvas.clientHeight);
 			var wheel1 = skeleton.findBone("wheel1overlay");
 			var v = coords.sub(new spine.webgl.Vector3(wheel1.worldX, wheel1.worldY, 0)).normalize();
 			var angle = Math.acos(v.x) * spine.MathUtils.radiansToDegrees;
@@ -92,48 +90,23 @@ var transformsDemo = function(canvas, bgColor) {
 		}
 		input.addListener({
 			down: function(x, y) {
-				renderer.camera.screenToWorld(coords.set(x, y, 0), canvas.width, canvas.height);
+				target = spineDemos.closest(canvas, renderer, skeleton, controlBones, hoverTargets, x, y);
-				for (var i = 0; i < controlBones.length; i++) {
+				if (target === rotateHandle) lastRotation = getRotation(x, y);
-					var bone = skeleton.findBone(controlBones[i]);
-					if (temp.set(skeleton.x + bone.worldX, skeleton.y + bone.worldY, 0).distance(coords) < 30) {
-						target = bone;
-						if (target === rotateHandle) lastRotation = getRotation(x, y);
-					}
-				}
 			},
 			up: function(x, y) {
 				target = null;
 			},
 			dragged: function(x, y) {
-				if (target != null && x > 0 && x < canvas.width && y > 0 && y < canvas.height) {
+				if (target === rotateHandle) {
-					if (target === rotateHandle) {
+					var rotation = getRotation(x, y);
-						var rotation = getRotation(x, y);
+					var delta = rotation - lastRotation;
-						var delta = rotation - lastRotation;
+					skeleton.findBone("wheel1").rotation += delta;
-						skeleton.findBone("wheel1").rotation += delta;
+					lastRotation = rotation;
-						lastRotation = rotation;
+				} else
-					} else {
+					spineDemos.dragged(canvas, renderer, target, x, y);
-						renderer.camera.screenToWorld(coords.set(x, y, 0), canvas.width, canvas.height);
+			},
-						if (target.parent !== null) {
-							target.parent.worldToLocal(temp2.set(coords.x - skeleton.x, coords.y - skeleton.y));
-							target.x = temp2.x;
-							target.y = temp2.y;
-						} else {
-							target.x = coords.x - skeleton.x;
-							target.y = coords.y - skeleton.y;
-						}
-					}
-				}
-			 },
 			moved: function (x, y) {
-				renderer.camera.screenToWorld(coords.set(x, y, 0), canvas.width, canvas.height);
+				spineDemos.closest(canvas, renderer, skeleton, controlBones, hoverTargets, x, y);
-				for (var i = 0; i < controlBones.length; i++) {
-					var bone = skeleton.findBone(controlBones[i]);
-					if (temp.set(skeleton.x + bone.worldX, skeleton.y + bone.worldY, 0).distance(coords) < 30) {
-						hoverTargets[i] = bone;
-					} else {
-						hoverTargets[i] = null;
-					}
-				}
 			}
 		})
 	}

spine-ts/webgl/demos/transitions.js

@@ -9,20 +9,17 @@ var transitionsDemo = function(canvas, loadingComplete, bgColor) {
 	if (!bgColor) bgColor = new spine.Color(235 / 255, 239 / 255, 244 / 255, 1);
 
 	function init () {
-		timeSlider = $("#transitions-timeslider").data("slider");
-		timeSlider.set(0.5);
-		timeSliderLabel = $("#transitions-timeslider-label")[0];
-
-		canvas.width = canvas.clientWidth; canvas.height = canvas.clientHeight;
 		gl = canvas.context.gl;
-
 		renderer = new spine.webgl.SceneRenderer(canvas, gl);
 		assetManager = new spine.webgl.AssetManager(gl, spineDemos.path, spineDemos.downloader);
 		assetManager.loadTextureAtlas("atlas1.atlas");
 		assetManager.loadJson("demos.json");
-
 		input = new spine.webgl.Input(canvas);
 		timeKeeper = new spine.TimeKeeper();
+
+		timeSlider = $("#transitions-timeslider").data("slider");
+		timeSlider.set(0.5);
+		timeSliderLabel = $("#transitions-timeslider-label")[0];
 	}
 
 	function loadingComplete () {

spine-ts/webgl/demos/utils.js

@@ -109,6 +109,45 @@ window.onerror = function (msg, url, lineNo, columnNo, error) {
 		spineDemos.demos.push(demo);
 	}
 
+	var coords = new spine.webgl.Vector3();
+	var mouse = new spine.webgl.Vector3();
+	spineDemos.closest = function (canvas, renderer, skeleton, controlBones, hoverTargets, x, y) {
+		mouse.set(x, canvas.clientHeight - y, 0)
+		var bestDistance = 24, index = 0;
+		var best;
+		for (var i = 0; i < controlBones.length; i++) {
+			hoverTargets[i] = null;
+			let bone = skeleton.findBone(controlBones[i]);
+			let distance = renderer.camera.worldToScreen(
+				coords.set(bone.worldX, bone.worldY, 0),
+				canvas.clientWidth, canvas.clientHeight).distance(mouse);
+			if (distance < bestDistance) {
+				bestDistance = distance;
+				best = bone;
+				index = i;
+			}
+		}
+		if (best) hoverTargets[index] = best;
+		return best;
+	};
+
+	var position = new spine.webgl.Vector3();
+	spineDemos.dragged = function (canvas, renderer, target, x, y) {
+		if (target) {
+			x = spine.MathUtils.clamp(x, 0, canvas.clientWidth)
+			y = spine.MathUtils.clamp(y, 0, canvas.clientHeight);
+			renderer.camera.screenToWorld(coords.set(x, y, 0), canvas.clientWidth, canvas.clientHeight);
+			if (target.parent !== null) {
+				target.parent.worldToLocal(position.set(coords.x, coords.y));
+				target.x = position.x;
+				target.y = position.y;
+			} else {
+				target.x = coords.x;
+				target.y = coords.y;
+			}
+		}
+	};
+
 	loadSliders = function () {
 		$(window).resize(function() {
 			$(".slider").each(function () {

spine-ts/webgl/demos/vine.js

@@ -16,9 +16,7 @@ var vineDemo = function(canvas, bgColor) {
 	if (!bgColor) bgColor = new spine.Color(235 / 255, 239 / 255, 244 / 255, 1);
 
 	function init () {
-		canvas.width = canvas.clientWidth; canvas.height = canvas.clientHeight;
 		gl = canvas.context.gl;
-
 		renderer = new spine.webgl.SceneRenderer(canvas, gl);
 		input = new spine.webgl.Input(canvas);
 		assetManager = new spine.webgl.AssetManager(gl, spineDemos.path, spineDemos.downloader);
@@ -89,40 +87,16 @@ var vineDemo = function(canvas, bgColor) {
 	function setupInput() {
 		input.addListener({
 			down: function(x, y) {
-				for (var i = 0; i < controlBones.length; i++) {
+				target = spineDemos.closest(canvas, renderer, skeleton, controlBones, hoverTargets, x, y);
-					var bone = skeleton.findBone(controlBones[i]);
-					renderer.camera.screenToWorld(coords.set(x, y, 0), canvas.width, canvas.height);
-					if (temp.set(skeleton.x + bone.worldX, skeleton.y + bone.worldY, 0).distance(coords) < 30) {
-						target = bone;
-					}
-				}
 			},
 			up: function(x, y) {
 				target = null;
 			},
 			dragged: function(x, y) {
-				if (target != null && x > 0 && x < canvas.width && y > 0 && y < canvas.height) {
+				spineDemos.dragged(canvas, renderer, target, x, y);
-					renderer.camera.screenToWorld(coords.set(x, y, 0), canvas.width, canvas.height);
-					if (target.parent !== null) {
-						target.parent.worldToLocal(temp2.set(coords.x - skeleton.x, coords.y - skeleton.y));
-						target.x = temp2.x;
-						target.y = temp2.y;
-					} else {
-						target.x = coords.x - skeleton.x;
-						target.y = coords.y - skeleton.y;
-					}
-				}
 			},
 			moved: function (x, y) {
-				for (var i = 0; i < controlBones.length; i++) {
+				spineDemos.closest(canvas, renderer, skeleton, controlBones, hoverTargets, x, y);
-					var bone = skeleton.findBone(controlBones[i]);
-					renderer.camera.screenToWorld(coords.set(x, y, 0), canvas.width, canvas.height);
-					if (temp.set(skeleton.x + bone.worldX, skeleton.y + bone.worldY, 0).distance(coords) < 30) {
-						hoverTargets[i] = bone;
-					} else {
-						hoverTargets[i] = null;
-					}
-				}
 			}
 		});
 	}