From eb0751c6d0c361a26ac05e431274aef9096b793c Mon Sep 17 00:00:00 2001 From: Jukka Kurkela Date: Mon, 18 Nov 2019 03:28:13 +0200 Subject: [PATCH] Point cleanup (#6755) * remove steppedLine from Point * Remove tension from Point * Migration guide, private --- docs/getting-started/v3-migration.md | 3 ++ src/controllers/controller.line.js | 3 -- src/controllers/controller.radar.js | 11 +----- src/elements/element.line.js | 10 +++-- src/helpers/helpers.canvas.js | 37 +++++++++--------- src/plugins/plugin.filler.js | 58 ++++++++++++++++++---------- test/specs/controller.radar.tests.js | 5 +-- 7 files changed, 69 insertions(+), 58 deletions(-) diff --git a/docs/getting-started/v3-migration.md b/docs/getting-started/v3-migration.md index e7d395d87..596dcafcb 100644 --- a/docs/getting-started/v3-migration.md +++ b/docs/getting-started/v3-migration.md @@ -57,6 +57,7 @@ Chart.js 3.0 introduces a number of breaking changes. Chart.js 2.0 was released * `helpers.aliasPixel` * `helpers.configMerge` * `helpers.indexOf` +* `helpers.lineTo` * `helpers.min` * `helpers.max` * `helpers.nextItem` @@ -83,6 +84,8 @@ Chart.js 3.0 introduces a number of breaking changes. Chart.js 2.0 was released * `_model.datasetLabel` * `_model.label` +* `Point._model.tension` +* `Point._model.steppedLine` * `TimeScale.getLabelWidth` ### Renamed diff --git a/src/controllers/controller.line.js b/src/controllers/controller.line.js index fcd5d7ac6..7a89514fc 100644 --- a/src/controllers/controller.line.js +++ b/src/controllers/controller.line.js @@ -110,7 +110,6 @@ module.exports = DatasetController.extend({ var meta = me.getMeta(); var xScale = me._xScale; var yScale = me._yScale; - var lineModel = meta.dataset._model; var stacked = meta._stacked; var parsed = me._getParsed(index); var options = me._resolveDataElementOptions(index); @@ -132,8 +131,6 @@ module.exports = DatasetController.extend({ backgroundColor: options.backgroundColor, borderColor: options.borderColor, borderWidth: options.borderWidth, - tension: lineModel ? lineModel.tension : 0, - steppedLine: lineModel ? lineModel.steppedLine : false, // Tooltip hitRadius: options.hitRadius }; diff --git a/src/controllers/controller.radar.js b/src/controllers/controller.radar.js index 8596e39b3..99857a17c 100644 --- a/src/controllers/controller.radar.js +++ b/src/controllers/controller.radar.js @@ -96,15 +96,9 @@ module.exports = DatasetController.extend({ var meta = me.getMeta(); var line = meta.dataset; var points = meta.data || []; - var config = me._config; var animationsDisabled = me.chart._animationsDisabled; var i, ilen; - // Compatibility: If the properties are defined with only the old name, use those values - if (config.tension !== undefined && config.lineTension === undefined) { - config.lineTension = config.tension; - } - // Data line._children = points; line._loop = true; @@ -133,7 +127,6 @@ module.exports = DatasetController.extend({ var scale = me.chart.scale; var pointPosition = scale.getPointPositionForValue(index, dataset.data[index]); var options = me._resolveDataElementOptions(index); - var lineModel = me.getMeta().dataset._model; var x = reset ? scale.xCenter : pointPosition.x; var y = reset ? scale.yCenter : pointPosition.y; @@ -152,7 +145,6 @@ module.exports = DatasetController.extend({ backgroundColor: options.backgroundColor, borderColor: options.borderColor, borderWidth: options.borderWidth, - tension: lineModel ? lineModel.tension : 0, // Tooltip hitRadius: options.hitRadius @@ -177,6 +169,7 @@ module.exports = DatasetController.extend({ updateBezierControlPoints: function() { var me = this; var meta = me.getMeta(); + var lineModel = meta.dataset._model; var area = me.chart.chartArea; var points = meta.data || []; var i, ilen, model, controlPoints; @@ -198,7 +191,7 @@ module.exports = DatasetController.extend({ previousItem(points, i)._model, model, nextItem(points, i)._model, - model.tension + lineModel.tension ); // Prevent the bezier going outside of the bounds of the graph diff --git a/src/elements/element.line.js b/src/elements/element.line.js index 3aa0c95a5..1a2658eed 100644 --- a/src/elements/element.line.js +++ b/src/elements/element.line.js @@ -52,7 +52,9 @@ function setStyle(ctx, vm) { ctx.strokeStyle = vm.borderColor; } -function normalPath(ctx, points, spanGaps) { +function normalPath(ctx, points, spanGaps, vm) { + const steppedLine = vm.steppedLine; + const lineMethod = steppedLine ? helpers.canvas._steppedLineTo : helpers.canvas._bezierCurveTo; let move = true; let index, currentVM, previousVM; @@ -66,8 +68,10 @@ function normalPath(ctx, points, spanGaps) { if (move) { ctx.moveTo(currentVM.x, currentVM.y); move = false; + } else if (vm.tension || steppedLine) { + lineMethod(ctx, previousVM, currentVM, false, steppedLine); } else { - helpers.canvas.lineTo(ctx, previousVM, currentVM); + ctx.lineTo(currentVM.x, currentVM.y); } previousVM = currentVM; } @@ -167,7 +171,7 @@ class Line extends Element { if (useFastPath(vm)) { fastPath(ctx, points, spanGaps); } else { - normalPath(ctx, points, spanGaps); + normalPath(ctx, points, spanGaps, vm); } if (closePath) { diff --git a/src/helpers/helpers.canvas.js b/src/helpers/helpers.canvas.js index a34160d5b..2d216a30c 100644 --- a/src/helpers/helpers.canvas.js +++ b/src/helpers/helpers.canvas.js @@ -171,27 +171,26 @@ module.exports = { ctx.restore(); }, - lineTo: function(ctx, previous, target, flip) { - var stepped = target.steppedLine; - if (stepped) { - if (stepped === 'middle') { - var midpoint = (previous.x + target.x) / 2.0; - ctx.lineTo(midpoint, flip ? target.y : previous.y); - ctx.lineTo(midpoint, flip ? previous.y : target.y); - } else if ((stepped === 'after' && !flip) || (stepped !== 'after' && flip)) { - ctx.lineTo(previous.x, target.y); - } else { - ctx.lineTo(target.x, previous.y); - } - ctx.lineTo(target.x, target.y); - return; - } - - if (!target.tension) { - ctx.lineTo(target.x, target.y); - return; + /** + * @private + */ + _steppedLineTo: function(ctx, previous, target, flip, mode) { + if (mode === 'middle') { + const midpoint = (previous.x + target.x) / 2.0; + ctx.lineTo(midpoint, flip ? target.y : previous.y); + ctx.lineTo(midpoint, flip ? previous.y : target.y); + } else if ((mode === 'after' && !flip) || (mode !== 'after' && flip)) { + ctx.lineTo(previous.x, target.y); + } else { + ctx.lineTo(target.x, previous.y); } + ctx.lineTo(target.x, target.y); + }, + /** + * @private + */ + _bezierCurveTo: function(ctx, previous, target, flip) { ctx.bezierCurveTo( flip ? previous.controlPointPreviousX : previous.controlPointNextX, flip ? previous.controlPointPreviousY : previous.controlPointNextY, diff --git a/src/plugins/plugin.filler.js b/src/plugins/plugin.filler.js index fd69b8ff4..8f652aba8 100644 --- a/src/plugins/plugin.filler.js +++ b/src/plugins/plugin.filler.js @@ -47,6 +47,7 @@ var mappers = { return { x: x === null ? point.x : x, y: y === null ? point.y : y, + boundary: true }; }; } @@ -136,7 +137,8 @@ function computeLinearBoundary(source) { horizontal = scale.isHorizontal(); return { x: horizontal ? target : null, - y: horizontal ? null : target + y: horizontal ? null : target, + boundary: true }; } } @@ -168,6 +170,7 @@ function computeCircularBoundary(source) { point.cy = center.y; point.angle = scale.getIndexAngle(i) - Math.PI / 2; } + point.boundary = true; target.push(point); } return target; @@ -232,8 +235,9 @@ function isDrawable(point) { return point && !point.skip; } -function drawArea(ctx, curve0, curve1, len0, len1) { - var i, cx, cy, r; +function drawArea(ctx, curve0, curve1, len0, len1, stepped, tension) { + const lineTo = stepped ? helpers.canvas._steppedLineTo : helpers.canvas._bezierCurveTo; + let i, cx, cy, r, target; if (!len0 || !len1) { return; @@ -242,7 +246,12 @@ function drawArea(ctx, curve0, curve1, len0, len1) { // building first area curve (normal) ctx.moveTo(curve0[0].x, curve0[0].y); for (i = 1; i < len0; ++i) { - helpers.canvas.lineTo(ctx, curve0[i - 1], curve0[i]); + target = curve0[i]; + if (!target.boundary && (tension || stepped)) { + lineTo(ctx, curve0[i - 1], target, false, stepped); + } else { + ctx.lineTo(target.x, target.y); + } } if (curve1[0].angle !== undefined) { @@ -260,18 +269,27 @@ function drawArea(ctx, curve0, curve1, len0, len1) { // building opposite area curve (reverse) for (i = len1 - 1; i > 0; --i) { - helpers.canvas.lineTo(ctx, curve1[i], curve1[i - 1], true); + target = curve1[i - 1]; + if (!target.boundary && (tension || stepped)) { + lineTo(ctx, curve1[i], target, true, stepped); + } else { + ctx.lineTo(target.x, target.y); + } } } -function doFill(ctx, points, mapper, view, color, loop) { - var count = points.length; - var span = view.spanGaps; - var curve0 = []; - var curve1 = []; - var len0 = 0; - var len1 = 0; - var i, ilen, index, p0, p1, d0, d1, loopOffset; +function doFill(ctx, points, mapper, el) { + const count = points.length; + const view = el._view; + const loop = el._loop; + const span = view.spanGaps; + const stepped = view.steppedLine; + const tension = view.tension; + let curve0 = []; + let curve1 = []; + let len0 = 0; + let len1 = 0; + let i, ilen, index, p0, p1, d0, d1, loopOffset; ctx.beginPath(); @@ -292,7 +310,7 @@ function doFill(ctx, points, mapper, view, color, loop) { len1 = curve1.push(p1); } else if (len0 && len1) { if (!span) { - drawArea(ctx, curve0, curve1, len0, len1); + drawArea(ctx, curve0, curve1, len0, len1, stepped, tension); len0 = len1 = 0; curve0 = []; curve1 = []; @@ -307,10 +325,10 @@ function doFill(ctx, points, mapper, view, color, loop) { } } - drawArea(ctx, curve0, curve1, len0, len1); + drawArea(ctx, curve0, curve1, len0, len1, stepped, tension); ctx.closePath(); - ctx.fillStyle = color; + ctx.fillStyle = view.backgroundColor; ctx.fill(); } @@ -357,7 +375,7 @@ module.exports = { beforeDatasetsDraw: function(chart) { var metasets = chart._getSortedVisibleDatasetMetas(); var ctx = chart.ctx; - var meta, i, el, view, points, mapper, color; + var meta, i, el, points, mapper; for (i = metasets.length - 1; i >= 0; --i) { meta = metasets[i].$filler; @@ -367,14 +385,12 @@ module.exports = { } el = meta.el; - view = el._view; points = el._children || []; mapper = meta.mapper; - color = view.backgroundColor || defaults.global.defaultColor; - if (mapper && color && points.length) { + if (mapper && points.length) { helpers.canvas.clipArea(ctx, chart.chartArea); - doFill(ctx, points, mapper, view, color, el._loop); + doFill(ctx, points, mapper, el); helpers.canvas.unclipArea(ctx); } } diff --git a/test/specs/controller.radar.tests.js b/test/specs/controller.radar.tests.js index 8ffa7eb1c..c93bc1b35 100644 --- a/test/specs/controller.radar.tests.js +++ b/test/specs/controller.radar.tests.js @@ -127,6 +127,7 @@ describe('Chart.controllers.radar', function() { borderJoinStyle: 'bevel', borderWidth: 1.2, fill: true, + tension: 0.1, })); [ @@ -149,7 +150,6 @@ describe('Chart.controllers.radar', function() { radius: 3, pointStyle: 'circle', skip: false, - tension: 0.1, })); }); @@ -176,7 +176,6 @@ describe('Chart.controllers.radar', function() { radius: 3, pointStyle: 'circle', skip: false, - tension: 0.1, })); }); @@ -209,6 +208,7 @@ describe('Chart.controllers.radar', function() { borderJoinStyle: 'miter', borderWidth: 0.55, fill: false, + tension: 0, })); // Since tension is now 0, we don't care about the control points @@ -228,7 +228,6 @@ describe('Chart.controllers.radar', function() { radius: 22, pointStyle: 'circle', skip: false, - tension: 0, })); }); }); -- 2.47.2