@centreon/ui 25.11.7 → 25.11.8

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@centreon/ui",
-  "version": "25.11.7",
+  "version": "25.11.8",
   "description": "Centreon UI Components",
   "scripts": {
     "update:deps": "pnpx npm-check-updates -i --format group",

package/src/Graph/Chart/InteractiveComponents/ZoomPreview/useZoomPreview.ts

@@ -2,7 +2,7 @@ import { RefObject, useEffect, useState } from 'react';
 
 import { Event } from '@visx/visx';
 import { ScaleTime } from 'd3-scale';
-import { useAtomValue, useSetAtom } from 'jotai';
+import { useAtom, useAtomValue } from 'jotai';
 import { equals, gte, isNil, lt } from 'ramda';
 import { Interval } from '../../models';
 import {
@@ -37,10 +37,10 @@ const useZoomPreview = ({
   graphMarginLeft
 }: Props): ZoomPreview => {
   const [zoomBoundaries, setZoomBoundaries] = useState<Boundaries | null>(null);
+  const [isApplyingZoom, setApplyingZoom] = useAtom(applyingZoomAtomAtom);
   const eventMouseDown = useAtomValue(eventMouseDownAtom);
   const eventMouseUp = useAtomValue(eventMouseUpAtom);
   const mousePosition = useAtomValue(mousePositionAtom);
-  const setApplyingZoom = useSetAtom(applyingZoomAtomAtom);
 
   const mousePointDown =
     eventMouseDown && graphSvgRef.current
@@ -86,7 +86,6 @@ const useZoomPreview = ({
     }
     applyZoom();
     setApplyingZoom(false);
-    setZoomBoundaries(null);
   }, [eventMouseUp]);
 
   useEffect(() => {
@@ -99,6 +98,13 @@ const useZoomPreview = ({
     setApplyingZoom(true);
   }, [zoomBoundaries]);
 
+  useEffect(() => {
+    if (isApplyingZoom) {
+      return;
+    }
+    setZoomBoundaries(null);
+  }, [isApplyingZoom]);
+
   const zoomBarWidth = Math.abs(
     (zoomBoundaries?.end || 0) - (zoomBoundaries?.start || 0)
   );

package/src/Graph/Chart/InteractiveComponents/index.tsx

@@ -1,8 +1,13 @@
-import { type MutableRefObject, ReactElement, useMemo } from 'react';
+import {
+  MouseEvent,
+  type MutableRefObject,
+  ReactElement,
+  useMemo
+} from 'react';
 
 import { Event } from '@visx/visx';
 import type { ScaleLinear, ScaleTime } from 'd3-scale';
-import { useSetAtom } from 'jotai';
+import { useAtom, useSetAtom } from 'jotai';
 import {
   all,
   equals,
@@ -48,6 +53,7 @@ import type { TimelineEvent } from './Annotations/models';
 import Bar from './Bar';
 import TimeShiftZones from './TimeShiftZones';
 import ZoomPreview from './ZoomPreview';
+import { applyingZoomAtomAtom } from './ZoomPreview/zoomPreviewAtoms';
 import {
   type MousePosition,
   changeMousePositionDerivedAtom,
@@ -103,6 +109,7 @@ const InteractionWithGraph = ({
 }: Props): ReactElement => {
   const { classes } = useStyles();
 
+  const [isApplyingZoom, setIsApplyingZoom] = useAtom(applyingZoomAtomAtom);
   const setEventMouseDown = useSetAtom(eventMouseDownAtom);
   const setEventMouseUp = useSetAtom(eventMouseUpAtom);
   const setEventMouseLeave = useSetAtom(eventMouseLeaveAtom);
@@ -136,7 +143,7 @@ const InteractionWithGraph = ({
     setEventMouseDown(null);
   };
 
-  const mouseMove = (event): void => {
+  const mouseMove = (event: MouseEvent): void => {
     const mousePoint = Event.localPoint(
       graphSvgRef?.current as SVGSVGElement,
       event
@@ -150,6 +157,15 @@ const InteractionWithGraph = ({
     ]);
   };
 
+  const mouseEnter = (event: MouseEvent): void => {
+    if (event.buttons === 1 && isApplyingZoom) {
+      mouseDown(event);
+    }
+    if (event.buttons === 0 && isApplyingZoom) {
+      setIsApplyingZoom(false);
+    }
+  };
+
   const mouseDown = (event): void => {
     setEventMouseDown(event);
   };
@@ -336,6 +352,7 @@ const InteractionWithGraph = ({
         onMouseLeave={mouseLeave}
         onMouseMove={mouseMove}
         onMouseUp={mouseUp}
+        onMouseEnter={mouseEnter}
       />
     </g>
   );