Normalize annotations elements to be based on common box model

docs/diagrams/elementBoxProps.drawio

@@ -0,0 +1 @@
+<mxfile host="Electron" modified="2021-12-10T16:40:28.953Z" agent="5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) draw.io/15.8.7 Chrome/91.0.4472.164 Electron/13.6.2 Safari/537.36" etag="xfEp3uVgfdj0fbe-stYk" version="15.8.7" type="device"><diagram id="EVLCtf8sz0nmjKRDlPg8" name="Page-1">7VfLjtsgFP0aL1PZ4EeyrD0zjapWqhRV064qGhMbFfu6mDROvr5gkziERNORMg9V403gcO81nMMBx8NZ1X0QpCk/Q065h/y88/CNh1AQ+Ej9aGQ7INM4GoBCsNwEjcCC7agBfYOuWU5bK1ACcMkaG1xCXdOltDAiBGzssBVw+60NKagDLJaEu+g9y2VpVoGSEZ9TVpT7NwfxbBipyD7YrKQtSQ6bIwjfejgTAHJoVV1GuSZvz8uQd3dh9DAxQWv5Lwnp/W4e/9iFWTNHv78sJvLTx68TU+UP4WuzYDNZud0zIGBd51QX8T2cbkom6aIhSz26UZorrJQVV71ANU05KiTtLs4zOKxebRsKFZViq0JMAvINYWbHoND0NyP/ODZYecT9IZEYzYtD7ZEW1TDMPIIl9DBLqorakvRhhkjbDPt0xTrNarpinGfAQfSF8PBch0qcJO8ii0yMD8gRnZFLZvREVGKHys5D2dbhUy1a2sQJ2rId+dkH6J1I1hLa4bzoeeWsqFV7qbihistUM8eUkd+bgYrluU5OG2C17NcVpV50cyJBDbUOaqWAX/QEtK2wglqaAwuFOkVpzuoiBSmhUmB4HRGD5MQPvuuH6IwdwqdyQ+hIOHD+TQmpT+K+8/1N0csn3NQ2JZqdM2Uwe05RI9eXSBvTPenedNzrGGHbmeGZmyp5ThFjR8RhJq9GQnW/3fXPq9IRhyd+RC+sY+LoaF77PwspQBLJQE9iMvOvdHfGtkPxGWWn11FWdcdv+X7s6B8Rvv0L</diagram></mxfile>

docs/diagrams/elementEllipseProps.drawio

@@ -0,0 +1 @@
+<mxfile host="Electron" modified="2022-04-06T13:33:15.938Z" agent="5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) draw.io/16.5.1 Chrome/96.0.4664.110 Electron/16.0.7 Safari/537.36" etag="mGhTzBLkctCHceS27j_i" version="16.5.1" type="device"><diagram id="EVLCtf8sz0nmjKRDlPg8" name="Page-1">7Vddb5swFP01PGYCG0LyOGg+VG3SJDS13cvkBQesAZcaZyH59bPBJCFO1ExKqmgqL9jH11/n+FyMhcO8nnFSpl8hppmF7Li28IOFkOPYSL4UsmmR0dBrgYSzWAftgYhtqQZtja5YTKteoADIBCv74AKKgi5EDyOcw7oftoSsP2tJEmoA0YJkJvrEYpHqXSB/j88pS9JuZmc4blty0gXrnVQpiWF9AOGJhUMOINpSXoc0U+R1vLT9pmdadwvjtBCXdAietvPhz60blnP0+i0aiC+P3wd6lD8kW+kN68WKTccAh1URUzWIbeFgnTJBo5IsVOtaai6xVOSZrDmyGJMqbWJVxVxhNx3lgtYHkF7xjEJOBd/IEN2KbM2ePj7I1fX1Xgw81Fh6IMSuI9EHINmNvedIFjRN/0AZepsyOYo8n/RtukhVtod2yWpFW7BkWRZCBrwZCLfPdajEvv/J65GJ8Q45oNMzyfRuRCU2qKwtFG4MPuUORZ84Tiu2Jb+aAHUsyUpA1SaPhteMJYUsLyRdVHIZKJqYdPVn3ZCzOFadgxJYIZp9eYHlPRxJUEChgirB4Tc9Avu+WEIhdPZCruoiNWdFEoAQkEvQvY6Ijn/kB9v0g3fCDu6t3OAaEracP0shVVpuKi8fip7PcKO+KdH4lCmd8XuK6pm+RMqYZqb70LHT0cN9Z7onvlT+e4o4NERsV3I3Esrv27R57kpH7B758USGvZWOr48D8CP8/BJOxrMfL1M7ji66ol183zjroO5ue6W7xh1e23yDRj3v/+wHDoIIBmoRg7F9pSvIUaLDyNR2dB2DyOr+/6hpO/jLxJO/</diagram></mxfile>

