@centreon/ui 24.5.2 → 24.5.4

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

@@ -1,246 +0,0 @@
-import Zoom from './Zoom';
-
-const Content = (): JSX.Element => (
-  <g style={{ transform: 'translate(300px, 150px)' }}>
-    <circle fill="blue" r={50} stroke="black" />
-  </g>
-);
-
-const ContentWithMultipleShapes = (): JSX.Element => {
-  return (
-    <g>
-      <g style={{ transform: 'translate(300px, 150px)' }}>
-        <circle fill="blue" r={50} stroke="black" />
-      </g>
-      <g style={{ transform: 'translate(600px, 500px)' }}>
-        <circle fill="green" r={70} />
-      </g>
-      <g style={{ transform: 'translate(150px, 600px)' }}>
-        <circle fill="red" r={70} />
-      </g>
-    </g>
-  );
-};
-const ContentWithMultipleShapesWithNegativeTranslations = (): JSX.Element => {
-  return (
-    <g>
-      <g style={{ transform: 'translate(-300px, -150px)' }}>
-        <circle fill="blue" r={50} stroke="black" />
-      </g>
-      <g style={{ transform: 'translate(600px, 500px)' }}>
-        <circle fill="green" r={70} />
-      </g>
-      <g style={{ transform: 'translate(150px, 600px)' }}>
-        <circle fill="red" r={70} />
-      </g>
-    </g>
-  );
-};
-
-interface Props {
-  minimapPosition?;
-  showMinimap: boolean;
-  tenplate?: () => JSX.Element;
-}
-
-const initialize = ({
-  showMinimap,
-  minimapPosition,
-  template = Content
-}: Props): void => {
-  cy.mount({
-    Component: (
-      <div style={{ height: '400px', width: '100%' }}>
-        <Zoom minimapPosition={minimapPosition} showMinimap={showMinimap}>
-          {template}
-        </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.findByTestId('zoom in').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.findByTestId('zoom out').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 up', () => {
-    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 down', () => {
-    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.findByTestId('clear').click();
-
-    cy.get('g[transform="matrix(1, 0, 0, 1, 0, 0)"]');
-
-    cy.makeSnapshot();
-  });
-
-  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.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('zooms out when the minimap is scrolled down', () => {
-    initialize({ showMinimap: true });
-
-    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 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, 0, 0)'
-    );
-
-    cy.makeSnapshot();
-  });
-
-  it('displays the minimap in the bottom right when the prop to the corresponding value', () => {
-    initialize({ minimapPosition: 'bottom-right', showMinimap: true });
-
-    cy.get('g[clip-path="url(#zoom-clip)"]').should('be.visible');
-    cy.get('svg').should('have.attr', 'height', '400');
-
-    cy.makeSnapshot();
-  });
-
-  it('applies a scale down on the minimap when the content is higher than the original height', () => {
-    initialize({ showMinimap: true, template: ContentWithMultipleShapes });
-
-    cy.get('g[clip-path="url(#zoom-clip)"]').should('be.visible');
-    cy.get('svg').should('have.attr', 'height', '400');
-
-    cy.findByTestId('minimap-interaction')
-      .parent()
-      .find('g')
-      .should('have.attr', 'style')
-      .and('include', 'transform: scale(0.684211) translate(-85px, -105px);');
-
-    cy.makeSnapshot();
-  });
-
-  it('applies a scale down on the minimap when the content has negative translation values', () => {
-    initialize({
-      showMinimap: true,
-      template: ContentWithMultipleShapesWithNegativeTranslations
-    });
-
-    cy.get('g[clip-path="url(#zoom-clip)"]').should('be.visible');
-    cy.get('svg').should('have.attr', 'height', '400');
-
-    cy.findByTestId('minimap-interaction')
-      .parent()
-      .find('g')
-      .should('have.attr', 'style')
-      .and('include', 'transform: scale(0.448276) translate(345px, 195px);');
-
-    cy.makeSnapshot();
-  });
-});

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

