Enable interaction mode support for events

src/annotation.js

@@ -46,7 +46,8 @@ export default {
       visibleElements: [],
       listeners: {},
       listened: false,
-      moveListened: false
+      moveListened: false,
+      hovered: []
     });
   },
 
@@ -120,6 +121,9 @@ export default {
     clip: true,
     dblClickSpeed: 350, // ms
     drawTime: 'afterDatasetsDraw',
+    interaction: {
+      mode: undefined
+    },
     label: {
       drawTime: null
     }
@@ -132,6 +136,9 @@ export default {
       _allKeys: false,
       _fallback: (prop, opts) => `elements.${annotationTypes[resolveType(opts.type)].id}`,
     },
+    interaction: {
+      _fallback: true,
+    }
   },
 
   additionalOptionScopes: ['']

src/events.js

@@ -48,7 +48,7 @@ export function handleEvent(state, event, options) {
     switch (event.type) {
     case 'mousemove':
     case 'mouseout':
-      handleMoveEvents(state, event);
+      handleMoveEvents(state, event, options);
       break;
     case 'click':
       handleClickEvents(state, event, options);
@@ -58,37 +58,37 @@ export function handleEvent(state, event, options) {
   }
 }
 
-function handleMoveEvents(state, event) {
+function handleMoveEvents(state, event, options) {
   if (!state.moveListened) {
     return;
   }
 
-  let element;
+  let elements = [];
 
   if (event.type === 'mousemove') {
-    element = getNearestItem(state.elements, event);
+    elements = getItems(state, event, options);
   }
 
   const previous = state.hovered;
-  state.hovered = element;
+  state.hovered = elements;
 
-  dispatchMoveEvents(state, {previous, element}, event);
+  const context = {state, event};
+  dispatchMoveEvents(context, 'leave', previous, elements);
+  dispatchMoveEvents(context, 'enter', elements, previous);
 }
 
-function dispatchMoveEvents(state, elements, event) {
-  const {previous, element} = elements;
-  if (previous && previous !== element) {
-    dispatchEvent(previous.options.leave || state.listeners.leave, previous, event);
-  }
-  if (element && element !== previous) {
-    dispatchEvent(element.options.enter || state.listeners.enter, element, event);
+function dispatchMoveEvents({state, event}, hook, elements, checkElements) {
+  for (const element of elements) {
+    if (checkElements.indexOf(element) < 0) {
+      dispatchEvent(element.options[hook] || state.listeners[hook], element, event);
+    }
   }
 }
 
 function handleClickEvents(state, event, options) {
   const listeners = state.listeners;
-  const element = getNearestItem(state.elements, event);
-  if (element) {
+  const elements = getItems(state, event, options);
+  for (const element of elements) {
     const elOpts = element.options;
     const dblclick = elOpts.dblclick || listeners.dblclick;
     const click = elOpts.click || listeners.click;
@@ -114,11 +114,22 @@ function dispatchEvent(handler, element, event) {
   callback(handler, [element.$context, event]);
 }
 
+function getItems(state, event, options) {
+  if (options.interaction.mode === 'point') {
+    return state.visibleElements.filter((element) => element.inRange(event.x, event.y));
+  }
+  const element = getNearestItem(state.visibleElements, event);
+  if (element) {
+    return [element];
+  }
+  return [];
+}
+
 function getNearestItem(elements, position) {
   let minDistance = Number.POSITIVE_INFINITY;
 
   return elements
-    .filter((element) => element.options.display && element.inRange(position.x, position.y))
+    .filter((element) => element.inRange(position.x, position.y))
     .reduce((nearestItems, element) => {
       const center = element.getCenterPoint();
       const distance = distanceBetweenPoints(position, center);

test/specs/events.spec.js

@@ -157,4 +157,104 @@ describe('Common', function() {
       });
     });
   });
+
+  describe('events on overlapped annotations', function() {
+    const chartConfig = {
+      type: 'scatter',
+      options: {
+        animation: false,
+        scales: {
+          x: {
+            display: false,
+            min: 0,
+            max: 10
+          },
+          y: {
+            display: false,
+            min: 0,
+            max: 10
+          }
+        },
+        plugins: {
+          legend: false,
+          annotation: {
+            interaction: {
+            },
+            annotations: {
+              large: {
+                type: 'box',
+                xMin: 2,
+                xMax: 8,
+                yMin: 2,
+                yMax: 8,
+                borderWidth: 0,
+              },
+              small: {
+                type: 'box',
+                xMin: 4,
+                xMax: 6,
+                yMin: 4,
+                yMax: 6,
+                borderWidth: 0,
+              }
+            }
+          }
+        }
+      }
+    };
+    const modes = ['nearest', 'point'];
+    const hookCallsCount = [[1, 1, 1, 0, 1], [1, 2, 2, 1, 2]];
+
+    for (let i = 0; i < modes.length; i++) {
+      const mode = modes[i];
+      const callsCount = hookCallsCount[i];
+
+      it(`should detect events on annotations with interaction mode ${mode}`, function(done) {
+        const enterSpy = jasmine.createSpy('enter');
+        const clickSpy = jasmine.createSpy('click');
+        const leaveSpy = jasmine.createSpy('leave');
+
+        chartConfig.options.plugins.annotation.enter = enterSpy;
+        chartConfig.options.plugins.annotation.click = clickSpy;
+        chartConfig.options.plugins.annotation.leave = leaveSpy;
+        chartConfig.options.plugins.annotation.interaction.mode = mode;
+
+        const chart = window.acquireChart(chartConfig);
+        const large = window.getAnnotationElements(chart)[0];
+        const small = window.getAnnotationElements(chart)[1];
+
+        const event1 = {x: large.x + 1, y: large.y + large.height / 2};
+        const event2 = {x: small.x + 1, y: small.y + small.height / 2};
+        const click = {x: small.x + small.width / 2, y: small.y + small.height / 2};
+        const event3 = {x: small.x2 + 1, y: small.y2 - small.height / 2};
+        const event4 = {x: large.x2 + 1, y: large.y2 - large.height / 2};
+
+        window.triggerMouseEvent(chart, 'mousemove', event1);
+        window.afterEvent(chart, 'mousemove', function() {
+          expect(enterSpy.calls.count()).toBe(callsCount[0]);
+
+          window.triggerMouseEvent(chart, 'mousemove', event2);
+          window.afterEvent(chart, 'mousemove', function() {
+            expect(enterSpy.calls.count()).toBe(callsCount[1]);
+
+            window.triggerMouseEvent(chart, 'click', click);
+            window.afterEvent(chart, 'click', function() {
+              expect(clickSpy.calls.count()).toBe(callsCount[2]);
+
+              window.triggerMouseEvent(chart, 'mousemove', event3);
+              window.afterEvent(chart, 'mousemove', function() {
+                expect(leaveSpy.calls.count()).toBe(callsCount[3]);
+
+                window.triggerMouseEvent(chart, 'mousemove', event4);
+                window.afterEvent(chart, 'mousemove', function() {
+                  expect(leaveSpy.calls.count()).toBe(callsCount[4]);
+                  done();
+                });
+              });
+            });
+          });
+        });
+      });
+    }
+  });
 });