source: node_modules/recharts/es6/state/mouseEventsMiddleware.js@ a762898

Last change on this file since a762898 was a762898, checked in by istevanoska <ilinastevanoska@…>, 5 months ago

Added visualizations

  • Property mode set to 100644
File size: 3.0 KB
Line 
1import { createAction, createListenerMiddleware } from '@reduxjs/toolkit';
2import { mouseLeaveChart, setMouseClickAxisIndex, setMouseOverAxisIndex } from './tooltipSlice';
3import { selectActivePropsFromChartPointer } from './selectors/selectActivePropsFromChartPointer';
4import { selectTooltipEventType } from './selectors/selectTooltipEventType';
5import { getChartPointer } from '../util/getChartPointer';
6export var mouseClickAction = createAction('mouseClick');
7export var mouseClickMiddleware = createListenerMiddleware();
8
9// TODO: there's a bug here when you click the chart the activeIndex resets to zero
10mouseClickMiddleware.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});
24export var mouseMoveAction = createAction('mouseMove');
25export 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 */
35var rafId = null;
36mouseMoveMiddleware.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});
Note: See TracBrowser for help on using the repository browser.