@centreon/ui 24.9.4 → 24.9.6

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

@@ -1,170 +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 Minimap from './Minimap';
-import { useZoomStyles } from './Zoom.styles';
-import { minimapScale, radius } from './constants';
-import { ChildrenProps, MinimapPosition, ZoomState } from './models';
-import { useZoom } from './useZoom';
-
-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

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

package/src/components/Zoom/localPoint.ts

@@ -1,51 +0,0 @@
-import type {
-  FocusEvent as ReactFocusEvent,
-  MouseEvent as ReactMouseEvent,
-  TouchEvent as ReactTouchEvent
-} from 'react';
-
-import { Point } from '@visx/point';
-
-type EventType =
-  | MouseEvent
-  | TouchEvent
-  | FocusEvent
-  | ReactFocusEvent
-  | ReactMouseEvent
-  | ReactTouchEvent;
-
-type PointCoords = Pick<Point, 'x' | 'y'>;
-
-const defaultPoint = { x: 0, y: 0 };
-
-const isTouchEvent = (event?: EventType): event is TouchEvent =>
-  !!event && 'changedTouches' in event;
-
-export const isMouseEvent = (event?: EventType): event is MouseEvent =>
-  !!event && 'clientX' in event;
-
-const getXAndYFromEvent = (event?: EventType): PointCoords => {
-  if (!event) return { ...defaultPoint };
-
-  if (isTouchEvent(event)) {
-    return event.changedTouches.length > 0
-      ? {
-          x: event.changedTouches[0].clientX,
-          y: event.changedTouches[0].clientY
-        }
-      : { ...defaultPoint };
-  }
-
-  if (isMouseEvent(event)) {
-    return {
-      x: event.clientX,
-      y: event.clientY
-    };
-  }
-
-  return { ...defaultPoint };
-};
-
-export const localPoint = (event: EventType): PointCoords | null => {
-  return getXAndYFromEvent(event);
-};

package/src/components/Zoom/models.ts

@@ -1,25 +0,0 @@
-export interface ZoomState {
-  transformMatrix: {
-    scaleX: number;
-    scaleY: number;
-    skewX: number;
-    skewY: number;
-    translateX: number;
-    translateY: number;
-  };
-}
-
-export type MinimapPosition =
-  | 'top-left'
-  | 'top-right'
-  | 'bottom-left'
-  | 'bottom-right';
-
-export interface ChildrenProps extends ZoomState {
-  contentClientRect: {
-    height: number;
-    width: number;
-  } | null;
-  height: number;
-  width: number;
-}

package/src/components/Zoom/useMinimap.ts

