@centreon/ui 25.1.2 → 25.1.3

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@centreon/ui",
-  "version": "25.1.2",
+  "version": "25.1.3",
   "description": "Centreon UI Components",
   "scripts": {
     "update:deps": "pnpx npm-check-updates -i --format group",

package/src/components/Zoom/Zoom.tsx

@@ -1,42 +1,45 @@
+import { type MutableRefObject } from 'react';
 import { Zoom as VisxZoom } from '@visx/zoom';
+import { TransformMatrix } from '@visx/zoom/lib/types';
 
 import { ParentSize } from '../..';
 
 import ZoomContent from './ZoomContent';
-import type { ChildrenProps, MinimapPosition } from './models';
+import type { MinimapPosition, ZoomChildren } from './models';
 
-export interface ZoomProps {
-  children: (args: ChildrenProps) => JSX.Element;
+export interface ZoomProps extends ZoomChildren {
   id?: number | string;
   minimapPosition?: MinimapPosition;
   scaleMax?: number;
   scaleMin?: number;
   showMinimap?: boolean;
+  contentRef?: MutableRefObject<SVGGElement | null>;
+  transformMatrix?: TransformMatrix;
 }
 
-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
+  id = 0,
+  contentRef,
+  transformMatrix = {
+    scaleX: 1,
+    scaleY: 1,
+    skewX: 0,
+    skewY: 0,
+    translateX: 0,
+    translateY: 0
+  }
 }: ZoomProps): JSX.Element => {
   return (
     <ParentSize>
       {({ width, height }) => (
         <VisxZoom<SVGSVGElement>
           height={height}
-          initialTransformMatrix={initialTransform}
+          initialTransformMatrix={transformMatrix}
           scaleXMax={scaleMax}
           scaleXMin={scaleMin}
           scaleYMax={scaleMax}
@@ -51,6 +54,7 @@ const Zoom = ({
               showMinimap={showMinimap}
               width={width}
               zoom={zoom}
+              ref={contentRef}
             >
               {children}
             </ZoomContent>

package/src/components/Zoom/ZoomContent.tsx

@@ -1,4 +1,4 @@
-import { useEffect, useRef, useState } from 'react';
+import { type ForwardedRef, forwardRef, MutableRefObject, useEffect, useRef, useState } from 'react';
 
 import { RectClipPath } from '@visx/clip-path';
 
@@ -8,38 +8,38 @@ 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 type { ChildrenProps, MinimapPosition, ZoomInterface } from './models';
 import { useZoom } from './useZoom';
+import { useZoomStyles } from './Zoom.styles';
+import Minimap from './Minimap';
+import { ZoomChildren, type Dimension, type MinimapPosition, type ZoomInterface } from './models';
 
-export interface Props extends ZoomInterface {
-  children: (args: ChildrenProps) => JSX.Element;
-  height: number;
+export interface Props extends Dimension, ZoomInterface, ZoomChildren {
   id?: number | string;
   minimapPosition: MinimapPosition;
   showMinimap?: boolean;
-  width: number;
 }
 
-const ZoomContent = ({
-  zoom,
-  width,
-  height,
-  children,
-  showMinimap,
-  minimapPosition,
-  id
-}: Props): JSX.Element => {
+const ZoomContent = forwardRef(
+  (
+    {
+      zoom,
+      width,
+      height,
+      children,
+      showMinimap,
+      minimapPosition,
+      id
+    }: Props,
+    ref?: ForwardedRef<SVGGElement | null>
+  ) : JSX.Element => {
   const { classes } = useZoomStyles();
-  const contentRef = useRef<SVGGElement | null>(null);
+
+  const fallbackRef = useRef<SVGGElement | null>(null)
+  const contentRef = (ref || fallbackRef) as MutableRefObject<SVGGElement | null>;
   const minimapSvgRef = useRef<SVGSVGElement | null>(null);
   const minimapContentRef = useRef<SVGSVGElement | null>(null);
-  const [contentClientRect, setContentClientRect] = useState<{
-    height: number;
-    width: number;
-  } | null>(null);
+  const [contentClientRect, setContentClientRect] = useState<Dimension | null>(null);
 
   const resizeObserver = new ResizeObserver(() => {
     const contentBoundingClientRect = (
@@ -105,8 +105,8 @@ const ZoomContent = ({
             contentClientRect,
             height,
             transformMatrix: zoom.transformMatrix,
-            setTransformMatrix: zoom.setTransformMatrix,
-            width
+            width,
+            zoom
           })}
         </g>
       </svg>
@@ -135,8 +135,8 @@ const ZoomContent = ({
                   contentClientRect,
                   height,
                   transformMatrix: zoom.transformMatrix,
-                  setTransformMatrix: zoom.setTransformMatrix,
-                  width
+                  width,
+                  zoom
                 })}
               </g>
             </Minimap>
@@ -165,6 +165,6 @@ const ZoomContent = ({
       </div>
     </div>
   );
-};
+});
 
 export default ZoomContent;

package/src/components/Zoom/models.ts

@@ -1,15 +1,12 @@
-import type { ProvidedZoom } from '@visx/zoom/lib/types';
+import { ProvidedZoom, TransformMatrix } from '@visx/zoom/lib/types';
 
 export interface ZoomState {
-  transformMatrix: {
-    scaleX: number;
-    scaleY: number;
-    skewX: number;
-    skewY: number;
-    translateX: number;
-    translateY: number;
-  };
-  setTransformMatrix?: ProvidedZoom<SVGSVGElement>['setTransformMatrix'];
+  transformMatrix: TransformMatrix;
+}
+
+export interface Dimension {
+  height: number;
+  width: number;
 }
 
 export type MinimapPosition =
@@ -22,11 +19,12 @@ export interface ZoomInterface {
   zoom: ProvidedZoom<SVGSVGElement> & ZoomState;
 }
 
-export interface ChildrenProps extends ZoomState {
-  contentClientRect: {
-    height: number;
-    width: number;
-  } | null;
-  height: number;
-  width: number;
+export interface ChildrenProps extends ZoomState, Dimension, ZoomInterface {
+  contentClientRect: Dimension | null;
+}
+
+export interface ZoomChildren {
+  children: (args: ChildrenProps) => JSX.Element;
 }
+
+