docs/diagrams/elementLabelProps.drawio

@@ -0,0 +1 @@
+<mxfile host="Electron" modified="2022-04-06T12:22:44.757Z" agent="5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) draw.io/16.5.1 Chrome/96.0.4664.110 Electron/16.0.7 Safari/537.36" etag="B3XS2xQ8Z6Tyesn1KG14" version="16.5.1" type="device"><diagram id="EVLCtf8sz0nmjKRDlPg8" name="Page-1">7VjZcpswFP0aHpMBBMY8eskyXaaZcTJNnjKqkUEtICLkGPz1lUCswnXqxEkmE79Y92g/594rCQ3MouyCwiT4TjwUaqbuZRqYa6ZpGLrJ/wSSl8h4ZJeAT7EnGzXAAm+RBHWJrrGH0k5DRkjIcNIFlySO0ZJ1MEgp2XSbrUjYnTWBPlKAxRKGKvoTeyyQuzCdBr9E2A+qmY2RW9ZEsGosd5IG0CObFgTONDCjhLCyFGUzFAryKl7Kfuc7auuFURSzp3SY/txeju631iy5NB+uFifs25ebEznKIwzXcsNysSyvGKBkHXtIDKJrYLoJMEOLBC5F7YZrzrGARSG3DF5UF1XNgChDWQuSi7xAJEKM5ryJrDV1SZj0GNOS9qbhH4wkFrS4rztCqblfj93QwguSmf9gydzPEh+FuyTazxBMk9JPVzgTrE5XOAxnJCS0GAiUv5ehEjjOqd0hE4AaadFpq2TaR6ISKFRmmjnLFT75DlmXOIpSvIW/igbCE+GakbTMFwWvIfZjXl5yuhDncipowjyQJ7Iiwp4nOk8TgmNW7Mueava8J0FMYtEoZZT8QT2wGworEjOZsExLdOGa49ifEsZIxEHrZUQ0nF486Go82APhYB0rGixFwpLzWy6kyMSFcfep6O4M5/YUdYeC0nBfU1RbjUtTBKaa6T51rHS0QVdHa+Ckcl5TxJEiYrmSdyMhP9/Oi9+70hFY3UOyvrK9lY6OoqOc9iMLSQmDDBOxiBNXf6Gzc9SNUDCg7PhIyt78cCeT6xv0++w6f/j6eJ7Be/0p920UexPxcGm4bMvboZUTQ/NbQZh+qlugQu5E9Sm/wkl7nrXbz/O2dYUo5lsTvjBvSEee8ipSVGCQ+ojtO1JUafZcWyqMopC7w2N3GUN6yBmuhL/ufkVYdk/SlKzpEsle7WdTb6A6qVcDmb2BSh6UgQr3qLd9uMeoF+YiMuVlqyh/8LuWEu4D7rg7t/f9YKxmAGPoNXm0FKBen9UUcKTH5POYHOu9x+QQl8d5Sg4SqZ6Sz8qlGWa3ReK0DVfad626JokKI28Zh6fQMgftC/63SqGg90yxnANTKBiDf+fig1MoN5sPaGXz5jMkOPsL</diagram></mxfile>

docs/diagrams/elementLineProps.drawio

