Fix drawing of lines with points out of chartArea (#414)

* Fix drawing of lines with points out of chartArea

* CC

* Revert "CC"

This reverts commit 8b9caf3.

Author: kurkle

src/helpers.js

@@ -3,17 +3,9 @@ import {isFinite} from 'chart.js/helpers';
 const PI = Math.PI;
 const HALF_PI = PI / 2;
 
-function inArea(scale, pixel) {
-  const area = scale.chart.chartArea;
-  return scale.isHorizontal()
-    ? pixel >= area.left && pixel <= area.right
-    : pixel >= area.top && pixel <= area.bottom;
-}
-
 export function scaleValue(scale, value, fallback) {
   value = typeof value === 'number' ? value : scale.parse(value);
-  value = isFinite(value) ? scale.getPixelForValue(value) : fallback;
-  return inArea(scale, value) ? value : fallback;
+  return isFinite(value) ? scale.getPixelForValue(value) : fallback;
 }
 
 /**

src/types/line.js

@@ -12,6 +12,32 @@ 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 limitPointToArea({x, y}, p2, {top, right, bottom, left}) {
+  if (x < left) {
+    y = p2.x < left ? NaN : interpolateY(left, {x, y}, p2);
+    x = left;
+  }
+  if (x > right) {
+    y = p2.x > right ? NaN : interpolateY(right, {x, y}, p2);
+    x = right;
+  }
+  if (y < top) {
+    x = p2.y < top ? NaN : interpolateX(top, {x, y}, p2);
+    y = top;
+  }
+  if (y > bottom) {
+    x = p2.y > bottom ? NaN : interpolateX(bottom, {x, y}, p2);
+    y = bottom;
+  }
+  return {x, y};
+}
+
+function limitLineToArea(p1, p2, area) {
+  const {x, y} = limitPointToArea(p1, p2, area);
+  const {x: x2, y: y2} = limitPointToArea(p2, p1, area);
+  return {x, y, x2, y2, width: Math.abs(x2 - x), height: Math.abs(y2 - y)};
+}
+
 export default class LineAnnotation extends Element {
   intersects(x, y, epsilon) {
     epsilon = epsilon || 0.001;
@@ -112,14 +138,7 @@ export default class LineAnnotation extends Element {
         y2 = scaleValue(yScale, options.yMax, y2);
       }
     }
-    return {
-      x,
-      y,
-      x2,
-      y2,
-      width: x2 - x,
-      height: y2 - y
-    };
+    return limitLineToArea({x, y}, {x: x2, y: y2}, chart.chartArea);
   }
 }
 

test/fixtures/box/partial-range.js

@@ -0,0 +1,38 @@
+module.exports = {
+  config: {
+    type: 'line',
+    data: {
+      datasets: [{
+        data: [10, 20, 30, 0, 55],
+      }],
+      labels: ['A', 'B', 'C', 'D', 'E']
+    },
+    options: {
+      scales: {
+        y: {
+          max: 60
+        },
+      },
+      plugins: {
+        legend: false,
+        annotation: {
+          annotations: {
+            annotation1: {
+              type: 'box',
+              backgroundColor: 'rgba(255, 99, 132, 0.25)',
+              borderWidth: 3,
+              borderColor: 'black',
+              xMin: 'B',
+              xMax: 'C',
+              yMin: 20,
+              yMax: 700,
+            }
+          }
+        }
+      },
+    }
+  },
+  options: {
+    spriteText: true,
+  }
+};

test/fixtures/box/partial-range.png

@@ -0,0 +1,38 @@
+module.exports = {
+  config: {
+    type: 'line',
+    data: {
+      datasets: [{
+        data: [10, 20, 30, 0, 55],
+      }],
+      labels: ['A', 'B', 'C', 'D', 'E']
+    },
+    options: {
+      scales: {
+        y: {
+          max: 60
+        },
+      },
+      plugins: {
+        legend: false,
+        annotation: {
+          annotations: {
+            annotation1: {
+              type: 'ellipse',
+              backgroundColor: 'rgba(255, 99, 132, 0.25)',
+              borderWidth: 3,
+              borderColor: 'black',
+              xMin: 'B',
+              xMax: 'C',
+              yMin: 20,
+              yMax: 700,
+            }
+          }
+        }
+      },
+    }
+  },
+  options: {
+    spriteText: true,
+  }
+};

test/fixtures/ellipse/partial-range.js

@@ -0,0 +1,45 @@
+module.exports = {
+  config: {
+    type: 'line',
+    options: {
+      scales: {
+        x: {type: 'linear', min: 0, max: 10},
+        y: {type: 'linear', min: 0, max: 10, reverse: true}
+      },
+      plugins: {
+        legend: false,
+        annotation: {
+          annotations: [
+            {
+              type: 'line',
+              xMin: 3,
+              xMax: 5,
+              yMin: 11,
+              yMax: 8,
+              borderColor: 'blue'
+            },
+            {
+              type: 'line',
+              xMin: 5,
+              xMax: 5,
+              yMin: 8,
+              yMax: 11,
+              borderColor: 'purple'
+            },
+            {
+              type: 'line',
+              xMin: 5,
+              xMax: 7,
+              yMin: 8,
+              yMax: 11,
+              borderColor: 'red'
+            }
+          ]
+        }
+      },
+    }
+  },
+  options: {
+    spriteText: true,
+  }
+};

test/fixtures/ellipse/partial-range.png

@@ -0,0 +1,45 @@
+module.exports = {
+  config: {
+    type: 'line',
+    options: {
+      scales: {
+        x: {type: 'linear', min: 0, max: 10},
+        y: {type: 'linear', min: 0, max: 10}
+      },
+      plugins: {
+        legend: false,
+        annotation: {
+          annotations: [
+            {
+              type: 'line',
+              xMin: 3,
+              xMax: 5,
+              yMin: 11,
+              yMax: 8,
+              borderColor: 'blue'
+            },
+            {
+              type: 'line',
+              xMin: 5,
+              xMax: 5,
+              yMin: 8,
+              yMax: 11,
+              borderColor: 'purple'
+            },
+            {
+              type: 'line',
+              xMin: 5,
+              xMax: 7,
+              yMin: 8,
+              yMax: 11,
+              borderColor: 'red'
+            }
+          ]
+        }
+      },
+    }
+  },
+  options: {
+    spriteText: true,
+  }
+};