@centreon/ui 24.11.13 → 24.11.14

package/src/components/Zoom/Minimap.tsx

@@ -1,129 +0,0 @@
-import { useMemo } from 'react';
-
-import { scaleLinear } from '@visx/scale';
-
-import { useZoomStyles } from './Zoom.styles';
-import { minimapScale, radius } from './constants';
-import { UseMinimapProps, useMinimap } from './useMinimap';
-
-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

@@ -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-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

@@ -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,64 +0,0 @@
-import { Zoom as VisxZoom } from '@visx/zoom';
-
-import { ParentSize } from '../..';
-
-import ZoomContent from './ZoomContent';
-import type { MinimapPosition } from './models';
-
-export interface ZoomProps {
-  children: JSX.Element | (({ width, height, transformMatrix }) => 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;