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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@centreon/ui",
-  "version": "24.4.1-MON-38152-listing.0",
+  "version": "24.4.1-MON-34377-implement-tree-chart-on-centreon-ui.0",
   "description": "Centreon UI Components",
   "scripts": {
     "update:deps": "pnpx npm-check-updates -i --format group",
@@ -114,6 +114,7 @@
     "@lexical/selection": "^0.12.6",
     "@lexical/utils": "^0.12.6",
     "@react-spring/web": "^9.7.3",
+    "@visx/clip-path": "^3.3.0",
     "@visx/curve": "^2.1.0",
     "@visx/group": "^3.3.0",
     "@visx/legend": "^3.5.0",
@@ -123,6 +124,7 @@
     "@visx/text": "^3.3.0",
     "@visx/threshold": "^2.12.2",
     "@visx/visx": "2.16.0",
+    "@visx/zoom": "^3.3.0",
     "anylogger": "^1.0.11",
     "d3-array": "3.2.4",
     "humanize-duration": "^3.31.0",

package/src/ThemeProvider/index.tsx

@@ -184,6 +184,9 @@ export const getTheme = (mode: ThemeMode): ThemeOptions => ({
           padding: 0;
           width: 100%;
         }
+        #root {
+          background-color: ${theme.palette.background.paper};
+        }
         @font-face {
           font-family: 'Roboto';
           font-style: normal;

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

@@ -0,0 +1,132 @@
+import Zoom from './Zoom';
+
+const content = (
+  <g style={{ transform: 'translate(300px, 150px)' }}>
+    <circle fill="blue" r={50} stroke="black" />
+  </g>
+);
+
+const labels = {
+  clear: 'Clear',
+  zoomIn: '+',
+  zoomOut: '-'
+};
+
+const initialize = ({ showMinimap }): void => {
+  cy.mount({
+    Component: (
+      <div style={{ height: '400px', width: '100%' }}>
+        <Zoom labels={labels} showMinimap={showMinimap}>
+          {content}
+        </Zoom>
+      </div>
+    )
+  });
+};
+
+describe('Zoom', () => {
+  it('displays the minimap when the prop is set', () => {
+    initialize({ showMinimap: true });
+
+    cy.get('g[clip-path="url(#zoom-clip)"]').should('be.visible');
+
+    cy.makeSnapshot();
+  });
+
+  it('zooms in when the corresponding buttom is clicked', () => {
+    initialize({ showMinimap: true });
+
+    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-content')
+      .should('have.attr', 'transform')
+      .and('include', '1.2, 0, 0, 1.2');
+
+    cy.makeSnapshot();
+  });
+
+  it('zooms out when the corresponding buttom is clicked', () => {
+    initialize({ showMinimap: true });
+
+    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-content')
+      .should('have.attr', 'transform')
+      .and('include', '0.8, 0, 0, 0.8');
+
+    cy.makeSnapshot();
+  });
+
+  it('zooms out when the content is scrolled', () => {
+    initialize({ showMinimap: true });
+
+    cy.get('g[transform="matrix(1, 0, 0, 1, 0, 0)"]');
+    cy.get('g[clip-path="url(#zoom-clip)"]').should('be.visible');
+
+    cy.findByTestId('zoom-content').realMouseWheel({ deltaY: 20 });
+
+    cy.findByTestId('zoom-content')
+      .should('have.attr', 'transform')
+      .and('include', '0.9, 0, 0, 0.9');
+
+    cy.makeSnapshot();
+  });
+
+  it('zooms in when the content is scrolled', () => {
+    initialize({ showMinimap: true });
+
+    cy.get('g[transform="matrix(1, 0, 0, 1, 0, 0)"]');
+    cy.get('g[clip-path="url(#zoom-clip)"]').should('be.visible');
+
+    cy.findByTestId('zoom-content').realMouseWheel({ deltaY: -20 });
+
+    cy.findByTestId('zoom-content')
+      .should('have.attr', 'transform')
+      .and('include', '1.1, 0, 0, 1.1');
+
+    cy.makeSnapshot();
+  });
+
+  it('clears the zoom when the corresponding button is clicked', () => {
+    initialize({ showMinimap: true });
+
+    cy.get('g[transform="matrix(1, 0, 0, 1, 0, 0)"]');
+    cy.get('g[clip-path="url(#zoom-clip)"]').should('be.visible');
+
+    cy.findByTestId('zoom-content').realMouseWheel({ deltaY: -20 });
+
+    cy.findByTestId('zoom-content')
+      .should('have.attr', 'transform')
+      .and('include', '1.1, 0, 0, 1.1');
+
+    cy.contains('Clear').click();
+
+    cy.get('g[transform="matrix(1, 0, 0, 1, 0, 0)"]');
+
+    cy.makeSnapshot();
+  });
+
+  it('highlights the minimap when the mouse is over the minimap', () => {
+    initialize({ showMinimap: true });
+
+    cy.get('g[clip-path="url(#zoom-clip)"]').should('be.visible');
+
+    cy.get('g[clip-path="url(#zoom-clip)"]').realHover();
+
+    cy.makeSnapshot();
+  });
+
+  it('does not display the minimap 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();
+  });
+});

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

@@ -0,0 +1,56 @@
+import { Meta, StoryObj } from '@storybook/react';
+
+import Zoom, { ZoomProps } from './Zoom';
+
+const meta: Meta<typeof Zoom> = {
+  argTypes: {
+    scaleMax: {
+      control: { max: 16, min: 0.4, step: 0.2, type: 'range' }
+    },
+    scaleMin: {
+      control: { max: 16, min: 0.4, step: 0.2, type: 'range' }
+    },
+    showMinimap: {
+      control: 'boolean'
+    }
+  },
+  component: Zoom
+};
+
+export default meta;
+type Story = StoryObj<typeof Zoom>;
+
+const content = (
+  <g style={{ transform: 'translate(300px, 150px)' }}>
+    <circle fill="blue" r={50} stroke="black" />
+  </g>
+);
+
+const Template = ({ children, ...args }: ZoomProps): JSX.Element => (
+  <div style={{ height: '400px', width: '100%' }}>
+    <Zoom {...args}>{children}</Zoom>
+  </div>
+);
+
+const labels = {
+  clear: 'Clear',
+  zoomIn: '+',
+  zoomOut: '-'
+};
+
+export const Default: Story = {
+  args: {
+    children: content,
+    labels,
+    showMinimap: true
+  },
+  render: Template
+};
+
+export const WithoutMinimap: Story = {
+  args: {
+    children: content,
+    labels
+  },
+  render: Template
+};

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

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

package/src/components/Zoom/Zoom.tsx

@@ -0,0 +1,180 @@
+import { useState, useRef, useEffect } from 'react';
+
+import { Zoom as VisxZoom } from '@visx/zoom';
+import { RectClipPath } from '@visx/clip-path';
+
+import { ParentSize } from '../..';
+import { Button } from '../Button';
+
+import { useZoomStyles } from './Zoom.styles';
+
+export interface ZoomProps {
+  children: JSX.Element;
+  labels: {
+    clear: string;
+    zoomIn: string;
+    zoomOut: string;
+  };
+  scaleMax?: number;
+  scaleMin?: number;
+  showMinimap?: boolean;
+}
+
+const initialTransform = {
+  scaleX: 1,
+  scaleY: 1,
+  skewX: 0,
+  skewY: 0,
+  translateX: 0,
+  translateY: 0
+};
+const radius = 30;
+
+const Zoom = ({
+  children,
+  scaleMin = 0.5,
+  scaleMax = 4,
+  showMinimap = false,
+  labels
+}: ZoomProps): JSX.Element => {
+  const { classes } = useZoomStyles();
+
+  const [contentClientRect, setContentClientRect] = useState<{
+    height: number;
+    width: number;
+  } | null>(null);
+  const [isMouseOverMinimap, setIsMouseOverMinimap] = useState(false);
+  const contentRef = useRef<SVGGElement | null>(null);
+
+  const resizeObserver = new ResizeObserver(() => {
+    setContentClientRect({
+      height: contentRef.current?.getBoundingClientRect().height || 0,
+      width: contentRef.current?.getBoundingClientRect().width || 0
+    });
+  });
+
+  const mouseEntersMinimap = (): void => {
+    setIsMouseOverMinimap(true);
+  };
+
+  const mouseLeavesMinimap = (): void => {
+    setIsMouseOverMinimap(false);
+  };
+
+  useEffect(() => {
+    if (contentRef.current) {
+      resizeObserver.disconnect();
+      setContentClientRect({
+        height: contentRef.current?.getBoundingClientRect().height || 0,
+        width: contentRef.current?.getBoundingClientRect().width || 0
+      });
+      resizeObserver.observe(contentRef.current);
+    }
+
+    return () => {
+      resizeObserver.disconnect();
+    };
+  }, [contentRef.current]);
+
+  return (
+    <ParentSize>
+      {({ width, height }) => (
+        <VisxZoom<SVGSVGElement>
+          height={height}
+          initialTransformMatrix={initialTransform}
+          scaleXMax={scaleMax}
+          scaleXMin={scaleMin}
+          scaleYMax={scaleMax}
+          scaleYMin={scaleMin}
+          width={width}
+        >
+          {(zoom) => (
+            <div style={{ position: 'relative' }}>
+              <svg
+                className={classes.svg}
+                data-is-grabbing={zoom.isDragging}
+                height={height}
+                ref={zoom.containerRef}
+                width={width}
+              >
+                <RectClipPath
+                  height={Math.max(contentClientRect?.height || 0, height)}
+                  id="zoom-clip"
+                  rx={radius}
+                  width={Math.max(contentClientRect?.width || 0, width)}
+                />
+                <g
+                  data-testid="zoom-content"
+                  ref={contentRef}
+                  transform={zoom.toString()}
+                >
+                  {children}
+                </g>
+                {showMinimap && (
+                  <g
+                    className={classes.minimap}
+                    clipPath="url(#zoom-clip)"
+                    onMouseLeave={mouseLeavesMinimap}
+                    onMouseOver={mouseEntersMinimap}
+                  >
+                    <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>
+                )}
+              </svg>
+              <div
+                className={classes.actions}
+                style={{
+                  top: showMinimap
+                    ? Math.max(contentClientRect?.height || 0, height) *
+                      (isMouseOverMinimap ? 0.28 : 0.18)
+                    : 8
+                }}
+              >
+                <Button
+                  data-testid="zoom in"
+                  size="small"
+                  variant="secondary"
+                  onClick={() => zoom.scale({ scaleX: 1.2, scaleY: 1.2 })}
+                >
+                  {labels.zoomIn}
+                </Button>
+                <Button
+                  data-testid="zoom out"
+                  size="small"
+                  variant="secondary"
+                  onClick={() => zoom.scale({ scaleX: 0.8, scaleY: 0.8 })}
+                >
+                  {labels.zoomOut}
+                </Button>
+                <Button
+                  data-testid="clear"
+                  size="small"
+                  variant="secondary"
+                  onClick={zoom.clear}
+                >
+                  {labels.clear}
+                </Button>
+              </div>
+            </div>
+          )}
+        </VisxZoom>
+      )}
+    </ParentSize>
+  );
+};
+
+export default Zoom;

package/src/utils/useFullscreen/useFullscreen.ts

@@ -53,7 +53,7 @@ export const useFullscreen = (): UseFullscreenState => {
   };
 
   const toggleFullscreen = (element: HTMLElement | null): void => {
-    if (isFullscreenActivated) {
+    if (isFullscreenActivated || document.fullscreenElement) {
       exitFullscreen();
 
       return;