fix(react-components): trendcursor hotkey indicates addition state

awslabs · Dec 7, 2023 · c9d34e0 · c9d34e0
1 parent 4c9453a
commit c9d34e0
Show file tree

Hide file tree

Showing 2 changed files with 23 additions and 4 deletions.
diff --git a/...react-components/src/components/chart/trendCursor/mouseEvents/handlers/mouseover/index.ts b/...react-components/src/components/chart/trendCursor/mouseEvents/handlers/mouseover/index.ts
@@ -1,8 +1,14 @@
 import { MutableRefObject } from 'react';
 import { ECharts } from 'echarts';
+import { MAX_TREND_CURSORS } from '../../../constants';
+import { InternalGraphicComponentGroupOption } from '../../../types';
 
-export const mouseoverHandler = (isInCursorAddMode: boolean, chartRef: MutableRefObject<ECharts | null>) => {
-  if (isInCursorAddMode) {
+export const mouseoverHandler = (
+  isInCursorAddMode: boolean,
+  tcGraphicList: InternalGraphicComponentGroupOption[],
+  chartRef: MutableRefObject<ECharts | null>
+) => {
+  if (isInCursorAddMode && tcGraphicList.length < MAX_TREND_CURSORS) {
     chartRef.current?.getZr().setCursorStyle('crosshair');
   }
 };
diff --git a/...es/react-components/src/components/chart/trendCursor/mouseEvents/useTrendCursorsEvents.ts b/...es/react-components/src/components/chart/trendCursor/mouseEvents/useTrendCursorsEvents.ts
@@ -126,8 +126,13 @@ const useTrendCursorsEvents = ({
   // standalone mode --> updates the local state
   useEffect(() => {
     const currentChart = chartRef.current;
+    if (isInCursorAddModeRef.current && graphicRef.current.length < MAX_TREND_CURSORS) {
+      chartRef.current?.getZr().setCursorStyle('crosshair');
+    } else {
+      chartRef.current?.getZr().setCursorStyle('default'); // in case we get out of add mode and mouse does not move, switch back to default cursor
+    }
 
-    const mouseMoveEventHandler = () => mouseoverHandler(isInCursorAddModeRef.current, chartRef);
+    const mouseMoveEventHandler = () => mouseoverHandler(isInCursorAddModeRef.current, graphicRef.current, chartRef);
 
     // this handles all the clicks on the chart
     // this click would be either
@@ -246,7 +251,15 @@ const useTrendCursorsEvents = ({
       currentChart?.getZr()?.off('dragstart', dragStartEventHandler);
       currentChart?.off('datazoom', zoomHandler);
     };
-  }, [addNewTrendCursor, deleteTrendCursor, groupId, updateTrendCursorsInSyncState, chartRef, setGraphic]);
+  }, [
+    addNewTrendCursor,
+    deleteTrendCursor,
+    groupId,
+    updateTrendCursorsInSyncState,
+    chartRef,
+    setGraphic,
+    isInCursorAddMode,
+  ]);
 
   const copyTrendCursorData = (posX: number) => {
     const timestampOfClick = calculateTimeStamp(posX, chartRef);