Properly consider the border thickness on the annotations' events

src/helpers/helpers.core.js

@@ -7,18 +7,20 @@ export function clampAll(obj, from, to) {
   return obj;
 }
 
-export function inPointRange(point, center, radius) {
+export function inPointRange(point, center, radius, borderWidth) {
   if (!point || !center || radius <= 0) {
     return false;
   }
-  return (Math.pow(point.x - center.x, 2) + Math.pow(point.y - center.y, 2)) <= Math.pow(radius, 2);
+  const hBorderWidth = borderWidth / 2 || 0;
+  return (Math.pow(point.x - center.x, 2) + Math.pow(point.y - center.y, 2)) <= Math.pow(radius + hBorderWidth, 2);
 }
 
-export function inBoxRange(mouseX, mouseY, {x, y, width, height}) {
-  return mouseX >= x &&
-         mouseX <= x + width &&
-         mouseY >= y &&
-         mouseY <= y + height;
+export function inBoxRange(mouseX, mouseY, {x, y, width, height}, borderWidth) {
+  const hBorderWidth = borderWidth / 2 || 0;
+  return mouseX >= x - hBorderWidth &&
+         mouseX <= x + width + hBorderWidth &&
+         mouseY >= y - hBorderWidth &&
+         mouseY <= y + height + hBorderWidth;
 }
 
 export function getElementCenterPoint(element, useFinalPosition) {

src/types/box.js

@@ -4,7 +4,7 @@ import {drawBox, drawLabel, getRelativePosition, measureLabelSize, getRectCenter
 
 export default class BoxAnnotation extends Element {
   inRange(mouseX, mouseY, useFinalPosition) {
-    return inBoxRange(mouseX, mouseY, this.getProps(['x', 'y', 'width', 'height'], useFinalPosition));
+    return inBoxRange(mouseX, mouseY, this.getProps(['x', 'y', 'width', 'height'], useFinalPosition), this.options.borderWidth);
   }
 
   getCenterPoint(useFinalPosition) {

src/types/ellipse.js

@@ -5,7 +5,7 @@ import {getRectCenterPoint, getChartRect, setBorderStyle, setShadowStyle} from '
 export default class EllipseAnnotation extends Element {
 
   inRange(mouseX, mouseY, useFinalPosition) {
-    return pointInEllipse({x: mouseX, y: mouseY}, this.getProps(['x', 'y', 'width', 'height'], useFinalPosition), this.options.rotation);
+    return pointInEllipse({x: mouseX, y: mouseY}, this.getProps(['width', 'height'], useFinalPosition), this.options.rotation, this.options.borderWidth);
   }
 
   getCenterPoint(useFinalPosition) {
@@ -68,7 +68,7 @@ EllipseAnnotation.defaultRoutes = {
   backgroundColor: 'color'
 };
 
-function pointInEllipse(p, ellipse, rotation) {
+function pointInEllipse(p, ellipse, rotation, borderWidth) {
   const {width, height} = ellipse;
   const center = ellipse.getCenterPoint(true);
   const xRadius = width / 2;
@@ -79,9 +79,10 @@ function pointInEllipse(p, ellipse, rotation) {
   }
   // https://stackoverflow.com/questions/7946187/point-and-ellipse-rotated-position-test-algorithm
   const angle = toRadians(rotation || 0);
+  const hBorderWidth = borderWidth / 2 || 0;
   const cosAngle = Math.cos(angle);
   const sinAngle = Math.sin(angle);
   const a = Math.pow(cosAngle * (p.x - center.x) + sinAngle * (p.y - center.y), 2);
   const b = Math.pow(sinAngle * (p.x - center.x) - cosAngle * (p.y - center.y), 2);
-  return (a / Math.pow(xRadius, 2)) + (b / Math.pow(yRadius, 2)) <= 1;
+  return (a / Math.pow(xRadius + hBorderWidth, 2)) + (b / Math.pow(yRadius + hBorderWidth, 2)) <= 1;
 }

src/types/label.js

@@ -5,7 +5,7 @@ import {Element} from 'chart.js';
 export default class LabelAnnotation extends Element {
 
   inRange(mouseX, mouseY, useFinalPosition) {
-    return inBoxRange(mouseX, mouseY, this.getProps(['x', 'y', 'width', 'height'], useFinalPosition));
+    return inBoxRange(mouseX, mouseY, this.getProps(['x', 'y', 'width', 'height'], useFinalPosition), this.options.borderWidth);
   }
 
   getCenterPoint(useFinalPosition) {

src/types/line.js

@@ -87,8 +87,9 @@ export default class LineAnnotation extends Element {
     }
     const {labelX, labelY, labelWidth, labelHeight, labelRotation} = this.getProps(['labelX', 'labelY', 'labelWidth', 'labelHeight', 'labelRotation'], useFinalPosition);
     const {x, y} = rotated({x: mouseX, y: mouseY}, {x: labelX, y: labelY}, -labelRotation);
-    const w2 = labelWidth / 2;
-    const h2 = labelHeight / 2;
+    const hBorderWidth = this.options.label.borderWidth / 2 || 0;
+    const w2 = labelWidth / 2 + hBorderWidth;
+    const h2 = labelHeight / 2 + hBorderWidth;
     return x >= labelX - w2 && x <= labelX + w2 &&
       y >= labelY - h2 && y <= labelY + h2;
   }

src/types/point.js

@@ -6,7 +6,7 @@ export default class PointAnnotation extends Element {
 
   inRange(mouseX, mouseY, useFinalPosition) {
     const {width} = this.getProps(['width'], useFinalPosition);
-    return inPointRange({x: mouseX, y: mouseY}, this.getCenterPoint(useFinalPosition), width / 2 + this.options.borderWidth);
+    return inPointRange({x: mouseX, y: mouseY}, this.getCenterPoint(useFinalPosition), width / 2, this.options.borderWidth);
   }
 
   getCenterPoint(useFinalPosition) {

src/types/polygon.js

@@ -5,7 +5,7 @@ import {setBorderStyle, resolvePointPosition, getElementCenterPoint, setShadowSt
 export default class PolygonAnnotation extends Element {
 
   inRange(mouseX, mouseY, useFinalPosition) {
-    const vertices = getVertices(this.getProps(['x', 'y'], useFinalPosition), this.options);
+    const vertices = getVertices(this.getProps(['x', 'y'], useFinalPosition), this.options, true);
     return vertices && vertices.length > 0 && pointIsInPolygon(vertices, mouseX, mouseY);
   }
 
@@ -81,15 +81,16 @@ PolygonAnnotation.defaultRoutes = {
   backgroundColor: 'color'
 };
 
-function getVertices(point, options) {
+function getVertices(point, options, useBorderWidth = false) {
   const {sides, radius} = options;
+  const hBorderWidth = useBorderWidth ? options.borderWidth / 2 || 0 : 0;
   let angle = (2 * PI) / sides;
   let rad = options.rotation * RAD_PER_DEG;
   const vertices = new Array();
-  addVertex(vertices, point, rad, radius);
+  addVertex(vertices, point, rad, radius + hBorderWidth);
   for (let i = 0; i < sides; i++) {
     rad += angle;
-    addVertex(vertices, point, rad, radius);
+    addVertex(vertices, point, rad, radius + hBorderWidth);
   }
   return vertices;
 }