Mirrors/Chart.js
1
0
Fork 0
mirror of https://github.com/chartjs/Chart.js.git synced 2024-10-06 20:29:12 +02:00
Code Issues Packages Projects Releases Wiki Activity

Cleanup resize complexity (#7439)

Browse Source 
Cleanup resize complexity
This commit is contained in:
Jukka Kurkela 2020-05-29 00:33:27 +03:00 committed by GitHub
parent 9399e57fc2
commit 53f462830c
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
1 changed files with 23 additions and 17 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

40
src/core/core.controller.js
View File

@ -172,8 +172,25 @@ function getCanvas(item) {
return item;
}
function computeNewSize(canvas, width, height, aspectRatio) {
if (width === undefined || height === undefined) {
width = getMaximumWidth(canvas);
height = getMaximumHeight(canvas);
}
// the canvas render width and height will be casted to integers so make sure that
// the canvas display style uses the same integer values to avoid blurring effect.
// Minimum values set to 0 instead of canvas.size because the size defaults to 300x150 if the element is collapsed
width = Math.max(0, Math.floor(width));
return {
width,
height: Math.max(0, Math.floor(aspectRatio ? width / aspectRatio : height))
};
}
class Chart {
// eslint-disable-next-line max-statements
constructor(item, config) {
const me = this;
@ -297,38 +314,27 @@ class Chart {
const options = me.options;
const canvas = me.canvas;
const aspectRatio = options.maintainAspectRatio && me.aspectRatio;
if (width === undefined || height === undefined) {
width = getMaximumWidth(canvas);
height = getMaximumHeight(canvas);
}
// the canvas render width and height will be casted to integers so make sure that
// the canvas display style uses the same integer values to avoid blurring effect.
// Set to 0 instead of canvas.size because the size defaults to 300x150 if the element is collapsed
const newWidth = Math.max(0, Math.floor(width));
const newHeight = Math.max(0, Math.floor(aspectRatio ? newWidth / aspectRatio : height));
const newSize = computeNewSize(canvas, width, height, aspectRatio);
// detect devicePixelRation changes
const oldRatio = me.currentDevicePixelRatio;
const newRatio = options.devicePixelRatio || me.platform.getDevicePixelRatio();
if (me.width === newWidth && me.height === newHeight && oldRatio === newRatio) {
if (me.width === newSize.width && me.height === newSize.height && oldRatio === newRatio) {
return;
}
canvas.width = me.width = newWidth;
canvas.height = me.height = newHeight;
canvas.width = me.width = newSize.width;
canvas.height = me.height = newSize.height;
if (canvas.style) {
canvas.style.width = newWidth + 'px';
canvas.style.height = newHeight + 'px';
canvas.style.width = newSize.width + 'px';
canvas.style.height = newSize.height + 'px';
}
retinaScale(me, newRatio);
if (!silent) {
// Notify any plugins about the resize
const newSize = {width: newWidth, height: newHeight};
plugins.notify(me, 'resize', [newSize]);
// Notify of resize