Hide line-annotations completely outside chartArea (#458)

Author: kurkle

docs/.vuepress/config.js

@@ -69,6 +69,7 @@ module.exports = {
           collapsable: false,
           children: [
             'charts/bar',
+            'charts/line',
           ],
         },
       ]

docs/samples/charts/line.md

@@ -0,0 +1,129 @@
+# Line Chart
+
+```js chart-editor
+// <block:setup:5>
+const DATA_COUNT = 8;
+const MIN = 10;
+const MAX = 100;
+
+Utils.srand(8);
+
+
+const numberCfg = {count: DATA_COUNT, min: MIN, max: MAX};
+
+const data = {
+  labels: [10, 20, 30, 40, 50, 60, 70, 80],
+  datasets: [{
+    data: Utils.numbers(numberCfg),
+  }, {
+    data: Utils.numbers(numberCfg),
+  }, {
+    data: Utils.numbers(numberCfg),
+  }]
+};
+// </block:setup>
+
+// <block:annotation1:1>
+const annotation1 = {
+  type: 'line',
+  scaleID: 'x',
+  borderWidth: 3,
+  borderColor: 'black',
+  value: 5,
+  label: {
+    rotation: 'auto',
+    content: 'Line at x=5',
+    enabled: true
+  },
+};
+// </block:annotation1>
+
+// <block:annotation2:2>
+const annotation2 = {
+  type: 'line',
+  scaleID: 'x',
+  borderWidth: 3,
+  borderColor: 'black',
+  value: 90,
+  label: {
+    rotation: 'auto',
+    position: 'start',
+    backgroundColor: 'black',
+    content: 'Line at x=90',
+    enabled: true
+  }
+};
+// </block:annotation2>
+
+// <block:annotation3:3>
+const annotation3 = {
+  type: 'box',
+  xMin: 75,
+  xMax: 85,
+  yMin: 80,
+  yMax: 90,
+  backgroundColor: 'rgba(250,250,0,0.4)',
+  borderColor: 'rgba(0,150,0,0.2)',
+  drawTime: 'beforeDatasetsDraw',
+  borderWidth: 0,
+  cornerRadius: 0,
+};
+// </block:annotation3>
+
+
+/* <block:config:0> */
+const config = {
+  type: 'line',
+  data,
+  options: {
+    scales: {
+      x: {
+        type: 'linear',
+        bounds: 'data'
+      }
+    },
+    plugins: {
+      annotation: {
+        annotations: {
+          annotation1,
+          annotation2,
+          annotation3
+        }
+      }
+    },
+  }
+};
+/* </block:config> */
+
+var actions = [
+  {
+    name: 'Zoom out',
+    handler: function(chart) {
+      chart.scales.x.options.min = 0;
+      chart.scales.x.options.max = 100;
+      chart.update();
+    }
+  },
+  {
+    name: 'Zoom in',
+    handler: function(chart) {
+      chart.scales.x.options.min = 10;
+      chart.scales.x.options.max = 80;
+      chart.update();
+    }
+  },
+  {
+    name: 'Reset zoom',
+    handler: function(chart) {
+      chart.scales.x.options.min = undefined;
+      chart.scales.x.options.max = undefined;
+      chart.update();
+    }
+  }
+];
+
+module.exports = {
+  actions: actions,
+  config: config,
+};
+```

src/types/line.js

@@ -9,21 +9,30 @@ const interpolateX = (y, p1, p2) => pointInLine(p1, p2, Math.abs((y - p1.y) / (p
 const interpolateY = (x, p1, p2) => pointInLine(p1, p2, Math.abs((x - p1.x) / (p2.x - p1.x))).y;
 const toPercent = (s) => typeof s === 'string' && s.endsWith('%') && parseFloat(s) / 100;
 
+function isLineInArea({x, y, x2, y2}, {top, right, bottom, left}) {
+  return !(
+    (x < left && x2 < left) ||
+    (x > right && x2 > right) ||
+    (y < top && y2 < top) ||
+    (y > bottom && y2 > bottom)
+  );
+}
+
 function limitPointToArea({x, y}, p2, {top, right, bottom, left}) {
   if (x < left) {
-    y = p2.x < left ? NaN : interpolateY(left, {x, y}, p2);
+    y = interpolateY(left, {x, y}, p2);
     x = left;
   }
   if (x > right) {
-    y = p2.x > right ? NaN : interpolateY(right, {x, y}, p2);
+    y = interpolateY(right, {x, y}, p2);
     x = right;
   }
   if (y < top) {
-    x = p2.y < top ? NaN : interpolateX(top, {x, y}, p2);
+    x = interpolateX(top, {x, y}, p2);
     y = top;
   }
   if (y > bottom) {
-    x = p2.y > bottom ? NaN : interpolateX(bottom, {x, y}, p2);
+    x = interpolateX(bottom, {x, y}, p2);
     y = bottom;
   }
   return {x, y};
@@ -58,9 +67,11 @@ export default class LineAnnotation extends Element {
     return (sqr(x - xx) + sqr(y - yy)) < epsilon;
   }
 
-  labelIsVisible() {
+  labelIsVisible(chartArea) {
     const label = this.options.label;
-    return label && label.enabled && label.content;
+
+    const inside = !chartArea || isLineInArea(this, chartArea);
+    return inside && label && label.enabled && label.content;
   }
 
   isOnLabel(mouseX, mouseY) {
@@ -107,7 +118,7 @@ export default class LineAnnotation extends Element {
   }
 
   drawLabel(ctx, chartArea) {
-    if (this.labelIsVisible()) {
+    if (this.labelIsVisible(chartArea)) {
       ctx.save();
       drawLabel(ctx, this, chartArea);
       ctx.restore();
@@ -143,7 +154,10 @@ export default class LineAnnotation extends Element {
         y2 = scaleValue(yScale, options.yMax, y2);
       }
     }
-    return limitLineToArea({x, y}, {x: x2, y: y2}, chart.chartArea);
+    const inside = isLineInArea({x, y, x2, y2}, chart.chartArea);
+    return inside
+      ? limitLineToArea({x, y}, {x: x2, y: y2}, chart.chartArea)
+      : {x, y, x2, y2, width: Math.abs(x2 - x), height: Math.abs(y2 - y)};
   }
 }