Respect fill: false with custom draw times (#10414)

* Resolve canvasgradient is not defined in node
* Remove trailing white space
* export isPaternOrGradient helper with typings
* fix lint failure, single qoute
* Respect `fill: false` with custom draw times
* correctly listen to fill property
* remove console log and lint errors
* implement feedback, still update control points

src/plugins/plugin.filler/filler.helper.js

@@ -32,3 +32,7 @@ export function _createBoundaryLine(boundary, line) {
     _fullLoop: _loop
   }) : null;
 }
+
+export function _shouldApplyFill(source) {
+  return source && source.fill !== false;
+}

src/plugins/plugin.filler/index.js

@@ -6,6 +6,7 @@
 
 import LineElement from '../../elements/element.line';
 import {_drawfill} from './filler.drawing';
+import {_shouldApplyFill} from './filler.helper';
 import {_decodeFill, _resolveTarget} from './filler.options';
 
 export default {
@@ -58,7 +59,7 @@ export default {
       }
 
       source.line.updateControlPoints(area, source.axis);
-      if (draw) {
+      if (draw && source.fill) {
         _drawfill(chart.ctx, source, area);
       }
     }
@@ -68,10 +69,12 @@ export default {
     if (options.drawTime !== 'beforeDatasetsDraw') {
       return;
     }
+
     const metasets = chart.getSortedVisibleDatasetMetas();
     for (let i = metasets.length - 1; i >= 0; --i) {
       const source = metasets[i].$filler;
-      if (source) {
+
+      if (_shouldApplyFill(source)) {
         _drawfill(chart.ctx, source, chart.chartArea);
       }
     }
@@ -80,7 +83,7 @@ export default {
   beforeDatasetDraw(chart, args, options) {
     const source = args.meta.$filler;
 
-    if (!source || source.fill === false || options.drawTime !== 'beforeDatasetDraw') {
+    if (!_shouldApplyFill(source) || options.drawTime !== 'beforeDatasetDraw') {
       return;
     }
 

test/fixtures/plugin.filler/line/drawTimeFillFalse/beforeDatasetDraw.js

@@ -0,0 +1,22 @@
+module.exports = {
+  config: {
+    type: 'line',
+    data: {
+      labels: ['0', '1', '2', '3', '4', '5'],
+      datasets: [{
+        backgroundColor: 'red',
+        data: [3, -3, 0, 5, -5, 0],
+        fill: false
+      }]
+    },
+    options: {
+      plugins: {
+        legend: false,
+        title: false,
+        filler: {
+          drawTime: 'beforeDatasetDraw'
+        }
+      },
+    }
+  },
+};

test/fixtures/plugin.filler/line/drawTimeFillFalse/beforeDatasetsDraw.js

@@ -0,0 +1,22 @@
+module.exports = {
+  config: {
+    type: 'line',
+    data: {
+      labels: ['0', '1', '2', '3', '4', '5'],
+      datasets: [{
+        backgroundColor: 'red',
+        data: [3, -3, 0, 5, -5, 0],
+        fill: false
+      }]
+    },
+    options: {
+      plugins: {
+        legend: false,
+        title: false,
+        filler: {
+          drawTime: 'beforeDatasetsDraw'
+        }
+      },
+    }
+  },
+};

test/fixtures/plugin.filler/line/drawTimeFillFalse/beforeDraw.js

@@ -0,0 +1,22 @@
+module.exports = {
+  config: {
+    type: 'line',
+    data: {
+      labels: ['0', '1', '2', '3', '4', '5'],
+      datasets: [{
+        backgroundColor: 'red',
+        data: [3, -3, 0, 5, -5, 0],
+        fill: false
+      }]
+    },
+    options: {
+      plugins: {
+        legend: false,
+        title: false,
+        filler: {
+          drawTime: 'beforeDraw'
+        }
+      },
+    }
+  },
+};