From 2f888172d43f48bb4dc9e03248129f39893fb408 Mon Sep 17 00:00:00 2001
From: Jukka Kurkela <jukka.kurkela@gmail.com>
Date: Mon, 14 Sep 2020 18:37:29 +0300
Subject: [PATCH] Cache event offset coordinates (#7795)

---
 src/core/core.controller.js     |  4 +++-
 src/helpers/helpers.dom.js      |  9 +--------
 src/helpers/helpers.extras.js   |  6 ++++--
 src/platform/platform.dom.js    |  5 ++++-
 test/specs/helpers.dom.tests.js | 28 +---------------------------
 5 files changed, 13 insertions(+), 39 deletions(-)

diff --git a/src/core/core.controller.js b/src/core/core.controller.js
index 9ea1dce06..1bc6c896d 100644
--- a/src/core/core.controller.js
+++ b/src/core/core.controller.js
@@ -993,7 +993,9 @@ class Chart {
 			}
 		};
 
-		let listener = function(e) {
+		let listener = function(e, x, y) {
+			e.offsetX = x;
+			e.offsetY = y;
 			me._eventHandler(e);
 		};
 
diff --git a/src/helpers/helpers.dom.js b/src/helpers/helpers.dom.js
index 34052002a..6fc70c627 100644
--- a/src/helpers/helpers.dom.js
+++ b/src/helpers/helpers.dom.js
@@ -93,7 +93,7 @@ export function getRelativePosition(evt, chart) {
 	const e = evt.originalEvent || evt;
 	const touches = e.touches;
 	const source = touches && touches.length ? touches[0] : e;
-	const {offsetX, offsetY, layerX, layerY, target} = source;
+	const {offsetX, offsetY} = source;
 
 	if (offsetX > 0 || offsetY > 0) {
 		return {
@@ -102,13 +102,6 @@ export function getRelativePosition(evt, chart) {
 		};
 	}
 
-	if (layerX > 0 || layerY > 0) {
-		return {
-			x: layerX - target.offsetLeft,
-			y: layerY - target.offsetTop
-		};
-	}
-
 	return calculateRelativePositionFromClientXY(source, chart);
 }
 
diff --git a/src/helpers/helpers.extras.js b/src/helpers/helpers.extras.js
index 0bfec3e09..e821fb967 100644
--- a/src/helpers/helpers.extras.js
+++ b/src/helpers/helpers.extras.js
@@ -19,13 +19,15 @@ export const requestAnimFrame = (function() {
  * Latest argments are used on the actual call
  * @param {function} fn
  * @param {*} thisArg
+ * @param {function} [updateFn]
  */
-export function throttled(fn, thisArg) {
+export function throttled(fn, thisArg, updateFn) {
+	const updateArgs = updateFn || ((args) => Array.prototype.slice.call(args));
 	let ticking = false;
 	let args = [];
 
 	return function(...rest) {
-		args = Array.prototype.slice.call(rest);
+		args = updateArgs(rest);
 
 		if (!ticking) {
 			ticking = true;
diff --git a/src/platform/platform.dom.js b/src/platform/platform.dom.js
index 1b2eb2881..4a31ebf54 100644
--- a/src/platform/platform.dom.js
+++ b/src/platform/platform.dom.js
@@ -245,7 +245,10 @@ function createProxyAndListen(chart, type, listener) {
 		if (chart.ctx !== null) {
 			listener(fromNativeEvent(event, chart));
 		}
-	}, chart);
+	}, chart, (args) => {
+		const event = args[0];
+		return [event, event.offsetX, event.offsetY];
+	});
 
 	addListener(canvas, type, proxy);
 
diff --git a/test/specs/helpers.dom.tests.js b/test/specs/helpers.dom.tests.js
index 454322dbe..3a2f95724 100644
--- a/test/specs/helpers.dom.tests.js
+++ b/test/specs/helpers.dom.tests.js
@@ -263,33 +263,7 @@ describe('DOM helpers tests', function() {
 			expect(helpers.getRelativePosition(event, chart)).toEqual({x: 0, y: 10});
 		});
 
-		it('should use layerX/Y - target offsets when available', function() {
-			const chart = undefined;
-
-			const event1 = {
-				layerX: 0,
-				layerY: 10,
-				target: {
-					offsetLeft: 0,
-					offsetTop: 5
-				}
-			};
-			expect(helpers.getRelativePosition(event1, chart)).toEqual({x: 0, y: 5});
-
-			const event2 = {
-				offsetX: 0,
-				offsetY: 0,
-				layerX: 10,
-				layerY: 10,
-				target: {
-					offsetLeft: 0,
-					offsetTop: 5
-				}
-			};
-			expect(helpers.getRelativePosition(event2, chart)).toEqual({x: 10, y: 5});
-		});
-
-		it('should calculate from clientX/Y if offset/layer coords are not available', function() {
+		it('should calculate from clientX/Y as fallback', function() {
 			const chart = window.acquireChart({}, {
 				canvas: {
 					height: 200,
-- 
2.47.2