Fix dynamically showing/hiding line label (#595)

* Fix dynamically showing/hiding line label

* chore

* add test for box

* remove borderdash (drawn differently by ff)

* inconsistent inRange

* Empty label behavior

* Revert "Empty label behavior"

This reverts commit 32c29c9.

* Hide empty labels

* cc

Co-authored-by: Jukka Kurkela <[email protected]>

Author: kurkle

src/annotation.js

@@ -230,7 +230,11 @@ function draw(chart, caller, clip) {
   }
 
   state.visibleElements.forEach(el => {
-    if ('drawLabel' in el && el.options.label && (el.options.label.drawTime || el.options.drawTime) === caller) {
+    if (!('drawLabel' in el)) {
+      return;
+    }
+    const label = el.options.label;
+    if (label && label.enabled && label.content && (label.drawTime || el.options.drawTime) === caller) {
       el.drawLabel(ctx, chartArea);
     }
   });

src/helpers/helpers.canvas.js

@@ -1,6 +1,6 @@
-import {addRoundedRectPath, drawPoint as drawPointOnChart, isArray, toFont, toTRBLCorners, valueOrDefault} from 'chart.js/helpers';
+import {addRoundedRectPath, isArray, toFont, toTRBLCorners, valueOrDefault} from 'chart.js/helpers';
 import {clampAll} from './helpers.core';
-import {calculateTextAlignment, getSize, isLabelVisible, isPointVisible} from './helpers.options';
+import {calculateTextAlignment, getSize} from './helpers.options';
 
 const widthCache = new Map();
 
@@ -59,18 +59,6 @@ export function measureLabelSize(ctx, options) {
   return widthCache.get(mapKey);
 }
 
-export function drawPoint(ctx, point, options) {
-  if (!isPointVisible(options)) {
-    return;
-  }
-  ctx.save();
-  ctx.fillStyle = options.backgroundColor;
-  setBorderStyle(ctx, options);
-  drawPointOnChart(ctx, options, point.x, point.y);
-  ctx.restore();
-}
-
-
 /**
  * Draw a box with the size and the styling options.
  * @param {CanvasRenderingContext2D} ctx - chart canvas context
@@ -98,9 +86,6 @@ export function drawBox(ctx, rect, options) {
 }
 
 export function drawLabel(ctx, rect, options) {
-  if (!isLabelVisible(options)) {
-    return;
-  }
   const content = options.content;
   if (isImageOrCanvas(content)) {
     ctx.drawImage(content, rect.x, rect.y, rect.width, rect.height);

src/helpers/helpers.options.js

@@ -1,7 +1,6 @@
 import {isObject, valueOrDefault, defined} from 'chart.js/helpers';
 import {clamp} from './helpers.core';
 
-const isEnabled = (options) => options && (options.display || options.enabled);
 const isPercentString = (s) => typeof s === 'string' && s.endsWith('%');
 const toPercent = (s) => clamp(parseFloat(s) / 100, 0, 1);
 
@@ -27,14 +26,6 @@ export function getSize(size, value) {
   return size;
 }
 
-export function isLabelVisible(options) {
-  return isEnabled(options) && options.content;
-}
-
-export function isPointVisible(options) {
-  return isEnabled(options) && options.radius > 0.1;
-}
-
 export function calculateTextAlignment(size, options) {
   const {x, width} = size;
   const textAlign = options.textAlign;

src/types/box.js

@@ -1,6 +1,6 @@
 import {Element} from 'chart.js';
 import {toPadding} from 'chart.js/helpers';
-import {drawBox, drawLabel, getRelativePosition, measureLabelSize, isLabelVisible, getRectCenterPoint, getChartRect, toPosition, inBoxRange} from '../helpers';
+import {drawBox, drawLabel, getRelativePosition, measureLabelSize, getRectCenterPoint, getChartRect, toPosition, inBoxRange} from '../helpers';
 
 export default class BoxAnnotation extends Element {
   inRange(mouseX, mouseY, useFinalPosition) {
@@ -20,25 +20,22 @@ export default class BoxAnnotation extends Element {
   drawLabel(ctx) {
     const {x, y, width, height, options} = this;
     const labelOpts = options.label;
-    if (isLabelVisible(labelOpts)) {
-      // copies borderWidth to label options
-      labelOpts.borderWidth = options.borderWidth;
-      ctx.save();
-      ctx.beginPath();
-      ctx.rect(x + labelOpts.borderWidth / 2, y + labelOpts.borderWidth / 2, width - labelOpts.borderWidth, height - labelOpts.borderWidth);
-      ctx.clip();
-      const position = toPosition(labelOpts.position);
-      const padding = toPadding(labelOpts.padding);
-      const labelSize = measureLabelSize(ctx, labelOpts);
-      const labelRect = {
-        x: calculateX(this, labelSize, position, padding),
-        y: calculateY(this, labelSize, position, padding),
-        width: labelSize.width,
-        height: labelSize.height
-      };
-      drawLabel(ctx, labelRect, labelOpts);
-      ctx.restore();
-    }
+    labelOpts.borderWidth = options.borderWidth;
+    ctx.save();
+    ctx.beginPath();
+    ctx.rect(x + labelOpts.borderWidth / 2, y + labelOpts.borderWidth / 2, width - labelOpts.borderWidth, height - labelOpts.borderWidth);
+    ctx.clip();
+    const position = toPosition(labelOpts.position);
+    const padding = toPadding(labelOpts.padding);
+    const labelSize = measureLabelSize(ctx, labelOpts);
+    const labelRect = {
+      x: calculateX(this, labelSize, position, padding),
+      y: calculateY(this, labelSize, position, padding),
+      width: labelSize.width,
+      height: labelSize.height
+    };
+    drawLabel(ctx, labelRect, labelOpts);
+    ctx.restore();
   }
 
   resolveElementProperties(chart, options) {

src/types/label.js

@@ -1,19 +1,19 @@
-import {drawBox, drawLabel, measureLabelSize, isLabelVisible, getChartPoint, getRectCenterPoint, toPosition, setBorderStyle, getSize, inBoxRange, isBoundToPoint, getChartRect, getRelativePosition} from '../helpers';
+import {drawBox, drawLabel, measureLabelSize, getChartPoint, getRectCenterPoint, toPosition, setBorderStyle, getSize, inBoxRange, isBoundToPoint, getChartRect, getRelativePosition} from '../helpers';
 import {color, toPadding} from 'chart.js/helpers';
 import {Element} from 'chart.js';
 
 export default class LabelAnnotation extends Element {
 
   inRange(mouseX, mouseY, useFinalPosition) {
-    return this.visible && inBoxRange(mouseX, mouseY, this.getProps(['x', 'y', 'width', 'height'], useFinalPosition));
+    return inBoxRange(mouseX, mouseY, this.getProps(['x', 'y', 'width', 'height'], useFinalPosition));
   }
 
   getCenterPoint(useFinalPosition) {
     return getRectCenterPoint(this.getProps(['x', 'y', 'width', 'height'], useFinalPosition));
   }
 
   draw(ctx) {
-    if (!this.visible) {
+    if (!this.options.content) {
       return;
     }
     const {labelX, labelY, labelWidth, labelHeight, options} = this;
@@ -24,8 +24,8 @@ export default class LabelAnnotation extends Element {
     drawLabel(ctx, {x: labelX, y: labelY, width: labelWidth, height: labelHeight}, options);
   }
 
+  // TODO: make private in v2
   resolveElementProperties(chart, options) {
-    const visible = !!isLabelVisible(options);
     const point = !isBoundToPoint(options) ? getRectCenterPoint(getChartRect(chart, options)) : getChartPoint(chart, options);
     const padding = toPadding(options.padding);
     const labelSize = measureLabelSize(chart.ctx, options);
@@ -34,7 +34,6 @@ export default class LabelAnnotation extends Element {
     const boxVisible = options.borderWidth > 0 || (bgColor && bgColor.valid && bgColor.rgb.a > 0);
 
     const properties = {
-      visible,
       boxVisible,
       pointX: point.x,
       pointY: point.y,

src/types/line.js

@@ -1,6 +1,6 @@
 import {Element} from 'chart.js';
 import {toRadians, toPadding} from 'chart.js/helpers';
-import {clamp, scaleValue, rotated, drawBox, drawLabel, measureLabelSize, isLabelVisible, getRelativePosition} from '../helpers';
+import {clamp, scaleValue, rotated, drawBox, drawLabel, measureLabelSize, getRelativePosition} from '../helpers';
 
 const PI = Math.PI;
 const pointInLine = (p1, p2, t) => ({x: p1.x + t * (p2.x - p1.x), y: p1.y + t * (p2.y - p1.y)});
@@ -65,13 +65,16 @@ export default class LineAnnotation extends Element {
     return (sqr(x - xx) + sqr(y - yy)) < epsilon;
   }
 
+  // TODO: make private in v2
   labelIsVisible(useFinalPosition, chartArea) {
-    if (!this.labelVisible) {
+    const labelOpts = this.options.label;
+    if (!chartArea || !labelOpts || !labelOpts.enabled) {
       return false;
     }
-    return !chartArea || isLineInArea(this.getProps(['x', 'y', 'x2', 'y2'], useFinalPosition), chartArea);
+    return isLineInArea(this.getProps(['x', 'y', 'x2', 'y2'], useFinalPosition), chartArea);
   }
 
+  // TODO: make private in v2
   isOnLabel(mouseX, mouseY, useFinalPosition) {
     if (!this.labelIsVisible(useFinalPosition)) {
       return false;
@@ -115,11 +118,31 @@ export default class LineAnnotation extends Element {
   }
 
   drawLabel(ctx, chartArea) {
-    if (this.labelIsVisible(false, chartArea)) {
-      ctx.save();
-      applyLabel(ctx, this);
-      ctx.restore();
+    if (!this.labelIsVisible(false, chartArea)) {
+      return;
     }
+    const {labelX, labelY, labelWidth, labelHeight, labelRotation, labelPadding, labelTextSize, options: {label}} = this;
+
+    ctx.save();
+    ctx.translate(labelX, labelY);
+    ctx.rotate(labelRotation);
+
+    const boxRect = {
+      x: -(labelWidth / 2),
+      y: -(labelHeight / 2),
+      width: labelWidth,
+      height: labelHeight
+    };
+    drawBox(ctx, boxRect, label);
+
+    const labelTextRect = {
+      x: -(labelWidth / 2) + labelPadding.left + label.borderWidth / 2,
+      y: -(labelHeight / 2) + labelPadding.top + label.borderWidth / 2,
+      width: labelTextSize.width,
+      height: labelTextSize.height
+    };
+    drawLabel(ctx, labelTextRect, label);
+    ctx.restore();
   }
 
   resolveElementProperties(chart, options) {
@@ -155,9 +178,9 @@ export default class LineAnnotation extends Element {
     const properties = inside
       ? limitLineToArea({x, y}, {x: x2, y: y2}, chart.chartArea)
       : {x, y, x2, y2, width: Math.abs(x2 - x), height: Math.abs(y2 - y)};
+
     const label = options.label;
-    properties.labelVisible = !!isLabelVisible(label);
-    if (properties.labelVisible) {
+    if (label && label.content) {
       return loadLabelRect(properties, chart, label);
     }
     return properties;
@@ -243,30 +266,6 @@ function calculateAutoRotation(line) {
   return rotation > PI / 2 ? rotation - PI : rotation < PI / -2 ? rotation + PI : rotation;
 }
 
-function applyLabel(ctx, line) {
-  const {labelX, labelY, labelWidth, labelHeight, labelRotation, labelPadding, labelTextSize, options} = line;
-  const label = options.label;
-
-  ctx.translate(labelX, labelY);
-  ctx.rotate(labelRotation);
-
-  const boxRect = {
-    x: -(labelWidth / 2),
-    y: -(labelHeight / 2),
-    width: labelWidth,
-    height: labelHeight
-  };
-  drawBox(ctx, boxRect, label);
-
-  const labelTextRect = {
-    x: -(labelWidth / 2) + labelPadding.left + label.borderWidth / 2,
-    y: -(labelHeight / 2) + labelPadding.top + label.borderWidth / 2,
-    width: labelTextSize.width,
-    height: labelTextSize.height
-  };
-  drawLabel(ctx, labelTextRect, label);
-}
-
 // TODO: v2 remove support for xPadding and yPadding
 function getPadding(padding, xPadding, yPadding) {
   let tempPadding = padding;

src/types/point.js

@@ -1,5 +1,6 @@
 import {Element} from 'chart.js';
-import {drawPoint, inPointRange, getElementCenterPoint, resolvePointPosition} from '../helpers';
+import {drawPoint} from 'chart.js/helpers';
+import {inPointRange, getElementCenterPoint, resolvePointPosition, setBorderStyle} from '../helpers';
 
 export default class PointAnnotation extends Element {
 
@@ -13,7 +14,12 @@ export default class PointAnnotation extends Element {
   }
 
   draw(ctx) {
-    drawPoint(ctx, this, this.options);
+    const options = this.options;
+    ctx.save();
+    ctx.fillStyle = options.backgroundColor;
+    setBorderStyle(ctx, options);
+    drawPoint(ctx, options, this.x, this.y);
+    ctx.restore();
   }
 
   resolveElementProperties(chart, options) {

test/fixtures/box/label-dynamic.js

@@ -0,0 +1,56 @@
+module.exports = {
+  config: {
+    type: 'scatter',
+    options: {
+      scales: {
+        x: {
+          display: false,
+          min: 0,
+          max: 10
+        },
+        y: {
+          display: false,
+          min: 0,
+          max: 10
+        }
+      },
+      plugins: {
+        annotation: {
+          annotations: {
+            box: {
+              type: 'box',
+              xScaleID: 'x',
+              yScaleID: 'y',
+              xMin: 1,
+              xMax: 9,
+              yMin: 1,
+              yMax: 9,
+              backgroundColor: 'rgba(255, 99, 132, 0.5)',
+              borderColor: 'rgba(255, 99, 132)',
+              borderWidth: 5,
+              label: {
+                enabled: false,
+                content: 'This is dynamic!',
+              },
+              enter({chart, element}) {
+                element.options.label.enabled = true;
+                chart.draw();
+              }
+            },
+          }
+        }
+      }
+    }
+  },
+  options: {
+    canvas: {
+      width: 256,
+      height: 256
+    },
+    spriteText: true,
+    async run(chart) {
+      const el = window['chartjs-plugin-annotation']._getState(chart).elements[0];
+      await window.triggerMouseEvent(chart, 'mousemove', el.getCenterPoint());
+    }
+  }
+};