@@ -0,0 +1 @@
+<mxfile host="Electron" modified="2022-04-06T13:35:32.574Z" agent="5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) draw.io/16.5.1 Chrome/96.0.4664.110 Electron/16.0.7 Safari/537.36" etag="oTq1D7feHSuL3TBc9qwE" version="16.5.1" type="device"><diagram id="EVLCtf8sz0nmjKRDlPg8" name="Page-1">7Vlbb9owFP41eWxF7CTAY6F3bVWlbirdS+USQ6yFOHNMCf31sxOHXGwu6wiiVXnBPr5/n33Od8CCw1l6xVAcfKc+Di3Q8VMLnlsA2HYHiC9pWeaWnufmhikjvupUGh7IG1bGjrLOiY+TWkdOachJXDeOaRThMa/ZEGN0Ue82oWF91RhNsWZ4GKNQtz4SnwfqFKBb2q8xmQbFyrbXz1tmqOisTpIEyKeLigleWHDIKOV5aZYOcSjBK3DJx12uaV1tjOGI7zJg8Ph27T2/OcP4Gvy5fzjh325/nqhZXlE4VwdWm+XLAgFG55GP5SQdCw4WAeH4IUZj2boQnAtbwGehqNmi6KMkyPrKir7DYjnMOE4rJrXjK0xnmLOl6KJaQUehp64PcFR9UZIBPWULKkSsBiJ1AaaruUuMREHB9A+QQQ2y1ALDpYabOCGvg8NwQt7QS9ZBYonmnCb5jZfNKCTTSJTHAi7MhEHCRMRVPFMNM+L7cvAgpiTi2bncgeWeC8uEhOGQhlQMO49oJDslnNHfuGGskzmhEVdPDjhyiOCVRNMB5ZzOhNHZD4l2t0FiRyfRNXDotEWho1GYYz4SREpfklWevhhdyyhsMtqHp11XI9XuH5JVV3+YQL5M3aV9EVkQ6cI6kY7Bv3YPSaKnkZjv5GgotAC8zD5HxSN03K0u9qA8djUe1bKfmUhGOeKEyk2c9Dt7Cp6NFwqBzmzvkMyC7ZJRzCL0Od4uF1ES56J9QlKJdJOg/LOvmFXGqAJLaA5b4NTVAS2t/wPp3S2Kn9O7m9uEjn8g/9f94sY2OD0d0sg/k+lMeT2rL6Z2U/PLXGQrEj0BGluOVOes8lStnKdqZF5bFrWU8FGl/FQpl0NkpRixlqWEztkYb7hURWqH2BTz7f2wX8vadM63KMvCxnAoHuxrPdcz0atWuJceZYfspJgiP7caVc3NGhO53powXEyUA6NNlN221bHffwF1b61dwKNKA1ey5SBpoBEyW/eDIXrB4fWnCXPihIcLc0B4Z1D3zp5Bi5oiHWiL4p6ZYZklZoWPniGuJXgffMKexqdBk5oSxNb4tPVfuzIeHz9LhtEmodDxmoS6PagRakoy2iO037ZwUhLIrkigomyWQCuptao8VStrpNZOwmlT5K4Kp039jkQ4NfVOF75TODV/Wuz2DyucbD1GbFBO9nbltM4R7OMFgzpWJn9sAwPpXlvvt1jsA+aSmjP0gCGRNIBptwWm7guz4Das/rJdsXx08dJvMdQBexctanwrrcU6sEa8jMBKjuqP52NR2qZ8cWCDUNdAaGc/hIpq+bduHmnKP8fhxV8=</diagram></mxfile>

docs/diagrams/elementPointProps.drawio

