| 1 | import { createAction, createListenerMiddleware } from '@reduxjs/toolkit';
|
|---|
| 2 | import { mouseLeaveChart, setMouseClickAxisIndex, setMouseOverAxisIndex } from './tooltipSlice';
|
|---|
| 3 | import { selectActivePropsFromChartPointer } from './selectors/selectActivePropsFromChartPointer';
|
|---|
| 4 | import { selectTooltipEventType } from './selectors/selectTooltipEventType';
|
|---|
| 5 | import { getChartPointer } from '../util/getChartPointer';
|
|---|
| 6 | export var mouseClickAction = createAction('mouseClick');
|
|---|
| 7 | export var mouseClickMiddleware = createListenerMiddleware();
|
|---|
| 8 |
|
|---|
| 9 | // TODO: there's a bug here when you click the chart the activeIndex resets to zero
|
|---|
| 10 | mouseClickMiddleware.startListening({
|
|---|
| 11 | actionCreator: mouseClickAction,
|
|---|
| 12 | effect: (action, listenerApi) => {
|
|---|
| 13 | var mousePointer = action.payload;
|
|---|
| 14 | var activeProps = selectActivePropsFromChartPointer(listenerApi.getState(), getChartPointer(mousePointer));
|
|---|
| 15 | if ((activeProps === null || activeProps === void 0 ? void 0 : activeProps.activeIndex) != null) {
|
|---|
| 16 | listenerApi.dispatch(setMouseClickAxisIndex({
|
|---|
| 17 | activeIndex: activeProps.activeIndex,
|
|---|
| 18 | activeDataKey: undefined,
|
|---|
| 19 | activeCoordinate: activeProps.activeCoordinate
|
|---|
| 20 | }));
|
|---|
| 21 | }
|
|---|
| 22 | }
|
|---|
| 23 | });
|
|---|
| 24 | export var mouseMoveAction = createAction('mouseMove');
|
|---|
| 25 | export var mouseMoveMiddleware = createListenerMiddleware();
|
|---|
| 26 |
|
|---|
| 27 | /*
|
|---|
| 28 | * This single rafId is safe because:
|
|---|
| 29 | * 1. Each chart has its own Redux store instance with its own middleware
|
|---|
| 30 | * 2. mouseMoveAction only fires from one DOM element (the chart wrapper)
|
|---|
| 31 | * 3. Rapid mousemove events from the same element SHOULD debounce - we only care about the latest position
|
|---|
| 32 | * This is different from externalEventsMiddleware which handles multiple event types
|
|---|
| 33 | * (click, mouseenter, mouseleave, etc.) that should NOT cancel each other.
|
|---|
| 34 | */
|
|---|
| 35 | var rafId = null;
|
|---|
| 36 | mouseMoveMiddleware.startListening({
|
|---|
| 37 | actionCreator: mouseMoveAction,
|
|---|
| 38 | effect: (action, listenerApi) => {
|
|---|
| 39 | var mousePointer = action.payload;
|
|---|
| 40 |
|
|---|
| 41 | // Cancel any pending animation frame
|
|---|
| 42 | if (rafId !== null) {
|
|---|
| 43 | cancelAnimationFrame(rafId);
|
|---|
| 44 | }
|
|---|
| 45 | var chartPointer = getChartPointer(mousePointer);
|
|---|
| 46 |
|
|---|
| 47 | // Schedule the dispatch for the next animation frame
|
|---|
| 48 | rafId = requestAnimationFrame(() => {
|
|---|
| 49 | var state = listenerApi.getState();
|
|---|
| 50 | var tooltipEventType = selectTooltipEventType(state, state.tooltip.settings.shared);
|
|---|
| 51 | // this functionality only applies to charts that have axes
|
|---|
| 52 | if (tooltipEventType === 'axis') {
|
|---|
| 53 | var activeProps = selectActivePropsFromChartPointer(state, chartPointer);
|
|---|
| 54 | if ((activeProps === null || activeProps === void 0 ? void 0 : activeProps.activeIndex) != null) {
|
|---|
| 55 | listenerApi.dispatch(setMouseOverAxisIndex({
|
|---|
| 56 | activeIndex: activeProps.activeIndex,
|
|---|
| 57 | activeDataKey: undefined,
|
|---|
| 58 | activeCoordinate: activeProps.activeCoordinate
|
|---|
| 59 | }));
|
|---|
| 60 | } else {
|
|---|
| 61 | // this is needed to clear tooltip state when the mouse moves out of the inRange (svg - offset) function, but not yet out of the svg
|
|---|
| 62 | listenerApi.dispatch(mouseLeaveChart());
|
|---|
| 63 | }
|
|---|
| 64 | }
|
|---|
| 65 | rafId = null;
|
|---|
| 66 | });
|
|---|
| 67 | }
|
|---|
| 68 | }); |
|---|