update

docs/samples/polygon/basic.md

@@ -132,7 +132,7 @@ const actions = [
     }
   },
   {
-    name: 'Remove a side to annotation 1',
+    name: 'Remove a side from annotation 1',
     handler: function(chart) {
       chart.options.plugins.annotation.annotations.annotation1.sides--;
       chart.update();

src/annotation.js

@@ -3,31 +3,22 @@ import {clipArea, unclipArea, isObject, isArray} from 'chart.js/helpers';
 import {handleEvent, hooks, updateListeners} from './events';
 import {adjustScaleRange, verifyScaleOptions} from './scale';
 import {annotationTypes} from './types';
+import {requireVersion} from './helpers';
 import {version} from '../package.json';
 
 const chartStates = new Map();
-const versionParts = Chart.version.split('.');
 
 export default {
   id: 'annotation',
 
   version,
 
+  beforeRegister() {
+    requireVersion('3.7', Chart.version);
+  },
+
   afterRegister() {
     Chart.register(annotationTypes);
-
-    // TODO: Remove this workaround when strictly requiring Chart.js v3.7 or newer
-    if (versionParts[0] === '3' && parseInt(versionParts[1], 10) <= 6) {
-      // Workaround for https://github.com/chartjs/chartjs-plugin-annotation/issues/572
-      Chart.defaults.set('elements.lineAnnotation', {
-        // label
-        callout: {},
-        font: {},
-        padding: 6,
-        // polygon
-        point: {},
-      });
-    }
   },
 
   afterUnregister() {
@@ -158,37 +149,46 @@ function updateElements(chart, state, options, mode) {
   const elements = resyncElements(state.elements, annotations);
 
   for (let i = 0; i < annotations.length; i++) {
-    const annotation = annotations[i];
-    let el = elements[i];
-    const elementClass = annotationTypes[resolveType(annotation.type)];
-    if (!el || !(el instanceof elementClass)) {
-      el = elements[i] = new elementClass();
-    }
-    const resolver = annotation.setContext(getContext(chart, el, annotation));
-    const opts = resolveAnnotationOptions(resolver);
-    const properties = el.resolveElementProperties(chart, opts);
-    const subDefs = properties.elements;
+    const annotationOptions = annotations[i];
+    const element = getOrCreateElement(elements, i, annotationOptions.type);
+    const resolver = annotationOptions.setContext(getContext(chart, element, annotationOptions));
+    const resolvedOptions = resolveAnnotationOptions(resolver);
+    const properties = element.resolveElementProperties(chart, resolvedOptions);
 
     properties.skip = isNaN(properties.x) || isNaN(properties.y);
-    properties.options = opts;
-
-    if (subDefs) {
-      const elems = el.elements || (el.elements = []);
-      elems.length = subDefs.length;
-      for (let j = 0; j < subDefs.length; j++) {
-        const def = subDefs[j];
-        const subProps = def.properties;
-        const subClass = annotationTypes[resolveType(def.type)];
-        const subEl = elems[j] || (elems[j] = new subClass());
-        const subOpts = resolveAnnotationOptions((resolver[def.optionScope]).override(def));
-        subProps.options = subOpts;
-        animations.update(subEl, subProps);
-      }
+    properties.options = resolvedOptions;
+
+    if ('elements' in properties) {
+      updateSubElements(element, properties.elements, resolver, animations);
+      // Remove the sub-element definitions from properties, so the actual elements
+      // are not overwritten by their definitions
       delete properties.elements;
     }
 
-    animations.update(el, properties);
+    animations.update(element, properties);
+  }
+}
+
+function updateSubElements(mainElement, definitions, resolver, animations) {
+  const subElements = mainElement.elements || (mainElement.elements = []);
+  subElements.length = definitions.length;
+  for (let j = 0; j < definitions.length; j++) {
+    const definition = definitions[j];
+    const subElementProperties = definition.properties;
+    const subElement = getOrCreateElement(subElements, j, definition.type);
+    const subElementOptions = resolveAnnotationOptions((resolver[definition.optionScope]).override(definition));
+    subElementProperties.options = subElementOptions;
+    animations.update(subElement, subElementProperties);
+  }
+}
+
+function getOrCreateElement(elements, index, type) {
+  const elementClass = annotationTypes[resolveType(type)];
+  let element = elements[index];
+  if (!element || !(element instanceof elementClass)) {
+    element = elements[index] = new elementClass();
   }
+  return element;
 }
 
 function resolveAnnotationOptions(resolver) {

src/helpers/helpers.core.js

@@ -25,3 +25,17 @@ export function getElementCenterPoint(element, useFinalPosition) {
   const {x, y} = element.getProps(['x', 'y'], useFinalPosition);
   return {x, y};
 }
+
+export function requireVersion(min, ver) {
+  const parts = ver.split('.');
+  let i = 0;
+  for (const req of min.split('.')) {
+    const act = parts[i++];
+    if (parseInt(req, 10) < parseInt(act, 10)) {
+      break;
+    }
+    if (req > act || (act.length > req.length && act.substr(0, req.length) === req)) {
+      throw new Error(`Chart.js v${ver} is not supported. v${min} or newer is required.`);
+    }
+  }
+}

test/index.js

@@ -1,7 +1,9 @@
 import {acquireChart, addMatchers, releaseCharts, specsFromFixtures, triggerMouseEvent, afterEvent} from 'chartjs-test-utils';
 import {testEvents} from './events';
 import {createCanvas} from './utils';
+import * as helpers from '../src/helpers';
 
+window.helpers = helpers;
 window.devicePixelRatio = 1;
 window.acquireChart = acquireChart;
 window.afterEvent = afterEvent;

test/specs/helpers.spec.js

@@ -0,0 +1,20 @@
+describe('helpers', function() {
+
+  describe('requireVersion', function() {
+    const requireVersion = window.helpers.requireVersion;
+
+    it('should throw error for too old version', function() {
+      expect(() => requireVersion('3.7', '2.9.3')).toThrowError();
+      expect(() => requireVersion('3.7', '3.6.99-alpha3')).toThrowError();
+      expect(() => requireVersion('16.13.2.8', '16.13.2.8-beta')).toThrowError();
+    });
+
+    it('should not throw error for new enough version', function() {
+      expect(() => requireVersion('3.7', '3.7.0-beta.1')).not.toThrowError();
+      expect(() => requireVersion('3.7.1', '3.7.19')).not.toThrowError();
+      expect(() => requireVersion('3.7', '4.0.0')).not.toThrowError();
+      expect(() => requireVersion('16.13.2', '16.13.3-rc')).not.toThrowError();
+    });
+  });
+
+});