Merge remote-tracking branch 'origin/master' into innerLabelProto

Conflicts:
	src/helpers/helpers.options.js
	types/options.d.ts

Author: stockiNail

docs/guide/configuration.md

@@ -75,7 +75,7 @@ The `init` option is scriptable but it doesn't get the [options context](./optio
 This is the signature of the scriptable option:
 
 ```javascript
-({chart, properties, options}) => void | boolean | AnnotationBoxModel
+({chart, properties, options}) => void | boolean | AnnotationElement
 ```
 
 where the properties is the element model

docs/samples/point/initAnim.md

@@ -24,11 +24,6 @@ const annotation1 = {
   borderRadius: 4,
   borderWidth: 1,
   init: true,
-  label: {
-    display: true,
-    content: 'Fade',
-    textAlign: 'center'
-  },
   radius: 40,
   xMax: 6.5,
   xMin: 4.5,
@@ -54,11 +49,6 @@ const annotation2 = {
   borderRadius: 4,
   borderWidth: 1,
   init: () => ({centerY: 0}),
-  label: {
-    display: true,
-    content: 'Flyin from top',
-    textAlign: 'center'
-  },
   radius: 40,
   xMax: 2.5,
   xMin: 0.5,
@@ -84,11 +74,6 @@ const annotation3 = {
   borderRadius: 4,
   borderWidth: 1,
   init: () => ({centerX: 0}),
-  label: {
-    display: true,
-    content: 'Flyin from left',
-    textAlign: 'center'
-  },
   radius: 40,
   xMax: 10.5,
   xMin: 8.5,

package-lock.json

@@ -2,7 +2,7 @@
   "name": "chartjs-plugin-annotation",
   "homepage": "https://www.chartjs.org/chartjs-plugin-annotation/index",
   "description": "Annotations for Chart.js",
-  "version": "2.1.2",
+  "version": "2.2.1",
   "author": "Evert Timberg <[email protected]>",
   "license": "MIT",
   "main": "dist/chartjs-plugin-annotation.js",
@@ -47,7 +47,7 @@
     "@simonbrunel/vuepress-plugin-versions": "^0.2.0",
     "@typescript-eslint/eslint-plugin": "^5.51.0",
     "@typescript-eslint/parser": "^5.51.0",
-    "chart.js": "^4.1.2",
+    "chart.js": "^4.2.1",
     "chartjs-test-utils": "^0.5.0",
     "concurrently": "^7.6.0",
     "cross-env": "^7.0.3",

package.json

@@ -1,5 +1,5 @@
 import {Animations} from 'chart.js';
-import {isObject, defined} from 'chart.js/helpers';
+import {isObject, isArray, defined} from 'chart.js/helpers';
 import {eventHooks} from './events';
 import {elementHooks} from './hooks';
 import {annotationTypes} from './types';
@@ -9,6 +9,8 @@ const directUpdater = {
 };
 
 const hooks = eventHooks.concat(elementHooks);
+const resolve = (value, optDefs) => isObject(optDefs) ? resolveObj(value, optDefs) : value;
+
 
 /**
  * @typedef { import("chart.js").Chart } Chart
@@ -131,7 +133,11 @@ function resolveObj(resolver, defs) {
   for (const prop of Object.keys(defs)) {
     const optDefs = defs[prop];
     const value = resolver[prop];
-    result[prop] = isObject(optDefs) && !isIndexable(prop) ? resolveObj(value, optDefs) : value;
+    if (isIndexable(prop) && isArray(value)) {
+      result[prop] = value.map((item) => resolve(item, optDefs));
+    } else {
+      result[prop] = resolve(value, optDefs);
+    }
   }
   return result;
 }

src/elements.js

@@ -177,9 +177,9 @@ export function resolveLineProperties(chart, options) {
  * @param {boolean} [centerBased=false]
  * @returns {AnnotationBoxModel}
  */
-export function resolveBoxAndLabelProperties(chart, options, centerBased) {
+export function resolveBoxAndLabelProperties(chart, options) {
   const properties = resolveBoxProperties(chart, options);
-  properties.initProperties = initAnimationProperties(chart, properties, options, centerBased);
+  properties.initProperties = initAnimationProperties(chart, properties, options);
   properties.elements = [{
     type: 'label',
     optionScope: 'label',

src/helpers/helpers.chart.js

@@ -1,15 +1,27 @@
-import {isObject, isFunction, isArray, toFont, valueOrDefault, defined, callback} from 'chart.js/helpers';
+import {isObject, isFunction, isArray, toFont, valueOrDefault, defined, callback as invoke} from 'chart.js/helpers';
 import {clamp} from './helpers.core';
 
 const isPercentString = (s) => typeof s === 'string' && s.endsWith('%');
 const toPercent = (s) => parseFloat(s) / 100;
 const toPositivePercent = (s) => clamp(toPercent(s), 0, 1);
 
+const boxAppering = (x, y) => ({x, y, x2: x, y2: y, width: 0, height: 0});
+const defaultInitAnimation = {
+  box: (properties) => boxAppering(properties.centerX, properties.centerY),
+  doughnutLabel: (properties) => boxAppering(properties.centerX, properties.centerY),
+  ellipse: (properties) => ({centerX: properties.centerX, centerY: properties.centerX, radius: 0, width: 0, height: 0}),
+  label: (properties) => boxAppering(properties.centerX, properties.centerY),
+  line: (properties) => boxAppering(properties.x, properties.y),
+  point: (properties) => ({centerX: properties.centerX, centerY: properties.centerY, radius: 0, width: 0, height: 0}),
+  polygon: (properties) => boxAppering(properties.centerX, properties.centerY)
+};
+
 /**
  * @typedef { import('chart.js').FontSpec } FontSpec
  * @typedef { import('chart.js').Point } Point
  * @typedef { import('chart.js').Padding } Padding
  * @typedef { import('../../types/element').AnnotationBoxModel } AnnotationBoxModel
+ * @typedef { import('../../types/element').AnnotationElement } AnnotationElement
  * @typedef { import('../../types/options').AnnotationPointCoordinates } AnnotationPointCoordinates
  * @typedef { import('../../types/label').CoreLabelOptions } CoreLabelOptions
  * @typedef { import('../../types/label').LabelPositionObject } LabelPositionObject
@@ -151,17 +163,16 @@ function calculateLabelPosition(start, size, adjust = 0, position) {
  * @param {Chart} chart
  * @param {AnnotationBoxModel} properties
  * @param {CoreAnnotationOptions} options
- * @param {boolean} [centerBased=false]
- * @returns {AnnotationBoxModel}
+ * @returns {AnnotationElement}
  */
-export function initAnimationProperties(chart, properties, options, centerBased = false) {
+export function initAnimationProperties(chart, properties, options) {
   const initAnim = options.init;
   if (!initAnim) {
     return;
   } else if (initAnim === true) {
-    return applyDefault(properties, centerBased);
+    return applyDefault(properties, options);
   }
-  return checkCallbackResult(properties, centerBased, callback(initAnim, [{chart, properties, options}]));
+  return execCallback(chart, properties, options);
 }
 
 /**
@@ -183,16 +194,15 @@ export function loadHooks(options, hooks, hooksContainer) {
   return activated;
 }
 
-function applyDefault({centerX, centerY}, centerBased) {
-  if (centerBased) {
-    return {centerX, centerY, radius: 0, width: 0, height: 0};
-  }
-  return {x: centerX, y: centerY, x2: centerX, y2: centerY, width: 0, height: 0};
+function applyDefault(properties, options) {
+  const type = options.type || 'line';
+  return defaultInitAnimation[type](properties);
 }
 
-function checkCallbackResult(properties, centerBased, result) {
+function execCallback(chart, properties, options) {
+  const result = invoke(options.init, [{chart, properties, options}]);
   if (result === true) {
-    return applyDefault(properties, centerBased);
+    return applyDefault(properties, options);
   } else if (isObject(result)) {
     return result;
   }

src/helpers/helpers.options.js

@@ -44,7 +44,7 @@ export default class EllipseAnnotation extends Element {
   }
 
   resolveElementProperties(chart, options) {
-    return resolveBoxAndLabelProperties(chart, options, true);
+    return resolveBoxAndLabelProperties(chart, options);
   }
 
 }

src/types/ellipse.js

@@ -39,7 +39,7 @@ export default class PointAnnotation extends Element {
 
   resolveElementProperties(chart, options) {
     const properties = resolvePointProperties(chart, options);
-    properties.initProperties = initAnimationProperties(chart, properties, options, true);
+    properties.initProperties = initAnimationProperties(chart, properties, options);
     return properties;
   }
 }

src/types/point.js

@@ -4,7 +4,7 @@ describe('Initial animation', function() {
     box: 'x',
     ellipse: 'width',
     label: 'x',
-    line: 'x',
+    line: 'x2',
     point: 'radius',
     polygon: 'y'
   };