From baa4429ad1a5dfe2c6a164b52585c86415e2eeab Mon Sep 17 00:00:00 2001 From: Jukka Kurkela Date: Tue, 25 Aug 2020 15:04:06 +0300 Subject: [PATCH] Use offsetX/Y or layerX/Y for events when available (#7732) * Use offsetX/offsetY for events when available * Fall to layerX/layerY for FF compatibility --- src/helpers/helpers.dom.js | 28 +++++++++++++--------------- 1 file changed, 13 insertions(+), 15 deletions(-) diff --git a/src/helpers/helpers.dom.js b/src/helpers/helpers.dom.js index 91d9a3882..1a2376a05 100644 --- a/src/helpers/helpers.dom.js +++ b/src/helpers/helpers.dom.js @@ -90,21 +90,22 @@ function _calculatePadding(container, padding, parentDimension) { } export function getRelativePosition(evt, chart) { - let mouseX, mouseY; const e = evt.originalEvent || evt; - const canvasElement = chart.canvas; - const boundingRect = canvasElement.getBoundingClientRect(); - const touches = e.touches; - if (touches && touches.length > 0) { - mouseX = touches[0].clientX; - mouseY = touches[0].clientY; + const source = touches && touches.length ? touches[0] : e; + const clientX = source.clientX; + const clientY = source.clientY; - } else { - mouseX = e.clientX; - mouseY = e.clientY; + const x = source.offsetX || source.layerX || clientX; + const y = source.offsetY || source.layerY || clientY; + + if (x !== clientX && y !== clientY) { + return {x, y}; } + const canvasElement = chart.canvas; + const devicePixelRatio = chart.currentDevicePixelRatio; + const boundingRect = canvasElement.getBoundingClientRect(); // Scale mouse coordinates into canvas coordinates // by following the pattern laid out by 'jerryj' in the comments of // https://www.html5canvastutorials.com/advanced/html5-canvas-mouse-coordinates/ @@ -117,12 +118,9 @@ export function getRelativePosition(evt, chart) { // We divide by the current device pixel ratio, because the canvas is scaled up by that amount in each direction. However // the backend model is in unscaled coordinates. Since we are going to deal with our model coordinates, we go back here - mouseX = Math.round((mouseX - boundingRect.left - paddingLeft) / (width) * canvasElement.width / chart.currentDevicePixelRatio); - mouseY = Math.round((mouseY - boundingRect.top - paddingTop) / (height) * canvasElement.height / chart.currentDevicePixelRatio); - return { - x: mouseX, - y: mouseY + x: Math.round((x - boundingRect.left - paddingLeft) / (width) * canvasElement.width / devicePixelRatio), + y: Math.round((y - boundingRect.top - paddingTop) / (height) * canvasElement.height / devicePixelRatio) }; } -- 2.47.2