@@ -1,156 +0,0 @@
-import { useCallback, useState } from 'react';
-
-import { Point } from '@visx/point';
-import { ProvidedZoom, Translate } from '@visx/zoom/lib/types';
-import { equals, gt, isNil, pick } from 'ramda';
-
-import { ZoomState } from './models';
-
-export interface UseMinimapProps {
-  height: number;
-  isDraggingFromContainer: boolean;
-  minimapScale: number;
-  scale: number;
-  width: number;
-  zoom: ProvidedZoom<SVGSVGElement> & ZoomState;
-}
-
-interface UseMinimapState {
-  dragEnd: (e) => void;
-  dragStart: (e) => void;
-  move: (e) => void;
-  transformTo: (e) => void;
-  zoomInOut: (e) => void;
-}
-
-export const useMinimap = ({
-  width,
-  height,
-  zoom,
-  minimapScale,
-  isDraggingFromContainer,
-  scale
-}: UseMinimapProps): UseMinimapState => {
-  const [startPoint, setStartPoint] = useState<Pick<Point, 'x' | 'y'> | null>(
-    null
-  );
-  const [startTranslate, setStartTranslate] = useState<Translate | null>(null);
-
-  const getMatrixPoint = useCallback(
-    (event, newScale?: number): { x: number; y: number } => {
-      const hasScale = scale > 1;
-      const point = {
-        x: event.nativeEvent.offsetX * (1 / minimapScale),
-        y: event.nativeEvent.offsetY * (1 / minimapScale)
-      };
-
-      const dx = -(
-        point.x * (newScale || zoom.transformMatrix.scaleX) -
-        width / 2
-      );
-      const dy = -(
-        point.y * (newScale || zoom.transformMatrix.scaleY) -
-        height / 2
-      );
-
-      return {
-        x: !hasScale ? dx : dx * scale - width / 2,
-        y: !hasScale ? dy : dy * scale - height / 2
-      };
-    },
-    [zoom.transformMatrix, scale, width, height, minimapScale]
-  );
-
-  const transformTo = useCallback(
-    (e): void => {
-      if (!isNil(e.nativeEvent.which) && !equals(e.nativeEvent.which, 1)) {
-        return;
-      }
-      const { x, y } = getMatrixPoint(e);
-      zoom.setTransformMatrix({
-        ...zoom.transformMatrix,
-        translateX: x,
-        translateY: y
-      });
-    },
-    [zoom.transformMatrix, scale]
-  );
-
-  const dragStart = (e): void => {
-    if (
-      (!isNil(e.nativeEvent.which) && !equals(e.nativeEvent.which, 1)) ||
-      isDraggingFromContainer
-    ) {
-      return;
-    }
-    setStartPoint(getMatrixPoint(e));
-    setStartTranslate(pick(['translateX', 'translateY'], zoom.transformMatrix));
-  };
-
-  const dragEnd = (): void => {
-    setStartPoint(null);
-    setStartTranslate(null);
-  };
-
-  const move = useCallback(
-    (e): void => {
-      if (!startPoint || !startTranslate) {
-        return;
-      }
-      const { x, y } = getMatrixPoint(e);
-
-      const diffX = startPoint.x - x;
-      const diffY = startPoint.y - y;
-
-      zoom.setTransformMatrix({
-        ...zoom.transformMatrix,
-        translateX: startTranslate.translateX - diffX,
-        translateY: startTranslate.translateY - diffY
-      });
-    },
-
-    [zoom.transformMatrix, isDraggingFromContainer, scale, startPoint]
-  );
-
-  const zoomInOut = useCallback(
-    (e): void => {
-      const isZoomIn = gt(0, e.deltaY);
-
-      const newScaleX = isZoomIn
-        ? zoom.transformMatrix.scaleX + 0.1
-        : zoom.transformMatrix.scaleX - 0.1;
-
-      const newScaleY = isZoomIn
-        ? zoom.transformMatrix.scaleX + 0.1
-        : zoom.transformMatrix.scaleX - 0.1;
-      const { x, y } = getMatrixPoint(e, newScaleX);
-
-      const diffX = x - zoom.transformMatrix.translateX;
-      const diffY = y - zoom.transformMatrix.translateY;
-
-      zoom.setTransformMatrix({
-        ...zoom.transformMatrix,
-        scaleX: newScaleX,
-        scaleY: newScaleY,
-        translateX: zoom.transformMatrix.translateX + diffX / 4,
-        translateY: zoom.transformMatrix.translateY + diffY / 4
-      });
-    },
-    [
-      zoom.transformMatrix,
-      width,
-      height,
-      isDraggingFromContainer,
-      scale,
-      startPoint
-    ]
-  );
-
-  return {
-    dragEnd,
-    dragStart,
-    move,
-    transformTo,
-    zoomInOut
-  };
-};

package/src/components/Zoom/useZoom.ts

