Add custom scriptable context (#366)

* Add custom scriptable context

* Typo

Author: kurkle

docs/guide/options.md

@@ -10,7 +10,8 @@ Fonts use the same format as [chart.js](https://www.chartjs.org/docs/master/gene
 
 ## Scriptable Options
 
-As with most options in chart.js, the annotation plugin options are scriptable. This means that a function can be passed which returns the value as needed. In the example below, the annotation is hidden when the screen is less than 1000px wide
+As with most options in chart.js, the annotation plugin options are scriptable. This means that a function can be passed which returns the value as needed. In the example below, the annotation is hidden when the screen is less than 1000px wide.
+The function receives 2 arguments, first is the [option context](#option-context) representing contextual information. An options resolver is passed as second argumet, which can be used to access other option in the same context.
 
 ```js chart-editor
 /* <block:options:0> */
@@ -71,3 +72,31 @@ The `drawTime` option for an annotation determines where in the chart lifecycle
 | `'beforeDatasetsDraw'` | Occurs after drawing of axes, but before datasets
 | `'afterDatasetsDraw'` | Occurs after drawing of datasets but before items such as the tooltip
 | `'afterDraw'` | After other drawing is completed.
+
+## Option Context
+
+The option context is used to give contextual information when resolving options and only applies to scriptable options. The object is preserved, so it can be used to store and pass information between calls / options.
+
+There are 2 levels of option context objects:
+
+* `chart`
+  * `annotation`
+
+The context object contains the following properties:
+
+### chart
+
+* `chart`: the associated chart
+* `type`: `'chart'`
+
+The [chart](#chart) option context is provided by Chart.js. It is passed to scriptable options when resolving annotation `id`, `type` and `drawTime` or adjusting scale ranges in `afterDataLimits` hook. The options resolved at that time are `scaleID`, `xScaleID`, `yScaleID`, `value`, `endValue`, `xMin`, `xMax`, `yMin`, `yMax`, `xValue` and `yValue`.
+
+### annotation
+
+In addition to [chart](#chart)
+
+* `id`: the annotation id
+* `element`: the annotation element
+* `type`: `'annotation'`
+
+The [annotation](#annotation) option context is passed to scriptable options in all other cases, except when resolving `id`, `type` or adjusting scale ranges. The same values resolved in `afterDataLimits` with [chart](#chart) context are again evaluated in `afterUpdate` with [annotation](#annotation) context.

src/annotation.js

@@ -1,5 +1,5 @@
 import {Animations, Chart, defaults} from 'chart.js';
-import {clipArea, unclipArea, isFinite, valueOrDefault, isObject} from 'chart.js/helpers';
+import {clipArea, unclipArea, isFinite, valueOrDefault, isObject, isArray} from 'chart.js/helpers';
 import {handleEvent, hooks, updateListeners} from './events';
 import BoxAnnotation from './types/box';
 import LineAnnotation from './types/line';
@@ -48,19 +48,15 @@ export default {
 
     let annotationOptions = options.annotations;
     if (isObject(annotationOptions)) {
-      const array = new Array();
       Object.keys(annotationOptions).forEach(key => {
         const value = annotationOptions[key];
         if (isObject(value)) {
           value.id = key;
-          array.push(value);
+          annotations.push(value);
         }
       });
-      annotationOptions = array;
-    }
-
-    for (const annotation of annotationOptions) {
-      annotations.push(resolveAnnotationOptions(annotation));
+    } else if (isArray(annotationOptions)) {
+      annotations.push(...annotationOptions);
     }
   },
 
@@ -134,20 +130,6 @@ const directUpdater = {
   update: Object.assign
 };
 
-
-function resolveAnnotationOptions(resolver) {
-  const elType = annotationTypes[resolver.type] || annotationTypes.line;
-  const result = {};
-  for (const name of optionNames(elType)) {
-    result[name] = resolver[name];
-  }
-  return result;
-}
-
-function optionNames(type) {
-  return ['id', 'type', 'drawTime'].concat(Object.keys(type.defaults), Object.keys(type.defaultRoutes), hooks);
-}
-
 function resolveAnimations(chart, animOpts, mode) {
   if (mode === 'reset' || mode === 'none' || mode === 'resize') {
     return directUpdater;
@@ -168,12 +150,21 @@ function updateElements(chart, state, options, mode) {
     if (!el || !(el instanceof elType)) {
       el = elements[i] = new elType();
     }
-    const properties = el.resolveElementProperties(chart, annotation);
-    properties.options = annotation;
+    const opts = annotation.setContext(getContext(chart, el, annotation));
+    const properties = el.resolveElementProperties(chart, opts);
+    properties.options = opts;
     animations.update(el, properties);
   }
 }
 
+function getContext(chart, element, annotation) {
+  return element.$context || (element.$context = Object.assign(Object.create(chart.getContext()), {
+    element,
+    id: annotation.id,
+    type: 'annotation'
+  }));
+}
+
 function resyncElements(elements, annotations) {
   const count = annotations.length;
   const start = elements.length;

test/fixtures/line/axis-index.js

@@ -0,0 +1,42 @@
+module.exports = {
+  config: {
+    type: 'line',
+    data: {
+      datasets: [{
+        data: [10, 20, 30, 0, 55],
+      }],
+      labels: ['A', 'B', 'C', 'D', 'E']
+    },
+    options: {
+      plugins: {
+        legend: false,
+        annotation: {
+          annotations: {
+            annotation1: {
+              type: 'line',
+              scaleID: 'y',
+              borderWidth: 3,
+              borderColor: 'black',
+              value: (ctx) => {
+                if (ctx.type === 'annotation') {
+                  const scale = ctx.chart.scales.y;
+                  if (scale.ticks && scale.ticks.length > 1) {
+                    return scale.ticks[1].value;
+                  }
+                }
+                return 0;
+              },
+            }
+          }
+        }
+      },
+    }
+  },
+  options: {
+    spriteText: true,
+    run(chart) {
+      chart.hide(0);
+      chart.show(0);
+    }
+  }
+};