diff --git a/docs/guide/interaction.md b/docs/guide/interaction.md index 87e455c69..e07b04023 100644 --- a/docs/guide/interaction.md +++ b/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. diff --git a/src/events.js b/src/events.js index 351f87fe0..ce63484ba 100644 --- a/src/events.js +++ b/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) { diff --git a/types/events.d.ts b/types/events.d.ts index 549e6dbda..df1932f72 100644 --- a/types/events.d.ts +++ b/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, }