Merge pull request #804 from Lemoncode/feature/#793-fix-horizontal-menu-add-font-size-property

Feature/#793 fix horizontal menu add font size property

Author: brauliodiez

src/common/components/mock-components/front-rich-components/horizontal-menu/horizontal-menu.tsx

@@ -10,10 +10,14 @@ import {
   splitCSVContentIntoRows,
 } from '@/common/utils/active-element-selector.utils';
 import { useGroupShapeProps } from '../../mock-components.utils';
+import {
+  MultipleItemsInfo,
+  useResizeOnFontSizeChange,
+} from '../../front-text-components/front-text-hooks/resize-fontsize-change.hook';
 
 const horizontalMenuShapeSizeRestrictions: ShapeSizeRestrictions = {
   minWidth: 200,
-  minHeight: 25,
+  minHeight: 50,
   maxWidth: -1,
   maxHeight: 100,
   defaultWidth: 500,
@@ -41,7 +45,7 @@ export const HorizontalMenu = forwardRef<any, ShapeProps>((props, ref) => {
   const csvData = splitCSVContentIntoRows(text);
   const headers = extractCSVHeaders(csvData[0]);
   const itemLabels = headers.map(header => header.text);
-
+  const totalVerticalPadding = 8;
   const numberOfItems = itemLabels.length;
   const itemSpacing = 10;
 
@@ -51,15 +55,21 @@ export const HorizontalMenu = forwardRef<any, ShapeProps>((props, ref) => {
     height
   );
   const { width: restrictedWidth, height: restrictedHeight } = restrictedSize;
-  const totalMargins = restrictedWidth - itemSpacing * (numberOfItems + 1);
-  const itemWidth = totalMargins / numberOfItems;
+  const totalHorizontalMargins =
+    restrictedWidth - itemSpacing * (numberOfItems + 1);
+  const itemWidth = totalHorizontalMargins / numberOfItems;
 
-  const { stroke, strokeStyle, fill, textColor, borderRadius } = useShapeProps(
-    otherProps,
-    BASIC_SHAPE
-  );
+  const {
+    stroke,
+    strokeStyle,
+    fill,
+    textColor,
+    borderRadius,
+    fontSize,
+    fontVariant,
+  } = useShapeProps(otherProps, BASIC_SHAPE);
 
-  const itemVerticalPadding = 4;
+  const singleVerticalPadding = totalVerticalPadding / 2;
 
   const activeSelected = otherProps?.activeElement ?? 0;
 
@@ -70,8 +80,24 @@ export const HorizontalMenu = forwardRef<any, ShapeProps>((props, ref) => {
     ref
   );
 
+  const multiplesItemsInfo: MultipleItemsInfo = {
+    numberOfItems: numberOfItems,
+    horizontalSpacing: itemSpacing,
+  };
+
+  useResizeOnFontSizeChange(
+    id,
+    { x, y },
+    text,
+    fontSize,
+    fontVariant,
+    false,
+    multiplesItemsInfo
+  );
+
   return (
     <Group {...commonGroupProps} {...shapeProps}>
+      {/* Main Rectangle*/}
       <Rect
         x={0}
         y={0}
@@ -86,24 +112,26 @@ export const HorizontalMenu = forwardRef<any, ShapeProps>((props, ref) => {
 
       {itemLabels.map((header, index) => (
         <Group key={index}>
+          {/* Blue selected rectangle */}
           <Rect
             x={itemSpacing * (index + 1) + itemWidth * index}
-            y={itemVerticalPadding}
+            y={singleVerticalPadding}
             width={itemWidth}
-            height={restrictedHeight - 2 * itemVerticalPadding}
+            height={restrictedHeight - totalVerticalPadding}
             fill={index === activeSelected ? 'lightblue' : fill}
           />
           <Text
             x={itemSpacing * (index + 1) + itemWidth * index}
-            y={restrictedHeight / 2 - 8}
+            y={restrictedHeight / 2 - fontSize / 2}
             text={header}
             fontFamily="Arial"
-            fontSize={16}
+            fontSize={fontSize}
             fill={textColor}
             width={itemWidth}
             align="center"
             wrap="none"
             ellipsis={true}
+            fontVariant={fontVariant}
           />
         </Group>
       ))}

src/common/components/mock-components/front-text-components/front-text-hooks/resize-fontsize-change.hook.ts

@@ -2,13 +2,19 @@ import { calcTextDimensions } from '@/common/utils/calc-text-dimensions';
 import { useCanvasContext } from '@/core/providers';
 import { useEffect, useRef } from 'react';
 
+export interface MultipleItemsInfo {
+  numberOfItems: number;
+  horizontalSpacing: number;
+}
+
 export const useResizeOnFontSizeChange = (
   id: string,
   coords: { x: number; y: number },
   text: string,
   fontSize: number,
   fontVariant: string,
-  multiline: boolean = false
+  multiline: boolean = false,
+  multipleItemsInfo?: MultipleItemsInfo // Just in case we have a list of items (horizontally), e.g horizontal menu
 ) => {
   const previousFontSize = useRef(fontSize);
   const { updateShapeSizeAndPosition, stageRef } = useCanvasContext();
@@ -21,12 +27,22 @@ export const useResizeOnFontSizeChange = (
       const paragraphLines = _extractParagraphLines(text);
       const longestLine = _findLongestString(paragraphLines);
 
-      const { width, height } = calcTextDimensions(
-        multiline ? longestLine : text,
-        fontSize,
-        fontVariant,
-        konvaLayer
-      );
+      const { width: longestLineWidth, height: longestLineHeight } =
+        calcTextDimensions(
+          multiline ? longestLine : text,
+          fontSize,
+          fontVariant,
+          konvaLayer
+        );
+
+      // We add to the longest line width the spacing between items if multiple items
+      const width =
+        longestLineWidth +
+        (multipleItemsInfo
+          ? multipleItemsInfo.horizontalSpacing *
+            multipleItemsInfo.numberOfItems
+          : 0);
+      const height = longestLineHeight;
 
       updateShapeSizeAndPosition(
         id,

src/pods/canvas/model/shape-other-props.utils.ts

@@ -48,6 +48,8 @@ export const generateDefaultOtherProps = (
         strokeStyle: [],
         borderRadius: `${BASIC_SHAPE.DEFAULT_CORNER_RADIUS}`,
         activeElement: 0,
+        fontSize: FONT_SIZE_VALUES.NORMALTEXT,
+        fontVariant: `${INPUT_SHAPE.DEFAULT_FONT_VARIANT}`,
       };
     case 'input-stepper':
       return {