Point cleanup (#6755)

* remove steppedLine from Point
* Remove tension from Point
* Migration guide, private

diff --git a/docs/getting-started/v3-migration.md b/docs/getting-started/v3-migration.md
index e7d395d87b28aa7d9f3a36f2fa48ca9741c1f379..596dcafcba3af258cd8401f419b634f253df29c1 100644 (file)
--- 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 fcd5d7ac6da7f05f60187a1c39294e90faa34935..7a89514fc3d8bb3562bcb699b024df3eddded274 100644 (file)
--- 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 8596e39b39170afca9eb84bbd7c69c2bbeed86aa..99857a17c24d6101ed67409969c911270ae3c3db 100644 (file)
--- 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 3aa0c95a58499bd73861418027a67547c26168ff..1a2658eed0adfd265af9655d22f1cb6529eecae2 100644 (file)
--- 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 a34160d5ba7f6987973b7dc809a0ba64ce96c646..2d216a30cc4cef3e3c61ff3522c160c0400e47e2 100644 (file)
--- 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 fd69b8ff420140713054fe6ead44a37681e49ed0..8f652aba86dfb27fffbc9d64395e2b360e04ca67 100644 (file)
--- 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 8ffa7eb1c621940535f9aeb0aea8de3e18ae6e83..c93bc1b3501d455ed5a293d101053c95eb1c700a 100644 (file)
--- 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,
                        }));
                });
        });