@centreon/ui 24.7.2 → 24.7.4

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 DEFAULT_POINT = { 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 { ...DEFAULT_POINT };
-
-  if (isTouchEvent(event)) {
-    return event.changedTouches.length > 0
-      ? {
-          x: event.changedTouches[0].clientX,
-          y: event.changedTouches[0].clientY
-        }
-      : { ...DEFAULT_POINT };
-  }
-
-  if (isMouseEvent(event)) {
-    return {
-      x: event.clientX,
-      y: event.clientY
-    };
-  }
-
-  return { ...DEFAULT_POINT };
-};
-
-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 { ProvidedZoom, Translate } from '@visx/zoom/lib/types';
-import { equals, gt, isNil, pick } from 'ramda';
-import { Point } from '@visx/point';
-
-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,15 +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';