Pass event instance to listeners (#451)

* Passes event instance to listeners

* removes state argument from dispatchEvent because not used

* removes function dispatchMoveEvents and merged in handleMoveEvents

* code-climate

* passes event.native (Event) instead of ChartEvent as argument

* fallback to ChartEvent instead of native Event

Author: stockiNail

docs/guide/interaction.md

@@ -15,7 +15,7 @@ The following options are available for all annotation types. These options can
 
 | Name | Type | [Scriptable](options#scriptable-options) | Notes
 | ---- | ---- | :----: | ----
-| `enter` | `(context) => void` | No | Called when the mouse enters the annotation.
-| `leave` | `(context) => void` | No | Called when the mouse leaves the annotation.
-| `click` | `(context) => void` | No | Called when a single click occurs on the annotation.
-| `dblClick` | `(context) => void` | No | Called when a double click occurs on the annotation.
+| `enter` | `(context, event) => void` | No | Called when the mouse enters the annotation.
+| `leave` | `(context, event) => void` | No | Called when the mouse leaves the annotation.
+| `click` | `(context, event) => void` | No | Called when a single click occurs on the annotation.
+| `dblClick` | `(context, event) => void` | No | Called when a double click occurs on the annotation.

src/events.js

@@ -71,15 +71,16 @@ function handleMoveEvents(chart, state, event) {
   const previous = state.hovered;
   state.hovered = element;
 
-  dispatchMoveEvents(chart, state, previous, element);
+  dispatchMoveEvents(chart, state, {previous, element}, event);
 }
 
-function dispatchMoveEvents(chart, state, previous, element) {
+function dispatchMoveEvents(chart, state, elements, event) {
+  const {previous, element} = elements;
   if (previous && previous !== element) {
-    dispatchEvent(chart, state, previous.options.leave || state.listeners.leave, previous);
+    dispatchEvent(chart, previous.options.leave || state.listeners.leave, previous, event);
   }
   if (element && element !== previous) {
-    dispatchEvent(chart, state, element.options.enter || state.listeners.enter, element);
+    dispatchEvent(chart, element.options.enter || state.listeners.enter, element, event);
   }
 }
 
@@ -94,22 +95,22 @@ function handleClickEvents(chart, state, event, options) {
       // 2nd click before timeout, so its a double click
       clearTimeout(element.clickTimeout);
       delete element.clickTimeout;
-      dispatchEvent(chart, state, dblclick, element);
+      dispatchEvent(chart, dblclick, element, event);
     } else if (dblclick) {
       // if there is a dblclick handler, wait for dblClickSpeed ms before deciding its a click
       element.clickTimeout = setTimeout(() => {
         delete element.clickTimeout;
-        dispatchEvent(chart, state, click, element);
+        dispatchEvent(chart, click, element, event);
       }, options.dblClickSpeed);
     } else {
       // no double click handler, just call the click handler directly
-      dispatchEvent(chart, state, click, element);
+      dispatchEvent(chart, click, element, event);
     }
   }
 }
 
-function dispatchEvent(chart, _state, handler, element) {
-  callHandler(handler, [{chart, element}]);
+function dispatchEvent(chart, handler, element, event) {
+  callHandler(handler, [{chart, element}, event]);
 }
 
 function getNearestItem(elements, position) {

types/events.d.ts

@@ -1,9 +1,9 @@
-import { Chart } from 'chart.js';
+import { Chart, ChartEvent } from 'chart.js';
 import { AnnotationElement } from './element';
 
 export interface EventContext {
 	chart: Chart,
-	element: AnnotationElement
+	element: AnnotationElement,
 }
 
 /**
@@ -16,8 +16,8 @@ export interface PartialEventContext {
 }
 
 export interface AnnotationEvents {
-	enter?(context: EventContext): void,
-	leave?(context: EventContext): void,
-	click?(context: EventContext): void,
-	dblclick?(context: EventContext): void,
+	enter?(context: EventContext, event: ChartEvent): void,
+	leave?(context: EventContext, event: ChartEvent): void,
+	click?(context: EventContext, event: ChartEvent): void,
+	dblclick?(context: EventContext, event: ChartEvent): void,
 }