@centreon/ui 24.4.1-sync-release-34022.1 → 24.4.1-test-code-coverage.0

package/src/components/Zoom/Minimap.tsx

@@ -0,0 +1,129 @@
+import { useMemo } from 'react';
+
+import { scaleLinear } from '@visx/scale';
+
+import { minimapScale, radius } from './constants';
+import { UseMinimapProps, useMinimap } from './useMinimap';
+import { useZoomStyles } from './Zoom.styles';
+
+interface Props extends Omit<UseMinimapProps, 'minimapScale' | 'scale'> {
+  children: JSX.Element;
+  contentClientRect: {
+    height: number;
+    width: number;
+  };
+  diffBetweenContentAndSvg: {
+    left: number;
+    top: number;
+  };
+  id?: number | string;
+  isDraggingFromContainer: boolean;
+}
+
+const Minimap = ({
+  zoom,
+  children,
+  height,
+  width,
+  contentClientRect,
+  isDraggingFromContainer,
+  diffBetweenContentAndSvg,
+  id
+}: Props): JSX.Element => {
+  const { classes } = useZoomStyles();
+
+  const yMinimapScale = useMemo(
+    () => contentClientRect.height / zoom.transformMatrix.scaleY / height,
+    [contentClientRect.height, height]
+  );
+  const xMinimapScale = useMemo(
+    () => contentClientRect.width / zoom.transformMatrix.scaleX / width,
+    [contentClientRect.width, width]
+  );
+
+  const scale = Math.max(yMinimapScale, xMinimapScale);
+  const invertedScale = 1 / scale;
+  const scaleToUse = (invertedScale > 1 ? 1 : invertedScale) || 1;
+
+  const { move, zoomInOut, dragStart, dragEnd } = useMinimap({
+    height,
+    isDraggingFromContainer,
+    minimapScale,
+    scale: (invertedScale > 1 ? 1 : scale) || 1,
+    width,
+    zoom
+  });
+
+  const finalHeight = height;
+  const finalWidth = width;
+
+  const additionalScaleScale = scaleLinear({
+    clamp: true,
+    domain: [contentClientRect.height, 0],
+    range: [0, 0.05]
+  });
+
+  const additionalScale =
+    additionalScaleScale(contentClientRect.height - height) /
+    2 /
+    zoom.transformMatrix.scaleY;
+
+  const translateX = useMemo(
+    () =>
+      -diffBetweenContentAndSvg.left /
+      zoom.transformMatrix.scaleX /
+      minimapScale,
+    [diffBetweenContentAndSvg.left]
+  );
+  const translateY = useMemo(
+    () =>
+      -diffBetweenContentAndSvg.top /
+      zoom.transformMatrix.scaleX /
+      minimapScale,
+    [diffBetweenContentAndSvg.top]
+  );
+
+  return (
+    <g className={classes.minimap} clipPath={`url(#zoom-clip-${id})`}>
+      <rect
+        className={classes.minimapBackground}
+        height={finalHeight}
+        rx={radius}
+        width={finalWidth}
+      />
+      <g
+        className={classes.movingZone}
+        style={{
+          transform: `scale(${scaleToUse - additionalScale}) translate(${translateX}px, ${translateY}px)`
+        }}
+      >
+        {children}
+        <g>
+          <rect
+            className={classes.minimapZoom}
+            fillOpacity={0.2}
+            height={height}
+            rx={radius}
+            transform={zoom.toStringInvert()}
+            width={width}
+          />
+        </g>
+      </g>
+      <rect
+        data-testid="minimap-interaction"
+        fill="transparent"
+        height={finalHeight}
+        rx={radius}
+        width={finalWidth}
+        onMouseDown={dragStart}
+        onMouseEnter={dragStart}
+        onMouseLeave={dragEnd}
+        onMouseMove={move}
+        onMouseUp={dragEnd}
+        onWheel={zoomInOut}
+      />
+    </g>
+  );
+};
+
+export default Minimap;

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

@@ -0,0 +1,246 @@
+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-0)"]').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-0)"]').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-0)"]').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-0)"]').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-0)"]').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-0)"]').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-0)"]').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-0)"]').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-0)"]').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-0)"]').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-0)"]').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-0)"]').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-0)"]').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

@@ -0,0 +1,115 @@
+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

@@ -0,0 +1,68 @@
+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

@@ -0,0 +1,64 @@
+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);
+  id?: number | string;
+  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',
+  id = 0
+}: 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}
+              id={id}
+              minimapPosition={minimapPosition}
+              showMinimap={showMinimap}
+              width={width}
+              zoom={zoom}
+            >
+              {children}
+            </ZoomContent>
+          )}
+        </VisxZoom>
+      )}
+    </ParentSize>
+  );
+};
+
+export default Zoom;