@centreon/ui 24.4.1-MON-34377-implement-tree-chart-on-centreon-ui.4 → 24.4.1-MON-34377-implement-tree-chart-on-centreon-ui.6

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@centreon/ui",
-  "version": "24.4.1-MON-34377-implement-tree-chart-on-centreon-ui.4",
+  "version": "24.4.1-MON-34377-implement-tree-chart-on-centreon-ui.6",
   "description": "Centreon UI Components",
   "scripts": {
     "update:deps": "pnpx npm-check-updates -i --format group",

package/src/components/Zoom/Minimap.tsx

@@ -29,13 +29,16 @@ const Minimap = ({
     zoom
   });
 
+  const finalHeight = Math.max(contentClientRect?.height || 0, height);
+  const finalWidth = Math.max(contentClientRect?.width || 0, width);
+
   return (
     <g className={classes.minimap} clipPath="url(#zoom-clip)">
       <rect
         className={classes.minimapBackground}
-        height={Math.max(contentClientRect?.height || 0, height)}
+        height={finalHeight}
         rx={radius}
-        width={Math.max(contentClientRect?.width || 0, width)}
+        width={finalWidth}
       />
       {children}
       <rect
@@ -49,9 +52,9 @@ const Minimap = ({
       <rect
         data-testid="minimap-interaction"
         fill="transparent"
-        height={Math.max(contentClientRect?.height || 0, height)}
+        height={finalHeight}
         rx={radius}
-        width={Math.max(contentClientRect?.width || 0, width)}
+        width={finalWidth}
         onMouseDown={transformTo}
         onMouseMove={move}
         onWheel={zoomInOut}

package/src/components/Zoom/Zoom.cypress.spec.tsx

@@ -163,7 +163,7 @@ describe('Zoom', () => {
     cy.makeSnapshot();
   });
 
-  it('moves the view when the mouse is hover the minimap with the correspondiong button pressed down', () => {
+  it('moves the view when the mouse is hover the minimap with the corresponding button pressed down', () => {
     initialize({ showMinimap: true });
 
     cy.get('g[clip-path="url(#zoom-clip)"]').should('be.visible');
@@ -181,4 +181,23 @@ describe('Zoom', () => {
 
     cy.makeSnapshot();
   });
+
+  it('moves the view when the mouse is hover the content with the corresponding button pressed down', () => {
+    initialize({ showMinimap: true });
+
+    cy.get('g[clip-path="url(#zoom-clip)"]').should('be.visible');
+    cy.get('svg').should('have.attr', 'height', '400');
+
+    cy.findByTestId('zoom-container')
+      .trigger('mousedown', 400, 200)
+      .trigger('mousemove', 600, 200);
+
+    cy.findByTestId('zoom-content').should(
+      'have.attr',
+      'transform',
+      'matrix(1, 0, 0, 1, 200, 0)'
+    );
+
+    cy.makeSnapshot();
+  });
 });

package/src/components/Zoom/Zoom.tsx

@@ -94,6 +94,7 @@ const Zoom = ({
               <svg
                 className={classes.svg}
                 data-is-grabbing={isDragging}
+                data-testid="zoom-container"
                 height={height}
                 width={width}
                 onMouseDown={dragStart(zoom)}

package/src/components/Zoom/localPoint.ts

@@ -4,7 +4,6 @@ import type {
   TouchEvent as ReactTouchEvent
 } from 'react';
 
-import { has } from 'ramda';
 import { Point } from '@visx/point';
 
 type EventType =
@@ -44,16 +43,7 @@ const getXAndYFromEvent = (event?: EventType): PointCoords => {
     };
   }
 
-  const boundingClientRect = has('getBoundingClientRect', event.target)
-    ? event.target.getBoundingClientRect()
-    : null;
-
-  if (!boundingClientRect) return { ...DEFAULT_POINT };
-
-  return {
-    x: boundingClientRect.x + boundingClientRect.width / 2,
-    y: boundingClientRect.y + boundingClientRect.height / 2
-  };
+  return { ...DEFAULT_POINT };
 };
 
 export const localPoint = (event: EventType): PointCoords | null => {

package/src/components/Zoom/useZoom.ts

@@ -1,7 +1,7 @@
 import { useCallback, useState } from 'react';
 
 import { Point, ProvidedZoom, Translate } from '@visx/zoom/lib/types';
-import { equals } from 'ramda';
+import { equals, isNil } from 'ramda';
 
 import { localPoint } from './localPoint';
 import { ZoomState } from './models';
@@ -22,7 +22,7 @@ export const useZoom = (): UseZoomState => {
   const dragStart = useCallback(
     (zoom: ProvidedZoom<SVGSVGElement> & ZoomState) =>
       (e): void => {
-        if (!equals(e.nativeEvent.which, 1)) {
+        if (!isNil(e.nativeEvent.which) && !equals(e.nativeEvent.which, 1)) {
           return;
         }
         const { translateX, translateY } = zoom.transformMatrix;