From 5994c347eabab59d0694926057bc6de19ea341dd Mon Sep 17 00:00:00 2001
From: badlogic <badlogicgames@gmail.com>
Date: Mon, 29 Apr 2019 15:07:13 +0200
Subject: [PATCH] Fixed additive blending demo, calculations take scrolling
 into account.

---
 spine-ts/webgl/demos/additiveblending.html |  6 ++----
 spine-ts/webgl/demos/additiveblending.js   | 13 ++++++++++++-
 2 files changed, 14 insertions(+), 5 deletions(-)
diff --git a/spine-ts/webgl/demos/additiveblending.html b/spine-ts/webgl/demos/additiveblending.html
index 06a0fcf6b..c8ab6b887 100644
--- a/spine-ts/webgl/demos/additiveblending.html
+++ b/spine-ts/webgl/demos/additiveblending.html
@@ -6,11 +6,9 @@
 <script src="https://code.jquery.com/jquery-3.1.0.min.js"></script>
 <script src="utils.js"></script>
 <script src="additiveblending.js"></script>
-<body>
+<body style="margin: 0; padding: 0;">
 
-<center>
-<div class="aspect standalone"></div>
-</center>
+<div style="margin: 0 auto;" class="aspect standalone"></div>
 
 <script>
 spineDemos.init();
diff --git a/spine-ts/webgl/demos/additiveblending.js b/spine-ts/webgl/demos/additiveblending.js
index 178b6dfd4..b750a9e8b 100644
--- a/spine-ts/webgl/demos/additiveblending.js
+++ b/spine-ts/webgl/demos/additiveblending.js
@@ -15,6 +15,9 @@ var additiveBlendingDemo = function(canvas, bgColor) {
 	var isPlaying = true;
 
 	var left, right, up, down;
+	var cursor;
+
+	var clientMouseX = 0, clientMouseY = 0;
 
 	var DEMO_NAME = "AdditiveBlendingDemo";
 
@@ -35,6 +38,8 @@ var additiveBlendingDemo = function(canvas, bgColor) {
 		assetManager.loadText(DEMO_NAME, "atlas2.atlas");
 		assetManager.loadJson(DEMO_NAME, "demos.json");
 		timeKeeper = new spine.TimeKeeper();
+
+		cursor = document.getElementById("cursor");
 	}
 
 	function loadingComplete () {
@@ -83,6 +88,7 @@ var additiveBlendingDemo = function(canvas, bgColor) {
 	function calculateBlend (x, y, isPageCoords) {
 		if (isPageCoords) {
 			var canvasBounds = canvas.getBoundingClientRect();
+			console.log(canvasBounds.x + ", " + canvasBounds.y + ", " + x + ", " + y);
 			x = Math.max(0, Math.min(canvasBounds.width, x - canvasBounds.x));
 			y = Math.max(0, Math.min(canvasBounds.height, y - canvasBounds.y));
 		}
@@ -97,7 +103,8 @@ var additiveBlendingDemo = function(canvas, bgColor) {
 	function setupInput () {
 		if (!isMobileDevice()) {
 			document.addEventListener("mousemove", function (event) {
-				calculateBlend(event.clientX, event.clientY, true);
+				clientMouseX = event.clientX;
+				clientMouseY = event.clientY;
 			}, false);
 		} else {
 			var input = new spine.webgl.Input(canvas);
@@ -124,6 +131,10 @@ var additiveBlendingDemo = function(canvas, bgColor) {
 	}
 
 	function render () {
+		if (!isMobileDevice()) {
+			calculateBlend(clientMouseX, clientMouseY, true);
+		}
+
 		timeKeeper.update();
 		var delta = timeKeeper.delta;
 
