Normalize annotations elements to be based on common box model

src/helpers/helpers.canvas.js

@@ -25,6 +25,7 @@ export function isImageOrCanvas(content) {
  */
 export function translate(ctx, element, rotation) {
   if (rotation) {
+    // TODO: remove and use centerY and centerX of the element
     const center = element.getCenterPoint();
     ctx.translate(center.x, center.y);
     ctx.rotate(toRadians(rotation));

src/helpers/helpers.chart.js

@@ -90,7 +90,9 @@ export function getChartRect(chart, options) {
     x2,
     y2,
     width: x2 - x,
-    height: y2 - y
+    height: y2 - y,
+    centerX: x + (x2 - x) / 2,
+    centerY: y + (y2 - y) / 2
   };
 }
 

src/types/base.js

@@ -0,0 +1,10 @@
+import {Element} from 'chart.js';
+
+export default class BaseAnnotation extends Element {
+
+  getCenterPoint(useFinalPosition) {
+    const {centerX, centerY} = this.getProps(['centerX', 'centerY'], useFinalPosition);
+    return {x: centerX, y: centerY};
+  }
+
+}

src/types/box.js

@@ -1,17 +1,13 @@
-import {Element} from 'chart.js';
 import {toPadding, toRadians} from 'chart.js/helpers';
-import {drawBox, drawLabel, getRelativePosition, measureLabelSize, getRectCenterPoint, getChartRect, toPosition, inBoxRange, rotated, translate} from '../helpers';
+import {drawBox, drawLabel, getRelativePosition, measureLabelSize, getChartRect, toPosition, inBoxRange, rotated, translate} from '../helpers';
+import BaseAnnotation from './base';
 
-export default class BoxAnnotation extends Element {
+export default class BoxAnnotation extends BaseAnnotation {
   inRange(mouseX, mouseY, useFinalPosition) {
     const {x, y} = rotated({x: mouseX, y: mouseY}, this.getCenterPoint(useFinalPosition), toRadians(-this.options.rotation));
     return inBoxRange(x, y, this.getProps(['x', 'y', 'width', 'height'], useFinalPosition), this.options.borderWidth);
   }
 
-  getCenterPoint(useFinalPosition) {
-    return getRectCenterPoint(this.getProps(['x', 'y', 'width', 'height'], useFinalPosition));
-  }
-
   draw(ctx) {
     const rotation = this.options.rotation;
     ctx.save();

src/types/ellipse.js

@@ -1,28 +1,23 @@
-import {Element} from 'chart.js';
 import {PI, toRadians} from 'chart.js/helpers';
-import {getRectCenterPoint, getChartRect, setBorderStyle, setShadowStyle, translate} from '../helpers';
+import {getChartRect, setBorderStyle, setShadowStyle, translate} from '../helpers';
+import BaseAnnotation from './base';
 
-export default class EllipseAnnotation extends Element {
+export default class EllipseAnnotation extends BaseAnnotation {
 
   inRange(mouseX, mouseY, useFinalPosition) {
-    return pointInEllipse({x: mouseX, y: mouseY}, this.getProps(['width', 'height'], useFinalPosition), this.options.rotation, this.options.borderWidth);
-  }
-
-  getCenterPoint(useFinalPosition) {
-    return getRectCenterPoint(this.getProps(['x', 'y', 'width', 'height'], useFinalPosition));
+    return pointInEllipse({x: mouseX, y: mouseY}, this.getProps(['width', 'height', 'centerX', 'centerY'], useFinalPosition), this.options.rotation, this.options.borderWidth);
   }
 
   draw(ctx) {
-    const {width, height, options} = this;
-    const center = this.getCenterPoint();
+    const {width, height, centerX, centerY, options} = this;
 
     ctx.save();
     translate(ctx, this, options.rotation);
     setShadowStyle(ctx, this.options);
     ctx.beginPath();
     ctx.fillStyle = options.backgroundColor;
     const stroke = setBorderStyle(ctx, options);
-    ctx.ellipse(center.x, center.y, height / 2, width / 2, PI / 2, 0, 2 * PI);
+    ctx.ellipse(centerX, centerY, height / 2, width / 2, PI / 2, 0, 2 * PI);
     ctx.fill();
     if (stroke) {
       ctx.shadowColor = options.borderShadowColor;
@@ -65,8 +60,7 @@ EllipseAnnotation.defaultRoutes = {
 };
 
 function pointInEllipse(p, ellipse, rotation, borderWidth) {
-  const {width, height} = ellipse;
-  const center = ellipse.getCenterPoint(true);
+  const {width, height, centerX, centerY} = ellipse;
   const xRadius = width / 2;
   const yRadius = height / 2;
 
@@ -78,7 +72,7 @@ function pointInEllipse(p, ellipse, rotation, borderWidth) {
   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);
+  const a = Math.pow(cosAngle * (p.x - centerX) + sinAngle * (p.y - centerY), 2);
+  const b = Math.pow(sinAngle * (p.x - centerX) - cosAngle * (p.y - centerY), 2);
   return (a / Math.pow(xRadius + hBorderWidth, 2)) + (b / Math.pow(yRadius + hBorderWidth, 2)) <= 1.0001;
 }

src/types/label.js

@@ -1,28 +1,24 @@
 import {drawBox, drawLabel, measureLabelSize, getChartPoint, getRectCenterPoint, toPosition, setBorderStyle, getSize, inBoxRange, isBoundToPoint, getChartRect, getRelativePosition, translate, rotated} from '../helpers';
 import {toPadding, toRadians, distanceBetweenPoints} from 'chart.js/helpers';
-import {Element} from 'chart.js';
+import BaseAnnotation from './base';
 
-export default class LabelAnnotation extends Element {
+export default class LabelAnnotation extends BaseAnnotation {
 
   inRange(mouseX, mouseY, useFinalPosition) {
     const {x, y} = rotated({x: mouseX, y: mouseY}, this.getCenterPoint(useFinalPosition), toRadians(-this.options.rotation));
     return inBoxRange(x, y, this.getProps(['x', 'y', 'width', 'height'], useFinalPosition), this.options.borderWidth);
   }
 
-  getCenterPoint(useFinalPosition) {
-    return getRectCenterPoint(this.getProps(['x', 'y', 'width', 'height'], useFinalPosition));
-  }
-
   draw(ctx) {
-    if (!this.options.content) {
+    const options = this.options;
+    if (!options.content) {
       return;
     }
-    const {labelX, labelY, labelWidth, labelHeight, options} = this;
     ctx.save();
     translate(ctx, this, options.rotation);
     drawCallout(ctx, this);
     drawBox(ctx, this, options);
-    drawLabel(ctx, {x: labelX, y: labelY, width: labelWidth, height: labelHeight}, options);
+    drawLabel(ctx, getLabelSize(this), options);
     ctx.restore();
   }
 
@@ -32,15 +28,10 @@ export default class LabelAnnotation extends Element {
     const padding = toPadding(options.padding);
     const labelSize = measureLabelSize(chart.ctx, options);
     const boxSize = measureRect(point, labelSize, options, padding);
-    const hBorderWidth = options.borderWidth / 2;
     const properties = {
       pointX: point.x,
       pointY: point.y,
-      ...boxSize,
-      labelX: boxSize.x + padding.left + hBorderWidth,
-      labelY: boxSize.y + padding.top + hBorderWidth,
-      labelWidth: labelSize.width,
-      labelHeight: labelSize.height
+      ...boxSize
     };
     properties.calloutPosition = options.callout.enabled && resolveCalloutPosition(properties, options.callout, options.rotation);
     return properties;
@@ -114,12 +105,18 @@ function measureRect(point, size, options, padding) {
   const width = size.width + padding.width + options.borderWidth;
   const height = size.height + padding.height + options.borderWidth;
   const position = toPosition(options.position);
+  const x = calculatePosition(point.x, width, options.xAdjust, position.x);
+  const y = calculatePosition(point.y, height, options.yAdjust, position.y);
 
   return {
-    x: calculatePosition(point.x, width, options.xAdjust, position.x),
-    y: calculatePosition(point.y, height, options.yAdjust, position.y),
+    x,
+    y,
+    x2: x + width,
+    y2: y + height,
     width,
-    height
+    height,
+    centerX: x + width / 2,
+    centerY: y + height / 2
   };
 }
 
@@ -155,16 +152,16 @@ function drawCallout(ctx, element) {
 }
 
 function getCalloutSeparatorCoord(element, position) {
-  const {x, y, width, height} = element;
+  const {x, y, x2, y2} = element;
   const adjust = getCalloutSeparatorAdjust(element, position);
   let separatorStart, separatorEnd;
   if (position === 'left' || position === 'right') {
     separatorStart = {x: x + adjust, y};
-    separatorEnd = {x: separatorStart.x, y: separatorStart.y + height};
+    separatorEnd = {x: separatorStart.x, y: y2};
   } else {
     //  position 'top' or 'bottom'
     separatorStart = {x, y: y + adjust};
-    separatorEnd = {x: separatorStart.x + width, y: separatorStart.y};
+    separatorEnd = {x: x2, y: separatorStart.y};
   }
   return {separatorStart, separatorEnd};
 }
@@ -215,13 +212,13 @@ function resolveCalloutPosition(properties, options, rotation) {
 const positions = ['left', 'bottom', 'top', 'right'];
 
 function resolveCalloutAutoPosition(properties, options, rotation) {
-  const {x, y, width, height, pointX, pointY} = properties;
-  const center = {x: x + width / 2, y: y + height / 2};
+  const {x, y, x2, y2, width, height, pointX, pointY, centerX, centerY} = properties;
+  const center = {x: centerX, y: centerY};
   const start = options.start;
   const xAdjust = getSize(width, start);
   const yAdjust = getSize(height, start);
-  const xPoints = [x, x + xAdjust, x + xAdjust, x + width];
-  const yPoints = [y + yAdjust, y + height, y, y + yAdjust];
+  const xPoints = [x, x + xAdjust, x + xAdjust, x2];
+  const yPoints = [y + yAdjust, y2, y, y2];
   const result = [];
   for (let index = 0; index < 4; index++) {
     const rotatedPoint = rotated({x: xPoints[index], y: yPoints[index]}, center, toRadians(rotation));
@@ -232,3 +229,14 @@ function resolveCalloutAutoPosition(properties, options, rotation) {
   }
   return result.sort((a, b) => a.distance - b.distance)[0].position;
 }
+
+function getLabelSize({x, y, width, height, options}) {
+  const hBorderWidth = options.borderWidth / 2;
+  const padding = toPadding(options.padding);
+  return {
+    x: x + padding.left + hBorderWidth,
+    y: y + padding.top + hBorderWidth,
+    width: width - padding.left - padding.right - options.borderWidth,
+    height: height - padding.top - padding.bottom - options.borderWidth
+  };
+}

test/specs/box.spec.js

@@ -23,8 +23,8 @@ describe('Box annotation', function() {
         for (const borderWidth of [0, 10]) {
           const halfBorder = borderWidth / 2;
           element.options.borderWidth = borderWidth;
-          for (const x of [element.x - halfBorder, element.x + element.width / 2, element.x + element.width + halfBorder]) {
-            for (const y of [element.y - halfBorder, element.y + element.height / 2, element.y + element.height + halfBorder]) {
+          for (const x of [element.x - halfBorder, element.x + element.width / 2, element.x2 + halfBorder]) {
+            for (const y of [element.y - halfBorder, element.y + element.height / 2, element.y2 + halfBorder]) {
               const point = rotated({x, y}, center, rotation / 180 * Math.PI);
               expect(element.inRange(point.x, point.y)).toEqual(true);
             }
@@ -37,14 +37,14 @@ describe('Box annotation', function() {
           const halfBorder = borderWidth / 2;
           element.options.borderWidth = borderWidth;
 
-          for (const x of [element.x - halfBorder - 1, element.x + element.width + halfBorder + 1]) {
-            for (const y of [element.y, element.y + element.height / 2, element.y + element.height]) {
+          for (const x of [element.x - halfBorder - 1, element.x2 + halfBorder + 1]) {
+            for (const y of [element.y, element.y + element.height / 2, element.y2]) {
               const point = rotated({x, y}, center, rotation / 180 * Math.PI);
               expect(element.inRange(point.x, point.y)).toEqual(false);
             }
           }
-          for (const x of [element.x, element.x + element.width / 2, element.x + element.width]) {
-            for (const y of [element.y - halfBorder - 1, element.y + element.height + halfBorder + 1]) {
+          for (const x of [element.x, element.x + element.width / 2, element.x2]) {
+            for (const y of [element.y - halfBorder - 1, element.y2 + halfBorder + 1]) {
               const point = rotated({x, y}, center, rotation / 180 * Math.PI);
               expect(element.inRange(point.x, point.y)).toEqual(false);
             }

test/specs/ellipse.spec.js

@@ -66,8 +66,7 @@ describe('Ellipse annotation', function() {
       ]);
       const elements = window.getAnnotationElements(chart);
       for (const element of elements) {
-        const center = element.getCenterPoint();
-        expect(element.inRange(center.x, center.y)).toEqual(false);
+        expect(element.inRange(element.clientX, element.clientY)).toEqual(false);
       }
     });
   });

test/specs/label.spec.js

@@ -23,8 +23,8 @@ describe('Label annotation', function() {
         for (const borderWidth of [0, 10]) {
           const halfBorder = borderWidth / 2;
           element.options.borderWidth = borderWidth;
-          for (const x of [element.x - halfBorder, element.x + element.width / 2, element.x + element.width + halfBorder]) {
-            for (const y of [element.y - halfBorder, element.y + element.height / 2, element.y + element.height + halfBorder]) {
+          for (const x of [element.x - halfBorder, element.x + element.width / 2, element.x2 + halfBorder]) {
+            for (const y of [element.y - halfBorder, element.y + element.height / 2, element.y2 + halfBorder]) {
               const point = rotated({x, y}, center, rotation / 180 * Math.PI);
               expect(element.inRange(point.x, point.y)).toEqual(true);
             }
@@ -37,14 +37,14 @@ describe('Label annotation', function() {
           const halfBorder = borderWidth / 2;
           element.options.borderWidth = borderWidth;
 
-          for (const x of [element.x - halfBorder - 1, element.x + element.width + halfBorder + 1]) {
-            for (const y of [element.y, element.y + element.height / 2, element.y + element.height]) {
+          for (const x of [element.x - halfBorder - 1, element.x2 + halfBorder + 1]) {
+            for (const y of [element.y, element.y + element.height / 2, element.y2]) {
               const point = rotated({x, y}, center, rotation / 180 * Math.PI);
               expect(element.inRange(point.x, point.y)).toEqual(false);
             }
           }
-          for (const x of [element.x, element.x + element.width / 2, element.x + element.width]) {
-            for (const y of [element.y - halfBorder - 1, element.y + element.height + halfBorder + 1]) {
+          for (const x of [element.x, element.x + element.width / 2, element.x2]) {
+            for (const y of [element.y - halfBorder - 1, element.y2 + halfBorder + 1]) {
               const point = rotated({x, y}, center, rotation / 180 * Math.PI);
               expect(element.inRange(point.x, point.y)).toEqual(false);
             }