@centreon/ui 24.4.1-MON-34377-implement-tree-chart-on-centreon-ui.0 → 24.4.1-MON-34377-implement-tree-chart-on-centreon-ui.1

package/package.json

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

package/src/components/Zoom/Minimap.tsx

@@ -0,0 +1,60 @@
+import { minimapScale, radius } from './constants';
+import { UseMinimapProps, useMinimap } from './useMinimap';
+import { useZoomStyles } from './Zoom.styles';
+
+interface Props extends Omit<UseMinimapProps, 'minimapScale'> {
+  children: JSX.Element;
+  contentClientRect: {
+    height: number;
+    width: number;
+  };
+}
+
+const Minimap = ({
+  zoom,
+  children,
+  height,
+  width,
+  contentClientRect
+}: Props): JSX.Element => {
+  const { classes } = useZoomStyles();
+
+  const { transformTo, move, zoomInOut } = useMinimap({
+    height,
+    minimapScale,
+    width,
+    zoom
+  });
+
+  return (
+    <g className={classes.minimap} clipPath="url(#zoom-clip)">
+      <rect
+        className={classes.minimapBackground}
+        height={Math.max(contentClientRect?.height || 0, height)}
+        rx={radius}
+        width={Math.max(contentClientRect?.width || 0, width)}
+      />
+      {children}
+      <rect
+        className={classes.minimapZoom}
+        fillOpacity={0.2}
+        height={height}
+        rx={radius}
+        transform={zoom.toStringInvert()}
+        width={width}
+      />
+      <rect
+        data-testid="minimap-interaction"
+        fill="transparent"
+        height={Math.max(contentClientRect?.height || 0, height)}
+        rx={radius}
+        width={Math.max(contentClientRect?.width || 0, width)}
+        onMouseDown={transformTo}
+        onMouseMove={move}
+        onWheel={zoomInOut}
+      />
+    </g>
+  );
+};
+
+export default Minimap;

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