@@ -0,0 +1 @@
+<mxfile host="Electron" modified="2022-04-06T13:37:29.929Z" agent="5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) draw.io/16.5.1 Chrome/96.0.4664.110 Electron/16.0.7 Safari/537.36" etag="EITPSf5pb8hXLFo2LEXO" version="16.5.1" type="device"><diagram id="EVLCtf8sz0nmjKRDlPg8" name="Page-1">3Vddb9sgFP01fsxkg52Px9lJE02dNCmasj1NNCY2KjYeJrOTXz+wcWJCpnZSHLX1i+Fwgcs53As4MMrqJUdF+pXFmDrAjWsHzh0APM8F8qeQQ4tMx0ELJJzE2ugMrMkRa9DV6J7EuDQMBWNUkMIEtyzP8VYYGOKcVabZjlFz1gIl2ALWW0RtdENikepVgMkZX2GSpN3M3njWtmSoM9YrKVMUs6oHwYUDI86YaEtZHWGqyOt4afs9/KP15BjHuXhNh3BzXI1/Hf2oWIHf39Yj8fjl+0iP8gfRvV6wdlYcOgY42+cxVoO4DgyrlAi8LtBWtVZSc4mlIqOy5slijMq0sVUV28NuOswFrnuQ9niJWYYFP0gT3Qqmmj29fYCv69VZDOBqLO0JcQKR3gDJaewzR7KgafoPysDLlMlR5P7EL9OFyqLdtDtSK9rCHaE0YpTxZiDYfrehEk4mnwKDTAhPSI/OwCYzGIhKaFFZOyA6WHzKFQqTOI5LckRPjYHalmgvWNkmj4ZXSpJclreSLiy5DBVNREb1Z92QkThWncOCkVw06wpCJ5hfSJCzXBmVgrNnfAGacbFjudDZC/iqi9Sc5EnIhGCZBP0bxYNvSnja5n0Br4SDP1Q0+JaELec/pJAqLTeVn+9dUW9ARWcXQelOrwSlN7kiKhxK1MCOS6AC085070zHASPTD8yTyr9yUl0TcbDIHFsitp68GQnl+fbQfG9KR/iKDHtXHSeWjnrajywkZwIJwpQTo5l7o0zrTc1MC2xlpwMp+5Tvl5sqGafzx2yRztdH4kb3u0kaybJ7xtzoWnnXG7qsnh9MTVvv2QkXfwE=</diagram></mxfile>

docs/diagrams/elementPolygonProps.drawio

@@ -0,0 +1 @@
+<mxfile host="Electron" modified="2022-04-06T13:38:42.435Z" agent="5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) draw.io/16.5.1 Chrome/96.0.4664.110 Electron/16.0.7 Safari/537.36" etag="iPNnFQ5q4MATVNQFGyID" version="16.5.1" type="device"><diagram id="EVLCtf8sz0nmjKRDlPg8" name="Page-1">3VfLjpswFP0alqnAhiQsC/OIqlaqFFXTripPcMCqwYwxDcnX1waT4JhRUilIM8MG+/j6dY6PLzgwzptHjsrsG0swdYCbNA68cwDwPBfIl0L2HbKcBx2QcpLooBOwJgesQVejNUlwZQQKxqggpQluWFHgjTAwxDnbmWFbRs1ZS5RiC1hvELXRJ5KITO8CLE74CpM062f25mHXkqM+WO+kylDCdgMI3jsw5oyJrpQ3MaaKvJ6Xrt/DK63HhXFciGs6RE+H1fz3wY/LFXj5vp6Jr19+zPQofxGt9Yb1YsW+Z4CzukiwGsR1YLTLiMDrEm1U605qLrFM5FTWPFlMUJW1sapir7CfDnOBmwGkV/yIWY4F38sQ3QqWmj19fICv67uTGMDVWDYQ4ggifQDS49gnjmRB0/QflIHLlMlR5PnEl+lCVdkd2i1pFG3RllAaM8p4OxDsnttQCReLT4FBJoRHZEBnYJMZTEQltKhsHBDvLT7lDoVJHMcVOaDnNkAdS1QLVnWXR8srJWkhyxtJF5ZcRoomIl39WTfkJElU56hkpBDtvoLICe7OJChYoYIqwdkffAaavtiyQujbC/iqi9ScFGnEhGC5BP0b+cE3JTwe86GAI3bwp3KDb0nYcf5TCqmu5bby650r6i2nUxS6Z6b0wIgpvTFR4VSiBrYvgTKmfdO9Lx2ndKYfmJnKH8lUi4mcGfo0zGNwCIr8BVX1bBZs42vyFM9Y/lxXl/NUR3P/AQTHtRgQHX7Y7D+3WO3W8maMIb8aHtrnTbkDXpG3pnLHqI4LS0c97UcWkjOBBGFqEbPQvZFHvdDMX8BWdnkbZWX19LvUtg1+OuH9Pw==</diagram></mxfile>

