From d5b6698d8c900fbac0a8480f864fc28118ca901b Mon Sep 17 00:00:00 2001 From: Jukka Kurkela Date: Tue, 12 Nov 2019 01:28:17 +0200 Subject: [PATCH] Performance improvements (#6729) --- src/elements/element.line.js | 3 +- src/elements/element.point.js | 44 ++++++++++++++--------------- test/specs/element.point.tests.js | 46 ------------------------------- 3 files changed, 22 insertions(+), 71 deletions(-) diff --git a/src/elements/element.line.js b/src/elements/element.line.js index c8873aea3..f06290672 100644 --- a/src/elements/element.line.js +++ b/src/elements/element.line.js @@ -36,7 +36,7 @@ class Line extends Element { var vm = me._view; var ctx = me._ctx; var spanGaps = vm.spanGaps; - var points = me._children.slice(); // clone array + var points = me._children; var globalDefaults = defaults.global; var globalOptionLineElements = globalDefaults.elements.line; var lastDrawnIndex = -1; @@ -48,6 +48,7 @@ class Line extends Element { } if (me._loop) { + points = points.slice(); // clone array for (index = 0; index < points.length; ++index) { previous = helpers.previousItem(points, index); // If the line has an open path, shift the point array diff --git a/src/elements/element.point.js b/src/elements/element.point.js index 14849f9ae..ed8eef64b 100644 --- a/src/elements/element.point.js +++ b/src/elements/element.point.js @@ -4,8 +4,6 @@ const defaults = require('../core/core.defaults'); const Element = require('../core/core.element'); const helpers = require('../helpers/index'); -const valueOrDefault = helpers.valueOrDefault; - const defaultColor = defaults.global.defaultColor; defaults._set('global', { @@ -31,22 +29,22 @@ class Point extends Element { } inRange(mouseX, mouseY) { - var vm = this._view; + const vm = this._view; return vm ? ((Math.pow(mouseX - vm.x, 2) + Math.pow(mouseY - vm.y, 2)) < Math.pow(vm.hitRadius + vm.radius, 2)) : false; } inXRange(mouseX) { - var vm = this._view; + const vm = this._view; return vm ? (Math.abs(mouseX - vm.x) < vm.radius + vm.hitRadius) : false; } inYRange(mouseY) { - var vm = this._view; + const vm = this._view; return vm ? (Math.abs(mouseY - vm.y) < vm.radius + vm.hitRadius) : false; } getCenterPoint() { - var vm = this._view; + const vm = this._view; return { x: vm.x, y: vm.y @@ -54,14 +52,14 @@ class Point extends Element { } size() { - var vm = this._view; - var radius = vm.radius || 0; - var borderWidth = vm.borderWidth || 0; + const vm = this._view; + const radius = vm.radius || 0; + const borderWidth = vm.borderWidth || 0; return (radius + borderWidth) * 2; } tooltipPosition() { - var vm = this._view; + const vm = this._view; return { x: vm.x, y: vm.y, @@ -70,25 +68,23 @@ class Point extends Element { } draw(chartArea) { - var vm = this._view; - var ctx = this._ctx; - var pointStyle = vm.pointStyle; - var rotation = vm.rotation; - var radius = vm.radius; - var x = vm.x; - var y = vm.y; - var globalDefaults = defaults.global; - var defaultColor = globalDefaults.defaultColor; // eslint-disable-line no-shadow - - if (vm.skip) { + const vm = this._view; + const ctx = this._ctx; + const pointStyle = vm.pointStyle; + const rotation = vm.rotation; + const radius = vm.radius; + const x = vm.x; + const y = vm.y; + + if (vm.skip || radius <= 0) { return; } // Clipping for Points. if (chartArea === undefined || helpers.canvas._isPointInArea(vm, chartArea)) { - ctx.strokeStyle = vm.borderColor || defaultColor; - ctx.lineWidth = valueOrDefault(vm.borderWidth, globalDefaults.elements.point.borderWidth); - ctx.fillStyle = vm.backgroundColor || defaultColor; + ctx.strokeStyle = vm.borderColor; + ctx.lineWidth = vm.borderWidth; + ctx.fillStyle = vm.backgroundColor; helpers.canvas.drawPoint(ctx, pointStyle, radius, x, y, rotation); } } diff --git a/test/specs/element.point.tests.js b/test/specs/element.point.tests.js index bc51bedef..b3ea7631d 100644 --- a/test/specs/element.point.tests.js +++ b/test/specs/element.point.tests.js @@ -72,52 +72,6 @@ describe('Chart.elements.Point', function() { expect(point.getCenterPoint()).toEqual({x: 10, y: 10}); }); - it ('should draw correctly with default settings if necessary', function() { - var mockContext = window.createMockContext(); - var point = new Chart.elements.Point({ - _datasetIndex: 2, - _index: 1, - _ctx: mockContext - }); - - // Attach a view object as if we were the controller - point._view = { - radius: 2, - hitRadius: 3, - x: 10, - y: 15, - ctx: mockContext - }; - - point.draw(); - - expect(mockContext.getCalls()).toEqual([{ - name: 'setStrokeStyle', - args: ['rgba(0,0,0,0.1)'] - }, { - name: 'setLineWidth', - args: [1] - }, { - name: 'setFillStyle', - args: ['rgba(0,0,0,0.1)'] - }, { - name: 'beginPath', - args: [] - }, { - name: 'arc', - args: [10, 15, 2, 0, 2 * Math.PI] - }, { - name: 'closePath', - args: [], - }, { - name: 'fill', - args: [], - }, { - name: 'stroke', - args: [] - }]); - }); - it ('should not draw if skipped', function() { var mockContext = window.createMockContext(); var point = new Chart.elements.Point({ -- 2.47.2