@centreon/ui 24.4.1-MON-34377-implement-tree-chart-on-centreon-ui.7 → 24.4.1-MON-34377-implement-tree-chart-on-centreon-ui.9

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@centreon/ui",
-  "version": "24.4.1-MON-34377-implement-tree-chart-on-centreon-ui.7",
+  "version": "24.4.1-MON-34377-implement-tree-chart-on-centreon-ui.9",
   "description": "Centreon UI Components",
   "scripts": {
     "update:deps": "pnpx npm-check-updates -i --format group",

package/src/Graph/Tree/stories/datas.ts

@@ -287,7 +287,12 @@ export const moreComplexData: Node<ComplexData> = {
         { data: { id: 30, name: 'Indicator 30', status: 'ok' } },
         { data: { id: 31, name: 'Indicator 31', status: 'ok' } },
         { data: { id: 32, name: 'Indicator 32', status: 'ok' } },
-        { data: { id: 33, name: 'Indicator 33', status: 'ok' } }
+        { data: { id: 33, name: 'Indicator 33', status: 'ok' } },
+        { data: { id: 34, name: 'Indicator 34', status: 'ok' } },
+        { data: { id: 35, name: 'Indicator 35', status: 'ok' } },
+        { data: { id: 36, name: 'Indicator 36', status: 'ok' } },
+        { data: { id: 37, name: 'Indicator 37', status: 'ok' } },
+        { data: { id: 38, name: 'Indicator 38', status: 'ok' } }
       ],
       data: { count: 2, id: 0, name: 'ok', status: 'ok' }
     }

package/src/components/Zoom/Minimap.tsx

@@ -42,7 +42,7 @@ const Minimap = ({
     height,
     isDraggingFromContainer,
     minimapScale,
-    scale: (1 / scale > 1 ? 1 : scale) || 1,
+    scale: (invertedScale > 1 ? 1 : scale) || 1,
     width,
     zoom
   });
@@ -50,12 +50,40 @@ const Minimap = ({
   const finalHeight = height;
   const finalWidth = width;
 
-  const additionalScale = scaleLinear({
+  const additionalScaleScale = scaleLinear({
     clamp: true,
     domain: [contentClientRect.height, 0],
     range: [0, 0.05]
   });
 
+  const additionalScale =
+    additionalScaleScale(contentClientRect.height - height) /
+    2 /
+    zoom.transformMatrix.scaleY;
+
+  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;
+  };
+
   return (
     <g className={classes.minimap} clipPath="url(#zoom-clip)">
       <rect
@@ -66,7 +94,7 @@ const Minimap = ({
       />
       <g
         style={{
-          transform: `scale(${scaleToUse - additionalScale(contentClientRect.height - height) / 2})`
+          transform: `scale(${scaleToUse - additionalScale}) translate(0px, ${getAdditionalPadding()}px)`
         }}
       >
         {children}
@@ -92,6 +120,8 @@ const Minimap = ({
         rx={radius}
         width={finalWidth}
         onMouseDown={dragStart}
+        onMouseEnter={dragStart}
+        onMouseLeave={dragEnd}
         onMouseMove={move}
         onMouseUp={dragEnd}
         onWheel={zoomInOut}

package/src/components/Zoom/Zoom.cypress.spec.tsx

@@ -7,7 +7,7 @@ const content = (
 );
 
 const contentWithMultipleShapes = (
-  <g style={{ transform: 'translate(0px, -200px)' }}>
+  <g style={{ transform: 'translate(0px, -300px)' }}>
     <g style={{ transform: 'translate(300px, 150px)' }}>
       <circle fill="blue" r={50} stroke="black" />
     </g>
@@ -203,7 +203,11 @@ describe('Zoom', () => {
     cy.findByTestId('minimap-interaction')
       .parent()
       .find('g')
-      .should('have.attr', 'style', 'transform: scale(0.684211);');
+      .should(
+        'have.attr',
+        'style',
+        'transform: scale(0.684211) translate(0px, 57px);'
+      );
 
     cy.makeSnapshot();
   });

package/src/components/Zoom/ZoomContent.tsx

@@ -73,6 +73,8 @@ const ZoomContent = ({
         height={height}
         width={width}
         onMouseDown={dragStart(zoom)}
+        onMouseEnter={dragStart(zoom)}
+        onMouseLeave={dragEnd}
         onMouseMove={move(zoom)}
         onMouseUp={dragEnd}
         onWheel={zoom.handleWheel}

package/src/components/Zoom/useMinimap.ts

@@ -37,15 +37,21 @@ export const useMinimap = ({
   const [startTranslate, setStartTranslate] = useState<Translate | null>(null);
 
   const getMatrixPoint = useCallback(
-    (event): { x: number; y: number } => {
+    (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 * zoom.transformMatrix.scaleX - width / 2);
-      const dy = -(point.y * zoom.transformMatrix.scaleY - height / 2);
+      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,
@@ -72,7 +78,7 @@ export const useMinimap = ({
 
   const dragStart = (e): void => {
     if (
-      (!equals(e.buttons, 0) && !equals(e.nativeEvent.which, 1)) ||
+      (!isNil(e.nativeEvent.which) && !equals(e.nativeEvent.which, 1)) ||
       isDraggingFromContainer
     ) {
       return;
@@ -109,21 +115,35 @@ export const useMinimap = ({
   const zoomInOut = useCallback(
     (e): void => {
       const isZoomIn = gt(0, e.deltaY);
-      const { x, y } = getMatrixPoint(e);
+
+      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: isZoomIn
-          ? zoom.transformMatrix.scaleX + 0.1
-          : zoom.transformMatrix.scaleX - 0.1,
-        scaleY: isZoomIn
-          ? zoom.transformMatrix.scaleY + 0.1
-          : zoom.transformMatrix.scaleY - 0.1,
-        translateX: x,
-        translateY: y
+        scaleX: newScaleX,
+        scaleY: newScaleY,
+        translateX: zoom.transformMatrix.translateX + diffX / 4,
+        translateY: zoom.transformMatrix.translateY + diffY / 4
       });
     },
-    [zoom.transformMatrix]
+    [
+      zoom.transformMatrix,
+      width,
+      height,
+      isDraggingFromContainer,
+      scale,
+      startPoint
+    ]
   );
 
   return {