Implement a separate labelDrawTime option (#275)

* Implement a separate labelDrawTime option

Implementation notes:

Since not all annotation types implement labels, the `drawLabel` method is optional.

If the `labelDrawTime` option isn't specified, then it checks the individual annotation's `drawTime` option, then the chart-wide annotation plugin's `labelDrawTime` option, then the chart-wide annotation plugin's `drawTime` option. This means that you can't override an individual annotation's `drawTime` without also affecting its `labelDrawTime`, but I think it's the more intuitive and backward-compatible behavior.

Since the option should default to `drawTime` if not set, I did not add it to the `defaults` object. Please let me know if I've misunderstood how plugins' default options should be implemented.

* Switch to label.drawTime

As suggested in code review.

* Move beginPath call (for code review); update README for final API

* Update type definitions

README.md

@@ -41,7 +41,7 @@ To configure the annotations plugin, you can simply add new config options to yo
                 // context: {chart, element}
             },
 
-            // Array of annotation configuration objects 
+            // Array of annotation configuration objects
             // or Object with the annotation configuration objects, one for each key
             // See below for detailed descriptions of the annotation options
             annotations: [{
@@ -113,6 +113,9 @@ Vertical or horizontal lines are supported.
         // Background color of label, default below
         backgroundColor: 'rgba(0,0,0,0.8)',
 
+        // optional drawTime to control labels' layering; defaults to this element's drawTime
+        drawTime: 'afterDatasetsDraw',
+
         font: {
             // Font family of text, inherits from global
             family: "sans-serif",
@@ -214,7 +217,7 @@ The 4 coordinates, xMin, xMax, yMin, yMax are optional. If not specified, the bo
 
     // Fill color
     backgroundColor: 'green',
-    
+
     // Radius of box rectangle, default below
     cornerRadius: 0,
 
@@ -304,7 +307,7 @@ The 2 coordinates, xValue, yValue are optional. If not specified, the point is e
 
     // Stroke width
     borderWidth: 2,
-    
+
     // Radius of the point, default below
     radius: 10,
 
@@ -397,7 +400,7 @@ The 2 coordinates, xValue, yValue are optional. If not specified, the point is e
 
     // Stroke width
     borderWidth: 2,
-    
+
     // Radius of the point, default below
     radius: 10,
 

src/annotation.js

@@ -139,15 +139,19 @@ function resyncElements(elements, annotations) {
 
 function draw(chart, options, caller) {
 	const {ctx, chartArea} = chart;
-	const elements = chartStates.get(chart).elements;
+	const elements = chartStates.get(chart).elements.filter(el => el._display);
 
 	clipArea(ctx, chartArea);
-	for (let i = 0; i < elements.length; i++) {
-		const el = elements[i];
-		if (el._display && (el.options.drawTime || options.drawTime || caller) === caller) {
+	elements.forEach(el => {
+		if ((el.options.drawTime || options.drawTime || caller) === caller) {
 			el.draw(ctx);
 		}
-	}
+	});
+	elements.forEach(el => {
+		if ('drawLabel' in el && el.options.label && (el.options.label.drawTime || el.options.drawTime || options.drawTime || caller) === caller) {
+			el.drawLabel(ctx);
+		}
+	});
 	unclipArea(ctx);
 }
 

src/helpers.js

@@ -20,6 +20,7 @@ export function scaleValue(scale, value, fallback) {
  * @todo handle `radius` as top-left, top-right, bottom-right, bottom-left array/object?
  */
 export function roundedRect(ctx, x, y, width, height, radius) {
+	ctx.beginPath();
 	if (radius) {
 		const r = Math.min(radius, height / 2, width / 2);
 		const left = x + r;

src/types/box.js

@@ -28,7 +28,6 @@ export default class BoxAnnotation extends Element {
 		ctx.strokeStyle = options.borderColor;
 		ctx.fillStyle = options.backgroundColor;
 
-		ctx.beginPath();
 		roundedRect(ctx, x, y, width, height, options.cornerRadius);
 		ctx.fill();
 		ctx.stroke();

src/types/line.js

@@ -66,11 +66,15 @@ export default class LineAnnotation extends Element {
 		ctx.lineTo(x2, y2);
 		ctx.stroke();
 
+		ctx.restore();
+	}
+
+	drawLabel(ctx) {
 		if (this.labelIsVisible()) {
+			ctx.save();
 			drawLabel(ctx, this);
+			ctx.restore();
 		}
-
-		ctx.restore();
 	}
 
 	resolveElementProperties(chart, options) {

types/label.d.ts

@@ -1,7 +1,9 @@
 import { Color, FontSpec } from "chart.js";
+import { DrawTime } from "./options";
 
 export interface LabelOptions {
 	backgroundColor?: Color,
+	drawTime?: DrawTime,
 	font?: FontSpec
 	/**
 	 * Padding of label to add left/right, default below