@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.5

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.5",
   "description": "Centreon UI Components",
   "scripts": {
     "update:deps": "pnpx npm-check-updates -i --format group",

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/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;