Relocate

Author: kurkle

src/plugins/plugin.filler.js

@@ -10,6 +10,7 @@ import defaults from '../core/core.defaults';
 import Line, {_boundSegment, _boundSegments} from '../elements/element.line';
 import {clipArea, unclipArea} from '../helpers/helpers.canvas';
 import {valueOrDefault, isFinite, isArray, extend} from '../helpers/helpers.core';
+import {_normalizeAngle} from '../helpers/helpers.math';
 
 
 defaults._set('global', {
@@ -239,7 +240,6 @@ function _clip(ctx, target, clipY) {
 	ctx.clip();
 }
 
-const TAU = Math.PI * 2;
 function getBounds(property, first, last, loop) {
 	if (loop) {
 		return;
@@ -248,12 +248,19 @@ function getBounds(property, first, last, loop) {
 	let end = last[property];
 
 	if (property === 'angle') {
-		start = (start + TAU) % TAU;
-		end = (end + TAU) % TAU;
+		start = _normalizeAngle(start);
+		end = _normalizeAngle(end);
 	}
 	return {property, start, end};
 }
 
+function _getEdge(a, b, prop, fn) {
+	if (a && b) {
+		return fn(a[prop], b[prop]);
+	}
+	return a ? a[prop] : b ? b[prop] : 0;
+}
+
 function _segments(line, target, property) {
 	const points = line.points;
 	const tpoints = target.points;
@@ -265,18 +272,34 @@ function _segments(line, target, property) {
 		if (!target.segments) {
 			// Special case for boundary not supporting `segments` (simpleArc)
 			// Bounds are provided as `target` for partial circle, or undefined for full circle
-			parts.push({source: segment, target: bounds});
+			parts.push({
+				source: segment,
+				target: bounds,
+				start: points[segment.start],
+				end: points[segment.end]
+			});
 			continue;
 		}
 
 		// Get all segments from `target` that intersect the bounds of current segment of `line`
 		const subs = _boundSegments(target, bounds);
 
 		for (let sub of subs) {
-			const fillSources = _boundSegment(segment, points, getBounds(property, tpoints[sub.start], tpoints[sub.end], sub.loop));
+			const subBounds = getBounds(property, tpoints[sub.start], tpoints[sub.end], sub.loop);
+			const fillSources = _boundSegment(segment, points, subBounds);
 
 			for (let source of fillSources) {
-				parts.push({source, target: sub});
+				parts.push({
+					source,
+					target: sub,
+					start: {
+						[property]: _getEdge(bounds, subBounds, 'start', Math.max)
+					},
+					end: {
+						[property]: _getEdge(bounds, subBounds, 'end', Math.min)
+					}
+
+				});
 			}
 		}
 	}
@@ -303,30 +326,27 @@ function interpolatedLineTo(ctx, target, point, property) {
 function _fill(ctx, cfg) {
 	const {line, target, property, color, scale} = cfg;
 	const segments = _segments(cfg.line, cfg.target, property);
-	const points = line.points;
 
 	ctx.fillStyle = color;
 	for (let i = 0, ilen = segments.length; i < ilen; ++i) {
-		const {source: src, target: tgt} = segments[i];
-		const first = points[src.start];
-		const last = points[src.end];
+		const {source: src, target: tgt, start, end} = segments[i];
 
 		ctx.save();
 
-		clipBounds(ctx, scale, getBounds(property, first, last));
+		clipBounds(ctx, scale, getBounds(property, start, end));
 
 		ctx.beginPath();
 
 		let loop = !!line.pathSegment(ctx, src);
 		if (loop) {
 			ctx.closePath();
 		} else {
-			interpolatedLineTo(ctx, target, last, property);
+			interpolatedLineTo(ctx, target, end, property);
 		}
 
 		loop &= target.pathSegment(ctx, tgt, {move: loop, reverse: true});
 		if (!loop) {
-			interpolatedLineTo(ctx, target, first, property);
+			interpolatedLineTo(ctx, target, start, property);
 		}
 
 		ctx.closePath();

test/fixtures/plugin.filler/fill-line-dataset-interpolated.js

@@ -0,0 +1,69 @@
+const data1 = [];
+const data2 = [];
+const data3 = [];
+for (let i = 0; i < 200; i++) {
+	const a = i / Math.PI / 10;
+
+	data1.push({x: i, y: i < 86 || i > 104 && i < 178 ? Math.sin(a) : NaN});
+
+	if (i % 10 === 0) {
+		data2.push({x: i, y: Math.cos(a)});
+	}
+
+	if (i % 15 === 0) {
+		data3.push({x: i, y: Math.cos(a + Math.PI / 2)});
+	}
+}
+
+module.exports = {
+	config: {
+		type: 'line',
+		data: {
+			datasets: [{
+				borderColor: 'rgba(255, 0, 0, 0.5)',
+				backgroundColor: 'rgba(255, 0, 0, 0.25)',
+				data: data1,
+				fill: false,
+			}, {
+				borderColor: 'rgba(0, 0, 255, 0.5)',
+				backgroundColor: 'rgba(0, 0, 255, 0.25)',
+				data: data2,
+				fill: 0,
+			}, {
+				borderColor: 'rgba(0, 255, 0, 0.5)',
+				backgroundColor: 'rgba(0, 255, 0, 0.25)',
+				data: data3,
+				fill: 1,
+			}]
+		},
+		options: {
+			animation: false,
+			responsive: false,
+			legend: false,
+			title: false,
+			datasets: {
+				line: {
+					lineTension: 0.4,
+					borderWidth: 1,
+					pointRadius: 1.5,
+				}
+			},
+			scales: {
+				x: {
+					type: 'linear',
+					display: false
+				},
+				y: {
+					type: 'linear',
+					display: false
+				}
+			}
+		}
+	},
+	options: {
+		canvas: {
+			height: 512,
+			width: 512
+		}
+	}
+};