@centreon/ui 24.4.1-MON-34377-implement-tree-chart-on-centreon-ui.8 → 24.4.1-MON-34377-implement-tree-chart-on-centreon-ui.10

package/package.json

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

package/src/Graph/Tree/Links.tsx

@@ -33,25 +33,25 @@ const Links = <TData extends BaseProp>({
         fill="none"
         key={key}
         stroke={
-          treeLink.getStroke?.({
+          treeLink?.getStroke?.({
             source: link.source.data.data,
             target: link.target.data.data
           }) || theme.palette.text.primary
         }
         strokeDasharray={
-          treeLink.getStrokeDasharray?.({
+          treeLink?.getStrokeDasharray?.({
             source: link.source.data.data,
             target: link.target.data.data
           }) || '0'
         }
         strokeOpacity={
-          treeLink.getStrokeOpacity?.({
+          treeLink?.getStrokeOpacity?.({
             source: link.source.data.data,
             target: link.target.data.data
           }) || 1
         }
         strokeWidth={
-          treeLink.getStrokeWidth?.({
+          treeLink?.getStrokeWidth?.({
             source: link.source.data.data,
             target: link.target.data.data
           }) || '2'

package/src/Graph/Tree/Tree.cypress.spec.tsx

@@ -0,0 +1,171 @@
+import { equals } from 'ramda';
+
+import {
+  ComplexData,
+  complexData,
+  SimpleData,
+  simpleData
+} from './stories/datas';
+import { ComplexContent, SimpleContent } from './stories/contents';
+
+import { Node, StandaloneTree, TreeProps } from '.';
+
+const validateTree = (tree): void => {
+  if (!tree.children) {
+    cy.contains(tree.data.name).should('be.visible');
+
+    return;
+  }
+
+  cy.contains(tree.data.name).should('be.visible');
+  tree.children.forEach((child) => {
+    validateTree(child);
+  });
+};
+
+interface InitializeProps
+  extends Pick<TreeProps<SimpleData | ComplexData>, 'treeLink' | 'children'> {
+  data?: Node<SimpleData | ComplexData>;
+  isDefaultExpanded?: (data: SimpleData | ComplexData) => boolean;
+}
+
+const initializeStandaloneTree = ({
+  data = simpleData,
+  isDefaultExpanded = undefined,
+  treeLink,
+  children = SimpleContent
+}: InitializeProps): void => {
+  cy.mount({
+    Component: (
+      <div style={{ height: '99vh' }}>
+        <StandaloneTree
+          node={{ height: 70, isDefaultExpanded, width: 70 }}
+          tree={data}
+          treeLink={treeLink}
+        >
+          {children}
+        </StandaloneTree>
+      </div>
+    )
+  });
+};
+
+describe('Simple data tree', () => {
+  it('displays the whole tree', () => {
+    initializeStandaloneTree({});
+
+    validateTree(simpleData);
+
+    cy.makeSnapshot();
+  });
+
+  it("collapses a node's childrens when a node is clicked", () => {
+    initializeStandaloneTree({});
+
+    cy.contains(/^E$/).should('be.visible');
+    cy.contains(/^E1$/).should('be.visible');
+
+    cy.contains(/^C$/).click();
+
+    cy.contains(/^E$/).should('not.exist');
+    cy.contains(/^E1$/).should('not.exist');
+
+    cy.makeSnapshot();
+  });
+
+  it("expands a node's childrens when a node is clicked", () => {
+    initializeStandaloneTree({});
+
+    cy.contains(/^A$/).click();
+
+    cy.contains(/^A1$/).should('not.exist');
+    cy.contains(/^A2$/).should('not.exist');
+    cy.contains(/^A3$/).should('not.exist');
+    cy.contains(/^C$/).should('not.exist');
+
+    cy.contains(/^A$/).click();
+
+    cy.contains(/^A1$/).should('be.visible');
+    cy.contains(/^A2$/).should('be.visible');
+    cy.contains(/^A3$/).should('be.visible');
+    cy.contains(/^C$/).should('be.visible');
+
+    cy.makeSnapshot();
+  });
+
+  it('cannot collapses a node when a leaf is clicked', () => {
+    initializeStandaloneTree({});
+
+    cy.contains(/^Z$/).click();
+
+    cy.contains(/^Z$/).should('be.visible');
+
+    cy.makeSnapshot();
+  });
+
+  it('expands nodes by default when a prop is set', () => {
+    initializeStandaloneTree({
+      isDefaultExpanded: (data: SimpleData) => equals('critical', data.status)
+    });
+
+    cy.contains(/^T$/).should('be.visible');
+    cy.contains(/^A$/).should('be.visible');
+    cy.contains(/^A3$/).should('be.visible');
+    cy.contains(/^C$/).should('be.visible');
+    cy.contains(/^E$/).should('be.visible');
+    cy.contains(/^E1$/).should('be.visible');
+
+    cy.contains(/^B1$/).should('not.exist');
+    cy.contains(/^D1$/).should('not.exist');
+
+    cy.makeSnapshot();
+  });
+
+  it('displays customized links when a prop is set', () => {
+    initializeStandaloneTree({
+      treeLink: {
+        getStroke: ({ target }) => (target.status === 'ok' ? 'grey' : 'black'),
+        getStrokeDasharray: ({ target }) =>
+          target.status === 'ok' ? '5,5' : '0',
+        getStrokeOpacity: ({ target }) => (target.status === 'ok' ? 0.8 : 1),
+        getStrokeWidth: ({ target }) => (target.status === 'ok' ? 1 : 2)
+      }
+    });
+
+    cy.contains(/^Z$/).should('be.visible');
+
+    cy.makeSnapshot();
+  });
+});
+
+describe('Complex data tree', () => {
+  it('cannot collapse a node when a node is not clickable', () => {
+    initializeStandaloneTree({
+      children: ComplexContent,
+      data: complexData
+    });
+
+    cy.contains('BA 3').should('be.visible');
+
+    cy.contains('BA 2').click();
+
+    cy.contains('BA 3').should('be.visible');
+
+    cy.makeSnapshot();
+  });
+
+  it('collapses a node when a node is clickable', () => {
+    initializeStandaloneTree({
+      children: ComplexContent,
+      data: complexData
+    });
+
+    cy.contains('BA 3').should('be.visible');
+
+    cy.contains('2').click();
+
+    cy.contains('BA 3').should('not.exist');
+
+    cy.makeSnapshot();
+  });
+});

package/src/Graph/Tree/Tree.tsx

@@ -54,7 +54,7 @@ export const Tree = <TData extends BaseProp>({
 
   const expandCollapseNode = useCallback(
     (targetNode: Node<TData>): void => {
-      changeTree(
+      changeTree?.(
         toggleTreeNodesExpanded({ currentTree: formattedTree, targetNode })
       );
     },
@@ -76,12 +76,15 @@ export const Tree = <TData extends BaseProp>({
   );
 
   const origin = useMemo(
-    () => ({ x: 0, y: containerHeight / 2 }),
+    () => ({
+      x: 0,
+      y: containerHeight / 2
+    }),
     [containerHeight]
   );
 
   return (
-    <Group left={node.width / 2}>
+    <Group left={node.width}>
       <VisxTree
         left={0}
         nodeSize={[node.width + nodeMargins.y, node.height + nodeMargins.x]}

package/src/Graph/Tree/models.ts

@@ -29,17 +29,19 @@ export interface ChildrenProps<TData> {
 }
 
 export interface TreeProps<TData> {
-  changeTree: (newTree: Node<TData>) => void;
+  changeTree?: (newTree: Node<TData>) => void;
   children: (props: ChildrenProps<TData>) => JSX.Element;
   containerHeight: number;
   containerWidth: number;
+  contentHeight?: number;
+  contentWidth?: number;
   node: {
     height: number;
     isDefaultExpanded?: (data: TData) => boolean;
     width: number;
   };
   tree: Node<TData>;
-  treeLink: {
+  treeLink?: {
     getStroke?: (props: LinkProps<TData>) => string | undefined;
     getStrokeDasharray?: (
       props: LinkProps<TData>

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

@@ -168,7 +168,7 @@ export const complexData: Node<ComplexData> = {
               }
             }
           ],
-          data: { id: 0, name: 'BA 3', status: 'ok' }
+          data: { id: 0, name: 'BA 4', status: 'ok' }
         }
       ],
       data: { count: 2, id: 0, name: 'ok', status: 'ok' }
@@ -294,7 +294,7 @@ export const moreComplexData: Node<ComplexData> = {
         { 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' }
+      data: { count: 9, id: 0, name: 'ok', status: 'ok' }
     }
   ],
   data: {

package/src/components/Zoom/Minimap.tsx

@@ -12,6 +12,10 @@ interface Props extends Omit<UseMinimapProps, 'minimapScale' | 'scale'> {
     height: number;
     width: number;
   };
+  diffBetweenContentAndSvg: {
+    left: number;
+    top: number;
+  };
   isDraggingFromContainer: boolean;
 }
 
@@ -21,7 +25,8 @@ const Minimap = ({
   height,
   width,
   contentClientRect,
-  isDraggingFromContainer
+  isDraggingFromContainer,
+  diffBetweenContentAndSvg
 }: Props): JSX.Element => {
   const { classes } = useZoomStyles();
 
@@ -61,28 +66,20 @@ const Minimap = ({
     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 test = scaleLinear({
-        clamp: true,
-        domain: [0.005, 0.002],
-        range: [1, 5]
-      });
-
-      return padding - padding / test(additionalScale);
-    }
-
-    return padding;
-  };
+  const translateX = useMemo(
+    () =>
+      -diffBetweenContentAndSvg.left /
+      zoom.transformMatrix.scaleX /
+      minimapScale,
+    [diffBetweenContentAndSvg.left]
+  );
+  const translateY = useMemo(
+    () =>
+      -diffBetweenContentAndSvg.top /
+      zoom.transformMatrix.scaleX /
+      minimapScale,
+    [diffBetweenContentAndSvg.top]
+  );
 
   return (
     <g className={classes.minimap} clipPath="url(#zoom-clip)">
@@ -93,16 +90,13 @@ const Minimap = ({
         width={finalWidth}
       />
       <g
+        className={classes.movingZone}
         style={{
-          transform: `scale(${scaleToUse - additionalScale}) translate(0px, ${getAdditionalPadding()}px)`
+          transform: `scale(${scaleToUse - additionalScale}) translate(${translateX}px, ${translateY}px)`
         }}
       >
         {children}
-        <g
-          style={{
-            transform: `translate(0px, ${contentClientRect.height / 10}px)`
-          }}
-        >
+        <g>
           <rect
             className={classes.minimapZoom}
             fillOpacity={0.2}

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

@@ -1,41 +1,58 @@
 import Zoom from './Zoom';
 
-const content = (
+const Content = (): JSX.Element => (
   <g style={{ transform: 'translate(300px, 150px)' }}>
     <circle fill="blue" r={50} stroke="black" />
   </g>
 );
 
-const contentWithMultipleShapes = (
-  <g style={{ transform: 'translate(0px, -300px)' }}>
-    <g style={{ transform: 'translate(300px, 150px)' }}>
-      <circle fill="blue" r={50} stroke="black" />
+const ContentWithMultipleShapes = (): JSX.Element => {
+  return (
+    <g>
+      <g style={{ transform: 'translate(300px, 150px)' }}>
+        <circle fill="blue" r={50} stroke="black" />
+      </g>
+      <g style={{ transform: 'translate(600px, 500px)' }}>
+        <circle fill="green" r={70} />
+      </g>
+      <g style={{ transform: 'translate(150px, 600px)' }}>
+        <circle fill="red" r={70} />
+      </g>
     </g>
-    <g style={{ transform: 'translate(600px, 500px)' }}>
-      <circle fill="green" r={70} />
-    </g>
-    <g style={{ transform: 'translate(150px, 600px)' }}>
-      <circle fill="red" r={70} />
+  );
+};
+const ContentWithMultipleShapesWithNegativeTranslations = (): JSX.Element => {
+  return (
+    <g>
+      <g style={{ transform: 'translate(-300px, -150px)' }}>
+        <circle fill="blue" r={50} stroke="black" />
+      </g>
+      <g style={{ transform: 'translate(600px, 500px)' }}>
+        <circle fill="green" r={70} />
+      </g>
+      <g style={{ transform: 'translate(150px, 600px)' }}>
+        <circle fill="red" r={70} />
+      </g>
     </g>
-  </g>
-);
+  );
+};
 
 interface Props {
   minimapPosition?;
   showMinimap: boolean;
-  useMultipleShapes?: boolean;
+  tenplate?: () => JSX.Element;
 }
 
 const initialize = ({
   showMinimap,
   minimapPosition,
-  useMultipleShapes
+  template = Content
 }: Props): void => {
   cy.mount({
     Component: (
       <div style={{ height: '400px', width: '100%' }}>
         <Zoom minimapPosition={minimapPosition} showMinimap={showMinimap}>
-          {useMultipleShapes ? contentWithMultipleShapes : content}
+          {template}
         </Zoom>
       </div>
     )
@@ -195,7 +212,25 @@ describe('Zoom', () => {
   });
 
   it('applies a scale down on the minimap when the content is higher than the original height', () => {
-    initialize({ showMinimap: true, useMultipleShapes: true });
+    initialize({ showMinimap: true, template: ContentWithMultipleShapes });
+
+    cy.get('g[clip-path="url(#zoom-clip)"]').should('be.visible');
+    cy.get('svg').should('have.attr', 'height', '400');
+
+    cy.findByTestId('minimap-interaction')
+      .parent()
+      .find('g')
+      .should('have.attr', 'style')
+      .and('include', 'transform: scale(0.684211) translate(-85px, -105px);');
+
+    cy.makeSnapshot();
+  });
+
+  it('applies a scale down on the minimap when the content has negative translation values', () => {
+    initialize({
+      showMinimap: true,
+      template: ContentWithMultipleShapesWithNegativeTranslations
+    });
 
     cy.get('g[clip-path="url(#zoom-clip)"]').should('be.visible');
     cy.get('svg').should('have.attr', 'height', '400');
@@ -203,11 +238,8 @@ describe('Zoom', () => {
     cy.findByTestId('minimap-interaction')
       .parent()
       .find('g')
-      .should(
-        'have.attr',
-        'style',
-        'transform: scale(0.684211) translate(0px, 57px);'
-      );
+      .should('have.attr', 'style')
+      .and('include', 'transform: scale(0.448276) translate(345px, 195px);');
 
     cy.makeSnapshot();
   });

package/src/components/Zoom/Zoom.stories.tsx

@@ -24,19 +24,21 @@ const meta: Meta<typeof Zoom> = {
 export default meta;
 type Story = StoryObj<typeof Zoom>;
 
-const content = (
-  <g style={{ transform: 'translate(0px, -200px)' }}>
-    <g style={{ transform: 'translate(300px, 150px)' }}>
-      <circle fill="blue" r={50} stroke="black" />
+const Content = (): JSX.Element => {
+  return (
+    <g style={{ transform: 'translate(-150px, -100px)' }}>
+      <g style={{ transform: 'translate(300px, 150px)' }}>
+        <circle fill="blue" r={50} stroke="black" />
+      </g>
+      <g style={{ transform: 'translate(600px, 400px)' }}>
+        <circle fill="green" r={70} />
+      </g>
+      <g style={{ transform: `translate(2400px, 1400px)` }}>
+        <circle fill="red" r={70} />
+      </g>
     </g>
-    <g style={{ transform: 'translate(600px, 400px)' }}>
-      <circle fill="green" r={70} />
-    </g>
-    <g style={{ transform: 'translate(150px, 800px)' }}>
-      <circle fill="red" r={70} />
-    </g>
-  </g>
-);
+  );
+};
 
 const Template = ({ children, ...args }: ZoomProps): JSX.Element => (
   <div style={{ height: '400px', width: '100%' }}>
@@ -44,16 +46,44 @@ const Template = ({ children, ...args }: ZoomProps): JSX.Element => (
   </div>
 );
 
+const TemplateResponsive = ({
+  redCircleXPosition,
+  redCircleYPosition,
+  ...args
+}: ZoomProps): JSX.Element => (
+  <div style={{ height: '90vh', width: '100%' }}>
+    <Zoom {...args}>
+      {() => (
+        <g>
+          <g style={{ transform: 'translate(500px, 100px)' }}>
+            <circle fill="blue" r={50} stroke="black" />
+          </g>
+          <g style={{ transform: 'translate(600px, 400px)' }}>
+            <circle fill="green" r={70} />
+          </g>
+          <g
+            style={{
+              transform: `translate(${redCircleXPosition || 100}px, ${redCircleYPosition || 100}px)`
+            }}
+          >
+            <circle fill="red" r={70} />
+          </g>
+        </g>
+      )}
+    </Zoom>
+  </div>
+);
+
 export const WithoutMinimap: Story = {
   args: {
-    children: content
+    children: Content
   },
   render: Template
 };
 
 export const WithMinimap: Story = {
   args: {
-    children: content,
+    children: Content,
     showMinimap: true
   },
   render: Template
@@ -61,9 +91,25 @@ export const WithMinimap: Story = {
 
 export const WithMinimapPosition: Story = {
   args: {
-    children: content,
+    children: Content,
     minimapPosition: 'bottom-right',
     showMinimap: true
   },
   render: Template
 };
+
+export const Playground: Story = {
+  argTypes: {
+    redCircleXPosition: {
+      control: { max: 2600, min: 400, step: 10, type: 'range' }
+    },
+    redCircleYPosition: {
+      control: { max: 2600, min: 400, step: 10, type: 'range' }
+    }
+  },
+  args: {
+    children: Content,
+    showMinimap: true
+  },
+  render: TemplateResponsive
+};

package/src/components/Zoom/ZoomContent.tsx

@@ -1,8 +1,6 @@
 import { useEffect, useRef, useState } from 'react';
 
 import { RectClipPath } from '@visx/clip-path';
-import { equals, type } from 'ramda';
-import { Group } from '@visx/group';
 import { ProvidedZoom } from '@visx/zoom/lib/types';
 
 import ZoomInIcon from '@mui/icons-material/Add';
@@ -15,10 +13,10 @@ import { minimapScale, radius } from './constants';
 import { useZoom } from './useZoom';
 import { useZoomStyles } from './Zoom.styles';
 import Minimap from './Minimap';
-import { MinimapPosition, ZoomState } from './models';
+import { ChildrenProps, MinimapPosition, ZoomState } from './models';
 
 export interface Props {
-  children: JSX.Element | (({ width, height }) => JSX.Element);
+  children: ({ width, height, transformMatrix }: ChildrenProps) => JSX.Element;
   height: number;
   minimapPosition: MinimapPosition;
   showMinimap?: boolean;
@@ -36,16 +34,21 @@ const ZoomContent = ({
 }: 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: (contentRef.current as SVGGElement).getBoundingClientRect()
-        .height,
-      width: (contentRef.current as SVGGElement).getBoundingClientRect().width
+      height: contentBoundingClientRect.height,
+      width: contentBoundingClientRect.width
     });
   });
 
@@ -62,7 +65,15 @@ const ZoomContent = ({
 
   const { move, dragEnd, dragStart, isDragging } = useZoom();
 
-  const isChildrenObject = equals(type(children), 'Object');
+  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' }}>
@@ -90,7 +101,12 @@ const ZoomContent = ({
           ref={contentRef}
           transform={zoom.toString()}
         >
-          {isChildrenObject ? children : children({ height, width })}
+          {children({
+            contentClientRect,
+            height,
+            transformMatrix: zoom.transformMatrix,
+            width
+          })}
         </g>
       </svg>
       <div className={classes.actionsAndZoom} data-position={minimapPosition}>
@@ -99,18 +115,27 @@ const ZoomContent = ({
             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}
               isDraggingFromContainer={isDragging}
               width={width}
               zoom={zoom}
             >
-              <Group left={0} top={contentClientRect.height / 10}>
-                {isChildrenObject ? children : children({ height, width })}
-              </Group>
+              <g ref={minimapContentRef}>
+                {children({
+                  contentClientRect,
+                  height,
+                  transformMatrix: zoom.transformMatrix,
+                  width
+                })}
+              </g>
             </Minimap>
           </svg>
         )}

package/src/components/Zoom/models.ts

@@ -14,3 +14,12 @@ export type MinimapPosition =
   | '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/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;
+// };