Merge pull request #800 from Lemoncode/dev

font siza

Author: brauliodiez

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

@@ -10,6 +10,7 @@ import {
   splitCSVContentIntoRows,
 } from '@/common/utils/active-element-selector.utils';
 import { useGroupShapeProps } from '../../mock-components.utils';
+import { useResizeOnFontSizeChange } from '../../front-text-components/front-text-hooks/resize-fontsize-change.hook';
 
 const horizontalMenuShapeSizeRestrictions: ShapeSizeRestrictions = {
   minWidth: 200,
@@ -41,7 +42,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 verticalPadding = 8;
   const numberOfItems = itemLabels.length;
   const itemSpacing = 10;
 
@@ -54,10 +55,15 @@ export const HorizontalMenu = forwardRef<any, ShapeProps>((props, ref) => {
   const totalMargins = restrictedWidth - itemSpacing * (numberOfItems + 1);
   const itemWidth = totalMargins / 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;
 
@@ -69,7 +75,7 @@ export const HorizontalMenu = forwardRef<any, ShapeProps>((props, ref) => {
     shapeType,
     ref
   );
-
+  useResizeOnFontSizeChange(id, { x, y }, text, fontSize, fontVariant);
   return (
     <Group {...commonGroupProps} {...shapeProps}>
       <Rect
@@ -90,20 +96,21 @@ export const HorizontalMenu = forwardRef<any, ShapeProps>((props, ref) => {
             x={itemSpacing * (index + 1) + itemWidth * index}
             y={itemVerticalPadding}
             width={itemWidth}
-            height={restrictedHeight - 2 * itemVerticalPadding}
+            height={restrictedHeight - verticalPadding}
             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/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 'datepickerinput':
     case 'timepickerinput':