@@ -7,9 +7,7 @@ const content = (
 );
 
 const labels = {
-  clear: 'Clear',
-  zoomIn: '+',
-  zoomOut: '-'
+  clear: 'Clear'
 };
 
 const initialize = ({ showMinimap }): void => {
@@ -39,7 +37,7 @@ describe('Zoom', () => {
     cy.get('g[transform="matrix(1, 0, 0, 1, 0, 0)"]');
     cy.get('g[clip-path="url(#zoom-clip)"]').should('be.visible');
 
-    cy.contains('+').click();
+    cy.findByTestId('zoom in').click();
     cy.findByTestId('zoom-content')
       .should('have.attr', 'transform')
       .and('include', '1.2, 0, 0, 1.2');
@@ -53,7 +51,7 @@ describe('Zoom', () => {
     cy.get('g[transform="matrix(1, 0, 0, 1, 0, 0)"]');
     cy.get('g[clip-path="url(#zoom-clip)"]').should('be.visible');
 
-    cy.contains('-').click();
+    cy.findByTestId('zoom out').click();
 
     cy.findByTestId('zoom-content')
       .should('have.attr', 'transform')
@@ -62,7 +60,7 @@ describe('Zoom', () => {
     cy.makeSnapshot();
   });
 
-  it('zooms out when the content is scrolled', () => {
+  it('zooms out when the content is scrolled up', () => {
     initialize({ showMinimap: true });
 
     cy.get('g[transform="matrix(1, 0, 0, 1, 0, 0)"]');
@@ -77,7 +75,7 @@ describe('Zoom', () => {
     cy.makeSnapshot();
   });
 
-  it('zooms in when the content is scrolled', () => {
+  it('zooms in when the content is scrolled down', () => {
     initialize({ showMinimap: true });
 
     cy.get('g[transform="matrix(1, 0, 0, 1, 0, 0)"]');
@@ -111,21 +109,75 @@ describe('Zoom', () => {
     cy.makeSnapshot();
   });
 
-  it('highlights the minimap when the mouse is over the minimap', () => {
+  it('does not display the minimap when the prop is set', () => {
+    initialize({ showMinimap: false });
+
+    cy.get('g[transform="matrix(1, 0, 0, 1, 0, 0)"]');
+    cy.get('g[clip-path="url(#zoom-clip)"]').should('not.exist');
+
+    cy.makeSnapshot();
+  });
+
+  it('zooms in when the minimap is scrolled up', () => {
     initialize({ showMinimap: true });
 
     cy.get('g[clip-path="url(#zoom-clip)"]').should('be.visible');
 
-    cy.get('g[clip-path="url(#zoom-clip)"]').realHover();
+    cy.findByTestId('minimap-interaction').realMouseWheel({ deltaY: -20 });
+
+    cy.findByTestId('zoom-content')
+      .should('have.attr', 'transform')
+      .and('include', '1.1, 0, 0, 1.1');
 
     cy.makeSnapshot();
   });
 
-  it('does not display the minimap the prop is set', () => {
-    initialize({ showMinimap: false });
+  it('zooms out when the minimap is scrolled down', () => {
+    initialize({ showMinimap: true });
 
-    cy.get('g[transform="matrix(1, 0, 0, 1, 0, 0)"]');
-    cy.get('g[clip-path="url(#zoom-clip)"]').should('not.exist');
+    cy.get('g[clip-path="url(#zoom-clip)"]').should('be.visible');
+
+    cy.findByTestId('minimap-interaction').realMouseWheel({ deltaY: 20 });
+
+    cy.findByTestId('zoom-content')
+      .should('have.attr', 'transform')
+      .and('include', '0.9, 0, 0, 0.9');
+
+    cy.makeSnapshot();
+  });
+
+  it('moves the view when the minimap is clicked', () => {
+    initialize({ showMinimap: true });
+
+    cy.get('g[clip-path="url(#zoom-clip)"]').should('be.visible');
+    cy.get('svg').should('have.attr', 'height', '400');
+
+    cy.findByTestId('minimap-interaction').click(20, 20);
+
+    cy.findByTestId('zoom-content').should(
+      'have.attr',
+      'transform',
+      'matrix(1, 0, 0, 1, -100, -100)'
+    );
+
+    cy.makeSnapshot();
+  });
+
+  it('moves the view when the mouse is hover the minimap with the correspondiong 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('minimap-interaction')
+      .realMouseDown()
+      .realMouseMove(40, 40);
+
+    cy.findByTestId('zoom-content').should(
+      'have.attr',
+      'transform',
+      'matrix(1, 0, 0, 1, -640, -200)'
+    );
 
     cy.makeSnapshot();
   });

package/src/components/Zoom/Zoom.stories.tsx

@@ -33,24 +33,22 @@ const Template = ({ children, ...args }: ZoomProps): JSX.Element => (
 );
 
 const labels = {
-  clear: 'Clear',
-  zoomIn: '+',
-  zoomOut: '-'
+  clear: 'Clear'
 };
 
-export const Default: Story = {
+export const WithoutMinimap: Story = {
   args: {
     children: content,
-    labels,
-    showMinimap: true
+    labels
   },
   render: Template
 };
 
-export const WithoutMinimap: Story = {
+export const WithMinimap: Story = {
   args: {
     children: content,
-    labels
+    labels,
+    showMinimap: true
   },
   render: Template
 };

package/src/components/Zoom/Zoom.styles.tsx

@@ -1,28 +1,31 @@
 import { makeStyles } from 'tss-react/mui';
 
+import { minimapScale } from './constants';
+
 export const useZoomStyles = makeStyles()((theme) => ({
   actions: {
+    bottom: theme.spacing(1),
     display: 'flex',
-    flexDirection: 'column',
+    flexDirection: 'row',
     gap: theme.spacing(1),
-    left: 0,
+    left: theme.spacing(1),
     position: 'absolute',
     transition: 'top 0.15s ease-out'
   },
   minimap: {
-    '&:hover': {
-      transform: 'scale(0.25)'
-    },
-    transform: 'scale(0.15)',
-    transition: 'transform 0.15s ease-out'
+    transform: `scale(${minimapScale})`
   },
   minimapBackground: {
     fill: theme.palette.background.default,
     stroke: theme.palette.background.default
   },
+  minimapContainer: { left: 0, position: 'absolute', top: 0 },
   minimapZoom: {
     fill: theme.palette.text.primary
   },
+  movingZone: {
+    transition: 'transform 0.1s linear'
+  },
   svg: {
     '&[data-is-grabbing="true"]': {
       cursor: 'grabbing'

package/src/components/Zoom/Zoom.tsx

@@ -3,17 +3,19 @@ import { useState, useRef, useEffect } from 'react';
 import { Zoom as VisxZoom } from '@visx/zoom';
 import { RectClipPath } from '@visx/clip-path';
 
+import ZoomInIcon from '@mui/icons-material/Add';
+import ZoomOutIcon from '@mui/icons-material/Remove';
+
 import { ParentSize } from '../..';
-import { Button } from '../Button';
+import { Button, IconButton } from '../Button';
 
 import { useZoomStyles } from './Zoom.styles';
+import Minimap from './Minimap';
 
 export interface ZoomProps {
   children: JSX.Element;
   labels: {
     clear: string;
-    zoomIn: string;
-    zoomOut: string;
   };
   scaleMax?: number;
   scaleMin?: number;
@@ -43,7 +45,6 @@ const Zoom = ({
     height: number;
     width: number;
   } | null>(null);
-  const [isMouseOverMinimap, setIsMouseOverMinimap] = useState(false);
   const contentRef = useRef<SVGGElement | null>(null);
 
   const resizeObserver = new ResizeObserver(() => {
@@ -53,14 +54,6 @@ const Zoom = ({
     });
   });
 
-  const mouseEntersMinimap = (): void => {
-    setIsMouseOverMinimap(true);
-  };
-
-  const mouseLeavesMinimap = (): void => {
-    setIsMouseOverMinimap(false);
-  };
-
   useEffect(() => {
     if (contentRef.current) {
       resizeObserver.disconnect();
@@ -110,60 +103,37 @@ const Zoom = ({
                 >
                   {children}
                 </g>
-                {showMinimap && (
-                  <g
-                    className={classes.minimap}
-                    clipPath="url(#zoom-clip)"
-                    onMouseLeave={mouseLeavesMinimap}
-                    onMouseOver={mouseEntersMinimap}
+              </svg>
+              <svg className={classes.minimapContainer}>
+                {showMinimap && contentClientRect && (
+                  <Minimap
+                    contentClientRect={contentClientRect}
+                    height={height}
+                    width={width}
+                    zoom={zoom}
                   >
-                    <rect
-                      className={classes.minimapBackground}
-                      height={Math.max(contentClientRect?.height || 0, height)}
-                      rx={radius}
-                      width={Math.max(contentClientRect?.width || 0, width)}
-                    />
                     {children}
-                    <rect
-                      className={classes.minimapZoom}
-                      fillOpacity={0.2}
-                      height={height}
-                      rx={radius}
-                      transform={zoom.toStringInvert()}
-                      width={width}
-                    />
-                  </g>
+                  </Minimap>
                 )}
               </svg>
-              <div
-                className={classes.actions}
-                style={{
-                  top: showMinimap
-                    ? Math.max(contentClientRect?.height || 0, height) *
-                      (isMouseOverMinimap ? 0.28 : 0.18)
-                    : 8
-                }}
-              >
-                <Button
+              <div className={classes.actions}>
+                <IconButton
                   data-testid="zoom in"
+                  icon={<ZoomInIcon />}
                   size="small"
-                  variant="secondary"
                   onClick={() => zoom.scale({ scaleX: 1.2, scaleY: 1.2 })}
-                >
-                  {labels.zoomIn}
-                </Button>
-                <Button
+                />
+                <IconButton
                   data-testid="zoom out"
+                  icon={<ZoomOutIcon />}
                   size="small"
-                  variant="secondary"
                   onClick={() => zoom.scale({ scaleX: 0.8, scaleY: 0.8 })}
-                >
-                  {labels.zoomOut}
-                </Button>
+                />
+
                 <Button
                   data-testid="clear"
                   size="small"
-                  variant="secondary"
+                  variant="ghost"
                   onClick={zoom.clear}
                 >
                   {labels.clear}

package/src/components/Zoom/constants.ts

@@ -0,0 +1,2 @@
+export const radius = 30;
+export const minimapScale = 0.2;

package/src/components/Zoom/useMinimap.ts

@@ -0,0 +1,96 @@
+import { useCallback } from 'react';
+
+import { ProvidedZoom } from '@visx/zoom/lib/types';
+import { equals, gt } from 'ramda';
+
+interface ZoomState {
+  transformMatrix: {
+    scaleX: number;
+    scaleY: number;
+    skewX: number;
+    skewY: number;
+  };
+}
+
+export interface UseMinimapProps {
+  height: number;
+  minimapScale: number;
+  width: number;
+  zoom: ProvidedZoom<SVGSVGElement> & ZoomState;
+}
+
+interface UseMinimapState {
+  move: (e) => void;
+  transformTo: (e) => void;
+  zoomInOut: (e) => void;
+}
+
+export const useMinimap = ({
+  width,
+  height,
+  zoom,
+  minimapScale
+}: UseMinimapProps): UseMinimapState => {
+  const getMatrixPoint = useCallback(
+    (event): { x: number; y: number } => {
+      const point = {
+        x: event.nativeEvent.offsetX * (1 / minimapScale),
+        y: event.nativeEvent.offsetY * (1 / minimapScale)
+      };
+
+      return {
+        x: -(point.x * zoom.transformMatrix.scaleX - width / 2),
+        y: -(point.y * zoom.transformMatrix.scaleY - height / 2)
+      };
+    },
+    [zoom.transformMatrix]
+  );
+
+  const transformTo = useCallback(
+    (e): void => {
+      const { x, y } = getMatrixPoint(e);
+      zoom.setTransformMatrix({
+        ...zoom.transformMatrix,
+        translateX: x,
+        translateY: y
+      });
+    },
+    [zoom.transformMatrix]
+  );
+
+  const move = useCallback(
+    (e): void => {
+      if (!equals(e.buttons, 1)) {
+        return;
+      }
+      transformTo(e);
+    },
+    [zoom.transformMatrix]
+  );
+
+  const zoomInOut = useCallback(
+    (e): void => {
+      const isZoomIn = gt(0, e.deltaY);
+      const { x, y } = getMatrixPoint(e);
+
+      zoom.setTransformMatrix({
+        ...zoom.transformMatrix,
+        scaleX: isZoomIn
+          ? zoom.transformMatrix.scaleX + 0.1
+          : zoom.transformMatrix.scaleX - 0.1,
+        scaleY: isZoomIn
+          ? zoom.transformMatrix.scaleY + 0.1
+          : zoom.transformMatrix.scaleY - 0.1,
+        translateX: x,
+        translateY: y
+      });
+    },
+    [zoom.transformMatrix]
+  );
+
+  return {
+    move,
+    transformTo,
+    zoomInOut
+  };
+};