Cache dimensions

chartjs · Jan 15, 2020 · dc0252d · dc0252d
1 parent b06dea4
commit dc0252d
Show file tree

Hide file tree

Showing 2 changed files with 19 additions and 5 deletions.
diff --git a/src/core/core.controller.js b/src/core/core.controller.js
@@ -12,6 +12,7 @@ import scaleService from '../core/core.scaleService';
 import Tooltip from './core.tooltip';
 
 const valueOrDefault = helpers.valueOrDefault;
+const getStyle = helpers.dom.getStyle;
 
 function mergeScaleConfig(config, options) {
 	options = options || {};
@@ -210,6 +211,7 @@ class Chart {
 		plugins.notify(me, 'beforeInit');
 
 		helpers.dom.retinaScale(me, me.options.devicePixelRatio);
+		me._cacheDimensions();
 
 		me.bindEvents();
 
@@ -236,6 +238,17 @@ class Chart {
 		return this;
 	}
 
+	_cacheDimensions() {
+		const me = this;
+		const canvas = me.canvas;
+
+		me._clientRect = canvas.getBoundingClientRect();
+		me._paddingLeft = parseFloat(getStyle(canvas, 'padding-left'));
+		me._paddingTop = parseFloat(getStyle(canvas, 'padding-top'));
+		me._paddingRight = parseFloat(getStyle(canvas, 'padding-right'));
+		me._paddingBottom = parseFloat(getStyle(canvas, 'padding-bottom'));
+	}
+
 	resize(silent) {
 		const me = this;
 		const options = me.options;
@@ -259,6 +272,7 @@ class Chart {
 		canvas.style.height = newHeight + 'px';
 
 		helpers.dom.retinaScale(me, options.devicePixelRatio);
+		me._cacheDimensions();
 
 		if (!silent) {
 			// Notify any plugins about the resize

diff --git a/src/helpers/helpers.dom.js b/src/helpers/helpers.dom.js
@@ -88,7 +88,7 @@ export function getRelativePosition(evt, chart) {
 	var mouseX, mouseY;
 	var e = evt.originalEvent || evt;
 	var canvasElement = evt.target || evt.srcElement;
-	var boundingRect = canvasElement.getBoundingClientRect();
+	var boundingRect = chart._clientRect;
 
 	var touches = e.touches;
 	if (touches && touches.length > 0) {
@@ -103,10 +103,10 @@ export function getRelativePosition(evt, chart) {
 	// 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/
-	var paddingLeft = parseFloat(getStyle(canvasElement, 'padding-left'));
-	var paddingTop = parseFloat(getStyle(canvasElement, 'padding-top'));
-	var paddingRight = parseFloat(getStyle(canvasElement, 'padding-right'));
-	var paddingBottom = parseFloat(getStyle(canvasElement, 'padding-bottom'));
+	var paddingLeft = chart._paddingLeft;
+	var paddingTop = chart._paddingTop;
+	var paddingRight = chart._paddingRight;
+	var paddingBottom = chart._paddingBottom;
 	var width = boundingRect.right - boundingRect.left - paddingLeft - paddingRight;
 	var height = boundingRect.bottom - boundingRect.top - paddingTop - paddingBottom;