@centreon/ui 24.4.64 → 24.4.65

package/src/components/Zoom/localPoint.ts

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

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

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

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

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

@@ -11,3 +11,4 @@ export * from './ItemComposition';
 export * from './Avatar';
 export * from './CollapsibleItem';
 export * from './Inputs';
+export { default as Zoom } from './Zoom/Zoom';