@@ -1,115 +0,0 @@
-import { Meta, StoryObj } from '@storybook/react';
-
-import Zoom, { ZoomProps } from './Zoom';
-
-const meta: Meta<typeof Zoom> = {
-  argTypes: {
-    minimapPosition: {
-      control: 'select',
-      options: ['top-left', 'top-right', 'bottom-left', 'bottom-right']
-    },
-    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 = (): JSX.Element => {
-  return (
-    <g style={{ transform: 'translate(-150px, -100px)' }}>
-      <g style={{ transform: 'translate(300px, 150px)' }}>
-        <circle fill="blue" r={50} stroke="black" />
-      </g>
-      <g style={{ transform: 'translate(600px, 400px)' }}>
-        <circle fill="green" r={70} />
-      </g>
-      <g style={{ transform: `translate(2400px, 1400px)` }}>
-        <circle fill="red" r={70} />
-      </g>
-    </g>
-  );
-};
-
-const Template = ({ children, ...args }: ZoomProps): JSX.Element => (
-  <div style={{ height: '400px', width: '100%' }}>
-    <Zoom {...args}>{children}</Zoom>
-  </div>
-);
-
-const TemplateResponsive = ({
-  redCircleXPosition,
-  redCircleYPosition,
-  ...args
-}: ZoomProps): JSX.Element => (
-  <div style={{ height: '90vh', width: '100%' }}>
-    <Zoom {...args}>
-      {() => (
-        <g>
-          <g style={{ transform: 'translate(500px, 100px)' }}>
-            <circle fill="blue" r={50} stroke="black" />
-          </g>
-          <g style={{ transform: 'translate(600px, 400px)' }}>
-            <circle fill="green" r={70} />
-          </g>
-          <g
-            style={{
-              transform: `translate(${redCircleXPosition || 100}px, ${redCircleYPosition || 100}px)`
-            }}
-          >
-            <circle fill="red" r={70} />
-          </g>
-        </g>
-      )}
-    </Zoom>
-  </div>
-);
-
-export const WithoutMinimap: Story = {
-  args: {
-    children: Content
-  },
-  render: Template
-};
-
-export const WithMinimap: Story = {
-  args: {
-    children: Content,
-    showMinimap: true
-  },
-  render: Template
-};
-
-export const WithMinimapPosition: Story = {
-  args: {
-    children: Content,
-    minimapPosition: 'bottom-right',
-    showMinimap: true
-  },
-  render: Template
-};
-
-export const Playground: Story = {
-  argTypes: {
-    redCircleXPosition: {
-      control: { max: 2600, min: 400, step: 10, type: 'range' }
-    },
-    redCircleYPosition: {
-      control: { max: 2600, min: 400, step: 10, type: 'range' }
-    }
-  },
-  args: {
-    children: Content,
-    showMinimap: true
-  },
-  render: TemplateResponsive
-};

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

@@ -1,68 +0,0 @@
-import { makeStyles } from 'tss-react/mui';
-
-import { alpha } from '@mui/system';
-
-import { minimapScale } from './constants';
-
-export const useZoomStyles = makeStyles()((theme) => ({
-  actions: {
-    backgroundColor: alpha(theme.palette.background.paper, 0.8),
-    display: 'flex',
-    flexDirection: 'row'
-  },
-  actionsAndZoom: {
-    '&[data-position="bottom-left"]': {
-      alignItems: 'flex-start',
-      bottom: 0,
-      flexDirection: 'column-reverse',
-      left: 0
-    },
-    '&[data-position="bottom-right"]': {
-      alignItems: 'flex-end',
-      bottom: 0,
-      flexDirection: 'column-reverse',
-      right: 0
-    },
-    '&[data-position="top-left"]': {
-      alignItems: 'flex-start',
-      flexDirection: 'column',
-      left: 0,
-      top: 0
-    },
-    '&[data-position="top-right"]': {
-      alignItems: 'flex-end',
-      flexDirection: 'column',
-      right: 0,
-      top: 0
-    },
-    display: 'flex',
-    position: 'absolute',
-    width: 'fit-content'
-  },
-  minimap: {
-    transform: `scale(${minimapScale})`
-  },
-  minimapBackground: {
-    fill: theme.palette.background.paper,
-    stroke: theme.palette.background.paper
-  },
-  minimapContainer: {
-    border: `1px solid ${theme.palette.divider}`,
-    borderRadius: theme.shape.borderRadius
-  },
-  minimapZoom: {
-    fill: theme.palette.primary.main,
-    stroke: theme.palette.primary.main,
-    strokeWidth: 10
-  },
-  movingZone: {
-    transition: 'transform 0.1s linear'
-  },
-  svg: {
-    '&[data-is-grabbing="true"]': {
-      cursor: 'grabbing'
-    },
-    cursor: 'grab',
-    touchAction: 'none'
-  }
-}));

package/src/components/Zoom/Zoom.tsx

@@ -1,61 +0,0 @@
-import { Zoom as VisxZoom } from '@visx/zoom';
-
-import { ParentSize } from '../..';
-
-import ZoomContent from './ZoomContent';
-import { MinimapPosition } from './models';
-
-export interface ZoomProps {
-  children: JSX.Element | (({ width, height }) => JSX.Element);
-  minimapPosition?: MinimapPosition;
-  scaleMax?: number;
-  scaleMin?: number;
-  showMinimap?: boolean;
-}
-
-const initialTransform = {
-  scaleX: 1,
-  scaleY: 1,
-  skewX: 0,
-  skewY: 0,
-  translateX: 0,
-  translateY: 0
-};
-
-const Zoom = ({
-  children,
-  scaleMin = 0.5,
-  scaleMax = 4,
-  showMinimap = false,
-  minimapPosition = 'top-left'
-}: ZoomProps): JSX.Element => {
-  return (
-    <ParentSize>
-      {({ width, height }) => (
-        <VisxZoom<SVGSVGElement>
-          height={height}
-          initialTransformMatrix={initialTransform}
-          scaleXMax={scaleMax}
-          scaleXMin={scaleMin}
-          scaleYMax={scaleMax}
-          scaleYMin={scaleMin}
-          width={width}
-        >
-          {(zoom) => (
-            <ZoomContent
-              height={height}
-              minimapPosition={minimapPosition}
-              showMinimap={showMinimap}
-              width={width}
-              zoom={zoom}
-            >
-              {children}
-            </ZoomContent>
-          )}
-        </VisxZoom>
-      )}
-    </ParentSize>
-  );
-};
-
-export default Zoom;

package/src/components/Zoom/ZoomContent.tsx

@@ -1,167 +0,0 @@
-import { useEffect, useRef, useState } from 'react';
-
-import { RectClipPath } from '@visx/clip-path';
-import { ProvidedZoom } from '@visx/zoom/lib/types';
-
-import ZoomInIcon from '@mui/icons-material/Add';
-import ZoomOutIcon from '@mui/icons-material/Remove';
-import ReplayIcon from '@mui/icons-material/Replay';
-
-import { IconButton } from '../Button';
-
-import { minimapScale, radius } from './constants';
-import { useZoom } from './useZoom';
-import { useZoomStyles } from './Zoom.styles';
-import Minimap from './Minimap';
-import { ChildrenProps, MinimapPosition, ZoomState } from './models';
-
-export interface Props {
-  children: ({ width, height, transformMatrix }: ChildrenProps) => JSX.Element;
-  height: number;
-  minimapPosition: MinimapPosition;
-  showMinimap?: boolean;
-  width: number;
-  zoom: ProvidedZoom<SVGSVGElement> & ZoomState;
-}
-
-const ZoomContent = ({
-  zoom,
-  width,
-  height,
-  children,
-  showMinimap,
-  minimapPosition
-}: Props): JSX.Element => {
-  const { classes } = useZoomStyles();
-  const contentRef = useRef<SVGGElement | null>(null);
-  const minimapSvgRef = useRef<SVGSVGElement | null>(null);
-  const minimapContentRef = useRef<SVGSVGElement | null>(null);
-  const [contentClientRect, setContentClientRect] = useState<{
-    height: number;
-    width: number;
-  } | null>(null);
-
-  const resizeObserver = new ResizeObserver(() => {
-    const contentBoundingClientRect = (
-      contentRef.current as SVGGElement
-    ).getBoundingClientRect();
-
-    setContentClientRect({
-      height: contentBoundingClientRect.height,
-      width: contentBoundingClientRect.width
-    });
-  });
-
-  useEffect(() => {
-    if (contentRef.current) {
-      resizeObserver.disconnect();
-      resizeObserver.observe(contentRef.current);
-    }
-
-    return () => {
-      resizeObserver.disconnect();
-    };
-  }, [contentRef.current]);
-
-  const { move, dragEnd, dragStart, isDragging } = useZoom();
-
-  const diffBetweenContentAndSvg = minimapSvgRef.current &&
-    minimapContentRef.current && {
-      left:
-        minimapContentRef.current.getBoundingClientRect().left -
-        minimapSvgRef.current.getBoundingClientRect().left,
-      top:
-        minimapContentRef.current.getBoundingClientRect().top -
-        minimapSvgRef.current.getBoundingClientRect().top
-    };
-
-  return (
-    <div style={{ position: 'relative' }}>
-      <svg
-        className={classes.svg}
-        data-is-grabbing={isDragging}
-        data-testid="zoom-container"
-        height={height}
-        width={width}
-        onMouseDown={dragStart(zoom)}
-        onMouseEnter={dragStart(zoom)}
-        onMouseLeave={dragEnd}
-        onMouseMove={move(zoom)}
-        onMouseUp={dragEnd}
-        onWheel={zoom.handleWheel}
-      >
-        <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({
-            contentClientRect,
-            height,
-            transformMatrix: zoom.transformMatrix,
-            width
-          })}
-        </g>
-      </svg>
-      <div className={classes.actionsAndZoom} data-position={minimapPosition}>
-        {showMinimap && contentClientRect && (
-          <svg
-            className={classes.minimapContainer}
-            data-testid="minimap"
-            height={height * minimapScale}
-            ref={minimapSvgRef}
-            width={width * minimapScale}
-          >
-            <Minimap
-              contentClientRect={contentClientRect}
-              diffBetweenContentAndSvg={
-                diffBetweenContentAndSvg || { left: 0, top: 0 }
-              }
-              height={height}
-              isDraggingFromContainer={isDragging}
-              width={width}
-              zoom={zoom}
-            >
-              <g ref={minimapContentRef}>
-                {children({
-                  contentClientRect,
-                  height,
-                  transformMatrix: zoom.transformMatrix,
-                  width
-                })}
-              </g>
-            </Minimap>
-          </svg>
-        )}
-        <div className={classes.actions}>
-          <IconButton
-            data-testid="zoom in"
-            icon={<ZoomInIcon />}
-            size="small"
-            onClick={() => zoom.scale({ scaleX: 1.2, scaleY: 1.2 })}
-          />
-          <IconButton
-            data-testid="zoom out"
-            icon={<ZoomOutIcon />}
-            size="small"
-            onClick={() => zoom.scale({ scaleX: 0.8, scaleY: 0.8 })}
-          />
-          <IconButton
-            data-testid="clear"
-            icon={<ReplayIcon />}
-            size="small"
-            onClick={zoom.reset}
-          />
-        </div>
-      </div>
-    </div>
-  );
-};
-
-export default ZoomContent;

package/src/components/Zoom/constants.ts

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