docs/guide/configuration.md

@@ -55,7 +55,7 @@ const options = {
 
 | Name | Option | Value
 | ---- | ---- | ----
-| `numbers` | `properties` | `['x', 'y', 'x2', 'y2', 'width', 'height', 'pointX', 'pointY', 'labelX', 'labelY', 'labelWidth', 'labelHeight', 'radius']`
+| `numbers` | `properties` | `['x', 'y', 'x2', 'y2', 'width', 'height', 'centerX', 'centerY', 'pointX', 'pointY', 'labelX', 'labelY', 'labelWidth', 'labelHeight', 'radius']`
 | `numbers` | `type` | `number`
 
 ## Events

docs/guide/migrationV2.md

@@ -13,6 +13,46 @@ A number of changes were made to the configuration options passed to the plugin
  * `xPadding` and `yPadding` options were merged into a single `padding` object in the label configuration of line annotation to align with Chart.js options.
  * `enabled` option was replaced by `display` in the callout configuration of label annotation, in the label configuration of line and box annotations and in the arrow heads configuration of line annotation to have the same option on all elements.
 
+## Elements
+
+`chartjs-plugin-annotation` plugin version 2 normalizes the properties of the annotation elements in order to be based on common box model.
+
+#### Box annotation
+
+The following diagram is showing the element properties about a `'box'` annotation:
+
+![box](../img/elementBoxProps.png)
+
+#### Ellipse annotation
+
+The following diagram is showing the element properties about a `'ellipse'` annotation:
+
+![ellipse](../img/elementEllipseProps.png)
+
+#### Label annotation
+
+The following diagram is showing the element properties about a `'label'` annotation:
+
+![label](../img/elementLabelProps.png)
+
+#### Line annotation
+
+The following diagram is showing the element properties about a `'line'` annotation and the inner label:
+
+![line](../img/elementLineProps.png)
+
+#### Point annotation
+
+The following diagram is showing the element properties about a `'point'` annotation:
+
+![point](../img/elementPointProps.png)
+
+#### Polygon annotation
+
+The following diagram is showing the element properties about a `'polygon'` annotation:
+
+![polygon](../img/elementPolygonProps.png)
+
 ## Events
 
 `chartjs-plugin-annotation` plugin version 2 introduces the [`interaction`](options#interaction) options, to configure which events trigger annotation interactions. By default, the plugin uses the [chart interaction configuration](https://www.chartjs.org/docs/latest/configuration/interactions.html#interactions).

src/annotation.js

@@ -115,7 +115,7 @@ export default {
   defaults: {
     animations: {
       numbers: {
-        properties: ['x', 'y', 'x2', 'y2', 'width', 'height', 'pointX', 'pointY', 'labelX', 'labelY', 'labelWidth', 'labelHeight', 'radius'],
+        properties: ['x', 'y', 'x2', 'y2', 'width', 'height', 'centerX', 'centerY', 'pointX', 'pointY', 'labelX', 'labelY', 'labelWidth', 'labelHeight', 'radius'],
         type: 'number'
       },
     },

src/helpers/helpers.canvas.js

@@ -20,15 +20,14 @@ export function isImageOrCanvas(content) {
 /**
  * Set the translation on the canvas if the rotation must be applied.
  * @param {CanvasRenderingContext2D} ctx - chart canvas context
- * @param {Element} element - annotation element to use for applying the translation
+ * @param {{x, y}} point - the point of translation
  * @param {number} rotation - rotation (in degrees) to apply
  */
-export function translate(ctx, element, rotation) {
+export function translate(ctx, {x, y}, rotation) {
   if (rotation) {
-    const center = element.getCenterPoint();
-    ctx.translate(center.x, center.y);
+    ctx.translate(x, y);
     ctx.rotate(toRadians(rotation));
-    ctx.translate(-center.x, -center.y);
+    ctx.translate(-x, -y);
   }
 }
 

src/helpers/helpers.chart.js

@@ -1,5 +1,4 @@
 import {isFinite} from 'chart.js/helpers';
-import {getRectCenterPoint} from './helpers.geometric';
 import {isBoundToPoint} from './helpers.options';
 
 /**
@@ -8,6 +7,7 @@ import {isBoundToPoint} from './helpers.options';
  * @typedef { import("chart.js").Point } Point
  * @typedef { import('../../types/options').CoreAnnotationOptions } CoreAnnotationOptions
  * @typedef { import('../../types/options').PointAnnotationOptions } PointAnnotationOptions
+ * @typedef { import('../../types/options').PolygonAnnotationOptions } PolygonAnnotationOptions
  */
 
 /**
@@ -95,9 +95,9 @@ export function getChartPoint(chart, options) {
 /**
  * @param {Chart} chart
  * @param {CoreAnnotationOptions} options
- * @returns {{x?:number, y?: number, x2?: number, y2?: number, width?: number, height?: number}}
+ * @returns {{x:number, y: number, x2: number, y2: number, centerX: number, centerY: number, width: number, height: number}}
  */
-export function getChartRect(chart, options) {
+export function resolveBoxProperties(chart, options) {
   const scales = chart.scales;
   const xScale = scales[retrieveScaleID(scales, options, 'xScaleID')];
   const yScale = scales[retrieveScaleID(scales, options, 'yScaleID')];
@@ -121,43 +121,55 @@ 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
   };
 }
 
 /**
  * @param {Chart} chart
- * @param {PointAnnotationOptions} options
+ * @param {PointAnnotationOptions|PolygonAnnotationOptions} options
+ * @returns {{x:number, y: number, x2: number, y2: number, centerX: number, centerY: number, width: number, height: number}}
  */
-export function getChartCircle(chart, options) {
+function getChartCircle(chart, options) {
   const point = getChartPoint(chart, options);
+  const size = options.radius * 2;
   return {
-    x: point.x + options.xAdjust,
-    y: point.y + options.yAdjust,
-    width: options.radius * 2,
-    height: options.radius * 2
+    x: point.x - options.radius + options.xAdjust,
+    y: point.y - options.radius + options.yAdjust,
+    x2: point.x + options.radius + options.xAdjust,
+    y2: point.y + options.radius + options.yAdjust,
+    centerX: point.x + options.xAdjust,
+    centerY: point.y + options.yAdjust,
+    width: size,
+    height: size
   };
 }
 
 /**
  * @param {Chart} chart
- * @param {PointAnnotationOptions} options
- * @returns
+ * @param {PointAnnotationOptions|PolygonAnnotationOptions} options
+ * @returns {{x:number, y: number, x2: number, y2: number, centerX: number, centerY: number, width: number, height: number}}
  */
-export function resolvePointPosition(chart, options) {
+export function resolvePointProperties(chart, options) {
   if (!isBoundToPoint(options)) {
-    const box = getChartRect(chart, options);
-    const point = getRectCenterPoint(box);
+    const box = resolveBoxProperties(chart, options);
     let radius = options.radius;
     if (!radius || isNaN(radius)) {
       radius = Math.min(box.width, box.height) / 2;
       options.radius = radius;
     }
+    const size = radius * 2;
     return {
-      x: point.x + options.xAdjust,
-      y: point.y + options.yAdjust,
-      width: radius * 2,
-      height: radius * 2
+      x: box.x + options.xAdjust,
+      y: box.y + options.yAdjust,
+      x2: box.x + size + options.xAdjust,
+      y2: box.y + size + options.yAdjust,
+      centerX: box.centerX + options.xAdjust,
+      centerY: box.centerY + options.yAdjust,
+      width: size,
+      height: size
     };
   }
   return getChartCircle(chart, options);

src/helpers/helpers.core.js

@@ -17,10 +17,10 @@ export function inPointRange(point, center, radius, borderWidth) {
   return (Math.pow(point.x - center.x, 2) + Math.pow(point.y - center.y, 2)) <= Math.pow(radius + hBorderWidth, 2);
 }
 
-export function inBoxRange(point, {x, y, width, height}, axis, borderWidth) {
+export function inBoxRange(point, {x, y, x2, y2}, axis, borderWidth) {
   const hBorderWidth = borderWidth / 2;
-  const inRangeX = point.x >= x - hBorderWidth - EPSILON && point.x <= x + width + hBorderWidth + EPSILON;
-  const inRangeY = point.y >= y - hBorderWidth - EPSILON && point.y <= y + height + hBorderWidth + EPSILON;
+  const inRangeX = point.x >= x - hBorderWidth - EPSILON && point.x <= x2 + hBorderWidth + EPSILON;
+  const inRangeY = point.y >= y - hBorderWidth - EPSILON && point.y <= y2 + hBorderWidth + EPSILON;
   if (axis === 'x') {
     return inRangeX;
   } else if (axis === 'y') {
@@ -30,8 +30,8 @@ export function inBoxRange(point, {x, y, width, height}, axis, borderWidth) {
 }
 
 export function getElementCenterPoint(element, useFinalPosition) {
-  const {x, y} = element.getProps(['x', 'y'], useFinalPosition);
-  return {x, y};
+  const {centerX, centerY} = element.getProps(['centerX', 'centerY'], useFinalPosition);
+  return {x: centerX, y: centerY};
 }
 
 const isOlderPart = (act, req) => req > act || (act.length > req.length && act.slice(0, req.length) === req);

src/helpers/helpers.geometric.js

@@ -2,18 +2,6 @@
  * @typedef {import('chart.js').Point} Point
  */
 
-/**
- * @param {{x: number, y: number, width: number, height: number}} rect
- * @returns {Point}
- */
-export function getRectCenterPoint(rect) {
-  const {x, y, width, height} = rect;
-  return {
-    x: x + width / 2,
-    y: y + height / 2
-  };
-}
-
 /**
  * Rotate a `point` relative to `center` point by `angle`
  * @param {Point} point - the point to rotate

src/types/box.js

@@ -1,21 +1,21 @@
 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, resolveBoxProperties, toPosition, inBoxRange, rotated, translate, getElementCenterPoint} from '../helpers';
 
 export default class BoxAnnotation extends Element {
 
   inRange(mouseX, mouseY, axis, 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), axis, this.options.borderWidth);
+    return inBoxRange({x, y}, this.getProps(['x', 'y', 'x2', 'y2'], useFinalPosition), axis, this.options.borderWidth);
   }
 
   getCenterPoint(useFinalPosition) {
-    return getRectCenterPoint(this.getProps(['x', 'y', 'width', 'height'], useFinalPosition));
+    return getElementCenterPoint(this, useFinalPosition);
   }
 
   draw(ctx) {
     ctx.save();
-    translate(ctx, this, this.options.rotation);
+    translate(ctx, this.getCenterPoint(), this.options.rotation);
     drawBox(ctx, this, this.options);
     ctx.restore();
   }
@@ -35,7 +35,7 @@ export default class BoxAnnotation extends Element {
     };
 
     ctx.save();
-    translate(ctx, this, label.rotation);
+    translate(ctx, this.getCenterPoint(), label.rotation);
     ctx.beginPath();
     ctx.rect(x + halfBorder + padding.left, y + halfBorder + padding.top,
       width - borderWidth - padding.width, height - borderWidth - padding.height);
@@ -45,7 +45,7 @@ export default class BoxAnnotation extends Element {
   }
 
   resolveElementProperties(chart, options) {
-    return getChartRect(chart, options);
+    return resolveBoxProperties(chart, options);
   }
 }