@@ -1,70 +0,0 @@
-import { useCallback, useState } from 'react';
-
-import { Point, ProvidedZoom, Translate } from '@visx/zoom/lib/types';
-import { equals, isNil } from 'ramda';
-
-import { localPoint } from './localPoint';
-import { ZoomState } from './models';
-
-const isLeftMouseButtonClicked = (e): boolean =>
-  !isNil(e.nativeEvent.which) && equals(e.nativeEvent.which, 1);
-
-interface UseZoomState {
-  dragEnd: () => void;
-  dragStart: (zoom: ProvidedZoom<SVGSVGElement> & ZoomState) => (e) => void;
-  isDragging: boolean;
-  move: (zoom: ProvidedZoom<SVGSVGElement> & ZoomState) => (e) => void;
-}
-
-export const useZoom = (): UseZoomState => {
-  const [startTranslate, setStartTranslate] = useState<Translate | null>(null);
-  const [startPoint, setStartPoint] = useState<Point | null>(null);
-
-  const dragStart = useCallback(
-    (zoom: ProvidedZoom<SVGSVGElement> & ZoomState) =>
-      (e): void => {
-        if (!isLeftMouseButtonClicked(e)) {
-          return;
-        }
-        const { translateX, translateY } = zoom.transformMatrix;
-        setStartPoint(localPoint(e) || null);
-        setStartTranslate({ translateX, translateY });
-      },
-    []
-  );
-
-  const move = useCallback(
-    (zoom: ProvidedZoom<SVGSVGElement> & ZoomState) =>
-      (e): void => {
-        if (!startPoint || !startTranslate) {
-          return;
-        }
-        const currentPoint = localPoint(e);
-        const dx = currentPoint
-          ? -(startPoint.x - currentPoint.x)
-          : -startPoint.x;
-        const dy = currentPoint
-          ? -(startPoint.y - currentPoint.y)
-          : -startPoint.y;
-
-        const translateX = startTranslate.translateX + dx;
-        const translateY = startTranslate.translateY + dy;
-        zoom.setTranslate({
-          translateX,
-          translateY
-        });
-      },
-    [startPoint, startTranslate]
-  );
-  const dragEnd = useCallback((): void => {
-    setStartPoint(null);
-    setStartTranslate(null);
-  }, []);
-
-  return {
-    dragEnd,
-    dragStart,
-    isDragging: Boolean(startPoint && startTranslate),
-    move
-  };
-};

package/src/components/Zoom/utils.ts

@@ -1,55 +0,0 @@
-import { CSSProperties } from 'react';
-
-interface Props {
-  contentClientRect: {
-    height: number;
-    width: number;
-  } | null;
-}
-
-export const applyTranformStylesForZoom = ({
-  contentClientRect
-}: Props): CSSProperties => {
-  const contentRect = {
-    height: contentClientRect?.height || 1,
-    width: contentClientRect?.width || 1
-  };
-  const isPortrait = contentRect.height > contentRect.width;
-  const sizes = isPortrait ? ['width', 'height'] : ['height', 'width'];
-  const sizeScale = contentRect[sizes[0]] / contentRect[sizes[1]];
-
-  const lengthToUse = isPortrait
-    ? contentRect[sizes[1]] - contentRect[sizes[0]]
-    : contentRect[sizes[0]];
-
-  const t = sizeScale > 0.85 && isPortrait ? sizeScale * 4 : sizeScale / 2;
-  const xScaleFactor = sizeScale > 0.7 && !isPortrait ? 10 : 6;
-
-  return {
-    transform: `translate(-${isPortrait ? 0 : contentRect.width * (sizeScale / xScaleFactor)}px, -${lengthToUse * (isPortrait ? t + 0.08 : t / 2)}px)`
-  };
-};
-
-// DO NOT REMOVE: As the component is in work in progress, please this code in case we need
-// const getAdditionalPadding = (): number => {
-//   if (additionalScale > 0.05) {
-//     return 0;
-//   }
-
-//   const padding =
-//     additionalScale > 0.012
-//       ? (1 / additionalScale) * (1 / zoom.transformMatrix.scaleY)
-//       : 1 / additionalScale / zoom.transformMatrix.scaleY;
-
-//   if (additionalScale < 0.009) {
-//     const tweakScale = scaleLinear({
-//       clamp: true,
-//       domain: [0.009, 0.002],
-//       range: [1, 8]
-//     });
-
-//     return padding - padding / tweakScale(additionalScale);
-//   }
-
-//   return padding;
-// };

package/src/components/index.ts

@@ -1,16 +0,0 @@
-export * from './Button';
-export * from './Modal';
-export * from './Form';
-export * from './Header';
-export * from './DataTable';
-export * from './Layout';
-export * from './Tooltip';
-export * from './Menu';
-export * from './List';
-export * from './ItemComposition';
-export * from './Avatar';
-export * from './CollapsibleItem';
-export * from './Inputs';
-export { default as Zoom } from './Zoom/Zoom';
-export * from './Tabs';
-export { default as CopyCommand } from './CopyCommand/CopyCommand';