Move default init animation logic to each annotation element

src/helpers/helpers.chart.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, element) {
  const properties = resolveBoxProperties(chart, options);
- properties.initProperties = initAnimationProperties(chart, properties, options, centerBased);
+ properties.initProperties = initAnimationProperties(chart, properties, options, element);
  properties.elements = [{
  type: 'label',
  optionScope: 'label',

src/helpers/helpers.options.js

@@ -1,4 +1,4 @@
-import {isObject, isFunction, valueOrDefault, defined, callback} from 'chart.js/helpers';
+import {isObject, isFunction, valueOrDefault, defined, callback as invoke} from 'chart.js/helpers';
 import {clamp} from './helpers.core';
 
 const isPercentString = (s) => typeof s === 'string' && s.endsWith('%');
@@ -8,6 +8,7 @@ const toPositivePercent = (s) => clamp(toPercent(s), 0, 1);
 /**
  * @typedef { import("chart.js").Chart } Chart
  * @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
@@ -93,17 +94,17 @@ export function isBoundToPoint(options) {
  * @param {Chart} chart
  * @param {AnnotationBoxModel} properties
  * @param {CoreAnnotationOptions} options
- * @param {boolean} [centerBased=false]
+ * @param {AnnotationElement} element
  * @returns {AnnotationBoxModel}
  */
-export function initAnimationProperties(chart, properties, options, centerBased = false) {
+export function initAnimationProperties(chart, properties, options, element) {
  const initAnim = options.init;
  if (!initAnim) {
  return;
  } else if (initAnim === true) {
- return applyDefault(properties, centerBased);
+ return applyDefault(chart, properties, options, element);
  }
- return checkCallbackResult(properties, centerBased, callback(initAnim, [{chart, properties, options}]));
+ return execCallback(chart, properties, options, element);
 }
 
 /**
@@ -125,17 +126,16 @@ 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(chart, properties, options, element) {
+ return element.getInitAnimationProperties(chart, properties, options);
 }
 
-function checkCallbackResult(properties, centerBased, result) {
+function execCallback(chart, properties, options, element) {
+ const result = invoke(options.init, [{chart, properties, options}]);
  if (result === true) {
- return applyDefault(properties, centerBased);
+ return applyDefault(chart, properties, options, element);
  } else if (isObject(result)) {
  return result;
  }
+ return;
 }

src/types/box.js

@@ -20,12 +20,17 @@ export default class BoxAnnotation extends Element {
  ctx.restore();
  }
 
+ getInitAnimationProperties(chart, properties) {
+ const {centerX, centerY} = properties;
+ return {x: centerX, y: centerY, x2: centerX, y2: centerY, width: 0, height: 0};
+ }
+
  get label() {
  return this.elements && this.elements[0];
  }
 
  resolveElementProperties(chart, options) {
- return resolveBoxAndLabelProperties(chart, options);
+ return resolveBoxAndLabelProperties(chart, options, this);
  }
 }
 

src/types/ellipse.js

@@ -22,6 +22,11 @@ export default class EllipseAnnotation extends Element {
  return getElementCenterPoint(this, useFinalPosition);
  }
 
+ getInitAnimationProperties(chart, properties) {
+ const {centerX, centerY} = properties;
+ return {centerX, centerY, radius: 0, width: 0, height: 0};
+ }
+
  draw(ctx) {
  const {width, height, centerX, centerY, options} = this;
  ctx.save();
@@ -44,7 +49,7 @@ export default class EllipseAnnotation extends Element {
  }
 
  resolveElementProperties(chart, options) {
- return resolveBoxAndLabelProperties(chart, options, true);
+ return resolveBoxAndLabelProperties(chart, options, this);
  }
 
 }

src/types/label.js

@@ -29,6 +29,11 @@ export default class LabelAnnotation extends Element {
  ctx.restore();
  }
 
+ getInitAnimationProperties(chart, properties) {
+ const {centerX, centerY} = properties;
+ return {x: centerX, y: centerY, x2: centerX, y2: centerY, width: 0, height: 0};
+ }
+
  resolveElementProperties(chart, options) {
  let point;
  if (!isBoundToPoint(options)) {
@@ -41,7 +46,7 @@ export default class LabelAnnotation extends Element {
  const labelSize = measureLabelSize(chart.ctx, options);
  const boxSize = measureRect(point, labelSize, options, padding);
  return {
- initProperties: initAnimationProperties(chart, boxSize, options),
+ initProperties: initAnimationProperties(chart, boxSize, options, this),
  pointX: point.x,
  pointY: point.y,
  ...boxSize,

src/types/line.js

@@ -40,6 +40,11 @@ export default class LineAnnotation extends Element {
  return getElementCenterPoint(this, useFinalPosition);
  }
 
+ getInitAnimationProperties(chart, properties) {
+ const {x, y} = properties;
+ return {x, y, x2: x, y2: y, width: 0, height: 0};
+ }
+
  draw(ctx) {
  const {x, y, x2, y2, cp, options} = this;
 
@@ -82,7 +87,7 @@ export default class LineAnnotation extends Element {
  : {x, y, x2, y2, width: Math.abs(x2 - x), height: Math.abs(y2 - y)};
  properties.centerX = (x2 + x) / 2;
  properties.centerY = (y2 + y) / 2;
- properties.initProperties = initAnimationProperties(chart, properties, options);
+ properties.initProperties = initAnimationProperties(chart, properties, options, this);
  if (options.curve) {
  const p1 = {x: properties.x, y: properties.y};
  const p2 = {x: properties.x2, y: properties.y2};

src/types/point.js

@@ -18,6 +18,11 @@ export default class PointAnnotation extends Element {
  return getElementCenterPoint(this, useFinalPosition);
  }
 
+ getInitAnimationProperties(chart, properties) {
+ const {centerX, centerY} = properties;
+ return {centerX, centerY, radius: 0, width: 0, height: 0};
+ }
+
  draw(ctx) {
  const options = this.options;
  const borderWidth = options.borderWidth;
@@ -39,7 +44,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, this);
  return properties;
  }
 }

src/types/polygon.js

@@ -19,6 +19,11 @@ export default class PolygonAnnotation extends Element {
  return getElementCenterPoint(this, useFinalPosition);
  }
 
+ getInitAnimationProperties(chart, properties) {
+ const {centerX, centerY} = properties;
+ return {x: centerX, y: centerY, x2: centerX, y2: centerY, width: 0, height: 0};
+ }
+
  draw(ctx) {
  const {elements, options} = this;
  ctx.save();
@@ -53,7 +58,7 @@ export default class PolygonAnnotation extends Element {
  let rad = rotation * RAD_PER_DEG;
  for (let i = 0; i < sides; i++, rad += angle) {
  const elProps = buildPointElement(properties, options, rad);
- elProps.initProperties = initAnimationProperties(chart, properties, options);
+ elProps.initProperties = initAnimationProperties(chart, properties, options, this);
  elements.push(elProps);
  }
  properties.elements = elements;

test/specs/animation.spec.js

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