@centreon/ui 24.5.12 → 24.5.13

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;

package/src/components/Zoom/ZoomContent.tsx

@@ -0,0 +1,170 @@
+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;
+  id?: number | string;
+  minimapPosition: MinimapPosition;
+  showMinimap?: boolean;
+  width: number;
+  zoom: ProvidedZoom<SVGSVGElement> & ZoomState;
+}
+
+const ZoomContent = ({
+  zoom,
+  width,
+  height,
+  children,
+  showMinimap,
+  minimapPosition,
+  id
+}: 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-${id}`}
+          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}
+              id={id}
+              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

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